لأفضل تصفح للمدونة

الخميس، 10 مارس 2016

اضافة معلومات عن الموضوع. سنتطرق اليوم لهذه الاضافة الجميلة التي تجمع بين كل الأساسيات ستغنيك عن الميتا العادية (الكاتب، التسميات، التعليقات) طورناها بشكل منسق وشكل مميز/بسيط حيث ستوفر للقارئ رؤية شاملة عن الموضوع بعد انهائه من قرائة الموضوع كما ان الاضافة داعمة لمحركات البحث وتظهر خمس نجوم أسفل عنوان الموضوع في نتائج البحث بجوجل
سنتعرف اولا على مميزات الاضافة من ثم نذهب للشرح
المميزات
  • صورة الموضوع والعنوان
  • ازرار التقييم على شكل ابتسامات
  • كاتب الموضوع
  • التسميات
  • تاريخ نشر الموضوع
  • عدد التعليقات
  • سكربت عدد الزيارات
  • زر طبع الموضوع
  • زر الإبلاغ عن خطأ
  • داعمة لمحركات البحث
  • خط احترافي
  • أيقونات Font Awesome آخر تحديث

شرح طريقة التركيب
1. قم بتحرير القالب وابحث عن هذا الكود </head> بالاستعانة بـ Ctrl+F
2. ضع الكود التالي فوقه
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
      <style type='text/css'>
@font-face{font-family:&#39;Arabic&#39;;font-weight:400,700;font-style:normal;src:url(https://c.s-microsoft.com/static/fonts/segoe-ui/arabic/normal/latest.eot);src:url(https://c.s-microsoft.com/static/fonts/segoe-ui/arabic/normal/latest.eot?#iefix) format(&quot;embedded-opentype&quot;),url(https://c.s-microsoft.com/static/fonts/segoe-ui/arabic/normal/latest.woff) format(&quot;woff&quot;),url(https://c.s-microsoft.com/static/fonts/segoe-ui/arabic/normal/latest.ttf) format(&quot;truetype&quot;),url(https://c.s-microsoft.com/static/fonts/segoe-ui/arabic/normal/latest.svg#web) format(&quot;svg&quot;)}

.post-by-ar1web li:last-child { border-bottom: none; } .post_byfix { float: right; background: #FFFFFF; Color:#333333; width: 100%; overflow: hidden; clear: both; margin-bottom: 10px; } .post-img {display: block; float: right; padding: 4px!important; margin-right: 2px!important; margin-top: 5px!important; overflow: hidden; width: 34%;} .post-img img {position: relative;width: 220px; height: 190px;} .post-by-ar1web {overflow: auto; text-decoration: none; background: #fff; margin: 20px 0; border: 1px solid #D0CFCF; box-shadow: 0 -1px 0 #fff, 0 1px 1px rgba(0,0,0,0.10);} .post-by-ar1web ul { margin: 0; padding: 0; margin-top: 9px; } .post-by-ar1web li { list-style: none; padding: 5px 0; border-bottom: 1px dashed rgba(233, 234, 237, 0.9); overflow: auto;} b.fa.fa-user,b.fa.fa-tag,b.fa.fa-clock-o,b.fa.fa-comments-o,b.fa.fa-eye{ background: #E9EAED; padding: 4px 0; margin-right: 5px; color: #969DAE; width: 22px; text-align: center; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; text-shadow: 0px 1px #fff; }
a.onwan_ar1web { font-size: 18px!important; line-height: 30px; color: #2A2A2A!important; text-overflow: ellipsis; font-family: Droid Arabic Naskh,sans-serif; } #post-info-ar1web a,.ar1webviewers,#post-info-ar1web { color: #868585; font: normal normal 13px &#39;Arabic&#39;,verdana,tahoma; } .lb-style-custom .lb-like:hover:after,.lb-style-custom .lb-dislike:hover:after { content: &#39;موضوع رائع&#39;; color: #383637; padding-right: 10px; position: relative; font: normal normal 12px &#39;Arabic&#39;,verdana,tahoma; } 
.lb-style-custom .lb-dislike:hover:after { content: &#39;لا بأس به&#39;; } span.ar1webmochahda { margin-right: 3px; }i.fa.fa-circle-o { font-size: 6px; color: #EC2828; } 
.ar1webviewers .loading {display:inline-block;width:20px;height:20px;background:transparent url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtFMAvAD8miBlbEuEW-5BsRYooRGDp5tHCQ89hTrdOPHbSIFJWmp17UA8R8lSEBAJmeCKh3E1Qn51aSv97MLkLfAa2De7PlgyZyVUlBi7BX1sRd91ySWydA-F_fNeoCsPmoNIHLgV9b0Do/s1600/loader.gif&#39;) no-repeat 0 0;vertical-align:middle} span.ani_ar1web { position: absolute; right: 35px; margin: 6px auto; padding: 2px 8px; color: #F7F5F5; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); font-size: 11px; font-weight: 700; background-color: transparent; background-image: -moz-linear-gradient(#ED0509, #8E0002); background-image: -webkit-linear-gradient(#ED0509, #8E0002); background-image: linear-gradient(#ED0509, #8E0002); background-repeat: repeat-x; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); -webkit-border-bottom-right-radius: 3px; -webkit-border-bottom-left-radius: 3px; -moz-border-radius-bottomright: 3px; -moz-border-radius-bottomleft: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; z-index: 1;} .post-img img:hover { opacity: .85; } a.reportar1web { float: right; width: 100%; background: #EC595B; color: #fff!important; text-align: center; padding: 5px 0; margin: 10px 0; cursor: pointer; border: 1Px solid #EF4749; } a.reportar1web:hover { background: #444; color: #fff!important; border: 1Px solid #333; }#post-info-ar1web a:hover,a.onwan_ar1web { color: #0088b2!important; } .lb-style-custom .lb-like-icon, .lb-style-custom .lb-dislike-icon {font-size: 18px!important; } .lb-style-custom .lb-like, .lb-style-custom .lb-dislike { background-color: #FFFFFF!important; border: 1px solid #DEDEDE!important; overflow: hidden; } .likebtn-wrapper { margin-left: 20px; position: relative; float: right; margin-top: 10px; } .printfriendly{float:left;left:10px;background:transparent;color:#777;text-decoration:none;padding:3px 0 3px 5px;font-family:&#39;Open Sans&#39;;font-size:12px;font-weight:400;} span.print { position: absolute; margin: 165px 0; right: 28px; font-size: 18px; z-index: 999; color: #F3F3F3; background: rgba(0, 0, 0, 0.75); padding: 0 5px 0; line-height: 1.6; } span.print:hover:after { bottom: 0px; background: none repeat scroll 0% 0% #FFF; color: #383637; content: &#39;اطبع الموضوع&#39;; display: block; left: -100px; padding: 6px 14px; position: absolute; font: normal normal 12px Arabic,verdana,tahoma; }
</style>        
</b:if>
3. ابحث عن هذا الكود <data:post.body/> ستجده متكرر الثاني هو المقصود ثم ضع الكود الآتي إما فوقه أو أسفله بحيث إن وضعته فوقه ستظهر تحت العنوان أما إذا وضعته أسفله ستظهر اسفل نهاية الموضوع
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='post-info-ar1web'>
<div class='post-by-ar1web'>
<div class='post-img'>
<b:if cond='data:post.thumbnailUrl'>
<span class='ani_ar1web'>عن الموضوع</span>
<div class='clear'/>
<a class='printfriendly' href='http://www.printfriendly.com' onclick='window.print();return false;'><span class='print'> <i class='fa fa-print'/></span></a>
<img class='posts-ar1web' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' expr:title='data:post.title'/>
 <b:else/>
<img alt='no image' class='posts-ar1web' expr:title='data:post.title' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsAr_YC5jLumuimtjSxN82N12ShCrwCP5FTYw2g7X_RP2JOWA5By3FxiXF1nON-2zUs9mhwuwTpq2rKls_rhQYEajPPriUbKdjElrHEHOloS-8BDgHlqIjQDwXF7aovH2K6_99qpXtANs6/s1600/no_image.jpg'/>
</b:if>
<a class='reportar1web' href='#' rel='nofollow' target='_blank'><b class='fa fa-info-circle'/> إبلاغ عن خطأ</a>
</div>
<ul>
<li><b/> <a class='onwan_ar1web' expr:href='data:post.url'><data:post.title/></a>
<div class='clear'/>
<span class='likebtn-wrapper' data-bg_c='#e9eaed' data-brdr_c='#ffffff' data-btn_size='25' data-counter_d_c='#969dae' data-counter_l_c='#969dae' data-f_family='Tahoma' data-f_size='15' data-icon_d='sml3-u' data-icon_l='sml3-h' data-lang='ar' data-loader_show='true' data-show_like_label='false' data-theme='custom'/>
<script>(function(d,e,s){if(d.getElementById(&quot;likebtn_wjs&quot;))return;a=d.createElement(e);m=d.getElementsByTagName(e)[0];a.async=1;a.id=&quot;likebtn_wjs&quot;;a.src=s;m.parentNode.insertBefore(a, m)})(document,&quot;script&quot;,&quot;//w.likebtn.com/js/w/widget.js&quot;);</script>
</li>
<li><b class='fa fa-user'/> <span class='post-author vcard'> <b:if cond='data:post.authorProfileUrl'><span class='fn' itemscope='itemscope' itemtype='http://schema.org/Person'><meta expr:content='data:post.authorProfileUrl' itemprop='url'/><a expr:href='data:post.authorProfileUrl' rel='author' title='بروفيل الكاتب'><span><data:post.author/></span></a></span><b:else/><span class='fn' itemscope='itemscope' itemtype='http://schema.org/Person'><span><data:post.author/></span></span></b:if></span></li>
<li><b class='fa fa-tag'/> <span class='post-labels'>
<b:if cond='data:post.labels'>       
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'> ,
</b:if>
</b:loop>
</b:if>
</span></li>
<li>

<b:if cond='data:top.showTimestamp'>
				<b:if cond='data:post.url'>
				  <meta expr:content='data:post.canonicalUrl' itemprop='url'/>
				 <b class='fa fa-clock-o'/> <span class='time-info'>
				  <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published updated' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>
				  </span>
				</b:if>
				</b:if>

  </li>
<li>
<b:if cond='data:post.allowComments'>
	<b class='fa fa-comments-o'/>	<span class='comment-info'>
             <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'> <b:if cond='data:post.numComments == 0'> 0 اضف تعليق </b:if><b:if cond='data:post.numComments == 1'>تعليق واحد</b:if><b:if cond='data:post.numComments &gt; 1'><data:post.numComments/> تعليقات</b:if> 
			  </a>
			  </span>
            </b:if>
  </li>
<li>
  <div class='ar1webviewers' expr:id='&quot;obs-&quot; + data:post.id'> <b class='fa fa-eye'/> <span class='loading'/>&amp;nbsp;مشاهدة</div>
  </li>
</ul>
</div>
</div>
<div itemscope='' itemtype='http://data-vocabulary.org/Review'>
<div style='position:fixed;z-index:-500;opacity:0;top:0px;left:0px;'>
<div itemscope='' itemtype='http://data-vocabulary.org/Review-aggregate'>
تقييمات المشاركة : <span itemprop='itemreviewed'><data:post.title/></span>
<span itemprop='rating' itemscope='' itemtype='http://data-vocabulary.org/Rating'> <span itemprop='average'>9</span> على <span itemprop='best'>10</span> مرتكز على <span itemprop='votes'>10</span> تقييمات. <span itemprop='count'>9</span> تقييمات القراء.
</span>
</div>
</div>
<div class='clear'/>
</div>
</b:if>
4. ابحث عن هذا الكود </body> وضع الكود التالي فوقه
<b:if cond='data:blog.pageType != &quot;index&quot;'>
<script src='http://cdn.firebase.com/v0/firebase.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {$('.post-img img').attr('src', function(i, src) {return src.replace( 's72-c', 's400' );});});

$(function(){var a=$(".ar1webviewers");a.each(function(){var n=$(this).attr("id"),e=new Firebase("https://FIVEFOUR.firebaseio.com/"+n);e.once("value",function(n){var i=n.val();null==i?i=1:"/"!=window.location.pathname&&i++,e.set(i),a.children("span").removeClass("loading").html(i)})})});
//]]>
</script>
</b:if>
* سنحتاج في هذه الخطوة لإنشاء استضافة بيانات لعدد المشاهدات خاصة بك
1. ادخل على موقع Firebase إن لم يكن لديك حساب قم بإنشائه ثم سيوجهك للواجهة
2. أنشئ تطبيق جديد بأي إسم كان ثم اضغط CREATE NEW APP



3. غير اسم FIVEFOUR في الكود بالخطوة 4 بالإسم الذي أنشأته
قم بحفظ النموذج ومبروك عليك الإضافة، نراكم في تدوينة آخرى ان شاء الله
اضافة معلومات عن التدوينة اسفل الموضوع
Unknown

اضافة معلومات عن التدوينة اسفل الموضوع

في
واتساب
Unknown

الكاتب :

، ، ، مغربي الجنسية ، مهتم ومتابع لكل ما يتعلق بالتقنية، محب للتصميم والألعاب أيضاً، محب لكرة القدم و بالاخص ريال مدريد... ،لا تنسى متابعتي عبر المواقع الاجتماعية في الاعلىو شكرا للجميع...

0 تعليقات على " اضافة معلومات عن التدوينة اسفل الموضوع "

الاشتراك في: تعليقات الرسالة ( Atom )
جميع الحقوق محفوظة طريقة                                                                                                                           تطوير وتكويد     Mohamed Jiari | Ti9niFOUR