TopBottom

Blog Tutorial

About Me

Add your donation here for a better of our service. Thanks!

Berlangganan

Anda Suka Tips Blogger Zacky?
Temukan Kami Di:
Ingin Dapat Artikel Terbaru?
rss Klik disini untuk berlangganan melalui RSS atau terima artikel di email anda dengan cara mengisi form berikut:

Cara Memasang Facebook Toolbar

Original by IFX Adrian | 21 Desember 2009 9 Comments

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?

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

Bagikan Artikel Ini!

<a href="http://instaforex.com/forexcopy_system.php?x=DVXF">InstaForex</a>
Facebook Delicious Digg! Twitter Linkedin StumbleUpon Lintas Berita
Technorati Google Bookmarks Mixx Yahoo! Newsvine Reddit

Artikel Lain Yang Mungkin Anda Baca

9 komentar:

Radhitya 28 Desember 2009 02.35  

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;))

Zacky Adrishayuni 29 Desember 2009 19.01  

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

Rizky 大蛇丸 15 Mei 2010 12.29  

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

Tube bejho 20 Mei 2011 13.30  

makasih lho bozz atas bantuannya, maklum java script bahasanya orang mana yaaa.....kok susah juga belajarnya

ChristLaw 27 Juli 2011 18.33  

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

sherlina halim 15 Oktober 2015 02.26  

Pengen yang lebih seru ...
Ayo kunjungi www.asianbet77.com
Buktikan sendiri ..

Real Play = Real Money

- Bonus Promo Red Card pertandingan manapun .
- Bonus Mixparlay .
- Bonus Tangkasnet setiap hari .
- New Produk Sabung Ayam ( minimal bet sangat ringan ) .
- Referal 5 + 1 % ( seumur hidup ) .
- Cash Back up to 10 % .
- Bonus Royalty Rewards setiap bulan .

Untuk Informasi lebih jelasnya silahkan hubungi CS kami :
- YM : op1_asianbet77@yahoo.com
- EMAIL : melasian77cs@gmail.com
- WHATSAPP : +63 905 213 7234
- WECHAT : asianbet_77
- SMS CENTER : +63 905 209 8162
- PIN BB : 2B4BB06A / 28339A41

Salam Admin ,
asianbet77.com

Download Disini

Posting Komentar