gubhug reyot
Energy Saving Mode Using CSS3

Move your mouse to go back to the page!
Gerakkan mouse anda dan silahkan nikmati kembali posting kami!

Copyright 2010 gubhugreyot.blogspot.com - All rights reserved

Sunday, 15 April 2012

Create 404 Error Page in Blogger with css3

Klik gambar di bawah ini untuk melihat dalam ukuran lebih normal!


Sesuatu yang jarang terlihat, apalagi tersentuh pasti acap terlupakan. Jika itu menyangkut blog, salah satu diantaranya tentulah halaman error 404 (tak di temukan) atau yang lebih dikenal dengan "404 Error Page" atau "page not Found". Halaman Error 404 muncul ketika sebuah URL tak dapat ditemukan akibat perubahan permalink. Ini banyak terjadi karena posting yang telah dihapus. Hal yang sama juga bisa terjadi akibat pencarian dengan penulisan URL yang tidak tepat. Untuk membuat halaman error 404 yang lebih bersahabat, blogger telah menyediakan sebuah fitur yang dapat anda akses melalui halaman dasbor.

D E M O :

Demo Error 404

Kode CSS :
.status-msg-wrap{
      position:fixed;
      z-index:9999;
      top:0;
      left:0;
      width:100%;
      height:100%;
      padding:0;
      margin:0;
      background: #7d7e7d;
      background: -o-linear-gradient(-45deg, #7d7e7d 1%,#6d6d6d 17%,#303030 17%,#6d6d6d 21%,#444444 28%,#6d6d6d 28%,#2b2b2b 30%,#6d6d6d 31%,#333333 35%,#828282 35%,#828282 91%,#333333 91%,#828282 92%);
      background: -moz-linear-gradient(-45deg, #7d7e7d 1%, #6d6d6d 17%, #303030 17%, #6d6d6d 21%, #444444 28%, #6d6d6d 28%, #2b2b2b 30%, #6d6d6d 31%, #333333 35%, #828282 35%, #828282 91%, #333333 91%, #828282 92%);
      background: -webkit-gradient(linear, left top, right bottom, color-stop(1%,#7d7e7d), color-stop(17%,#6d6d6d), color-stop(17%,#303030), color-stop(21%,#6d6d6d), color-stop(28%,#444444), color-stop(28%,#6d6d6d), color-stop(30%,#2b2b2b), color-stop(31%,#6d6d6d), color-stop(35%,#333333), color-stop(35%,#828282), color-stop(91%,#828282), color-stop(91%,#333333), color-stop(92%,#828282));
      background: -webkit-linear-gradient(-45deg, #7d7e7d 1%,#6d6d6d 17%,#303030 17%,#6d6d6d 21%,#444444 28%,#6d6d6d 28%,#2b2b2b 30%,#6d6d6d 31%,#333333 35%,#828282 35%,#828282 91%,#333333 91%,#828282 92%);
      background: -ms-linear-gradient(-45deg, #7d7e7d 1%,#6d6d6d 17%,#303030 17%,#6d6d6d 21%,#444444 28%,#6d6d6d 28%,#2b2b2b 30%,#6d6d6d 31%,#333333 35%,#828282 35%,#828282 91%,#333333 91%,#828282 92%);
      background: linear-gradient(-45deg, #7d7e7d 1%,#6d6d6d 17%,#303030 17%,#6d6d6d 21%,#444444 28%,#6d6d6d 28%,#2b2b2b 30%,#6d6d6d 31%,#333333 35%,#828282 35%,#828282 91%,#333333 91%,#828282 92%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7d7e7d', endColorstr='#828282',GradientType=1);}
.status-msg-body{
      font-size:24px;
      color:#eee;
      text-shadow:2px 2px 2px #000;
      margin:0 auto;
      padding:40px 100px;
      height:550px;
      width:800px;
}
.status-msg-body a{
      color:#FC0;
      text-decoration:none;
}
.status-msg-body a:hover{
      color:#6FF;
      text-decoration:none;
}
.status-msg-body img{
      display:block;
      margin:20px auto;
      text-align:center;
      opacity:0.7;
      filter:alpha(opacity=70);
      width:80%;
      height:400px;
      border-top-left-radius:45%;
      border-top-right-radius:45%;
      border-bottom-right-radius:90%;
      border-bottom-left-radius:90%;
      border:10px solid rgba(255,255,255,0.6);
      box-shadow:-2px -2px 2px #333,5px 5px 5px #000;
}
.status-msg-bg{
      background:transparent;
}
.status-msg-wrap:after{
      position:absolute;
      right:40px;
      top:92%;
      font-size:12px;
      font-family:arial;
      transform:rotate(-45deg);
      -o-transform:rotate(-45deg);
      -moz-transform:rotate(-45deg);
      -webkit-transform:rotate(-45deg);
      -ms-transform:rotate(-45deg);
      color:#000;
      content:"gubhugreyot";
      text-shadow:0 0 0 #fff;
}

Cara membuat halaman Error 404 :

  1. Simpan kode css di atas ]]></b:skin>
  2. Login ke Blogger.
  3. Dasbor (Dasboard).
  4. Bagi yang masih menggunakan Antar Muka Blogger Lama (Old Blogger Interface) lakukan Upgrade (Tingkatkan Versi Sekarang.) dan gunakan New Blogger Interface (Try the updated Blogger interface).
  5. Setelah upgrade selesai, klik "Settings/Setelan".
  6. Klik "Search preferences/Preferensi Penelusuran".
  7. Klik "Edit" pada "Kesalahan dan Pengalihan | Pesan Ubahsuaian untuk Laman Tidak Ditemukan" atau "Errors and redirections | Custom Page Not Found".
  8. Copy dan pastekan xHTML di bawah dalam box yang tersedia (setelah klik Edit).
  9. Klik "Simpan perubahan (Save Changes)".
  10. untuk menyimpan kode CSS lanjutkan Klik "Template".
  11. Klik "Edit HTML".
  12. Klik "Proceed"
  13. Cari kode ]]></b:skin>
  14. Letakkan kode CSS di atas ]]></b:skin>.
  15. Klik Save Template".
  16. Selesai!

xHTML :
Cihui... Rupanya anda tersesat! Kecian, deh... Hu ... makanya besok lagi klo mo bepergian bawa peta, dong! <a href="http://gubhugreyot.blogspot.com" title="Tuh ... liat ... si sono tuh jalannya. Hih... , dasar!">gubhugreyot : demos & tutorials</a>
<img src="https://lh6.googleusercontent.com/-bVNeoiocOiE/T24fY4ic83I/AAAAAAAAAgc/7_uZ-DFjdqI/s400/gubhugreyot_penelopecruz.jpg" />

Catatan/Keterangan :

  1. Ganti "Cihui... Rupanya anda tersesat! ... etc dengan kata yang lebih kejam ...! He .. he ... mangsudnya .. kebih bersahabat!"
  2. Ganti http://gubhugreyot.blogspot.com dengan URL blog anda.
  3. Ganti demos & tutorials dengan teks lain sesuai dengan materi posting.

Cara mencoba :

  1. Pilih salah satu posting dan copy URL posting tersebut.
  2. Rubah URL agar tidak sama/berubah dari alamat sesungguhnya.
    contoh
    http://gubhugreyot-demo-tutorial-blogger-2.blogspot.com/2012/03/tagcloud-cumulus-gaya-baru-flash.html
    menjadi :
    http://gubhugreyot-demo-tutorial-blogger-2.blogspot.com/2012/03/palsu-tagcloud-cumulus-gaya-baru-flash.html
  3. Lakukan pencarian menggunakan alamat (URL) paslsu tersebut.

Tuesday, 3 April 2012

Add Emoticon to Blogger Template Designer Comment Box

Komunikasi antar blogger, pembaca atau pengunjung blog memang seringkali terasa tak cukup jika hanya menggunakan kata-kata. Sebuah gambar dalam bentuk emoticon, yang diikut sertakan dalam sebuah komentar, sekalipun hanya berupa sebuah gambar yang tak seberapa besar (icon), namun justru bisa menjadi "ungkapan bagi sebuah ekspresi jiwa/perasaan" yang jika dituliskan perlu begitu banyak kata atau kalimat.

Agar pengunjung atau siapapun pemberi komentar dapat dengan mudah menyisipkan satu atau beberapa buah emoticon, seorang pemilik blog dapat menambahkan sebuah javascript yang disertai kode css dan xHTML. Ketiga elemen kode HTML ini akan membentuk sebuah fungsi yang memberi layanan berupa kemudahan bagi pengunjung untuk menambahkan emoticon pada sebuah komentar. Dengan menuliskan kode yang telah ditentukan, sebuah gambar emoticon akan ditampilkan bersamaan dengan diterbitkanya komentar.

Kode CSS :
img.myGRemo{width:24px;height:18px;padding:2px;border:1px solid #666;background:#ddd;float:left;box-shadow:2px 2px 2px #000;margin:2px;}
#GRemobox{border:2px solid #777;background:#aaa;padding:2px;float:left;width:760px;height:104px;}
.comments{position:relative;}
.comments #GRfloatico{position:fixed;bottom:10px;left:-820px;}
.comments:hover #GRfloatico{left:20%;z-index:999;}
.GRemokode{display:inline-block;width:36px;height:50px;font-size:12px;font-weight:bold;color:#000;line-height:20px;text-align:center;border:1px solid #555;float:left;}
Javascript-1 :
<script src='http://gubhugreyot-javascript.googlecode.com/files/GRemocomment.js' type='text/javascript'></script>
Javascript-2 :
<script src='http://gubhugreyot-javascript.googlecode.com/files/GRemocomment-thumb.js' type='text/javascript'></script>

Cara menggunakan kode :

  1. Login ke Blogger.
    • Tuliskan "User Name" (gmail) atau tuliskan "Email Address" (non gmail).
    • Tuliskan Password.
    • Klik "Sign in"
  2. Beberapa saat setelah klik sign in anda akan menjumpai halaman "Dasbor (Dasboard)".
    Klik "Rancangan (Design)". Tunggu beberapa saat hingga sebuah halaman baru terbuka.
  3. Cari dan klik "Edit HTML". Halaman baru yang berisi sebuah box "Edit Template" terlihat.
  4. Lakukan backup template.
    • Klik "Download Template Lengkap (Download Full Template)".
    • Simpan file template dio folder PC.
    • Kembali ke box "Edit Template".
  5. Cari kode ]]></b:skin>.
  6. Copy dan paste kode CSS di atas ]]></b:skin>.
  7. Cari kode </body>.
  8. Copy dan paste javascript-1 di atas </body>.
  9. Klik "Simpan Template/Save Template".
  10. Klik "Expand Widget Template".
  11. Cari kode :
    <div class='comment-form'>. Kode seperti ini ada 2 buah.
  12. Copy dan paste javascript-2 di bawah <div class='comment-form'> (kedua-duanya!).
  13. Klik "Simpan Template/Save Template".
  14. Buka blog dan coba hasilnya dengan membuat komentar yang menyertakan emoticon.
  15. Selesai !!!

Sunday, 1 April 2012

Pasang Widget Google Flag Translate -Translator

EnglishArabicChinese SimplyfiedFilipinoFrenchGermanHindiItalianJapaneseKoreanMalayPortugueseRussianSpanishThaiVietnamese
Saat anda dalam tahap awal ngeblog, mungkin saja sebuah "Google Translate Widget" baik yang berupa translator biasa (hanya berupa teks) maupun yang berbentuk google flag translate (disertai icon bendera negara) belum terasa begitu penting. Google translator baru akan terasa manfaatnya saat blog mulai dikenal dan diakses tidak saja oleh blogger Indonesia, namun juga oleh beberapa blogger mancanegara. Sekalipun "Widget Google Translate" masih mempunyai banyak kelemahan dalam penterjemahan, setidaknya bisa sedikit membantu pengunjung yang tidak mengerti bahasa yang kita gunakan untuk "mencoba memahami posting" melalui hasil terjemahan yang dilakukan blogger.

Setelah beberapa waktu lalu mencoba menggunakan google flag translator tak memberikan hasil sesuai harapan, tetapi ternyata semenjak akhir bulan Maret 2012 ini, google flag translate widget kembali bisa berfungsi dengan baik. Semoga saja translator yang disertai icon bendera ini akan tetap bisa dipergunakan sebagai mana mestinya seperti tahun-tahun yang telah lewat.

Selain dimanfaatkan dalam fungsi utamanya sebagai widget perubah bahasa, menggunakan google flag translate widget memang berbeda dengan google translate widget biasa yang hanya menampilkan teks. Dengan penambahan icon bendera membuat widget terasa lebih menarik dan blog juga bertambah lebih indah. Jika anda tertarik untuk menggunakan widget ini, silahkan gunakan kode di bawah ini dan pasang widget melalui penambahan gadget.

Kode CSS dan xHTML-1
<style type="text/css">
.myGRtranslate{margin:0 auto;text-align:center;position:relative;}
.myGRtranslate:hover:before{position:absolute;right:0;top:-20px;content:"Visit me on gubhugreyot";font-size:10px;color:#888;text-decoration:blink;}
.GRgoogtrans{padding:0;margin:0;cursor:pointer;}
.GRgoogtrans .myGRflag{width:24px;height:24px;padding:0;background:#555;border:1px solid #888;opacity:0.6;filter:alpha(opacity=60);padding:0;margin:2px 2px 0 0;box-shadow:2px 2px 2px #000;}
.GRgoogtrans:hover .myGRflag{border:1px solid #f00;background:#ccc;opacity:1.0;filter:alpha(opacity=100);}
</style>
<div class="myGRtranslate">
<a class='GRgoogtrans' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=id%7Cen&amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='English'><img class="myGRflag" alt='English' src='https://lh6.googleusercontent.com/-6o0Zml22e54/T3i5JUK8xHI/AAAAAAAACEk/55YyDHFo9DM/s128/English.png' /></a>
<a class='GRgoogtrans' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=id%7Car&amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='Arabic'><img class="myGRflag" alt='Arabic' src='https://lh4.googleusercontent.com/-nNYiPXrp9UA/T3i45ujhrKI/AAAAAAAACCs/Fpxyel2kbHc/s128/Saudi-Arabia.png' /></a>
<a class='GRgoogtrans' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=id%7zh-CN&amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='Chinese Simplyfied'><img class="myGRflag" alt='Chinese Simplyfied' src='https://lh4.googleusercontent.com/-c1e-UO2ojTw/T3i48bxaUaI/AAAAAAAACC8/cTPZtzSTIdk/s128/Viet-Nam.png' /></a>
<a class='GRgoogtrans' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=id%7Ctl&amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='Filipino'><img class="myGRflag" alt='Filipino' src='https://lh4.googleusercontent.com/-SukYp1QZ8XI/T3i5Akjx8zI/AAAAAAAACDc/54AOAEX2Re4/s128/Philippines.png' /></a>
<a class='GRgoogtrans' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=id%7Cfr&amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='French'><img class="myGRflag" alt='French' src='https://lh3.googleusercontent.com/-wjqj1wJZRgA/T3i5GDs2v3I/AAAAAAAACEY/sRtfI0tO8mQ/s128/France.png' /></a>
<a class='GRgoogtrans' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=id%7Cde&amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='German'><img class="myGRflag" alt='German' src='https://lh5.googleusercontent.com/-tOYFuwqANJI/T3i5D_9dXAI/AAAAAAAACEI/8BozfDrSKOk/s128/Germany.png' /></a>
<a class='GRgoogtrans' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=id%7Chi&amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='Hindi'><img class="myGRflag" alt='Hindi' src='https://lh5.googleusercontent.com/-gjKMu4Y4ERM/T3i5DNPIAOI/AAAAAAAACEA/zR12DZCcjs8/s128/India.png' /></a>
<a class='GRgoogtrans' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=id%7Cit&amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='Italian'><img class="myGRflag" alt='Italian' src='https://lh4.googleusercontent.com/-0PHQwJfhKQo/T3i5CvIxXyI/AAAAAAAACD0/8s3odDAwRf4/s128/Italy.png' /></a>
<a class='GRgoogtrans' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=id%7Cja&amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='Japanese'><img class="myGRflag" alt='Japanese' src='https://lh4.googleusercontent.com/-Apt3baNjfMo/T3i5B7dks-I/AAAAAAAACDs/OLv-kKOrDjA/s128/Japan.png' /></a>
<a class='GRgoogtrans' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=id%7Cko&amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='Korean'><img class="myGRflag" alt='Korean' src='https://lh6.googleusercontent.com/-qD7VTqE5DwM/T3i4_Aud4KI/AAAAAAAACDM/ZVIKQ8sfFWQ/s128/South-Korea.png' /></a>
<a class='GRgoogtrans' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=id%7Cms&amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='Malay'><img class="myGRflag" alt='Malay' src='https://lh3.googleusercontent.com/-vdNbBIxUMAg/T3i5BgC0S7I/AAAAAAAACDw/xZRvdQySIHE/s128/Malaysia.png' /></a>
<a class='GRgoogtrans' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=id%7Cpt&amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='Portuguese'><img class="myGRflag" alt='Portuguese' src='https://lh5.googleusercontent.com/-PoxFzxfvXBA/T3i5AK5gyTI/AAAAAAAACDU/LgazYAZ_oN0/s128/Portugal.png' /></a>
<a class='GRgoogtrans' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=id%7Cru&amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='Russian'><img class="myGRflag" alt='Russian' src='https://lh6.googleusercontent.com/-8yDqR9CH2Eg/T3i4_6V6ccI/AAAAAAAACDQ/rSdd01lDJhs/s128/Russian.png' /></a>
<a class='GRgoogtrans' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=id%7Ces&amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='Spanish'><img class="myGRflag" alt='Spanish' src='https://lh6.googleusercontent.com/-Sz9uAPhm1yw/T3i48kSH03I/AAAAAAAACC4/9nBgbHSAEyY/s128/Spain.png' /></a>
<a class='GRgoogtrans' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=id%7Cth&amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='Thai'><img class="myGRflag" alt='Thai' src='https://lh4.googleusercontent.com/-hEPjjg7y9O4/T3i48a2GJHI/AAAAAAAACC0/jcMEIRtHAsc/s128/Thailand.png' /></a>
<a class='GRgoogtrans' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=id%7Cvi&amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='Vietnamese'><img class="myGRflag" alt='Vietnamese' src='https://lh3.googleusercontent.com/-09vSjOQsdlc/T3i5GPbCNXI/AAAAAAAACEU/QXSo8DmQ5T0/s128/China.png' /></a>
</div>

Jika pada kode di atas, ukuran box widget menggunakan lebar sesuai lebar kolom gadget, untuk kode berikut menggunakan ukuran box sebesar 224px yang berfungsi untuk membentuk icon bendera dalam 2 deret memanjang dengan masing-masing deret berjumlah 8 icon bendera.
Kode CSS dan xHTML-2
<style type="text/css">
.myGRtranslate{padding:5px;margin-left:0px;background:#555;width:224px;float:left;border:2px solid #aaa;border-radius:6px;position:relative;}
.myGRtranslate:hover:before{position:absolute;right:0;top:-20px;content:"Visit me on gubhugreyot";font-size:10px;color:#888;text-decoration:blink;}
.GRgoogtrans{float:left;border:1px solid #888;opacity:0.6;filter:alpha(opacity=60);padding:0;margin:2px 2px 2px 0;cursor:pointer;box-shadow:2px 2px 2px #000;}
.GRgoogtrans .myGRflag{float:left;width:24px;height:24px;padding:0;margin:0;border:0 solid;background:transparent;box-shadow:0 0 0 #fff;}
.GRgoogtrans:hover{border:1px solid #f00;background:#ccc;opacity:1.0;filter:alpha(opacity=100);}
</style>
<div class="myGRtranslate">
<a class='GRgoogtrans' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=id%7Cen&amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='English'><img class="myGRflag" alt='English' src='https://lh6.googleusercontent.com/-6o0Zml22e54/T3i5JUK8xHI/AAAAAAAACEk/55YyDHFo9DM/s128/English.png' /></a>
<a class='GRgoogtrans' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=id%7Car&amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='Arabic'><img class="myGRflag" alt='Arabic' src='https://lh4.googleusercontent.com/-nNYiPXrp9UA/T3i45ujhrKI/AAAAAAAACCs/Fpxyel2kbHc/s128/Saudi-Arabia.png' /></a>
<a class='GRgoogtrans' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=id%7zh-CN&amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='Chinese Simplyfied'><img class="myGRflag" alt='Chinese Simplyfied' src='https://lh4.googleusercontent.com/-c1e-UO2ojTw/T3i48bxaUaI/AAAAAAAACC8/cTPZtzSTIdk/s128/Viet-Nam.png' /></a>
<a class='GRgoogtrans' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=id%7Ctl&amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='Filipino'><img class="myGRflag" alt='Filipino' src='https://lh4.googleusercontent.com/-SukYp1QZ8XI/T3i5Akjx8zI/AAAAAAAACDc/54AOAEX2Re4/s128/Philippines.png' /></a>
<a class='GRgoogtrans' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=id%7Cfr&amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='French'><img class="myGRflag" alt='French' src='https://lh3.googleusercontent.com/-wjqj1wJZRgA/T3i5GDs2v3I/AAAAAAAACEY/sRtfI0tO8mQ/s128/France.png' /></a>
<a class='GRgoogtrans' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=id%7Cde&amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='German'><img class="myGRflag" alt='German' src='https://lh5.googleusercontent.com/-tOYFuwqANJI/T3i5D_9dXAI/AAAAAAAACEI/8BozfDrSKOk/s128/Germany.png' /></a>
<a class='GRgoogtrans' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=id%7Chi&amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='Hindi'><img class="myGRflag" alt='Hindi' src='https://lh5.googleusercontent.com/-gjKMu4Y4ERM/T3i5DNPIAOI/AAAAAAAACEA/zR12DZCcjs8/s128/India.png' /></a>
<a class='GRgoogtrans' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=id%7Cit&amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='Italian'><img class="myGRflag" alt='Italian' src='https://lh4.googleusercontent.com/-0PHQwJfhKQo/T3i5CvIxXyI/AAAAAAAACD0/8s3odDAwRf4/s128/Italy.png' /></a>
<a class='GRgoogtrans' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=id%7Cja&amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='Japanese'><img class="myGRflag" alt='Japanese' src='https://lh4.googleusercontent.com/-Apt3baNjfMo/T3i5B7dks-I/AAAAAAAACDs/OLv-kKOrDjA/s128/Japan.png' /></a>
<a class='GRgoogtrans' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=id%7Cko&amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='Korean'><img class="myGRflag" alt='Korean' src='https://lh6.googleusercontent.com/-qD7VTqE5DwM/T3i4_Aud4KI/AAAAAAAACDM/ZVIKQ8sfFWQ/s128/South-Korea.png' /></a>
<a class='GRgoogtrans' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=id%7Cms&amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='Malay'><img class="myGRflag" alt='Malay' src='https://lh3.googleusercontent.com/-vdNbBIxUMAg/T3i5BgC0S7I/AAAAAAAACDw/xZRvdQySIHE/s128/Malaysia.png' /></a>
<a class='GRgoogtrans' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=id%7Cpt&amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='Portuguese'><img class="myGRflag" alt='Portuguese' src='https://lh5.googleusercontent.com/-PoxFzxfvXBA/T3i5AK5gyTI/AAAAAAAACDU/LgazYAZ_oN0/s128/Portugal.png' /></a>
<a class='GRgoogtrans' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=id%7Cru&amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='Russian'><img class="myGRflag" alt='Russian' src='https://lh6.googleusercontent.com/-8yDqR9CH2Eg/T3i4_6V6ccI/AAAAAAAACDQ/rSdd01lDJhs/s128/Russian.png' /></a>
<a class='GRgoogtrans' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=id%7Ces&amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='Spanish'><img class="myGRflag" alt='Spanish' src='https://lh6.googleusercontent.com/-Sz9uAPhm1yw/T3i48kSH03I/AAAAAAAACC4/9nBgbHSAEyY/s128/Spain.png' /></a>
<a class='GRgoogtrans' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=id%7Cth&amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='Thai'><img class="myGRflag" alt='Thai' src='https://lh4.googleusercontent.com/-hEPjjg7y9O4/T3i48a2GJHI/AAAAAAAACC0/jcMEIRtHAsc/s128/Thailand.png' /></a>
<a class='GRgoogtrans' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=id%7Cvi&amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='Vietnamese'><img class="myGRflag" alt='Vietnamese' src='https://lh3.googleusercontent.com/-09vSjOQsdlc/T3i5GPbCNXI/AAAAAAAACEU/QXSo8DmQ5T0/s128/China.png' /></a>
</div>
<div style="clear:both;"></div>

Cara menggunakan widget

  1. Login ke blogger
  2. Setelah halaman dasbor terbuka, klik "Rancangan/Design".
  3. Sebuah halaman baru berupa "Halaman Tata Letak (Layout)" akan anda lihat. Ada beberapa elemen yang dilengkapi dengan fungsi penambah gadget. Klik salah satu "Add a Gadget (Tambah Gadget)" dalam box bergaris putus2 dan tunggu beberapa saat hingga window baru terbuka.
  4. Ada beberapa pilihan gadget. Pilih dan klik Gadget "HTML/Javascript".
  5. Copy dan pastekan "Kode CSS dan xHTML-1" atau "Kode CSS dan xHTML-2" ke dalam box HTML/Javascript.
  6. Klik "SIMPAN/SAVE"
  7. Buka blog dan coba untuk menggunakan Widget Google Flag Translate.
  8. Selesai!

Catatan/Keterangan :

  1. Anda dapat menambah atau mengurangi jumlah bahasa yang dipergunakan dalam widget sesuai kebutuhan.
  2. Panduan yang lebih lengkap tentang cara menambah gadget dapat dibuka melali link di bawah ini:
    Panduan lengkap cara menambah gadget