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

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

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

شكل الإضافة 

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

1- أدخل إلى مدونتك >> لوحة التحكم >> قالب >> تحرير قالب html

2- إبحث عن الوسم : ]]></b:skin>

3- أضف الكود التالي فوقه :

 /* CSS Share Button */
.tombol-berbagi-arlina{display:block;position:relative;height:43px;line-height:43px;padding:10px;border-top:1px solid #dadada;border-bottom:1px solid #dadada;margin:auto}
.tombol-berbagi-arlina-fb,.tombol-berbagi{float:right;width:21%;padding:0 10px;height:inherit}
.tombol-berbagi-arlina-tw,.tombol-berbagi,.tombol-berbagi-lk{float:right;width:21%;height:inherit;padding:0 10px;border-right:solid 1px #dadada}
.tombol-berbagi-fb,.tombol-berbagi-tw,.tombol-berbagi-gp,.tombol-berbagi-lin,.tombol-berbagi-pi{float:right;display:block;background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQTUY5KC-UU2AjC-IBE-d4m69ve8KlMEsv0Zz9Q7tdwioGcQLkXcHlHsRh9wMFY3SoCK2wp35JtzCGp4fUMB5nIcTIRRAjzBgmM28Fcl3mtIUnuglGn2dwR7T4P8CSlfjoZ70Uv8aFURzb/s1600/share.png') no-repeat;width:42px;height:41px;margin-left:3px}
.tombol-berbagi-fb-label{color:#2d609b}
.tombol-berbagi-fb-label,.tombol-berbagi-tw-label,.tombol-berbagi-gp-label,.tombol-berbagi-lin-label{float:right;width:58px;height:inherit;font-size:12px;font-family:'Open Sans Bold',Arial,sans-serif;line-height:14px;margin:5px 4px 0 0}
.tombol-berbagi-tw{background-position:0 -43px}
.tombol-berbagi-tw-label{color:#00c3f3}
.tombol-berbagi-gp{background-position:0 -86px}
.tombol-berbagi-gp-label{color:#f00}
.tombol-berbagi-lin{background-position:0 -129px}
.tombol-berbagi-arlina a{color:#999;transition:all .3s;}
.tombol-berbagi-arlina a:hover{color:#7cb0ed}

@media only screen and (max-width:640px){
.tombol-berbagi,.tombol-berbagi-arlina-fb{display:inline-block;float:none;width:48%;padding:0;height:inherit}
.tombol-berbagi,.tombol-berbagi-arlina-tw,.tombol-berbagi-lk{float:right;width:48%;padding:0;border-right:0}}

4- بعد ذلك إبحث عن الوسم : <data:post.body/> هذا الوسم مكرر لأكثر من مرة المقصود الثالث منه .

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

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='tombol-berbagi-arlina'>
<div class='tombol-berbagi-arlina-fb'>
<a class='tombol-berbagi-fb' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'/>
<a class='tombol-berbagi-fb-label' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'> شارك على الفيس بوك</a>
</div>
<div class='tombol-berbagi-arlina-tw'>
<a class='tombol-berbagi-tw' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'/>
<a class='tombol-berbagi-tw-label' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'>شارك على تويتر</a>
</div>
<div class='tombol-berbagi'>
<a class='tombol-berbagi-gp' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'/>
<a class='tombol-berbagi-gp-label' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>المشاركة على + Google</a>
</div>
<div class='tombol-berbagi'>
<a class='tombol-berbagi-lin' 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' rel='nofollow' target='_blank'/>
<a class='tombol-berbagi-lin-label' 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' rel='nofollow' target='_blank'>شارك على ينكدين</a>
</div>
</div>
</b:if> 

6- إحفظ القالب .