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.

Post Title

→

Facebook Taskbar / Toolbar Widget

Post URL

→

https://guidice-galleries.blogspot.com/2009/12/facebook-taskbar-toolbar-widget.html

Visit guidice galleries for Daily Updated Wedding Dresses Collection

The New Google Translate - Translator Widget (Jump Menu Type)

Akhirnya ku menemukanmu. Kayak judul lagu yah..!? hehehe.... Itu mah bukan judul lagu x. Kata itu hitsuke bilang ketika melihat translator baru yang hitsuke temukan ketika jalan jalan ke blog sobat, tapi hitsuke lupa nemunya diblog siapa soalnya udah lama banget sih..he..^_^. Ingat nggak sobat ketika hitsuke ngisi buku tamu, hitsuke kan pernah bilang begini "Jalan-jalan ke blog sobat sambil cari insprirasi." Nah pada suatu hari akhirnya hitsuke terhenti sejenak di suatu blog dan heran melihat translatornya kox beda yah..?? trus hitsuke coba ternyata KEREN..!! tanpa pikir panjang lagi langsung hitsuke SADAP deh translatornya dengan menggunakan shortcut key ctrl + u habis itu langsung taruh di blog..hehehe

Ok..kita langsung masuk ke intinya saja. Translator Widget baru yang dari Google ini ternyata jauh lebih keren, sederhana, dan akurat dari versi sebelumnya. Keunggulannya adalah sebagai berikut







1. Karena menggunakan fungsi jump menu jadi tidak memakan banyak tempat di blog
2. Cara mentranslate / menerjemahkannya jauh lebih akurat
3. Tidak memakan waktu lama ketika proses penerjemahan
4. Tersedia lebih dari 12 bahasa (klo yang lama kan cuma 12)
5. Terjemahannya langsung di blog kita tanpa berpindah ke halaman lain

udah ah capek bikinnya, mendingan dicoba langsung aja ntar pasti langsung ngerti sendiri. COPY - PASTE code di bawah ini yah

<div id="google_translate_element"></div><script>

function googleTranslateElementInit() {

new google.translate.TranslateElement({

pageLanguage: 'en'

}, 'google_translate_element');

}

</script><script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

<a href="http://hitsuke.blogspot.com/2009/12/new-google-translate-translator-widget.html" title="klik disini untuk mengambil widget yang seperti ini"> Mau? </a>

Taruh kode diatas didalam gadget HTML / javascript atau boleh juga langsung di masukin ke dalam template seperti punya ku ini. Jangan lupa di SAVE.

Klo sobat mau bandingin perbedaannya, silakan ambil Google Translate (Glowing Mirror Flag Type) yang lama di bawah ini







<font color="white"><b>TRANSLATOR</b><font><br/>

<align right=""><style>
.google_translate img {

filter:alpha(opacity=100);

-moz-opacity: 1.0;

opacity: 1.0;

border:0;

}

.google_translate:hover img {

filter:alpha(opacity=30);

-moz-opacity: 0.30;

opacity: 0.30;

border:0;

}

.google_translatextra:hover img {

filter:alpha(opacity=0.30);

-moz-opacity: 0.30;

opacity: 0.30;

border:0;

}

</style>
</align></font><div>
<font><a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cen&amp;hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz5OL1V0PhtCBxrgTcW2FKpUlMUn1X3-Q9Q2U1B1OfmdPg1JQDFLh1G1LeyxMBmOpDxDopG03B_v2H4TAL6vK-l60OeId9ZWj4jBseSj3ReH8WvGT4KJzzre5Ce5v3v5_Tg4ZQ1vthOVU/?imgmax=800" style="cursor: pointer; margin-right: 10px;" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cfr&amp;hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhXR9TfoDlJvlPNWUBYOYn0I6WveqkfUCTO7tojfcvrnViCuvpe8jG-oJ8HFUfNXrcuEJVj-tSwlaiH9R9R5xzcijIkH1DDYXKwZj_KNdg_FFpbbPFacs3VCLDvYACiN_41pOmZlkgepU/?imgmax=800" style="cursor: pointer; margin-right: 10px;" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cde&amp;hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdxB6hJv9AjfBQu8apaJNe0XZ3tr_8E5Ed6n-KIJqaAfHwzp0kaq2pz9_unVs0egEQpeoRW84GnkmAv-XHbnBVWvTw2KPGP8hB7awGgLitGqpQ8pP0Z6WL1Is3SsNJfPnrfzxdc8l7lZv_/?imgmax=800" style="cursor: pointer; margin-right: 10px;" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Ces&amp;hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhmu0qTQdECT4gAeN0CDPP3HnFOHo3serUm53W_TkepmU-RUxif4vQqadFg5OLJca5NsyySLTM-msCq0NsQCHcBPW-ZQoqLWkvvdGSu5LLVd7eDaYuUUK3SPPGZXDQdthW-XYwlJmgEY4r/?imgmax=800" style="cursor: pointer; margin-right: 10px;" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cit&amp;hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHkQq4kv10PgeB6S2aI8QXYqiWB6psoq2kXS2JkP6JIzVxFiAf5Q7jDd1s0ilA9m160I7V1b9CwGfLtTN0j1aRlZ1Zhf-shXEhuygq0ulJO073aXxms9IJtvnhnOj_yglywubYl3Qp63k/?imgmax=800" style="cursor: pointer; margin-right: 10px;" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cnl&amp;hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp0PrTQPUf5jKgHX5cVtCrNVtRM6IOLLRZ78dxorx9R4IaCZqRMwSzFig515PTHJ-jtvMQhivMAvhk7hUAM0dIx-FO5oCaxJZScjj3ogPn9z7TbXpitdB39-YiPFnP9Mg_nsuMiM0l54U/?imgmax=800" style="cursor: pointer; margin-right: 10px;" width="24"/></a>

<br/><br/>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cru&amp;hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVkCyJkKemkllJXyXGUQGkYCIJtr6tjZMqtcH95LbBDx-ueGoK30WvVOO3wealwGVlra9UBago86Dv_6cIVc9EIsu_MBcpZsmIj-iFyrTIu2BcL4v_NS3fX_mr12DavBf6yVMab2BnZdo/?imgmax=800" style="cursor: pointer; margin-right: 10px;" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cpt&amp;hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDlB-juGcjWQ4bYVkPuGp2F7K8ZhyojKiLMrlS8PDTTPhGR3fO_VUTy0LHHw2OP23AhYF-t1Mshj-qijCnya5m61QouQ3TcD8NKpy2c85K1DLt2MtshavbLbK6KD2HBMb1erzjNooMkMA/?imgmax=800" style="cursor: pointer; margin-right: 10px;" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cja&amp;hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV1_142CoiFrVzx1el0scCVi5H-5vGEDBhjdZQRC-kkovwECx1qIZ100xfBEadVxgf4TWN1BFhJPDoNW2AWrqkF9hu2qIYfQRwlsXFYs33HGJIH-Kbr2_-8ejJmV5Wca-5zAOfy_-ZiNXg/?imgmax=800" style="cursor: pointer; margin-right: 10px;" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.oogle.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cko&amp;hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiFYiL0SLqtcUPVkQXgXt66mqgtB390X44M0f3ERbgXxxUNQ_uPMnmQI2epTM-NowNDJkpitmS0MTI8QzfOIvaDJZMhDqrwQRwdXOT4fE0D7XFpL_AJ_tydZsBhc8DOW3iH2cw4eEp44o/?imgmax=800" style="cursor: pointer; margin-right: 10px;" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Car&amp;hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZKm3Se7pjCQZo4K0PnGJFmG1-VFqDBmqP2pq6vnpxe9Kr9nEXdBiM1k5WOwWIE8KmQHFmqfA6Y5AkE78k1u7RS46eukHUrkp_tMzHewupVjpNvEjvMRQ-TzgP2ZHqbBlNgM3eCeSQwTY/?imgmax=800" style="cursor: pointer; margin-right: 10px;" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Czh-CN&amp;hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXTROqjKPiKLo71h_vKIJqWnZ_n9yptGWAhu7aXEv3mxDz5VK-flDl8TrDRfM2WgmXW0zZocL8VFm3eAiCYd7XIx49dCJphAjYkyOSbrmm5DnUIKUOSRWXGXaCT9bX8XF_AVAiC66yjWM/?imgmax=800" style="cursor: pointer; margin-right: 10px;" width="24"/></a>

</font></div>
<div 0px="" 0px&#8221;="" style="margin: 10px;" 3px="">


</div><font></font></font><a href="http://hitsuke.blogspot.com/2009/12/new-google-translate-translator-widget.html" title="Klik disini untuk mengambil widget ini"> Mau..? </a>




bagi pemula mungkin bertanya "Gimana cara masangnya neh..??" ok dhe hitsuke jelasin cara memasang widget Google translate ini. Simak saja langkah-langkah dibawah ini dengan seksama ^_^




1. Pastikan sobat udah login di blogger
2. Pada halaman dasboard pilih Layout / Tata letak
3. Sekarang sobatkan sudah berada di halaman page element lalu pilih Add Gadget -> pilih yang HTML / Javascript
4. Copy kode di atas lalu Paste-kan kedalam kotak HTML / Javascript yang kamu pilih tadi.
5. Setelah itu di SAVE
6. Ok lihat blognya..

Post Title

→

The New Google Translate - Translator Widget (Jump Menu Type)

Post URL

→

https://guidice-galleries.blogspot.com/2009/11/new-google-translate-translator-widget.html

Visit guidice galleries for Daily Updated Wedding Dresses Collection