Membuat Facebook Toolbar

Diposkan oleh Hery Prasetyo Sunday, November 15, 2009
بسم الله الرحمن الرحيم

Facebook toolbar adalah toolbar untuk blogspot yang mirip dengan toolbar facebook yang terletak dibawah, biasanya untuk tempat chatting dan melihat beberapa update berita terbaru. Sekarang kita pun bisa membuat toolbar yang mirip dengan yang dimiliki facebook dengan kreasi kita sendiri.

Langsung saja, cara membuatnya adalah sebagai berikut :

- Login keBlogger dengan account kamu.
- Masuk ke"Tata Letak" kemudian "Edit HTML".
- jangan lupa centang "Expand Template Widget".
- copy paste code berikut dibawah <head> :

<script src='http://hapiajavascript.googlecode.com/files/facebook-toolbar.js' type='text/javascript'/>

- Cari code ]]></b:skin>, copy paste code CSS berikut diatasnya :

#dhm-bar
{
z-index: 999999999;
font-family: "lucida grande", tahoma, verdana;
font-size: 11px;
width: 100%;
position: fixed;
bottom: 0;
left: 0;
text-align: right;
min-width: 450px;
height: 26px;
}

#dhm-bar-container
{
height: 26px;
margin-left: 10px;
margin-right: 10px;
background:#fff;
background-position:top center;
border-left: 1px solid #B5B5B5;
border-right: 1px solid #B5B5B5;
}

.dhm-title
{
float: left;
font-family: "lucida grande", tahoma, verdana;
font-size: 11px;
margin: 0px;
width: auto;
text-align: left;
color: #333333;
background-repeat:repeat-x;
border-right: solid 1px #B5B5B5;
border-top: solid 1px #B5B5B5;
border-bottom-style: none;
display: block;
height: 25px;
}

.dhm-title a, .dhm-title a:hover, .dhm-title a:visited, .dhm-title a:active
{
text-decoration: none;
color: #000;
}

.dhm-title:hover
{
background-color: #FFF;
color:#000000;
cursor: pointer;
}

.dhm-title img
{
float: left;
margin: 3px;
}
.dhm-title div {
float: left;
margin: 4px 5px 0px 5px;
color: #000;
width: auto !important;
cursor:pointer;
}

.dhm-button-active
{
font-family: "lucida grande", tahoma, verdana;
font-size: 11px;
float: right;
margin: 0px;
height: 24px;
padding: 0px;
width: auto;
text-align: left;
background: #fff;
color: #000000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-top: solid 1px #FFF;
margin-right: -1px;
}

.dhm-button img, .dhm-button-active img
{
float: left;
margin: 3px;
}

.dhm-button div, .dhm-button-active div
{
font-family: "lucida grande", tahoma, verdana;
font-size: 11px;
padding: 5px 12px 0px 6px;
float: left;
height: 25px;
}

.dhm-button
{
float: right;
margin: 0px;
font-size: 9pt;
height: 25px;
padding: 0px;
width: auto;
text-align: left;
color: #333333;
background-repeat:repeat-x;
border-left: solid 1px #B5B5B5;
border-top: solid 1px #B5B5B5;
border-bottom-style: none;
display: block;
}

.dhm-button:hover
{
border-top: solid 1px #B5B5B5;
background:#FFF no-repeat center left;
color:#000000;
cursor: pointer;
}

.dhm-button-active:hover
{
cursor: pointer;
}

.dhmbox
{
z-index: 999999999;
font-family: "lucida grande", tahoma, verdana;
font-size: 11px;
position: fixed;
bottom: 24px;
float:right;
}

.dhmbox-content
{
height: auto;
background-color: #fff;
border: solid 1px #333333;
display: none;
}

.dhmbox-content-show
{
height: auto;
background-color: #fff;
border: solid 1px #333333;
display: block;
text-align:left;
}

.dhmbox-content-title
{
height:20px;
background-color: #526EA6;
border-bottom: solid 1px #333333;
display: table;
color:#FFFFFF;
font-weight:bold;
float:left;
}

.dhmbox-content-title-close
{
float:right;
background:#fff;
width:7px;
height:2px;
margin-top:10px;
margin-right:3px;
cursor: pointer;
padding-right: 5px;
}

.dhmbox-content-title-main
{
color:#FFFFFF;
float:left;
padding-left: 5px;
}

.dhmbox-content-item
{
height:auto;
margin:4px;
padding:2px;
}


- Kemudian copy paste code berikut diatas </body> :

<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.hapiamesir.org/' target='_blank'>HAPIA Mesir</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 frameborder='0' height='400' scrolling='auto' src='http://www4.shoutmix.com/?hapia_mesir' title='hapia_mesir' width='250'>
<a href='http://www4.shoutmix.com/?hapia_mesir'>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/>
<script src="http://hapiajavascript.googlecode.com/files/post-terakhir.js"></script>
<script>var numposts = 10; var showpostdate = true; var showpostsummary = true; var numchars = 100; </script>
<script src="http://www.artikelislami.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://www.facebook.com/groups.php?ref=sb#/group.php?gid=206345350434' 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://www.wordpress.com' target='_blank'>
<img border='0' src='http://s.wordpress.org/favicon.ico?3'/>
</a>
</div>

<div class='dhm-title'>
<a href='http://aulad-15.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/group/tabmain.php?gid=1460020' 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.hapiamesir.org' target='_blank'>
<div>HAPIA Mesir</div> </a>
</div>


<div class='dhm-button' id='dhm-button-1' onclick='showDHMPopup(1);'>
<img src='http://l.yimg.com/a/i/us/msg/emoticons/pirate_2.gif'/><div><a href='ymsgr:sendIM?rae_zen'><b>ADMIN</b></a></div>

</div>
<div class='dhm-button' id='dhm-button-2' onclick='showDHMPopup(2);'>
<img height='17' src='http://4.bp.blogspot.com/_QeR8kbaWhLU/TA4XK0voaxI/AAAAAAAAA1w/wSp9AgkRUtg/s200/Smile_icon.jpg'/>
<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>Artikel Agama</b></blink></marquee></div>
</div>

</div>
</div>

</div>


- Simpan template.

* ganti link yang berwarna hijau dengan link yang kamu inginkan.

- hijau pertama dan kedua kamu ganti dengan link shoutmix kamu.
- hijau ketiga kamu ganti dengan link FB kamu.
- hijau keempat kamu ganti dengan link blog wordpress kamu.
- hijau kelima kamu ganti dengan link blogspot kamu.
- hijau keenam kamu ganti dengan link friendster kamu.
- hijau ketujuh kamu ganti ID "rae_zen" dengan ID YM kamu.

Untuk hasil lebih kreatif, silahkan ubah beberapa link yang kamu inginkan.
Contoh silahkan cek Disini


Jika postingan ini dirasa berguna bagi yang lain. silahkan share untuk berbagi.

Dapatkan Update Terbaru Dari HAPIA Mesir, Masukan Email Anda :

HAPIA Mesir Readers

Bookmark and Share

Direkomendasikan Untuk Dibaca :

36 Responses to Membuat Facebook Toolbar

  1. mantap tu scriptnya...

    Tutorial Blog | Iklan Baris

     
  2. Celebrities Says:
  3. saya numpang baca2 sebentar ya, infonya sangat menarik, thanks ya atas tip/triknya, semoga bermanfaat buat kita semua. boleh tukar link kagak mas?, kalo boleh infokan saya ya mas.. Terima kasih sebelumnya..

     
  4. info nya bagus nih....

     
  5. riyan Says:
  6. mana yang mau di jitak kok ga da>>>>>

     
  7. Tio Hasegawa Says:
  8. Udah diterapkan lebih dulu.. hahahaha

     
  9. Facechan Says:
  10. Sudah aku ambil sebelum di posting...

    Hehhehee... tinggal edit2 biar lebih mantep sesuai templateku..

    nice post sob.....

     
  11. BLOGGOA Says:
  12. ho...ho.......poatingan ku telat...yach...mantap..nieh sob....

     
  13. BangJo Says:
  14. Waw,.mantabh tutorialnya,..

     
  15. info keren abis....
    tapi kayaknya aku belom ngerti banget...
    soalnya..blog aku aja masih belom tuntas..and masih acak-acakan..
    sukses 4U

    salam persahabatan dari blogger linggau

     
  16. Cici Says:
  17. Sip2,.keren triknya..Semangat!!

     
  18. mantaf brow.....

     
  19. fajardesign Says:
  20. kyknya berat ya sob...?

     
  21. HAPIA Mesir Says:
  22. yg berat apanya sob...kl toolbarnya g berat ko' sob..yg penting semua link sehat sob...

     
  23. Wahhh, baiknya di Tes Ting dulu

    kerja keras adalah energi kita

     
  24. Miss Anna Says:
  25. wah asik nie tutorialnya...coba ahhhh

     
  26. @n@@ Says:
  27. thanks infonya!

     
  28. Neng Says:
  29. artikel yang menarik dan informatif... makasih berbaginya sob...

    jangan lupa kunjungan baliknya yaa...

     
  30. asep canda Says:
  31. wah keren nih sob infonya heheheeheh mantap ijin sedot ya...

     
  32. Facechan Says:
  33. Emang keren...........

    @fajar : gak berat... klo mao lebih mantep lagi backup script yg ada, trus di taruh di host sendiri.. buat jaga2 kalo yg punya script keabisan bantiwch.. hehehee......

     
  34. Kongjaya Says:
  35. Kalo mao ambil kode gambar awardnya gampang aja. klik kiri dari atas gambar tarik sampai akhir gambar lalu klik kanan dan klik kode sumber maka akan keluar kotak kodenya. ambil kode yang berwarna biru lalu copy dan paste di tempat yang kita mau.
    atau klik kiri semua tulisan dari atas berikut gambarnya sampai akhir tulisan lalu copy dan masuk login paste di entri baru untuk di posting. sebelum diposting tulisannya di edit dulu sesuai kata-kata yang kita inginkan. kira-kira jelas gak yah...

     
  36. prafangga Says:
  37. Wah gila bener dah, thx sob atas infonya. Sangat bermanfaat, kreatif dan mak nyos di praktekin lgsung

     
  38. script anda diatas msih ada yang kurang, struktur penutupnya nya tidak valid boz. tolong dicek

     
  39. HAPIA Mesir Says:
  40. prafagga permana@ sob scriptnya lengkap.....hanya saja ada "tanda petik yang dobel"...jadi script g mau disimpan...itu akibat dari kesalahan pengeditan....terima kasih sob...

    sekarang sudah siap digunakan...

     
  41. AriE ONly Says:
  42. makasi sobat, keren bgt infonya....^_^

    salam kenal dari arie only

     
  43. prafangga Says:
  44. sama sama mas, thx juga udah direspon secepat kilat jadi bisa praktek hehe, Im follow juga xixixi....

     
  45. Rock Says:
  46. Iya sob, maklum ga tau namanya... hahaha...
    makasih ya sob... lgsg aku simpan dulu...

     
  47. birthday Says:
  48. welcome 2010 world cup champion http://worldcup-champion.blogspot.com/2009/11/award-for-winner-golden-ball.html

     
  49. daywalker Says:
  50. ilmu baru lagi, syukron ya akhi

     
  51. bule Says:
  52. langsung dipraktekin , ijin bookmark ya sob

     
  53. tubir Says:
  54. thank infonya kawannn...... facebookk emang trendd ya sekarangg

     
  55. mini-tripod Says:
  56. ini dia yg gw cari...makasih bos infonya

     
  57. Soeharda Says:
  58. keren!

     
  59. Anonymous Says:
  60. Ahmad :
    bisa di pake buat website pribadi ga?
    open source g ini gan ?

     
  61. HAPIA Mesir Says:
  62. ahmad@ iya sob.. silahkan sesuaikan aja code HTMLnya..

     
  63. Thank's...

     
  64. oempak Says:
  65. nah ini dia, toolbar yg saya cari".. thanks :)

     

Post a Comment