Facebook toolbar. ~ Mysura's Diary

18 December 2009

Facebook toolbar.




hari ni saya nak ajar cara wat toolbar macam kat blog saya ni...
mula2 saya nak ucap terima kasih pada hapia mesir sebab ajar cara2nya...
jom kita buat...

1. Log in >> Layout >> edit HTML
2. jangan lupa tick pada kotak 'expand widget templates'
3. tekan Ctrl & F masukkan kod <head> dan tekan enter.
4. selepas dah jumpa kod tersebut masukkan kod ini dibawah kod <head> tadi.


<script src='http://raezen.fileave.com/1.js' type='text/javascript'/>
<link href='http://raezen.fileave.com/script.css' rel='stylesheet' type='text/css'/>
<link href='http://www.mosquitomagazine.com/facebook-toolbar/modules/mod_fbtoolbar/fbtoolbar.css' rel='stylesheet' type='text/css'/>

5. setelah selesai, cari kod </body> dan masukkan kod berikut diatas kod </body> tersebut.

<div id='footerbanner'>

</div>
<div class='moduletable'>
<div class='dhmbox' id='dhmbox1'>
<div class='dhmbox-content' id='dhmbox-content1' style='width:200px'>

</div>
</div>


<div class='dhmbox' id='dhmbox2'>
<div class='dhmbox-content' id='dhmbox-content2' style='width:200px'>
<div class='dhmbox-content-title' style='width:200px'>
<div class='dhmbox-content-title-close' onclick='showDHMPopup(2);'/>
<div class='dhmbox-content-title-main'>Friends Link</div>
</div>
<div class='dhmbox-content-item'>
<div style='border: 1px solid #000000; padding: 5px; overflow: auto; width: 170px; height: 200px; background-color: #ffff;'>
<a href='http://maisurah-mazhar.blogspot.com/' target='_blank'>Iamsura Blog</a><br/>

</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'>Chat Box</div>
</div>
<div class='dhmbox-content-item'>
<div>
<center>
<br/>
<iframe frameborder='0' height='320' scrolling='auto' src='http://www6.shoutmix.com/?studio_cool' title='Chat box' width='230'>
<a href='http://www6.shoutmix.com/?studio_cool'>View shoutbox</a>
</iframe>
</center>
</div>
</div>
</div>
</div>




<div class='dhmbox' id='dhmbox4'>
<div class='dhmbox-content' id='dhmbox-content4' style='width:230px'>
<div class='dhmbox-content-title' style='width:230px'>
<div class='dhmbox-content-title-close' onclick='showDHMPopup(4);'/>
<div class='dhmbox-content-title-main'>Most Popular Article</div>
</div>
<div class='dhmbox-content-item'>
<br/>
<div style='border: 1px solid rgb(102, 102, 102); background: rgb(255, 255, 255) none repeat scroll 0% 0%; overflow: auto; width: 220px; height: 250px; text-align: center; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;'><script src='http://raezen.fileave.com/post-terakhir.js'/>
<script>var numposts = 10; var showpostdate = true; var showpostsummary = true; var numchars = 100; </script>
<script src='http://maisurah-mazhar.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rp'>
</script>
</div>
</div>
</div>
</div>





<div id='dhm-bar'>

<div id='dhm-bar-container'>

<div class='dhm-title'>
<a href='http://www.facebook.com/sura12' target='_blank' title='Follow sura on Facebook'>
<img border='0' src='http://static.ak.fbcdn.net/favicon.ico?8:132011'/>
<div><b>Facebook</b></div> </a>
</div>

<div class='dhm-title'>
<a href='http://www.twitter.com/sura12' target='_blank' title='Follow sura on Twitter'>
<img border='0' src='http://i417.photobucket.com/albums/pp257/surafatin12/Twitter16x16.png'/>
</a>
</div>

<div class='dhm-title'>
<a href='http://www.myspace.com/sura12' target='_blank' title='Follow sura on Myspace'>
<img border='0' src='http://i417.photobucket.com/albums/pp257/surafatin12/myspace16x16-1.png'> </img> </a>
</div>

<div class='dhm-title'>
<a href='http://www.friendster.com/sura12' target='_blank' title='Follow sura on Friendster'>
<img border='0' src='http://farm3.static.flickr.com/2473/4098753814_9af28601e3_o.jpg'> </img> </a>
</div>

<div class='dhm-title'>
<a href='http://www.dafi-fc.com' target='_blank' title='Join Dafi-fc now!'>
<div><b>Dafi-fc</b></div> </a>
</div>


<div class='dhm-button' id='dhm-button-1' onclick='showDHMPopup(1);'>
<img src='http://i417.photobucket.com/albums/pp257/surafatin12/crown.gif'/><div><a href='ymsgr:sendIM?maisurahmazhar'><b>ADMIN</b></a></div>

</div>
<div class='dhm-button' id='dhm-button-2' onclick='showDHMPopup(2);'>
<img height='17' src='http://b.static.ak.fbcdn.net/images/icons/group.gif?8:25796'/>
<div><b>Friends Link</b></div>
</div>
<div class='dhm-button' id='dhm-button-3' onclick='showDHMPopup(3);'>
<img src='http://i417.photobucket.com/albums/pp257/surafatin12/star.gif'/>
<div><b>Chat Klik Disini</b></div>
</div>
<div class='dhm-button' id='dhm-button-4' onclick='showDHMPopup(4);'>
<div><b>Postingan</b></div>
</div>

</div>
</div>

</div>

6. kod2 yang berwarna tu anda boleh tukar mengikut gaya anda sendiri..

merah: Link kawan2 kamu.. kalau nak tambah hanya tambah kod ni dibawahnya [ <a href='http://#.blogspot.com/' target='_blank'>kamu</a><br/> ]

hijau: tukar dengan link kamu...supaya muncul postingan yang berkaitan dengan blog kamu..

biru: untuk chat.. sesuai jika kamu berdaftar dengan ShoutMix.. contohnya http://www6.shoutmix.com/?studio_cool .... 'studio_cool' tu tukar dengan username mesej box kamu... kalau tak tahu, mouse hoverkan kat mesej box kamu yang ada tulis Refresh... kamu akan nampak username kamu...

oren: sesuai untuk sesiapa yang dah ada YM... kalau takde boleh daftar ok... tukar sahaja maisurahmazhar kepada username YM kamu...

ungu: button sosial seperti Facebook, Twitter, Myspace, friendster dan tambahan website yang kamu ingin letak... dafi-fc tu korang leh tukar dengan apa2 website yang korang suka ok... jangan lupa tukar username setiap link sosial tersebut... contohnya 'http://www.friendster.com/sura12'.. sura12 tu tukar dengan kamu punya... and lagi satu tukar 'Follow sura on Friendster'.. sura tu tukar dengan nama atau paling senang ME.. maksudnya 'Follow me on Friendster"..


ok..kalau dah siap semuanya anda boleh save kan template anda... dan kalau anda nak buat perubahan pada benda ni...macam biasa Log in >> Layout >> edit HTML >> jangan lupa tick pada 'expand widget template' dan tukarlah mengikut kemahuan anda.. sampai sini sahaja..

terima kasih..selamat mencuba dan jangan lupa tinggalkan komen yer... :)


6 comments:

lorh..cam tuh jer rupanya...
thanx!

ehehhe...macam tu je lah...wat pe nak susah2..kan...

ur very welcome... :)

owh...bagus...memudahkan proses melogin ek...

terima kasih kembali Legasi Piston Pecah...
eheheheh :)