Cara Membuat Facebook Taskbar

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)
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"/>

Save templatemu

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

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

<!-- 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"&gt;

<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 -->


Script Bisa di Edit dengan kemauan kamu !!

Untuk CSS Style bisa anda lihat :


Blue Style Facebook
Dengan Script : <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.


udah Jadi kan ? Selamat Mencoba Semoga Berhasil !

Sumber : http://hitsuke.blogspot.com/