Otomotif and Computer

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

<script src="http://sites.google.com/site/hitsukeproject/fbtoolbar.js" type="text/javascript"/></script>



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


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



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

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


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

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

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

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

</div>

</div>

</div>


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

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.

sumber : Diambil dari hitsuke.blogspot.com