اضافة ازرار المشاركة اسفل التدوينة بشكل احترافي

ازرار المشاركة بالنسبة لمدونة بلوجر بمثابة اضافة رئيسية و هي تمكنك و تمكن الزوار بمشاركة التدوينة مع اصدقائهم.

نمر الان الى كيفية اضافة هذه الازرار اسفل التدوينة

   

   1- اولا خد نسخة احتياطية للقالب لتفادي اي مشكلة
   2-اذهب  إلى قالب ثم  تحرير HTML
   3- ابحث عن ]]></b:skin> ثم اضف الكود التالي فوقه مباشرة

/*----sharebuttons-----------*/
.sharepost li{width:19%;padding:0;list-style:none;}
.sharepost li a{opacity:0.8;padding:10px 0;color:#fff;display:block;border:double #fff;}
.sharepost{overflow:hidden;text-align:center;margin-bottom:20px;margin-top:20px;}
.sharepost li .twitter{background-color:#55acee;}
.sharepost li a:hover{opacity:1;color:#444;border:double #fff;text-decoration: none;}
.sharepost li .facebook{background-color:#3b5998;}
.sharepost li .twitter:hover,.sharepost li .facebook:hover,.sharepost li .gplus:hover,
.sharepost li .gplus{background-color:#dd4b39;}
.sharepost li .pinterest{background-color:#cc2127;}
.sharepost li .linkedin{background-color:#0976b4;}
.sharepost li .fa:before{margin-right:5px}
.sharepost li .pinterest:hover,.sharepost li .linkedin:hover{background-color:#444;color:#fff;}
.sharepost li{float:left;margin-right:1.2%}
.sharepost li:last-child{margin-right:0}
.sharepost li .fa{padding: 5px;float: left;margin: 0px 15px;border-right: 1px solid;}

  4- الان ابحث عن <data:post.body/> ستجده مكرر عدة مرات حوالي 3 مرات . اضف الكود الثالي اسفل كل واحد . ان لم ينجح الامل قم باضافته اسفل الكود ماقبل الاخير 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:post.id' itemprop='postId'/>
<div class='clear'/><div class='sharepost'>
<ul>
<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'/>شارك</a></li>
<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'/>شارك</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' title='LinkedIn Share'>
<i class='fa fa-linkedin'/>شارك</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'/>شارك</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' title='Pin It'>
<i class='fa fa-pinterest'/>شارك</a></li>
</ul></div>

  5- الان الخطوة الاخيرة . ابحث عن </head> و اضف الكود الثالي فوقه

<link href='http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/> 

• شارك
• شارك
• شارك
• شارك
• شارك