 |
| Share Button |
Membuat CSS untuk Share Button di blogspot
langkah awal tambahkan dulu kode css untuk tampilan Share button di atas ]]></b:skin>
.widgetshare {font:bold 12px/20px Tahoma !important; background: #333;border: 1px solid #444; padding: 5px 4px; color: #fff !important; margin-top: 10px;}
.widgetshare a{font:bold 12px/20px Tahoma !important; text-decoration: none !important; padding: 5px 4px; color: #fff !important; border: 1px solid #222; transition: all 1s ease;}
.widgetshare a:hover {box-shadow: 0 0 5px #00ff00; border: 1px solid #e9fbe9;}
.fcbok { background: #3B5999; }
.twitt { background: #01BBF6; }
.gplus { background: #D54135; }
.digg { background: #5b88af; }
.lkdin { background: #005a87; }
.tchno { background: #008000; }
.ltsme { background: #fb8938; }
Tambahkan kode Share Button
Setelah membuat kode css untuk tampilan share button berikutnya tambahkan kode untuk membuat share button dengan meletakkan kode dibawah ini sesudah <div class=’post-footer’> (sesuaikan dengan templete anda)
<div class=’widgetshare’>
Share artikel ke:
<a class=’fcbok’ expr:href=’"http://www.facebook.com/sharer.php?u=" + data:post.url’ rel=’nofollow’ target=’_blank’>Facebook</a>
<a class=’twitt’ expr:href=’"http://twittter.com/share?url=" + data:post.url’ rel=’nofollow’ target=’_blank’>Twitter</a>
<a class=’gplus’ expr:href=’"https://plus.google.com/share?url=" + data:post.url’ rel=’nofollow’ target=’_blank’>Google+</a>
<a class=’lkdin’ expr:href=’"http://www.linkedin.com/cws/share?url=" + data:post.url’ rel=’nofollow’ target=’_blank’>Linkedin</a>
<a class=’tchno’ expr:href=’"http://technorati.com/faves?sub=addfavbtn&add=" + data:post.url’ rel=’nofollow’ target=’_blank’>Technorati</a>
<a class=’digg’ expr:href=’"http://digg.com/submit?url=" + data:post.url’ rel=’nofollow’ target=’_blank’>Digg</a>
</div>
Cukup mudah untuk membuat share button di blogspot. Semga sedikit tips ini dapat meempermanis tampilan blog teman-teman
Salam admin
bsierad
