كيفية إضافة أداة التقييم لمشاركات بلوجر

السلام عليكم ورحمة الله وبركاته .

في درسنا اليوم سوف نتعرف على طريقة تركيب أداة التقييم لمشاركات بلوجر .

طريقة التركيب :

1- ادخل إلى مدونتك ، ثم اختر لوحة التحكم  .

2-من لوحة التحكم اختر -> قالب -> تحرير قالب HTML

3- الآن ابحث عن الوسم : بواسطة المفاتيح Ctrl+F

4- اضف الكود التالي فوقه.

 #post-rating {
font-weight: 700;
Color:#333333;
padding: 10px;
padding-bottom: 0;
background: #FFFFFF;
text-decoration:none;
}
#post-rating a:hover {
Color:#333333;
font-weight: 700;
text-decoration: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;
padding-left: 10px!important;
margin-top: 5px!important;
overflow: hidden;
}
.post-img img {
width: 100px;
height: 100px;
}
.post-by {
float:left;
color:#333333;
width: 100%;
font:normal 12px 'Trebuchet MS',Helvetica, sans-serif;
text-decoration:none;
}
.post-by ul {
margin: 0;
padding: 0;
margin-top: 9px;
}
.post-by li {
list-style: none;
padding: 3px 10px!important;
} 

5- الآن ابحث عن الوسم : بواسطة المفاتيح Ctrl+F

6- اضف الكود التالي تحته .

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- Widget by www.homeblog7.blogspot.com -->
<div id='post-rating'>
<div class='post-by'>
<div class='post-img'>
<b:if cond='data:post.thumbnailUrl'>
<img class='post-thumbnail radius tooltip' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' expr:title='data:post.title'/>
 <b:else/>
<img alt='no image' class='post-thumbnail radius tooltip' expr:title='data:post.title' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHIgPj1EDeXG6ocxeKbk8Zz0PErofoimr079Op7WIgKb5C9gReK71BELAGvxkaU5hQ7aFG-W7LlfFgjsMCeGWkSacol4UcVhasFPiiXDFm0mETMGWGJEcum4SdUKjCudaYZdihiEeBys86/s1600/no_image.jpg'/>
</b:if>
</div>
<ul>
<li><b>عنوان المشاركة :</b> <a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a></li>
<li><b>الكاتب :</b> <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='author profile'><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>الفئة:</b> <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;'> <i class='icon-angle-right'/>
</b:if>
</b:loop>
</b:if>
</span></li>
<li>
<div itemscope='' itemtype='http://data-vocabulary.org/Review-aggregate'>
<b>التصنيف :</b> <span itemprop='rating' itemscope='' itemtype='http://data-vocabulary.org/Rating'>
<span itemprop='average'>100%</span>
</span>
على أساس <span itemprop='votes'>10</span> تقدير.
<span itemprop='count'>5</span> تعليقات المستخدمين.
</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> 

7- احفظ القالب .