Rabu, 10 Maret 2010

Cara Buat toolbar Facebook

Bagi sahabat Blogger yang doyan main Facebook-kan ,tak usah berkecil hati Karena kita-kita akan membagi ilmu bagaimana cara membuat Toolbar yang mirip facebook yang bisa Chating pada toolbar di bawahnya walau hanya sedikit mirip tapi mudah-mudahan bisa menghibur kita semua oke kita langsung cara membuat toolbar Facebook,

Pertama masuk ke account blogger kamu terus pilih tata letak edit HTML ,kemudian centang "ExpandTemplate Widget".copy paste code berikut dibawah kode <head> :

<script src='http://stashbox.org/820547/ozura-toolbar.js' type='text/javascript'/>
<link href='http://stashbox.org/820551/ozura-toolbar.css' rel='stylesheet' type='text/css'/>
<link href='http://ozuratakanawa.fileave.com/ozura232-toolbar.css' rel='stylesheet' type='text/css'/>

Selanjutnya copy paste code berikut diatas  kode </body> :

<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: 215px; height: 200px; background-color: #ffff;'>
<a href='http://www.ozurapersonall.co.cc/' target='_blank'>Ozuratakanawa Blog's</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</div>
</div>
<div class='dhmbox-content-item'>
<div>
<center>
<br/>
<iframe allowtransparency='yes' frameborder='0' height='300' id='cboxmain' marginheight='2' marginwidth='2' name='cboxmain' scrolling='auto' src='http://www5.cbox.ws/box/?boxid=508960&amp;boxtag=watr1k&amp;sec=main' style='border:#DBE2ED 1px solid;' width='180'/>
<iframe allowtransparency='yes' frameborder='0' height='75' id='cboxform' marginheight='2' marginwidth='2' name='cboxform' scrolling='no' src='http://www5.cbox.ws/box/?boxid=508960&amp;boxtag=watr1k&amp;sec=form' style='border:#DBE2ED 1px solid;border-top:0px' width='180'/></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/>
<script src="http://stashbox.org/820566/takanawa-toolbar.js"></script>
<script>var numposts = 10; var showpostdate = true; var showpostsummary = true; var numchars = 100; </script>
<script src="http://facebook-toolbar-ozura.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rp">
</script>
</div>
</div>
</div>





<div id='dhm-bar'>

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

<div class='dhm-title'>
<a href='http://id-id.facebook.com/people/Ozura-Takanawa/100000541873849' target='_blank' title='Follow us in Facebook'>
<img border='0' src='http://static.ak.fbcdn.net/favicon.ico?8:132011'/>
<div>Facebook</div> </a>
</div>

<div class='dhm-title'>
<a href='http://ozuratakanawa.wordpress.com/' target='_blank'>
<img border='0' src='http://s.wordpress.org/favicon.ico?3'/>
</a>
</div>

<div class='dhm-title'>
<a href='http://kapanmenjemputku.blogspot.com/' target='_blank'>
<img border='0' src='http://www.blogger.com/favicon.ico'> </img> </a>
</div>

<div class='dhm-title'>
<a href='http://www.friendster.com/photos/120100497/2/445049028' target='_blank' title='Follow us in 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.ozurapersonall.co.cc' target='_blank'>
<div>Takanawa Blog's</div> </a>
</div>


<div class='dhm-button' id='dhm-button-1' onclick='showDHMPopup(1);'>
<img src='http://www.twitter-icon.com/buttons/new/000.png'/><div><a href='http://twitter.com/ozuratakanawa/' target='_blank'><b>Twitter</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>Friends Link</div>
</div>
<div class='dhm-button' id='dhm-button-3' onclick='showDHMPopup(3);'>
<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/113.gif'/>
<div><blink><b>Chat Klik Disini</b></blink></div>
</div>
<div class='dhm-button' id='dhm-button-4' onclick='showDHMPopup(4);'>
<div><marquee><blink><b>Toolbar Facebook</b></blink></marquee></div>
</div>

</div>
</div>

</div>

- Simpan template.

~ Keterangan warna kode~

- Kode biru pertama dan kedua kamu ganti dengan link Cbox/Shoutbox kamu.
- Kode merah ganti dengan link FaceBook kamu.
- Kode orange ganti dengan link blog wordpress kamu.
- Kode hijau ganti dengan link blogspot kamu.
- Kode kuning ganti dengan link friendster kamu.
- Kode merah terakhir ganti link Twitter kamu

Silahkan Anda coba Hasilnya , semoga berhasil..!!@@@@