Monday, November 16, 2009

Facebook Toolbar for BLOGGER

buat teman2 yang tertarik ma template facebook ini kalian bisa baca di link ini....tapi kalo hanya pengen menerapkan toolbar facebook di blog anda seperti yang tampak pada bagian bawah blogku ini aku kasih tutorialnya......

[klik gambar untuk memperbesar]


pertama-tama thanks to mosquitomagazine[dot]com untuk scriptnya tentang Facebook Toolbar for Joomla 1.5 ....ternyata script itu bisa diterapin di blogspot [dot] com....

oke kita langsung saja .....untuk memasang facebook toolbar di blog anda caranya cukup mudah......

yang harus sobat lakukan login ke blog anda, karena ini adalh permainan HTML silahkan sobat bloger menuju ke layout dan KLIK EDIT HTML kemudian cari kode <head> setelah ketemu masukkan code dibawah ini persis dibawah code tadi...
<script src='http://sites.google.com/site/toejoeh124/1.js' type='text/javascript'/>
<link href='http://sites.google.com/site/toejoeh124/style-fb.css' rel='stylesheet' type='text/css'/>
<link href='http://www.mosquitomagazine.com/facebook-toolbar/modules/mod_fbtoolbar/fbtoolbar.css' rel='stylesheet' type='text/css'/>

setelah itu cari code </body> kemudian masukkan code dibawah ini persis diatasnya
<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'> 

<script src='http://kunoichi.info/blogger_buster/comments.js' style='text/javascript'/><script style='text/javascript'>var a_rc=7;var m_rc=true;var n_rc=true;var o_rc=75;</script><script src='http://toejoeh124.blogspot.com/feeds/comments/default?alt=json-in-script&amp;callback=showrecentcomments'/>
</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/> 
<iframe frameborder='0' height='350' scrolling='auto' src='http://www2.shoutmix.com/?questanoeq' title='toejoeh124' width='240'> 
</iframe> 
</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'>Chat</div> 
</div> 
<div class='dhmbox-content-item'> 
<div> 
<center> 
<br/> 

</center> 
</div> 
</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'>Sekilas Info</div> 
</div> 
<div class='dhmbox-content-item'> 
<br/> 
</div> 
</div> 
</div> 
<div id='dhm-bar'> 
<div id='dhm-bar-container'> 
<div class='dhm-title'> 
<a href='http://www.facebook.com/toejoeh124' target='_blank'> 
<img border='0' src='http://static.ak.fbcdn.net/favicon.ico?8:132011'/> 
<div>Applications</div> 
</a> 
</div> 
<div class='dhm-title'> 
<a href='http://toejoeh124.blogspot.com/2008/12/google-earth.html'> 
<img border='0' src='http://img24.imageshack.us/img24/3547/bumig.png'/> 
</a> 
</div> 

<div class='dhm-title'> 
<a href='http://toejoeh124.blogspot.com/2008/12/tukaran-link.html' target='_blank'> 
<img border='0' src='http://b.static.ak.fbcdn.net/images/icons/group.gif'> 
</img> 
</a> 
</div> 
<div class='dhm-title'> 
<a href='http://toejoeh124.blogspot.com/'> 
<div>Bookmark BLOGGOA</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>

simpan template anda dan lihat hasilnya.......facebook toolbar sudah terpasang di bloga anda

karena facebook toolbar yang terpasang adalh facebook toolbarku...sobat bloger hanya perlu melakukan sedikit perubahan misalnya pada code <div class='dhmbox-content-title-main'>Notification</div> sobat bloger bisa mengganti tulisan itu dengan apa saja.....dan bisa mengganti script asli pada code tersebut (script recent comment ...pada kasus ini) sesuai dengan keinginan sobat.......

untuk Chatnya sobat hanya perlu mengganti dengan alamat shoutmix sobat...untuk mengetahui alamat shoutmix sobat sisa mengklik tand " + " pada shoutmix anda kemudian klik kanan tulisan Pop-up shoutbox dan pilih Copy Link Location dan pastekan pada alamat tersebut pada tulisan yang berwarna merah di code <iframe frameborder='0' height='350' scrolling='auto' src='http://www2.shoutmix.com/?questanoeq' title='BLOGGOA' width='240'> <br /> </iframe>

untuk yang lainnya sepertinya sobat bloger sudah dapat mengatur sendiri...dengan melihat code css yang aku berikan tadi.........

silahkan mencoba...dan komen jika posting BLOGGOAGOA kali ini bermanfaat.......

happy BLOGGING and FASEBUKKAN.......
Labels: ,

16 comments:

Poskan Komentar

 
Labels

Blogumulus by Roy Tanck and Amanda Fazani

Followers

Reccent Comments

© Free News Template Copyright by BLOGGOA | Template by Fanchon0706 | Blog Trick at BLOGGOA