Cara Memasang Facbook 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 membahastipsnya 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?

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:

<script src='http://tipsbloggerzacky.googlecode.com/files/fbtoolbar.js' type='text/javascript'/>
<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='moduletable'>
<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...