Sosial share merupakan sebuah widget untuk mempublikasikan artikel atau blog anda pada beberapa situs jejaring sosial, seperti facebook, twitter, dan lain sebagainya. Widget ini merupakan penghubung dari situs anda kepada beberapa jaringan blog pribadi dan umum untuk lebih mempopulerkan apa yang anda lakukan melaui blog. Mengenai tampilan dijamin gak kalah menarik dengan widget sharing lainnya. Ok...sekarang ikuti langkah pembuatannya.
Log in ke blog anda
Klik Rancangan
Klik Edit HJTML
Masukkan kode berikut di atas kode ]]></b:skin>
#w2b-share ul{list-style:none; clear:none; padding:0px 0px; margin:5px 0}Selanjutnya pasang kode berikut di bawah kode <data:post.body/> atau <p><data:post.bod/></p>
#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/AVvXsEg59lsQ0Wc6h3GDxArY0wmCsqHdbmb7NYt_-4xBgUJSsLonvHO-FLfrhOxYRQPjfcrCcMAhAQPPrFfFSx4gFjtOualrhGQhNmWqMyIIS6CIPDhfZ4E0z3k4kQr1PRN0o50KWxnd9n0n-ULi/'); 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}
<b:if cond='data:blog.pageType == "item"'>Anda dapat menyimpan kode ke dua di bawah kode <div class='post-footer-line post-footer-line-1'>. Agar letaknya di tengah letakkan kode HTML di antara tag <center>, seperti di bawah ini.
<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>
<center>kode HTML</center>
Selanjutnya klik Simpan Template dan lihat hasilnya
Selesai...selamat mencoba dan sukses selalu.
"keep blogging smiley"
mantab...mahesa...keep spirits and do the best