10‏/03‏/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;http://2.bp.blogspot.com/-60aISBQLRY0/VFBMqzLfzGI/AAAAAAAABgM/GInmVTvEzkc/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='http://4.bp.blogspot.com/-44trijSlV2Y/UgU0J6RU87I/AAAAAAAAASU/Nppm2hzUboU/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 بالإسم الذي أنشأته
قم بحفظ النموذج ومبروك عليك الإضافة، نراكم في تدوينة آخرى ان شاء الله
اضافة معلومات عن الموضوع. سنتطرق اليوم لهذه الاضافة الجميلة التي تجمع بين كل الأساسيات ستغنيك عن الميتا العادية (الكاتب، التسميات، التعليقات) طورناها بشكل منسق وشكل مميز/بسيط حيث ستوفر للقارئ رؤية شاملة عن الموضوع بعد انهائه من قرائة الموضوع كما ان الاضافة داعمة لمحركات البحث وتظهر خمس نجوم أسفل عنوان الموضوع في نتائج البحث بجوجل
سنتعرف اولا على مميزات الاضافة من ثم نذهب للشرح
المميزات
  • صورة الموضوع والعنوان
  • ازرار التقييم على شكل ابتسامات
  • كاتب الموضوع
  • التسميات
  • تاريخ نشر الموضوع
  • عدد التعليقات
  • سكربت عدد الزيارات
  • زر طبع الموضوع
  • زر الإبلاغ عن خطأ
  • داعمة لمحركات البحث
  • خط احترافي
  • أيقونات 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;http://2.bp.blogspot.com/-60aISBQLRY0/VFBMqzLfzGI/AAAAAAAABgM/GInmVTvEzkc/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='http://4.bp.blogspot.com/-44trijSlV2Y/UgU0J6RU87I/AAAAAAAAASU/Nppm2hzUboU/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 بالإسم الذي أنشأته
قم بحفظ النموذج ومبروك عليك الإضافة، نراكم في تدوينة آخرى ان شاء الله
33 Blogger تعليقات
Disqus
33 التعليقات
المشرف
avatar

شكرا أخى على هذه التدوينة الجميلة

المشرف
avatar

ماشاء الله، إضافة جميلة ومساعدة حتمًا، تُظهر أغلبية المعلومات حول الموضوع (التدوينة) باركك الله حسام كن، لدي فقط استفسار بشأن قالب المعاينة ذاك :3 مضت مدة طويلة وأنا أبحث عن قالب مثل ذلك فهل بالإمكان تطويره وعرضه لنا بالمدونة لو كان عندك وقت قريبًا؟ :/

المشرف
avatar

اخي حسام فعلا اشكرك جداً من القلب لكن الذي حصل معي ان تاريخ التدوينة لا يظهر في هذه الاضافة و حتى التاريخ الموجود من القالب نفسه انا طبعا استخدم قالب تواصل .. المشكلة ظهرت اليوم الصبح بعد ان كان كل شيء تمام و لا يوجد اي مشكلة و انا لم العب في اي شيء بالقالب لوحده التاريخ لم يعد يظهر لا في الاضافة هذه ولا التاريخ الموجود في القالب نفسه.

هذه صورة التاريخ الذي في الاضافة http://up-king.com/almaciat/n9c1p9caf73ptkt1277f.png

هذه الصورة التاريخ الذي في القالب نفسه الذي يكون اسفل العنوان
http://up-king.com/almaciat/kybxa6xlcrbvpzlmvl01.jpg

المشرف
avatar

مشكووور اخي
بلنسبه للكود 3
لقد وجدته 4 مرات ؟
هل اضيف الجود 3 4 مرات؟

المشرف
avatar

العفو اخواني
@ مدرسة الاندرويد للمعلوميات
@ العا لمى
@ Leo San :هو قالب اجنبي بسيط لكن بما أن أكواد كثيرة حذفتها سأحاول ايجاده وتعريبه من جديد مطور
@ Naruto Rikudou‬‏ : قم بتجربته على الثلاثة كل واحد على حدة أي ضع الكود في الثاني وقم بالحفظ ثم قم بالمعاينة وهكذا حتى تظهر في احدهم بالتوفيق

المشرف
avatar

هناك حل واحد افكر به حاليا ربما انها مخفية اذهب الى التخطيط وحرر اداة رسائل المدونة الالكترونية ثم علم على : التعليقات، التاريخ، الساعة والتسميات وقم بالحفظ

المشرف
avatar

كل كل الشكر اخي حسام .. انا توقعت لكن لم اتوقع ان تكون الخاصة بالساعة انا اظن انه فقط التاريخ . اشكرك صديقي

المشرف
avatar

أسـتـمـر :)

المشرف
avatar

ولا ظهرت حاجه عندى انا بستخدم قالب سيو الواان .. النسخه الاولى

المشرف
avatar

الكود اشتغل اخى شكرا انا كنت ضايفه فى مكان غلط .شكرا لك

المشرف
avatar

اخي شكرا على الاظافة لكن عندي مشكل في عداد المشاهدات لا يظهر مع اني طبقت جميغ التعليمات

المشرف
avatar

اخي حسام شكراً على الاضافة الجميلة لكن واجهتني مشكله وهي عدد المشاهداد غير مضبوطة بتظهر 1 و واجهندي مشكله في زر
LikeBtn يظهر لي الموقع كتابة (
LikeBtn.com)

المشرف
avatar

رائع اخي (y)

المشرف
avatar

نعم تبدأ بـ 1 مشاهدة لأن منصة بلوجر لا تتوفر على سكربت لعدد المشاهدات
بالنسبة للـLikeBtn فالكود متكرر لديك الذي بجانب العنوان على شكل يد بإبهام هل تعرف كيف تحذف كوده؟

المشرف
avatar

صحيح اني استخدم قالب بلو ثيم وكان هذا الاحتمال وارد عندي اقصد تكرر الكود المهم هل بالامكان شرح طريقة حذف الكود الذي بجانب العنوان إضافة الى طريقة حذف صورة الموضوع لأني اريدها مثل الاضافة المستخدمة في موقع...

المشرف
avatar

حسنا ابحث عن هذا الكود thmb6 ثم احذف كامل الكود كالمحدد في الصورة :
http://a.top4top.net/p_78kk8y1.png

المشرف
avatar

ارسلت تعليق في هذة التدوينة من 3 ايام ولم تنشره بعد
رجاء الاهتمام

المشرف
avatar

لابد أنه حذف ذكرني بما تريد لو سمحت

المشرف
avatar

جرب استعمال الإسم FIVEFOUR في الإستضافة

المشرف
avatar

للاسف لا يوجد اهتمام ولا تقدير لمتابعينك

المشرف
avatar

اضافتك رائعة مستر حسام ولكن وجدت ان هناك بعض التعديلات التي يلزم علي اجرائها حتي تتناسق مع مدونتي وتعطيني الشكل المرغوب فية
1- حذف الخاصية padding من .post ul li span
padding:5px 8px;
2-اضافة خاصية float الي كل من
.post ul li span و b.fa.fa-user
وشكرا لك علي مساهماتك :)

المشرف
avatar

فقط قم بالتعديل على طول الصورة والباقي سيأخذ مكانه ههذا هو المعرف الذي ستبحث عنه : .post-img img
ستجد : height: 190px; ضع 210px مثلا

المشرف
avatar

لو سمحت عندى عدد المشاهدات مختلف يعنى فى بلوجر بيقولى عدد المشاهدات مثلا 100 جوا الموضوع يبقى كاتب 3
وعندى بردو بكون ناشر الموضوع الساعة مثلا 10 بيبقى فى الموضوع مكتوب وقت تانى مختلف

المشرف
avatar

سكريبت المشاهدات لا يحتسب عدد الزيارات التي في البلوجر لأن ليس له دخل به لذلك يبدأ من 0
لتعديل التاريخ اذهب الى إعدادات › اللغة والتنسيق من ثم اختر في "التنسيق" هذا الطابع : مارس29, 2016

المشرف
avatar

شكرا يا حسام

المشرف
avatar

اخي حساب ما عرفت اعمل تطبيق للاستضافه ممكن شرح مفصل لانه اخي لا يأتي لدي عدد المشاهده ولا يأتي القسم اللذي نشر فيه التدوينه :/

المشرف
avatar

السلام عليكم....
الايقونات تظهر عندي من اليسار ومفترض ان تظهر من اليمين http://i.imgur.com/R2YjbyA.png

المشرف
avatar
المشرف
avatar

اريد اضافه فقط ازرار التقييم على شكل ابتسامات كيف ؟؟؟؟؟؟؟

المشرف
avatar

أخي حسام ممكن تنشرلنا واحدة جديدة من هذه أرجوك

المشرف
avatar

شكرا لكم .. موقع متميز بجميع مواضيعه :)

المشرف
avatar

أخي شكراا لاضافة تعمل جيدا

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة