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> :
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;
}
{
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&alt=json-in-script&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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFpYtvV9XsjGH0ZCuVnjhSs4012D7HCBvFHQxexaCovl1LQZ-iDejoq0GuW6LAfeTBv19QTymzSTCvbsW3XFC5U6GhxU9U44xJjg0lGl0n9baVItAznelGTfcB2M82iTaBQeqBo3wGvvbl/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>
<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&alt=json-in-script&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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFpYtvV9XsjGH0ZCuVnjhSs4012D7HCBvFHQxexaCovl1LQZ-iDejoq0GuW6LAfeTBv19QTymzSTCvbsW3XFC5U6GhxU9U44xJjg0lGl0n9baVItAznelGTfcB2M82iTaBQeqBo3wGvvbl/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.
- 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
Contoh silahkan cek Disini
mantap tu scriptnya...
Tutorial Blog | Iklan Baris
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..
info nya bagus nih....
mana yang mau di jitak kok ga da>>>>>
Udah diterapkan lebih dulu.. hahahaha
Sudah aku ambil sebelum di posting...
Hehhehee... tinggal edit2 biar lebih mantep sesuai templateku..
nice post sob.....
ho...ho.......poatingan ku telat...yach...mantap..nieh sob....
Waw,.mantabh tutorialnya,..
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
Sip2,.keren triknya..Semangat!!
mantaf brow.....
kyknya berat ya sob...?
yg berat apanya sob...kl toolbarnya g berat ko' sob..yg penting semua link sehat sob...
Wahhh, baiknya di Tes Ting dulu
kerja keras adalah energi kita
wah asik nie tutorialnya...coba ahhhh
thanks infonya!
artikel yang menarik dan informatif... makasih berbaginya sob...
jangan lupa kunjungan baliknya yaa...
wah keren nih sob infonya heheheeheh mantap ijin sedot ya...
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......
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...
Wah gila bener dah, thx sob atas infonya. Sangat bermanfaat, kreatif dan mak nyos di praktekin lgsung
script anda diatas msih ada yang kurang, struktur penutupnya nya tidak valid boz. tolong dicek
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...
makasi sobat, keren bgt infonya....^_^
salam kenal dari arie only
sama sama mas, thx juga udah direspon secepat kilat jadi bisa praktek hehe, Im follow juga xixixi....
Iya sob, maklum ga tau namanya... hahaha...
makasih ya sob... lgsg aku simpan dulu...
welcome 2010 world cup champion http://worldcup-champion.blogspot.com/2009/11/award-for-winner-golden-ball.html
ilmu baru lagi, syukron ya akhi
langsung dipraktekin , ijin bookmark ya sob
thank infonya kawannn...... facebookk emang trendd ya sekarangg
ini dia yg gw cari...makasih bos infonya
keren!
Ahmad :
bisa di pake buat website pribadi ga?
open source g ini gan ?
ahmad@ iya sob.. silahkan sesuaikan aja code HTMLnya..
Thank's...
nah ini dia, toolbar yg saya cari".. thanks :)