Pada kesempatan kali ini saya ingin membahas cara pasang tombol SB dibawah artikel di blogspot dengan menggunakan script Addthis. Seperti yang kita tahu kalau Addthis menyediakan banyak tombol social bookmark(SB) untuk blog dan website agar memudahkan pengunjung membagi/mengirimkan artikel blog ke situs jejaring favorit mereka dengan hanya beberapa klik saja. Script yang yang ini hampir sama dengan script addthis yang dulu pernah saya posting,yang berbeda hanya tampilan tombol lebih besar dan ada tambahan kode css untuk hovernya.Sekedar info, saking banyaknya web dan blog yang memakai script Addthis berakibat pada PR addthis mentok di angka 10 sejajar dengan google..Keren kan(Twitter dan facebook saja PRnya masih 9).
Ok ga pake lama,langsung aja yah..Buat yang mau pasang tombol addthis seperti yang ada dibawah setiap artikel di blog ini.
1. Login ke blogger,masuk ke Edit HTML lalu centang "Expand Template Widget"
2. Cari kode ]]></b:skin> ,lalu masukkan kode dibawah ini persis diatasnya ]]></b:skin>
- .addthis_toolbox .custom_images a
{
width: 35px;
height: 35px;
margin: 0;
padding: 0;}
.addthis_toolbox .custom_images a:hover img
{
opacity: 1;
}
.addthis_toolbox .custom_images a img
{
opacity: 0.75;
}
3. Setelah itu masukkan script berikut dibawah kode ]]></b:skin>
- <script src='http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4b79a1944f1ba3e5' type='text/javascript'/></script>
4. Lalu cari kode <data:post.body/>, masukkan script berikut dibawah kode <data:post.body/>
- <a href="http://opelangi.blogspot.com/2010/02/cara-pasang-social-bookmark-button.html" target="_blank"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG-KilV-5SobuBjgkZU-yCz3WzUz59PqLFd4kBE0naIqSSWDzk1NePPztkFAP4djY4dy9qI28dFG5pmi4pVfc1hYioqGrh8fAEssW0U8o5cSknr9aIbdEju4Oe2foOZHbzeCYbYl9A2qA/s400/SHAREIT.jpg'/></a><br/>
<div class='addthis_toolbox'>
<div class='custom_images'> <a class='addthis_button_twitter'><img alt='Twitter' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0kvHP4Mtdyl6iUt0RS-RBjieqGKY4QlmRt42g4UvruCCxxJ6kHuKV93DoavjLqYt1uGX9hZJbSzfn5xED-ZwL-kFCisn3XIX1HSXgvH2VaxjLHJSS53lBQeQBfnsRPxLszT-KxJ0mbtg/s400/Twitter_32x32.png' width='32'/></a>
<a class='addthis_button_facebook'><img alt='Facebook' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzDRmmLyEqQo8XBLzs_h5h0wbTGY6LAMva_4c_cRMicTXnPfXwG-NtfLZx8_WMa3MWiAeCTo_iA8Yi5Et8eU7PGeQxvv_Rash2A9KxOczBJcEWOaiDTgpbTIGr86kRwYXdgjXUSeAB41Q/s400/FaceBook_32x32.png' width='32'/></a>
<a class='addthis_button_myspace'><img alt='MySpace' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8Q_6SdvUSt9aVyBe58KHCyF_a1eRffIPnT01BSp3KNlHI8Lo4kNFxtuYROjejt0ofibWnhxY7GcC1cDSur3Ba5-tIuGGzV0gzqjM-M1nqILajAr61jUX7mWVNgURrAHtQ6kMqG490cWE/s400/MySpace_32x32.png' width='32'/></a>
<a class='addthis_button_digg'><img alt='Digg' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeZpCVvc0Oa7vzxxcLzcUBPqRWeklsmuICjUOmRy7rwLY1LVV53Rl9LP0BEgUrvaK2r_kdXr6E2BTfH3XEr2ZfWveXwXGQvILJ4N3H34lKsMcWCK7s0YPKOtcFGCE9E-s0Zn33_0H0cBw/s400/Digg_32x32.png' width='32'/></a>
<a class='addthis_button_Stumbleupon'><img alt='Stumbleupon' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7RnEPIlsTJEZt2Pc7JdvtP9TsQezDo80Pgt6LnnrNb4HZ15nBflY1yw6rH2uMM0c-tk1h54FHoUi362gepbo9qzqGwflaFkV0nRzTEKVcOkxpMz53w1tqiKkyGEua-355ahzoFwCkBYs/s400/Stumbleupon_32x32.png' width='32'/></a>
<a class='addthis_button_Technorati'><img alt='Technorati' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrDHYWvNbKahihgHxrSyxsD7oG6TblAapkZoSYiBAI5PXTpRqU_F9gyy450CyAUDJCK9yYpYwKJx2HZ6Mx6nVCPpnkPuXHbUGtQ8FjW1CxRE8_q3VMDEic45UPumGWkiDQ4Ltonbqzx24/s400/Technorati_32x32.png' width='32'/></a>
<a class='addthis_button_Reddit'><img alt='Reddit' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE2vJ-CAPvN9efQdawVO6qhqWn9_lT0s9Xmqms6L3iPdBsRIuCI_37HJp8ZNnksXFv_JA3lAovtczq437FMueqBqaWjTOTus_SBs1f2-DAWmIZRFLso78JaXGKVf1wygutQ7Kvn-Lwf1c/s400/Reddit_32x32.png' width='32'/></a>
<a class='addthis_button_delicious'><img alt='delicious' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIilr1s7pPxsHDE8Uz6pAu7gfBpXRQyVSV1NOlCmUlV1QGbYa0FGWUv38r1zqBGfHMX0T-_hZO87SnY23rywNsW1vQQiEmshFCvpGqu3ukOQ38EaTwnlZZQVK9NxAor953IHr3dG8W9xQ/s400/delicious_32x32.png' width='32'/></a>
<a class='addthis_button_folkd'><img alt='Folkd' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkKknctZpsEs6YGgTsJOoJsX8xCvFSBO_DcrhhpM9Az0i72eFPQyE6KwtDE_frJQjsyJ8cpSsULSELiSRqozWFnUMYq4YwQ7LQ4_LOCT9wRGWaR2UGMYwjpXOzK0TCu4nT6ouYrylY-M8/s400/folkd.jpeg' width='32'/></a>
</div>
</div>
5. Terakhir simpan dan lihat hasilnya.
Untuk jaga-jaga silahkan simpan gambar tombol tersebut di blog sobat masing-masing setelah itu ganti alamat imagenya pada langkah ke 4 sesuai alamat gambar sendiri.
Semoga berguna dan sampai jumpa lain waktu.
33 komentar:
Udah saya coba.. dan berhasil..!! Thank$$$ buat mas...!!!
Sama2 Nayarre
makasih bos infonya,, masih bingung,pemula yg lg belajar :d.
@Berbisnis online, sy jg msh bljr,mksh dah mampir
wakh, aku pake wp mas... blogspot-ku blm jalan2 nich...
Klo sy blum srius diWP mas,msh coba2
ijin praktek gan!
assalamualaikum..
hehehe..mau nyoba ah..tp prosesnya panjang juga yah
trims dah berkunjung
salam
bagus sob cuman saya sudah pake sharing is sexy......kpan2 dicoba ah
bagus sob cuman saya sudah pake sharing is sexy......kpan2 dicoba ah
hallo mas Adidosol,, saya udah ngikutin step by step utk bs masuk ke posting, tp ketika mau disimpan tidak mau di pharse, (bingung mode on nih)
maklum blm familiar dgn html code,,,
"Pesan error XML: The element type "head" must be terminated by the matching end-tag ".
@Bisnisquonline: Sebelumnya jgn lupa centang "Expand Template Widget",klo msh error silahkan kirim template ke adedosol@yahoo.co.id untuk sy tambahkan
mampir sob n baca....jgn lupa mampir balik ok
Belum berhasil gan...aku pake template wooden wall
ane belum berhasil gan..template ane udah ane kirim...tolong ya gan...
@Sasuke Suyono, ok ditunggu email jawaban dr saya.
Terima ksh
aku udah mengikuti persisss tuts yg kamu kasih. tapi ko masih ada tulisan >Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
Pesan error XML: The element type "head" must be terminated by the matching end-tag "".<
@Fahmi Dzakiansyah
Untuk langkah ketiga, coba masukkan script dibawah <head>
Jika masih berhasil, masukkan script dibawah </head>
Klo blum bs jg, silahkan kirim template ke saya, untuk ditambahkan
saya baru coba, url pada kode html nya gak diubah??
DR tdk perlu rubah apapun, tq
cara ubah ukuran kotaknya gimana ya?
@Yobert
Untuk merubah ukuran Ganti nilai heiht= dan width= silahkan dicoba thanks
buat yang pake wop self hosted langsung bisa pake pluginnya. tinggal install
wweew rumit juga
wah, aku bingung nih...
Udh 4 malam nggak tidur, buat pasang social bookmark di template. Tapi selalu pesan error..
Artikel yang bagus, makasih!!!
makasih sob dah share..:) mungkin nanti saya akan mencobanya :)
Thats a nice work you've made here. Thx
Thx for sharing, will show it to my friends, cause some of them still dont know how to do it
sy blm ngerti dg tutorialnya.. masalahnya jenis tombol addthis kan bermacam2... kita bisa langsung dpt script dr addthis yg langsung diinstal ke blog kita. cara memindahkannya ke bawah posting gmn ya??
Untuk blogspot, ikuti langkah diatas untuk pasang addthis dibawah posting
Tahnkz gan !
Mudah mudahan pas di template ana yang di blogspot !
Tombol linkedin kok gak ada gan..
Post a Comment
Silahkan memberi komentar, saran, kritik atau masukan tentang artikel atau blog ini
Do not insert a link on comment box or you will be considered a spammer