Cara Pasang Social Bookmark Button Dibawah Posting Via Addthis

social bookmark buttonLama tidak membahas artikel yang berhubungan dengan tutorial blog karena kesibukan kerja, buat blog baru dan paid review membuat blog terbengkalai tak terurus seperti proyek pemerintah yang tersendat-sendat karena dananya disunat sana sini(baca: dikorupsi).Padahal saya tidak korupsi duit, hanya korupsi waktu kerja kalau lagi suntuk dan banyak tugas :D hehe.

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='http://1.bp.blogspot.com/_GcgsJAjEB2E/SovhzFOXj-I/AAAAAAAAA6M/rTc9xdx028M/s400/SHAREIT.jpg'/></a><br/>
    <div class='addthis_toolbox'>
    <div class='custom_images'> <a class='addthis_button_twitter'><img alt='Twitter' height='32' src='http://3.bp.blogspot.com/_GcgsJAjEB2E/S3mavVL-1fI/AAAAAAAABYM/vXDTO_nCSDs/s400/Twitter_32x32.png' width='32'/></a>
    <a class='addthis_button_facebook'><img alt='Facebook' height='32' src='http://2.bp.blogspot.com/_GcgsJAjEB2E/S3madOG26lI/AAAAAAAABXc/AWnzjQuCD-I/s400/FaceBook_32x32.png' width='32'/></a>
    <a class='addthis_button_myspace'><img alt='MySpace' height='32' src='http://2.bp.blogspot.com/_GcgsJAjEB2E/S3majiSgJII/AAAAAAAABXs/4arzyxvc38E/s400/MySpace_32x32.png' width='32'/></a>
    <a class='addthis_button_digg'><img alt='Digg' height='32' src='http://4.bp.blogspot.com/_GcgsJAjEB2E/S3maZ4hV7UI/AAAAAAAABXU/tXnEaH3Zpfo/s400/Digg_32x32.png' width='32'/></a>
    <a class='addthis_button_Stumbleupon'><img alt='Stumbleupon' height='32' src='http://3.bp.blogspot.com/_GcgsJAjEB2E/S3mapeeOvoI/AAAAAAAABX8/ixjkOLv4M8c/s400/Stumbleupon_32x32.png' width='32'/></a>
    <a class='addthis_button_Technorati'><img alt='Technorati' height='32' src='http://4.bp.blogspot.com/_GcgsJAjEB2E/S3masv-qNPI/AAAAAAAABYE/m-Q-mDKWbFY/s400/Technorati_32x32.png' width='32'/></a>
    <a class='addthis_button_Reddit'><img alt='Reddit' height='32' src='http://2.bp.blogspot.com/_GcgsJAjEB2E/S3mamO_izAI/AAAAAAAABX0/Liu-ccNgpKI/s400/Reddit_32x32.png' width='32'/></a>
    <a class='addthis_button_delicious'><img alt='delicious' height='32' src='http://3.bp.blogspot.com/_GcgsJAjEB2E/S3maWTbOavI/AAAAAAAABXM/w6z039MeBUw/s400/delicious_32x32.png' width='32'/></a>
    <a class='addthis_button_folkd'><img alt='Folkd' height='32' src='http://1.bp.blogspot.com/_GcgsJAjEB2E/S3mk7dD0oiI/AAAAAAAABYU/sw6-LFnH2QE/s400/folkd.jpeg' width='32'/></a>
    </div>
    </div>

5. Terakhir simpan dan lihat hasilnya.

addthis button
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:

Nayarre Pata Blog said...

Udah saya coba.. dan berhasil..!! Thank$$$ buat mas...!!!

adedosol said...

Sama2 Nayarre

Berbisnis Online said...

makasih bos infonya,, masih bingung,pemula yg lg belajar :d.

adedosol said...

@Berbisnis online, sy jg msh bljr,mksh dah mampir

Eric said...

wakh, aku pake wp mas... blogspot-ku blm jalan2 nich...

adedosol said...

Klo sy blum srius diWP mas,msh coba2

AeArc said...

ijin praktek gan!

neng rara said...

assalamualaikum..
hehehe..mau nyoba ah..tp prosesnya panjang juga yah
trims dah berkunjung
salam

tutorial blog | SEO | Life Style said...

bagus sob cuman saya sudah pake sharing is sexy......kpan2 dicoba ah

tutorial blog | SEO | Life Style said...

bagus sob cuman saya sudah pake sharing is sexy......kpan2 dicoba ah

Bisnisquonline said...

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 ".

adedosol said...

@Bisnisquonline: Sebelumnya jgn lupa centang "Expand Template Widget",klo msh error silahkan kirim template ke adedosol@yahoo.co.id untuk sy tambahkan

DNIEL said...

mampir sob n baca....jgn lupa mampir balik ok

Sasuke Suyono said...

Belum berhasil gan...aku pake template wooden wall

Sasuke Suyono said...

ane belum berhasil gan..template ane udah ane kirim...tolong ya gan...

adedosol said...

@Sasuke Suyono, ok ditunggu email jawaban dr saya.

Terima ksh

Fahmi Dzakiansyah said...

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 "".<

adedosol said...

@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

dR said...

saya baru coba, url pada kode html nya gak diubah??

adedosol said...

DR tdk perlu rubah apapun, tq

yobert said...

cara ubah ukuran kotaknya gimana ya?

adedosol said...

@Yobert
Untuk merubah ukuran Ganti nilai heiht= dan width= silahkan dicoba thanks

Terbaik Mobil said...

buat yang pake wop self hosted langsung bisa pake pluginnya. tinggal install

Replica Watches said...

wweew rumit juga

wandhy said...

wah, aku bingung nih...
Udh 4 malam nggak tidur, buat pasang social bookmark di template. Tapi selalu pesan error..

Deris said...

Artikel yang bagus, makasih!!!

digital tablet pc said...

makasih sob dah share..:) mungkin nanti saya akan mencobanya :)

affordable car insurance said...

Thats a nice work you've made here. Thx

car insurance rate said...

Thx for sharing, will show it to my friends, cause some of them still dont know how to do it

Kabar Pendidikan said...

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??

Adedosol said...

Untuk blogspot, ikuti langkah diatas untuk pasang addthis dibawah posting

Blogger Bodoh said...

Tahnkz gan !
Mudah mudahan pas di template ana yang di blogspot !

Anonymous said...

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

 
Seo marketing © 2010 | Designed by Chica Blogger | Back to top