Home
Tukaran Link
Pasang Iklan
Contact Me
Cara Memasang Facebook Toolbar
Huft... Facebook lagi, Facebook lagi... Karena saya hobi banget sama Facebook, maka saya pakai ungkapan "Tiada hari tanpa Facebook", hehehe... Dan lagi2 saya mau bahas tips yang ada hubungannya dengan Facebook! Kalau sebelumnya saya sudah pernah membahas tipsnya disini, disana, disini lagi, dan disana lagi. Sekarang ada yang baru lagi nih yaitu memasang Facebook toolbar. Anda sudah tahu kan yang toolbar yang saya maksud? Itu lho yang ada di bagian bawah halaman Facebook, tempat yang ada menu chat, notifikasi, aplikasi, pages, n lain2 itu,, tahu kan? Toolbar tersebut juga bisa kita pasang di blog. Sebelumnya pemasangan toolbar seperti Facebook itu hanya untuk Joomla 1.5, dimana script nya dibuat oleh Mosquito Magazine. Dengan sedikit utak atik oleh para master, akhirnya script tersebut bisa juga dipasang di Blogger. Mau tau caranya? <script src='http://tipsbloggerzacky.googlecode.com/files/fbtoolbar.js' type='text/javascript'/>
Berikut Cara Memasang Facebook Toolbar Di Blog:
1. Login ke akun Blogger anda
2. Plih Layout > Edit HTML, lalu centang Expand Widget Template
3. Cari kode </head>, lalu paste kode css berikut tepat di atasnya:
<link href='http://tipsbloggerzacky.googlecode.com/files/fbtoolbar-style.css' rel='stylesheet' type='text/css'/>
<link href='http://www.mosquitomagazine.com/facebook-toolbar/modules/mod_fbtoolbar/fbtoolbar.css' rel='stylesheet' type='text/css'/>
4. Selanjutnya cari code </body>, lalu paste kode berikut di atasnya:
<div class='dhmbox' id='dhmbox1'>
<div class='dhmbox-content' id='dhmbox-content1' style='width:250px'>
<div class='dhmbox-content-title' style='width:250px'>
<div class='dhmbox-content-title-close' onclick='showDHMPopup(1);'/>
<div class='dhmbox-content-title-main'>Notification</div>
</div>
<div class='dhmbox-content-item'>
<div class='mod_twitter'>
<!-- Isi Notification -->
</div>
</div></div></div>
<div class='dhmbox' id='dhmbox2'>
<div class='dhmbox-content' id='dhmbox-content2' style='width:250px'>
<div class='dhmbox-content-title' style='width:250px'>
<div class='dhmbox-content-title-close' onclick='showDHMPopup(2);'/>
<div class='dhmbox-content-title-main'>Chat</div>
</div>
<div class='dhmbox-content-item'>
<div>
<center><br/>
<!-- KODE WIDGET SHOUTBOX / SHOUTMIX ANDA -->
</center>
</div>
</div></div></div>
<div class='dhmbox' id='dhmbox3'>
<div class='dhmbox-content' id='dhmbox-content3' style='width:250px'>
<div class='dhmbox-content-title' style='width:250px'>
<div class='dhmbox-content-title-close' onclick='showDHMPopup(3);'/>
<div class='dhmbox-content-title-main'>JUDUL BOX 3</div>
</div>
<div class='dhmbox-content-item'>
<!-- ISI BOX 3 -->
</div></div></div>
<div class='dhmbox' id='dhmbox4'>
<div class='dhmbox-content' id='dhmbox-content4' style='width:200px'>
<div class='dhmbox-content-title' style='width:200px'>
<div class='dhmbox-content-title-close' onclick='showDHMPopup(4);'/>
<div class='dhmbox-content-title-main'>JUDUL BOX 4</div>
</div>
<div class='dhmbox-content-item'>
<!-- ISI BOX 4 -->
</div></div></div>
<div id='dhm-bar'>
<div id='dhm-bar-container'>
<div class='dhm-title'>
<a href='http://www.facebook.com/febri.adrian' target='_blank' title='Zacky Adrishayuni'>
<img border='0' src='http://static.ak.fbcdn.net/favicon.ico?8:132011'/>
<div>My Facebook</div>
</a>
</div>
<div class='dhm-title'>
<a href='http://tipsbloggerzacky.blogspot.com' target='_blank' title='Get Your Own!'>
<img border='0' src='http://img24.imageshack.us/img24/3547/bumig.png'/>
</a>
</div>
<div class='dhm-title'>
<a href='http://tipsbloggerzacky.blogspot.com/2009/11/tukaran-link.html' target='_blank' title='Link Exchange'>
<img border='0' src='http://b.static.ak.fbcdn.net/images/icons/group.gif'/>
</a>
</div>
<div class='dhm-title'>
<a href='#submit-article' rel='facebox'><div>Submit Article</div></a>
</div>
<div class='dhm-button' id='dhm-button-1' onclick='showDHMPopup(1);'><img src='http://img269.imageshack.us/img269/4061/notif.png'/></div>
<div class='dhm-button' id='dhm-button-2' onclick='showDHMPopup(2);'><img src='http://img260.imageshack.us/img260/2105/chati.gif'/></div>
<div class='dhm-button' id='dhm-button-3' onclick='showDHMPopup(3);'></div>
<div class='dhm-button' id='dhm-button-4' onclick='showDHMPopup(4);'></div>
</div></div></div>
Silahkan ganti kode yang berwarna merah dengan kode anda sendiri.
Note: Jika ada bagian footer template anda yang tertutup oleh toolbar ini, maka tambahkan kode <div style='height:16px'></div> diatas kode <div class='moduletable'>. Ini fungsinya untuk memberi jarak antara footer dengan toolbar. Ganti angka 16 dengan nilai yang lebih kecil atau besar untuk menyesuaikan jarak tersebut.
5. Terakhir, klik Save Template.
Selesai sudah... Mudah2an anda tidak minum bodrex setelah melihat kode yang banyak tadi, hehehe...
Selamat mencoba...
Jangan lupa kasih komentar ya...
Bagikan Artikel Ini!
:))
:)]
;))
;;)
:D
;)
:p
:((
:)
:(
:X
=((
:-o
:-/
:-*
:|
8-}
~x(
:-t
b-(
:-L
x(
=))
8 komentar:
kunjungan dini hari sob...:p
wah wah wah...:)
blog lo makin keren yach...?
men:-t, ada saran neh dari gw...:)]
coba tampilkan gambar hasil akhir dari penambahan widget, atau artikel yang membahas tentang pengeditan html code...
biar kita tau hasil akhirnya seperti apa sob..:-L
postingan lo yang ini bisa ditampilin gambar hasil akhirnya?
bagi temen temen yang udah ngeti seh ga masalah buat mereka, tapi lo yang masih awam kayak gw....? aduuuuuuuuuuuuuuuuuuuuuccccccccccchhhhhhhhh~X(
ape pusing gw liat kode Htmlnya..
mohon dipertimbangkan yach saran gw;))
sory tlat bro..
thanks bgt atas sarannya, tapi mnrut gw utk tips ini nggak perlu ditambah screenshot karena contohnya sudah gw bikin di blog ini...
seep
:D
kk punya code css dari http://www.mosquitomagazine.com/facebook-toolbar/modules/mod_fbtoolbar/fbtoolbar.css kalo puna w mnta kk,
soal.na error tu
BoZZ..IzIn CopY Y...
makasih lho bozz atas bantuannya, maklum java script bahasanya orang mana yaaa.....kok susah juga belajarnya
bos aq dah coba tp ada pesan seperti ini:Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
Pesan error XML: Element type "link" must be followed by either attribute specifications, ">" or "/>".
Bantuannya bos......
mana neh contohnya sob??