Facebook Taskbar / Toolbar Widget

 Contoh Facebook Taskbar pada halaman web / blog itu seperti ini

Live Demo

Akhirnya jadi juga widget facebook taskbar yang sudah lama di nantikan kedatangannya ini. Hm..baiklah untuk tutorial kali ini tidak perlu banyak omong, kita langsung saja masuk ke cara pemasangan widget facebook taskbar/toolbar ini. Tutorial ini hanya di tujukan kepada pe-blogger level menengah ke atas jadi bagi pemula mungkin akan sedikit membingungkan.

1. Seperti biasa pastikan anda sudah login

2. Dibagian Layout, pilih tab Edit HTML jangan lupa centang tanda expand widget jika diperlukan,
kemudian cari kode </head> (gunakan CTRL + F agar lebih mudah mencarinya)

3. Kalau sudah ketemu, letakan kode dibawah ini tepat sebelum kode </head> tadi

<link href="http://sites.google.com/site/hitsukeproject/fbtoolbar-original.css" rel="stylesheet" type="text/css"/>

4. Save templatemu

5. Masih di bagian Layout, tapi kali ini pilih tab Page Element, lalu pilih Add Gadget yang
HTML/Javascript

6. Copy - Pastekan saja kode dibawah ini di dalamnya, kemudian di SAVE

Silahkan Copy - Paste kode dibawah. Supaya lebih mudah: klik tombol Select All lalu tekan CTRL + C atau boleh juga klik kanan lalu pilih copy

<!-- hitsukebar_start_section --><script src="http://sites.google.com/site/hitsukeproject/fbtoolbar.js" type="text/javascript"/></script><!-- Content_start_section --><div class="moduletable"><div id="hitsukebox1" style="right: 11px;" class="hitsukebox"><div id="hitsukebox-content1" style="width: 300px;" class="hitsukebox-content"><div style="width: 300px;" class="hitsukebox-content-title"><div class="hitsukebox-content-title-close" onclick="showhitsukePopup(1);"></div><div class="hitsukebox-content-title-main">My Top 10 Friends</div></div><div class="hitsukebox-content-item"><div class="mod_stumbleupon"><!-- A_Add your Code within --><ol><li><a href="http://hitsuke.blogspot.com/" target="_blank">Hitsuke</a></li><li><a href="http://inamuth2.blogspot.com/" target="_blank">Tulisan Biasa - Ina </a></li><li><a href="http://klepeut.blogspot.com/" target="_blank">Hendri K Bejo </a></li><li><a href="http://kluwan.blogspot.com/" target="_blank">Love is Beauty - Khusnul </a></li><li><a href="http://dapurpunyaku.blogspot.com/" target="_blank">Dapur Punyaku </a></li><li><a href="http://soff-tis.blogspot.com/ " target="_blank">Download Software Gratis</a></li><li><a href="http://deogracias86.blogspot.com/ " target="_blank">Dunia Komputer </a></li><li><a href="http://seribahasa.blogspot.com/ " target="_blank">Seri Bahasa </a></li></ol><!-- end --></div></div></div></div><div id="hitsukebox2" class="hitsukebox"><div id="hitsukebox-content2" style="width: 300px;" class="hitsukebox-content"><div style="width: 300px;" class="hitsukebox-content-title"><div class="hitsukebox-content-title-close" onclick="showhitsukePopup(2);"></div><div class="hitsukebox-content-title-main">Recent Post - Hitsuke</div></div><div class="hitsukebox-content-item"><div style="border: 1px solid rgb(255, 255, 255); padding: 5px; overflow: auto; width: 400px; height: 300px;"><!-- B_Add your Code within --><script language="JavaScript">imgr = new Array();imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";showRandomImg = true;boxwidth = 250;cellspacing = 8;borderColor = "#fff";bgTD = "#fff";thumbwidth = 40;thumbheight = 40;fntsize = 12;acolor = "#666";aBold = true;icon = " ";text = "comments";showPostDate = false;summaryPost = 40;summaryFontsize = 10;summaryColor = "#666";icon2 = " ";numposts = 15;home_page = "http://hitsuke.blogspot.com/";</script><script src="http://sites.google.com/site/hitsukeproject/recentposts_thumbnail.js" type="text/javascript"></script><!-- end --></div></div></div></div><div id="hitsukebox3" style="right: 235px;" class="hitsukebox"><div id="hitsukebox-content3" style="width: 250px;" class="hitsukebox-content"><div style="width: 250px;" class="hitsukebox-content-title"><div class="hitsukebox-content-title-close" onclick="showhitsukePopup(3);"></div><div class="hitsukebox-content-title-main">Chat</div></div><div class="hitsukebox-content-item"><div><!-- C_Add your Code within --><center><br/><iframe scrolling="auto" frameborder="0" width="250" src="http://www4.shoutmix.com/?shoutboxhitsuke" height="400" title="hitsuke"><a href="http://www4.shoutmix.com/?shoutboxhitsuke">View shoutbox</a></iframe></center><!-- end --></div></div></div></div><div id="hitsukebox4" style="right: 364px;" class="hitsukebox"><div id="hitsukebox-content4" style="width: 300px;" class="hitsukebox-content"><div style="width: 300px;" class="hitsukebox-content-title"><div class="hitsukebox-content-title-close" onclick="showhitsukePopup(4);"></div><div class="hitsukebox-content-title-main">Google Chat</div></div><div class="hitsukebox-content-item"><!-- D_Add your Code within --><iframe border="0" frameborder="0" marginheight="0" marginwidth="0" src="http://www.google.com/friendconnect/discuss?scope=site&topic=Hitsuke" style="border: 0pt none; height: 400px; margin: 0pt; width: 280px;" scrolling="no" allowtransparency="true"></iframe><!-- end --></div></div></div><!-- Content_end_section --><div id="hitsuke-bar"><div id="hitsuke-bar-container"><div class="hitsuke-title"><script>function fbs_click() {u=location.href;t=document.title;window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');return false;}</script><a class="vebyoFX" href="http://www.facebook.com/share.php?u=<data:post.url>" target="_blank" onclick="return fbs_click()"><img border="0" src="http://static.ak.fbcdn.net/rsrc.php/z9Q0Q/hash/8yhim1ep.ico"/><div>Share on facebook</div><span>Klik untuk Bagikan artikel ini ke semua temanmu di facebook</span></a></div><div class="hitsuke-title"><a href="http://feeds.feedburner.com/hitsuke" target="_blank" rel="alternate" type="application/rss+xml"><img alt="Hitsuke's Blog Rss feed" style="vertical-align:middle;border:0" src="http://www.feedburner.com/fb/images/pub/feed-icon16x16.png"/><span>Subscribe my feed</span></a></div><div class="hitsuke-title"><a alt="Blogger" href="http://www.blogger.com/" target="_blank"><img border="0" src="http://www.blogger.com/favicon.ico"/><span>Login Blogger</span></a></div><div class="hitsuke-title"><a alt="Gmail" href="http://www.gmail.com/" target="_blank"><img border="0" src="http://mail.google.com/mail/images/favicon.ico"/><span>Login Gmail</span></a></div><div class="hitsuke-title"><a alt="Yahoo" href="http://www.yahoo.com/" target="_blank"><img border="0" src="http://www.favicon.cc/favicon/771/9/favicon.png"/><span>Login Yahoo</span></a></div><div id="hitsuke-button-1" class="hitsuke-button" onclick="showhitsukePopup(1);"><img src="http://i640.photobucket.com/albums/uu123/vus4fb/chat/chat_online.png"/><div>My Top 10 Friends</div></div><div id="hitsuke-button-2" class="hitsuke-button" onclick="showhitsukePopup(2);"><img src="http://i683.photobucket.com/albums/vv193/vebyo/FavHeader.gif" height="17"/><div>Recent Post</div>i</div><div id="hitsuke-button-3" class="hitsuke-button" onclick="showhitsukePopup(3);"><img src="http://i683.photobucket.com/albums/vv193/vebyo/Guest-G.gif"/><div><b><blink>Guest Book</blink></b></div></div><div id="hitsuke-button-4" class="hitsuke-button" onclick="showhitsukePopup(4);"><div><blink><img src="http://www.google.co.id/favicon.ico"/></blink>Google Chat</div></div></div></div></div><!-- hitsukebar_end_section -->

Nah sekarang yang paling perlu kamu lakukan sekarang adalah mengganti kode Buku tamu, Recent Post ( Postingan terbaru dengan gambar thumbnail + penghitung komentar), dan yang lainnya yang kamu anggap perlu untuk diganti. Tapi ingat, hanya kode yang berwarna hitam dan berkedip sajalah yang boleh kamu ganti. Widget facebook Taskbar ini juga sudah dilengkapi dengan tombol share on facebooknya sekalian jadi kan gampang buat sharing ma teman-teman kita di facebook.hehe..^_^

Oh iya hitsuke ampe lupa...Widget facebook taskbar ini mempunyai dua macam style yang bisa kamu pilih dengan cara mengganti kode cssnya.

1. Original Facebook Taskbar Style

<link href="http://sites.google.com/site/hitsukeproject/fbtoolbar-original.css" rel="stylesheet" type="text/css"/>

2. Blue Facebook Taskbar 

<link href="http://sites.google.com/site/hitsukeproject/fbtoolbar-blue.css" rel="stylesheet" type="text/css"/>

cara mengganti style nya mudah saja. Cari kode <link href="http://sites.google.com/site/hitsukeproject/fbtoolbar-original.css" rel="stylesheet" type="text/css"/> yang kamu letakkan sebelum </head> tadi kemudian ganti saja link CSS-nya dengan salah satu link CSS di atas.

Note:
Bagi sobat hitsuke yang tercantum linknya diatas sebagai Top 10 Friends, silahkan Copy-Paste artikel ini dengan catatan harus mencantumkan link sumber asli artikelnya. Hal ini juga berlaku bagi para Plagiat, tolong cantumkan link sumber artikelnya, kalau tidak lo bakal malu ndiri...n reputasi blogmu bakalan hancur.