Showing posts with label Widget. Show all posts
Showing posts with label Widget. Show all posts

Wednesday, July 31, 2013

Cara Memasang Widget di Blogspot | Blogger

Cara Memasang Widget di Blogspot | Blogger
Widget merupakan fiture blog yang sangat penting dalam mendukung performa dari blog kita. Pada blogspot tersedia fiture yang sudah ada, hanya tinggal mensetting di mana kita akan meletakkannya. Tapi karena layanan blogspot ini adalah gratis, fiturenya pun menjadi serba terbatas. Karena inilah kita perlu untuk menambahkan widget baru pada blog kita, yang dirasa sangat bermanfaat seperti memasang widget SEO, memasang widget statistik blog, iklan sampai pada share button untuk memudahkan pengunjung dalam membookmark blog kita. Dan tentunya masih banyak lainnya..

Berikut penjelasan cara memasang widget di blogspot atau blogger blog kita :

1. Pertama kita login ke akun blogspot atau blogger.
2. Pada halaman Dasbor klik menu Rancangan.
Cara Memasang Widget di Blogspot | Blogger

Cara Memasang Widget di Blogspot | Blogger
3. lalu kita akan masuk pada halaman Elemen Laman. Disini kita bisa memilih tempat mana yang akan kita tambahkan widget tersebut. Apakah di sidebar, footer atau dalam posting blog kita. Caranya adalah kita klik link Tambah Gadget.
4. Selanjutnya akan tampil window. Untuk memasang widget baru, kita pilih HTML/Javascript.

5.Pada halaman yang terbuka selanjutnya, kita isi kotak Judul kemudian paste script widget yang ingin kita pasang dalam kotak Konten blog.
Cara Memasang Widget di Blogspot | Blogger
6. Terakhir adalah menyimpannya dengan cara mengklik tombol Simpan.
Jika kita ingin mengubah tempat widget tersebut, maka di halaman Elemen Laman, kita harus menggeser arah cursor ketempat yang diinginkan. Lalu tekan tombol Simpan.

Semoga pembahasan mengenai cara memasang / menambah widget di blogspot bermanfaat untuk anda...

Sunday, May 13, 2012

Cara membuat RecentPost dengan gambar

RecentPost dan Plus Gambar

Setelah cukup lama  mengutak-atik beberapa gadget bloglist, akhirnya saya menemukan widget baru yang bisa menampilkan feed berikut gambarnya ( recentpost thumbnails ), yang dalam beberapa hal saya setuju, widget feed thumbnails ini jauh lebih mudah untuk saya  konfigurasi dari pada gadget bloglist.
eh tidak ding, karena meskipun mudah pada awalnya saya cukup repot juga xixixi, karena widget ini di tampilkan atau mengunakan table, yang saya sendiri kurang pamiliar dengan html table. tapi setelah mencoba mengutak-atiknya dan mencari reperensi tengtang table ini, akhirnya saya bisa juga memainkan sedikit jurus- jurus  css untuk properti table.
ilustrasi recentpost thumbnais.

gam 01a


Jika anda tertarik ingin memasangnya, silahkan lakukan prosedur berikut ini.
1.Buka tab Edit Elemen kemudian pilih atau tambahkan gadget Htm/Javascript.
2. Setelah itu masukan script di bawah ini.


<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://librarysupporter.googlepages.com/thumb.jpg";
imgr[1] = "http://librarysupporter.googlepages.com/thumb1.jpg";
imgr[2] = "http://librarysupporter.googlepages.com/thumb2.jpg";
imgr[3] = "http://librarysupporter.googlepages.com/thumb3.jpg";
imgr[4] = "http://librarysupporter.googlepages.com/thumb4.jpg";
showRandomImg = true;
tablewidth = 300;
tableheight = 50;
cellspacing = 0;
borderColor = "none";
bgTD = " ";
imgwidth = 50;
imgheight = 40;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "";
showPostDate = false;
summaryPost = 50;
summaryFontsize = 11;
summaryColor = "#666";
icon2 = "  ";
numposts = 5;
home_page = "http://jaloee.blogspot.com/";
</script>
<script src="http://librarysupporter.googlepages.com/recentposts_thumb.js" type="text/javascript"></script>

3. Stop !!! jangan  di save dulu :) . karena kita harus mengetahui beberapa hal pada script di atas.
note 1
01 a
Script ini menjelaskan jika postingan kita tidak mempunyai sebuah gambar, maka gambar ( url gambar di atas ), akan mengantikanya. dan gambarnya akan di pilih secara acak ( true ).

note 2
02 a
Script ini menerankan lebar tabel, jarak antar cell, warna border, latar belakang cell. yang dapat anda konfigurasi dan di sesuaikan dengan lebar sidebar dan warna blog.

note 3
03 a
Script untuk tampilan lebar dan tinggi gambar. – kita bisa konfigurasi ulang.

note 4
04 a
Tampilan font, warna text link, text tebal.

note 5
05 a
Script tentang jumlah descriptsi recent post yang akan di tampilkan = 50; + .. , ukuran font, warna font, dan jumlah recentpost-nya = 5 ; ( bisa lebih bisa kurang )

note 6
06 a
Url blog yang akan di tampilkan recenspostnya , - home-page = http://bloganda.com/

note 7
07 a

Alamat kode javascript yang mengatur secara keseluruhan widget recentpost thumbail ini. dan salah satunya untuk kasus terntentu   kita bisa mengatur parameter feed / recent post yang akan di tampilkan. – ( tergantung kebutuhan ).
a. misalkan, saya hanya ingin menampilkan recent post dalam label atau categorie artikel “ Photoshop “ saja.
pertama buka kode javascrip dengan program notepad. kemudian cari dan ganti kode ini.
feeds/posts/default?max-results=
dengan paramter url feed ini.
feeds/posts/default/-/Photoshop?max-results=
Setelah saya menyimpanya dengan nama file recentphotoshop.js dan uploadnya.
( tentang mengatur parameter feed pernah saya tulis di recent post label. )
Selain itu ada lagi yang bisa ganti beberapa kode pada file javascript ini. seperti menganti tabelnya menjadi satu colom dua row. yang menghasilkan gambar feed-nya di atas, sedangkan posisi keterangan feednya di bawah.

ilustrasi gambar.
gam 02 a

wokeh deh selamat berkreasi dengan widget recent post barunya.

source : mlxperience oleh : http://catalog-tutorial.blogspot.com/2009/02/recentpost-dan-plus-gambar.html dipubliskan kembali oleh : Ghost Blog - http://newbe-tutorial.blogspot.com/

Recent Post Berdasarkan Label Artikel ( non java script )

oke, sebelumnya saya telah membahas tentang cara membuat Recent Post dengan JavaScript, Maka sekarang saya akan Membahas tentang Membuat Recent Post Non java script (No Ribet)
Bagaimana cara menambahkan Post Terbaru ( Recent Post ) ke dalam blog kita ? 
Sebenarnya untuk caranya sendiri banyak, namun di sini saya lebih suka mengunakan Elemen Feed yang sudah tersedia dalam dasboard , kelebihannya mengunakan elemen feed ini tidak mempengaruhi beban halaman blog  ketika ngeloding. Sangat berbeda speed-nya  jika kita mengunakan  recent post mengunakan sebuah java-script.
Sedangkan kekuranganya mengunakan elemen feed hanya di batasi 5 post terbaru saja.
Namun tenang  saja dengan sedikit trick  kita akan menampilkan yang 5 post terbatas itu semenarik mungkin.Yaitu dengan cara menampilkan recent post berdasarkan label artikel. hasilnya bisa di lihat di samping blog ini. atau trick ke dua dengan cara mengatur tanggal postinganya.


Cara Pertama

Dalam Halaman  Elemen tambahkan sebuah Elemen Feed.


Setelah terbuka masukan alamat feed berdasarkan label

ini contohna :
http://namablogkamu.com/feeds/posts/default/-/labelname
ganti namablogkamu dengan alamat blog kita
kemudian ganti LabelName dengan nama label yang ada di blog kita.
Note
Perlu di ketahui jika label nya mengunakan spasi biasanya  penulisan na seperti ini. contoh  : Blogger Bab 2 menjadi  Blogger%20Bab%202 -
%20 = menunjukan spasi.

Untuk itu bagusnya alamat labelnya di copy paste dulu ke dalam program Notepad.
contoh :
http://namamu.blogspot.com/search/label/Blogger%20Bab%202
yang berwarna menunjukan nama label blog kita.
Setelah ok, klik tulisan Lanjutkan, jika tidak ada kesalahan  kemudian atur jumlah feed na ke angka 5.
Setelah beres klik Simpan Perubahan.

Cara Kedua.

Trick atau Cara kedua ini saya berasumsi, kita biasanya menampilkan postingan dalam halaman blog utama  kurang lebih sebanyak 5 postingan. Agar menampilkan Recent Post dengan elemen feed ini meloncat atau mundur pada postingan yang 6,7,8 dst ( yang biasanya menjadi arsip ).
caranya dengan merubah parameter atau queri  seperti ini.
http://namamu.blogspot.com/feeds/posts/default/?start-index=5
?start-index=5  artinya meloncat atau mundur pada postingan 5 sebelumnya. jadi ganti angka 5 tersebut dengan yang kita kehendaki.
Ok selamat mencoba :)

http://catalog-tutorial.blogspot.com/2008/05/recent-post-berdasarkan-label-artikel.html

Saturday, May 12, 2012

Cara Membuat Tombol Back To Top Melayang Blogger/Blogspot V2

back to top V2
Fitur Back To Top/Scroll To Top, seperti yang telah dijelaskan dalam Cara Membuat Fitur/Tombol Back To Top di Blogger (V1), adalah fitur navigasi blog yang berfungsi sebagai shortcut agar pengunjung bisa kembali ke bagian atas halaman blog dengan cepat dan hanya dalam satu klik. 

Tombol back to Top Blogspot kali ini berjenis melayang (floating) dan berada di bagian pojok kanan bawah. Kodenya pun sedehana dan tidak menggunakan javascript/jquery sehingga waktu muatnya lebih pendek. Script ini dibuat berdasarkan perintah link yang mengacu ke wrapper (#) dengan ditambah aturan CSS position-styling. Easy.

Cara Memasang Back to Top Blogger/Blogspot V2:
1. Copy kode berikut:
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Scroll/Back to Top"><img src="url gambar back to top blog" /></a>
Anda dapat mengganti title Scroll/Back to Top dengan kata-kata yang diinginkan. Ganti url gambar back to top blog dengan gambar back to top anda, atau copy salah satu dari beberapa gambar "Back To Top" di posting tips-tricks blogger sebelumnya: Cara Membuat Fitur/Tombol Back To Top di Blogger (V1), atau bisa juga googling dengan keyword "back to top button image". Edit ukurannya sesuai dengan besar yang diinginkan, lalu upload. Masukkan url gambar yang telah diupload ke dalam script. 

2. Buka dashboard > Design/Rancangan > Klik Add a/Tambah Gadget > Pilih opsi HTML/Javascript

3. Paste/letakkan kode tersebut, lalu save.

Posisi gadget dimanapun tidak masalah karena letak tombol tersebut fixed (tetap), yang menjadikannya melayang.

4. Done!

Have Fun with your Back to Top Button!

Cara Membuat Fitur/Tombol Back To Top di Blogger-Blogspot

 membuat tombol/fitur back to top/kembali ke atas blogger-blogspot
Back to Top Button atau Tombol Kembali ke Atas adalah fitur blog yang mempermudah pengunjung/visitor blog kembali ke bagian atas halaman dengan sekali klik tanpa melakukan mouse scrolling. Efeknya sangat besar sekali terutama bagi blog yang memiliki halaman panjang. Letak dari tombol fitur back to top kali ini ada di bagian footer sebelah kanan.

Cara menambahkan fitur 'Back To Top' untuk Blogger-Blogspot:
1. Masuk ke edit HTML.
2. Cari kode tag </body> (Ctrl+F)
3. Masukkan kode berikut di atas </body>:
<a href='#' style='position: fixed; right: 15px; bottom: 15px; outline: medium none; border: 0px none;' title='Back to Top'><img alt='Back to Top' border='0'src='alamat url gambar Back to Top-mu'/></a>
Ganti title Back to Top dengan kata-kata yang disuka, misalnya 'return to top', 'kembali ke atas', 'balik ke atas', 'meluncur ke atas', 'balikan nyook', atau 'kembali ke laptop'... terserahlah, suka-suka elo... ^_^ Fungsinya untuk notifikasi ke pengunjung tentang kegunaan tombol tersebut.
Alt Back to TOP lebih baik ditinggalkan begitu saja kalo-kalo gambar gagal dimuat browser jadi tulisan itu masih nongol sebagai pengganti.
Gunakan gambar berikut, klik kanan copy (save as), trus upload dan host sendiri ya gambarnya, biar gak lelet and pengunjung gak melet-melet!

Atau Googling (cari juga di photobucket.com) gambar 'back to top/kembali ke atas' sendiri yang lebih keren dan sesuai dengan warna dan ukuran footer blog-mu, gunakan keyword "back to top button image", kemudian upload dan host gambar itu.
Ambil/copy direct link gambar dan ganti alamat url gambar Back to Top-mu dengan alamat url/link tersebut. Contoh:
<a href='#' style='position: fixed; right: 15px; bottom: 15px; outline: medium none; border: 0px none;' title='Back to Top'><img alt='Back to Top' border='0'src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtmzYFr-IyShCRf6mX_YP0FTjkrqmJsMXgBh4TzNNb01tmbOtn81x9a6Slq8zS1MxuVYzA2kGSLo7gKTv996uNW3AQWhlvjiHtDOSMK8eyXfJEWH_CnoXWGTB81I1yGgFDRnwx73adz473/s1600/bttp-4.png'/></a>
Oke, udah? Belum? Buruan lah!

4. Kalau sudah dimasukkan semuanya dan pastikan tidak ada yang terlewat, save template HTML-nya.
5. Done! Fitur/Button Back To Top siap digunakan.


http://buka-rahasia.blogspot.com/2011/04/fitur-back-to-top-blogger-blogspot.html

Cara Membuat Widget Twitter Follow Us Melayang di Blogger/Blogspot

Konsep widget ini sama dengan tombol back to top melayang Blogger beberapa waktu yang lalu, yaitu dengan memberikan styling CSS: fixed position dan scrolling display pada link gambar untuk memberikan efek melayang.

Cara membuat/memasang:
1. . Masuk ke dashboard > Design/Rancangan > Klik Add a Gadget
2. Setelah pop up window muncul, pilih opsi HTML/Javascript
3. Kemudian copy kode berikut:
<br/><a style="display:scroll;position:fixed;bottom:200px;right:1px;" href="http://twitter.com/azmisurvivor target="_blank"><img style="border:0;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTvvTpwkU9a7uu2aDC49bM_TfeDYEoYH6DJ-UU70ZscVoTApyJO0xAjKJqjkmi7-6bQaOQkH9INAh8e-rPxR1MizDBsvQHCJvR-jGgnPA5UKSrncSAa2L6TvMq3krwhzJILLMM2f2Epddh/s1600/floatingtwitter.png" /></a>
Ganti azmisurvivor dengan  nama account Twitter anda. Jika anda ingin widget berada di sebelah kiri browser, ganti right dengan left.
4. Paste kode yang sudah di edit ke kolom configure HTML/Javascript.

 
5. Klik save.
6. Refresh blog dan lihat hasilnya.
Done and cheers!


Sumber : http://buka-rahasia.blogspot.com/2011/05/membuat-twitter-follow-us-melayang.html

Tuesday, December 20, 2011

Google Translate Versi Baru

Goggle translate sangat berguna, terutama apabila pengunjung datang dari mancanegara. Mereka tinggal mentranslate bahasa blog kita ke bahasa yang mereka inginkan. Saya pernah membahas tentang widget penerjemah google versi lama disini. versi lama atau versi baru sama-sama memiliki keuntungan. Versi lama lebih simpel sedangkan versi baru lebih menarik dan bagus untuk menghiasi blog kita :

Cara memasang widget Google translate versi baru sebagai berikut :

1. Login ke blogger --->> Tata letak --->> Elemen Halaman --->> Tambah gadget --->> Pilih HTML/Java Script.

2. Copy paste kode berikut : ( Pilih salah satu jenis widget google penerjemah yang sobat sukai )







ArabicKoreanJapaneseChinese SimplifiedRussianPortuguese
EnglishFrenchGermanSpainItalianDutch
Kodenya :

<center><a href="http://forantum.blogspot.com" target=" blank"><b>Google Translate</b></a></center>
<div style="overflow:no; width:100%px; height:100%px; padding: 5px; background: #FFFFFF;">
<style>
.google_translate img { filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; }
.google_translate:hover img { filter:alpha(opacity=30); -moz-opacity: 0.30; opacity: 0.30; }
.google_translatextra:hover img { filter:alpha(opacity=0.30); -moz-opacity: 0.30; opacity: 0.30; }
</style>
<center>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" src="http://img31.imageshack.us/img31/1661/pinginbelajarsaudiarabi.gif" style="cursor: pointer;margin-right:3px"/></a>


<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" src="http://img43.imageshack.us/img43/2771/pinginbelajarsouthkorea.gif" style="cursor: pointer;margin-right:3px"/></a>


<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" src="http://img34.imageshack.us/img34/4583/pinginbelajarjapan.gif" style="cursor: pointer;margin-right:3px"/></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)+'&langpair=id%7Czh-CN&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" src="http://img41.imageshack.us/img41/1681/pinginbelajarchina.gif" style="cursor: pointer;margin-right:3px"/></a>


<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" src="http://img32.imageshack.us/img32/7591/pinginbelajarrussia.gif" style="cursor: pointer;margin-right:3px"/></a>


<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cpt&hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" src="http://img31.imageshack.us/img31/7112/pinginbelajarbrazil.gif" style="cursor: pointer;margin-right:0px"/></a>
</center>


<center>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" src="http://img43.imageshack.us/img43/2598/pinginbelajarunitedking.gif" style="cursor: pointer;margin-right:3px"/></a>


<a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" src="http://img40.imageshack.us/img40/4035/pinginbelajarfrance.gif" style="cursor: pointer;margin-right:3px"/></a>


<a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" src="http://img38.imageshack.us/img38/344/pinginbelajargermany.gif" style="cursor: pointer;margin-right:3px"/></a>


<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" src="http://img41.imageshack.us/img41/1191/pinginbelajarspain.gif" style="cursor: pointer;margin-right:3px"/></a>


<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" src="http://img36.imageshack.us/img36/6670/pinginbelajaritalia.gif" style="cursor: pointer;margin-right:3px"/></a>


<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" src="http://img33.imageshack.us/img33/2439/pinginbelajarnetherland.gif" style="cursor: pointer;margin-right:0px"/></a>
</center>
</div>








ArabicKoreanJapaneseChinese SimplifiedRussianPortuguese
EnglishFrenchGermanSpainItalianDutch
Kodenya:

<center><a href="http://forantum.blogspot.com" target=" blank"><b>Google Translate</b></a></center>
<div style="overflow:no; width:100%px; height:100%px; padding: 5px; background: #FFFFFF;">
<style>
.google_translate img { filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; }
.google_translate:hover img { filter:alpha(opacity=30); -moz-opacity: 0.30; opacity: 0.30; }
.google_translatextra:hover img { filter:alpha(opacity=0.30); -moz-opacity: 0.30; opacity: 0.30; }
</style>
<center>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" src="http://img31.imageshack.us/img31/1661/pinginbelajarsaudiarabi.gif" style="cursor: pointer;margin-right:3px"/></a>


<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" src="http://img43.imageshack.us/img43/2771/pinginbelajarsouthkorea.gif" style="cursor: pointer;margin-right:3px"/></a>


<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" src="http://img34.imageshack.us/img34/4583/pinginbelajarjapan.gif" style="cursor: pointer;margin-right:3px"/></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)+'&langpair=id%7Czh-CN&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" src="http://img41.imageshack.us/img41/1681/pinginbelajarchina.gif" style="cursor: pointer;margin-right:0px"/></a>
</center>


<center>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" src="http://img32.imageshack.us/img32/7591/pinginbelajarrussia.gif" style="cursor: pointer;margin-right:3px"/></a>


<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cpt&hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" src="http://img31.imageshack.us/img31/7112/pinginbelajarbrazil.gif" style="cursor: pointer;margin-right:3px"/></a>


<a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" src="http://img43.imageshack.us/img43/2598/pinginbelajarunitedking.gif" style="cursor: pointer;margin-right:3px"/></a>


<a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" src="http://img40.imageshack.us/img40/4035/pinginbelajarfrance.gif" style="cursor: pointer;margin-right:0px"/></a>
</center>


<center>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" src="http://img38.imageshack.us/img38/344/pinginbelajargermany.gif" style="cursor: pointer;margin-right:3px"/></a>


<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" src="http://img41.imageshack.us/img41/1191/pinginbelajarspain.gif" style="cursor: pointer;margin-right:3px"/></a>


<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" src="http://img36.imageshack.us/img36/6670/pinginbelajaritalia.gif" style="cursor: pointer;margin-right:3px"/></a>


<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" src="http://img33.imageshack.us/img33/2439/pinginbelajarnetherland.gif" style="cursor: pointer;margin-right:0px"/></a>
</center>
</div>







ArabicKoreanJapaneseChinese Simplified
RussianPortugueseEnglishFrench
GermanSpainItalianDutch

Kodenya :




<center><a href="http://forantum.blogspot.com" target=" blank"><b>Google Translate</b></a></center>
<div style="overflow:no; width:100%px; height:100%px; padding: 5px; background: #FFFFFF;">
<style>
.google_translate img { filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; }
.google_translate:hover img { filter:alpha(opacity=30); -moz-opacity: 0.30; opacity: 0.30; }
.google_translatextra:hover img { filter:alpha(opacity=0.30); -moz-opacity: 0.30; opacity: 0.30; }
</style>
<center>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" src="http://img31.imageshack.us/img31/1661/pinginbelajarsaudiarabi.gif" style="cursor: pointer;margin-right:3px"/></a>


<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" src="http://img43.imageshack.us/img43/2771/pinginbelajarsouthkorea.gif" style="cursor: pointer;margin-right:3px"/></a>


<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" src="http://img34.imageshack.us/img34/4583/pinginbelajarjapan.gif" style="cursor: pointer;margin-right:0px"/></a>
</center>


<center>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Czh-CN&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" src="http://img41.imageshack.us/img41/1681/pinginbelajarchina.gif" style="cursor: pointer;margin-right:3px"/></a>


<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" src="http://img32.imageshack.us/img32/7591/pinginbelajarrussia.gif" style="cursor: pointer;margin-right:3px"/></a>


<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cpt&hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" src="http://img31.imageshack.us/img31/7112/pinginbelajarbrazil.gif" style="cursor: pointer;margin-right:0px"/></a>
</center>


<center>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" src="http://img43.imageshack.us/img43/2598/pinginbelajarunitedking.gif" style="cursor: pointer;margin-right:3px"/></a>


<a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" src="http://img40.imageshack.us/img40/4035/pinginbelajarfrance.gif" style="cursor: pointer;margin-right:3px"/></a>


<a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" src="http://img38.imageshack.us/img38/344/pinginbelajargermany.gif" style="cursor: pointer;margin-right:0px"/></a>
</center>


<center>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" src="http://img41.imageshack.us/img41/1191/pinginbelajarspain.gif" style="cursor: pointer;margin-right:3px"/></a>


<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" src="http://img36.imageshack.us/img36/6670/pinginbelajaritalia.gif" style="cursor: pointer;margin-right:3px"/></a>


<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" src="http://img33.imageshack.us/img33/2439/pinginbelajarnetherland.gif" style="cursor: pointer;margin-right:0px"/></a>
</center>
</div>
3. Simpan.

Ket : kode yang berwarna kuning adalah kode warna background widget, sobat dapat mengubahnya sesuai keinginan. kode warna dapat dilihat disini.

( Sumber : http://pinginbelajar.blogspot.com)