أزرار المشاركة بتأثيرات مميزة Add Social Sharing

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

زوار المدونة الكرام أقدم لكم إضافة اكثر من رائعة وهي أزرار المشاركة بتأثيرات رائعة

صورة للإضافة

الإضافة جميلة وتتميز بتأثير مميز عند مرور الماوس على كل أيقونة يمكنك إضافتها في المكان الذي تراه مناسبا

فوق المواضيع او اسفل المواضيع أو في الصفحة الرئيسية كل ذالك راجع لك انت

تركيب الاداة سهل جدا

أبحث عن

]]></b:skin>

ثم فوقه ضع هذا الكود

#w2b-share ul {list-style: none;clear: none;padding: 0px 0px ;margin: 5px 0;} #w2b-share ul li {display: inline;background:none;margin:0;padding:0;} #w2b-share ul li a {display: block;float: left;width: 32px;height:32px;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAhujmvA_5QaIH6uM40giaos3RTa0o8Mg-2oqHCFhCCzp78XjeAP-6yclwc5OrhlWPVyp2aa2SCXD3tZWiGF0YndNvlTAuy7WJPum1UigacDx-J3s5fDp1ZLYmRrXTxX8Z7dta-eXe-kxM/s1600/way2blogging-share-icons-sprite.png') ;margin-left:3px;background-repeat: no-repeat;margin-right: 2px;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } #w2b-share ul li a.twitter {background-position: -0px -0px; } #w2b-share ul li a.twitter:hover {background-position: -0px -33px; } #w2b-share ul li a.facebook {background-position: -32px -0px; } #w2b-share ul li a.facebook:hover {background-position: -32px -33px; } #w2b-share ul li a.stumbleupon {background-position: -64px -0px; } #w2b-share ul li a.stumbleupon:hover{background-position: -64px -33px; } #w2b-share ul li a.digg {background-position: -192px -0px; } #w2b-share ul li a.digg:hover {background-position: -192px -33px;} #w2b-share ul li a.reddit {background-position: -160px -0px; } #w2b-share ul li a.reddit:hover {background-position: -160px -33px;} #w2b-share ul li a.google {background-position: -128px -0px; } #w2b-share ul li a.google:hover {background-position: -128px -33px;} #w2b-share ul li a.del-icio-us {background-position: -480px -0px; } #w2b-share ul li a.del-icio-us:hover{background-position: -480px -33px;} #w2b-share ul li a.mixx {background-position: -96px -0px; } #w2b-share ul li a.mixx:hover {background-position: -96px -33px; } #w2b-share ul li a.technorati {background-position: -416px -0px; } #w2b-share ul li a.technorati:hover {background-position: -416px -33px;} #w2b-share ul li a.linkin {background-position: -256px -0px; } #w2b-share ul li a.linkin:hover {background-position: -256px -33px;} #w2b-share ul li a.yahoobuzz {background-position: -448px -0px; } #w2b-share ul li a.yahoobuzz:hover {background-position: -448px -33px;} #w2b-share ul li a.myspace {background-position: -512px -0px; } #w2b-share ul li a.myspace:hover {background-position: -512px -33px;} #w2b-share ul li a.more {background-position: -576px -0px; } #w2b-share ul li a.more:hover {background-position: -576px -33px;}

ثم إبحث عن

<data:post.body/>

إن وضعت هذا الكود أسفله فستضهر الأزرار اسفل الموضوع والعكس صحيح

 <b:if
 cond='data:blog.pageType == "item"'>
<div id='w2b-share'>
<ul>
<li><a class='twitter' expr:href='"http://twitter.com/?status="
 + data:post.title + " - " + data:post.url ' rel='nofollow' 
target='_blank' title='Share this post on twitter'/></li>
<li><a class='facebook' 
expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + 
"&title=" + data:post.title' rel='nofollow' target='_blank' 
title='Share this post on Facebook'/></li>
<li><a class='stumbleupon' expr:href='" 
http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" +
 data:post.title' rel='nofollow' target='_blank' title='Share this post 
on Stunbleupon'/></li>
<li><a class='digg' expr:href='"http://digg.com/submit?url=" + 
data:post.url + "&title=" + data:post.title' rel='nofollow' 
target='_blank' title='Share this post on Digg'/></li>
<li><a class='reddit' expr:href='" 
http://www.reddit.com/submit?url=" + data:post.url + "&title=" + 
data:post.title' rel='nofollow' target='_blank' title='Share this post 
on Reddit'/></li>
<li><a class='google' 
expr:href='"http://www.google.com/bookmarks/mark?op=add&bkmk=" + 
data:post.url + "&title=" + data:post.title' rel='nofollow' 
target='_blank' title='Bookmark this post on Google'/></li>
<li><a class='del-icio-us' 
expr:href='"http://del.icio.us/post?url=" + data:post.url + 
"&title=" + data:post.title' rel='nofollow' target='_blank' 
title='Share this post on delicious'/></li>
<li><a class='mixx' 
expr:href='"http://www.mixx.com/submit?page_url=" + data:post.url + 
"&title=" + data:post.title ' rel='nofollow' target='_blank' 
title='Share this post on Mixx'/></li>
<li><a class='technorati' expr:href='" 
http://technorati.com/faves?add=" + data:post.url + "&title=" + 
data:post.title' rel='nofollow' target='_blank' title='Fav on 
Technorati'/></li>
<li><a class='yahoobuzz' 
expr:href='"http://buzz.yahoo.com/submit/?url="+ data:post.url' 
rel='nofollow' target='_blank' title='Share this post on 
Yahoo!Buzz'/></li>
<li><a class='myspace' 
expr:href='"http://www.myspace.com/Modules/PostTo/Pages/?u="+ 
data:post.url + "&t=" + data:post.title' rel='nofollow' 
target='_blank' title='Sahre this post on Myspace'/></li>
<li><a class='a2a_dd more' 
expr:href='"http://www.addtoany.com/share_save?url=" + data:post.url + 
"&title=" + data:post.title '/><script 
src='http://static.addtoany.com/menu/page.js' 
type='text/javascript'/></li>
</ul>
</div>
</b:if>

أتمنى ان تعجبكم الاداة موفقين إن شاء الله

دمتم في رعاية الله وحفضه