أيقونات المواقع الاجتماعية بشكل احترافي تحت كل تدوينة لمدونات بلوجر

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

في درسنا اليوم سوف نتعرف على طريقة تركيب ايقونات المواقع الاجتماعية تحت كل تدوينة لمدونات بلوجر، ومن مميزات هذه الاضافة تعمل على زيادة شهرة المدونة وسهولة مشاركة التدوينة عن طريق ضغطة زر .

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

1- اختر لوحة التحكم من مدونتك .

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

3- ابحث عن الوسم :

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

 /* CSS Share Button */
.share-post{text-align:center;margin-bottom:20px;margin-top:20px;padding: 10px 0 30px;}
.share-post ul {
  margin: 0 auto;
  width: 90%;
}
.share-post li{float:left;margin:0 1%;width:18%;padding:0;list-style:none;position:relative;  text-align: center;}
.share-post li:hover{}
.share-post li a{padding:6px 7px 6px 38px;color:#fff;display:block;border-radius:2px;opacity:0.9;font-size:13px;transition:all 0.6s ease-out;}
.share-post li a:hover{color:#fff;opacity:1;}
.share-post li .twitter{background-color:#19bfe5;}
.share-post li .facebook{background-color:#3b5998;}
.share-post li .gplus{background-color:#d44132;}
.share-post li .pinterest{background-color:#cb2027;}
.share-post li .linkedin{background-color:#3b5998;}
.share-post li .tumblr{background-color:#304e6c;}
.share-post li .twitter:hover,.share-post li .facebook:hover,.share-post li .gplus:hover,
.share-post li .pinterest:hover,.share-post li .tumblr:hover{color:#fff;}
.share-post li:last-child{margin-right:0}
.share-post li .fa:before{position:absolute;top:0;left:0;display:inline-block;padding:5.5px 12px;font-family:fontawesome;text-align:center;background:rgba(0,0,0,0.08);color:#fff;line-height:20px;text-shadow:2px 2px rgba(0,0,0,0.1);font-size:14px;transition:all 0.6s ease-out;}
.share-post li:hover .fa:before{text-shadow:-2px 2px rgba(0,0,0,0.1);}
.share-post li .fa {display:initial;}

5- بعد ذلك ابحث عن الوسم :

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

 <style type='text/css'>
.share-post li {
  float: left;
  margin: 1% 1%;
  width: 30%;}
.iconpretext{
padding-top: 8px;
margin: 0px;
}
</style>

7- أيضاً ابحث عن الوسم : هذا الوسم مكرر اكثر من مرة المقصود منه الثاني أو الثالث .

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

 <div style='clear: both;'/>
                      <b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='share-post'>
              <ul>
                <li><a class='twitter share-tooltip share-tooltip-top' data-share-tooltip='Share on Twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'><i class='fa fa-twitter'/>Twitter</a></li>
                <li><a class='facebook share-tooltip share-tooltip-top' data-share-tooltip='Share on Facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank'><i class='fa fa-facebook'/>Facebook</a></li>
                <li><a class='gplus share-tooltip share-tooltip-top' data-share-tooltip='Share on Google Plus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/>Google</a></li>
                <li><a class='tumblr share-tooltip share-tooltip-top' data-share-tooltip='Share on Tumblr' href='http://www.tumblr.com/share' rel='nofollow' target='_blank'><i class='fa fa-tumblr'/>Tumblr</a></li>
                <li><a class='pinterest share-tooltip share-tooltip-top' data-share-tooltip='Share on Pinterest' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;description=&quot; + data:post.title' target='_blank'><i class='fa fa-pinterest'/>Pinterest</a></li>
<li><a class='linkedin share-tooltip share-tooltip-top' data-share-tooltip='Share on linkedin' expr:href='&quot;https://www.linkedin.com/uas/login?url=&quot; + data:post.url' rel='nofollow' target='_blank'><i class='fa fa-linkedin'/>linkedin</a></li>
              </ul>
         </div>
<div style='clear:both'/>

</b:if>

انقر هنا للمعاينة