Cara membuat Share Button di blogspot

Posted on

 

Button share di blogspot sangat memudahkan kita untuk melakukan share ke situs seperti facebook, google plus dan lainnya. Fitur Share buttondi tiap templete berbeda. Ada yang sudah ada bawaan templete dan ada juga yang belum. Sehingga jika kita ingin menambahkan fiturShare Button pada blogspot perlu dilakukan sedikit modifikasi pada templete blogspot teman-teman. berikut ini adalah hasil yang akan dibahas pada blog bsierad ini
 
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=’&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url’ rel=’nofollow’ target=’_blank’>Facebook</a>
<a class=’twitt’ expr:href=’&quot;http://twittter.com/share?url=&quot; + data:post.url’ rel=’nofollow’ target=’_blank’>Twitter</a>
<a class=’gplus’ expr:href=’&quot;https://plus.google.com/share?url=&quot; + data:post.url’ rel=’nofollow’ target=’_blank’>Google+</a>
<a class=’lkdin’ expr:href=’&quot;http://www.linkedin.com/cws/share?url=&quot; + data:post.url’ rel=’nofollow’ target=’_blank’>Linkedin</a>
<a class=’tchno’ expr:href=’&quot;http://technorati.com/faves?sub=addfavbtn&amp;add=&quot; + data:post.url’ rel=’nofollow’ target=’_blank’>Technorati</a>
<a class=’digg’ expr:href=’&quot;http://digg.com/submit?url=&quot; + 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

Baca Juga :  HOSTERBYTE.COM SERVER BARU PAKET BARU
Gravatar Image

http://bakhtiyar.bsierad.com/

Leave a Reply