كيفية إضافة أزرار المشاركات الاجتماعية تحت كل مشاركة من مشاركات بلوجر

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

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

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

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

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

4 - أضف الكود التالي تحته " وهو كود خط الوسوم " إذا متوافر في مدونتك فلا داعي له :

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

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

 /* CSS Share Button by www.homeblog7.blogspot.com*/
.hbshare{overflow:hidden;text-align:center;margin-bottom:20px;margin-top:20px;padding:10px 0;}
.hbshare li{float:left;margin:0 1%;width:18%;padding:0;list-style:none;position:relative;box-shadow:0 0 0 -1px #e3e3e3;}
.hbshare li:hover{box-shadow:4px 4px 0 -1px #e3e3e3;}
.hbshare li a{padding:5px 0 6px 35px;color:#fff;display:block;border-radius:2px;}
.hbshare li a:hover{background:#555555;color:#fff;}
.hbshare li .twitter{background-color:#85c5f5;}
.hbshare li .facebook{background-color:#6381c0;}
.hbshare li .gplus{background-color:#ed6d5d;}
.hbshare li .pinterest{background-color:#e44d52;}
.hbshare li .linkedin{background-color:#2c9ad8;}
.hbshare li .twitter:hover,.bsshare li .facebook:hover,.bsshare li .gplus:hover,
.hbshare li .pinterest:hover,.bsshare li .linkedin:hover{color:#fff;}
.hbshare li:last-child{margin-right:0}
.hbshare li .fa:before{position:absolute;top:0;left:0;display:inline-block;padding:4px 15px;font-family:fontawesome;text-align:center;background:#444444;color:#FFFFFF;line-height:20px;}
.hbshare li .fa {display:initial;}

7- بعد ذلك أبحث عن السطر : بواسطة المفاتيح Ctrl+F

8- اضف الكود التالي تحته :

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <div class='hbshare'>
                <ul>
<li><a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Facebook Share'><i class='fa fa-facebook'/>Share</a></li>

                <li><a class='gplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Google Plus Share'><i class='fa fa-google-plus'/>Share</a></li>

                <li><a class='twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Twitter Tweet'><i class='fa fa-twitter'/>Tweet</a></li>

                <li><a class='linkedin' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' target='_blank'><i class='fa fa-linkedin'/>Share</a></li>

                <li><a class='pinterest' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;amp;description= + data:post.title&quot;' target='_blank'><i class='fa fa-pinterest'/>Share</a></li>

                </ul>
         </div>
<div style='clear:both'/>
</b:if>

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

- للمعانية المباشرة :