Seperti yang sobat synasmedseo
ketahui, tombol share dalam blog itu memang sangat diperlukan. Selain
untuk memudahkan pengunjung blog untuk membagi artikel anda, dengan
adanya tombol share ini juga dapat berpengaruh baik terhadap SEO blog
anda. Apalagi tombol share google plus, saya rasa ini yang paling
bermanfaat. Semakin banyak artikel yang di share pengunjung ke media
jejaring sosial, maka semakin banyak pula pengunjung yang datang ke blog
kita.
Sebetulnya untuk tamplate asli bawaan dari blogger sudah tersedia, tapi
untuk tamplate hasil download mungkin banyak yang belum menyediakan.
Tombol Share yang akan saya share sekarang ini hanya menggunakan CSS
saja tanpa menggunakan gambar, sehingga tampilan dari tombol share ini
lebih sederhana dan minimalis dengan di sertai warna-warna yang menarik.
Untuk memasang tombol share di bawah posting blog juga cukup mudah,
hanya dengan menambahkan sedikit kode saja yang terdapat dibawah ke
dalam Edit HTML template blog maka hasilnya akan seperti yang tertera
pada gambar di bawah ini:
Bagi sobat yang berminat untuk memasangnya, silakan ikuti Tutorial atau Cara untuk Membuat Tombol Share di Bawah Posting Blog agar valid HTML5 dan full color.
1. Login ke blogger dengan akun blog sobat.
2. Klik menu Tata Letak > Edit HTML > Expand Template Widget
3. Copy kode di bawah ini tepat di atas kode
]]></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; }
4. Selanjutnya copy kode berikut ini, lalu taruh di bawah kode
<data:post.body/> atau bisa juga
<div class='post-footer'>
<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>
<script>
//<![CDATA[
var uri = window.location.href;
var ttle = document.title;
document.write("<a
href='http://www.lintas.me/?c=bookmarklet&url="+uri+"&title="+ttle+"'
rel='nofollow' class='ltsme'>Lintasme</a>");
//]]>
</script>
</div>
5. Save dan lihat hasilnya
Note: Perlu diperhatikan dalam langkah pemasangannya, biasanya didalam template blog terdapat beberapa kode <data:post.body/> dan <div class='post-footer'> maka dari itu silahkan sesuaikan dengan template blog yang anda gunakan.
Bagaimana, mudahkan cara memasangnya ? sekarang anda sudah berhasil
memasang tombol share di blog anda. Buatlah artikel yang menarik
sehingga pengunjung blog anda tidak segan-segan untuk membagikan artikel
tersebut kepada temannya.
Baca yang ini :
cara pasang widget sliding box halus