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

Pasang Widget Google Flag Translate -Translator

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0ckfP-vtKPWf9FGK1OQmUmOuzvnSf4uH0Bl88RC_HbQcw1tkXnDXXqCHmumHenN16LK7AubPg_Chz31I-fDeGEKVEISF2hW0XubkvtHeezaqsIafVAg8Ctz9vwLBW5tQjkFbM0NxwO3uS/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWfdjYmAzRsDwLPnldOvxu_zptMdheWIidlaKx9J28-gH3QK9kiHN94pVydn2IAhF3sHmuAPxHY2bAAAKA1gdA8w8PLbSUbhIi4ZrIL9ESOdfYqdTZ6OW8CURug1hoq6154Zcv3msp-3Ud/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtqFeLhWGiGJWSYU-2C_2If8M0ZfMHgT4RjYJEbL4nwhv8KynECNgPivqotc_QXx6NdEXCHjyrAv7yC9JevSTsEYq-0uGLBQRJScCHaSMZitSPhzWpuqJzCYhfzqFyNI01obKr4cnRIRZN/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAl0BKAF-eS3nKmehkQ_oVi5usR9CtkLlCMm33W5raITTcmb4cPrlXODeKcBmwYKw_rnDxSPcCiqTCz6g1N26vkydF3bZYF4t5Z7nYeGn5iAyKqWxT1vUvwlBB6Pxd1keJFl9w9AsmZrDt/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCGkCJ8OSy2BRpV8cUQjv6YYquAcnZlK4g4RF_9KMQ5V3kmV8as7_2Wj1YU38Ix-I3yG7pevvQwI2nC_gaGy2NA930RCB4Ekn4k8DrOiFO8-eTlfD4KkxZcb7FtkU5MaQYBBaw6P6W1YSi/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpijMrwYiWpcALcmx7aS_M0mL9aUKN3Pdjh3SOYqCoifpvd2RDkShuxVvtkI6jYcw6laFykLEZWaeS31Pow3gEpOyRoqrffWY-gR_KKBA0X7GLgO8pPjjCxIB7wecBBfUj5B9yjSWjE0jM/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjseJZpRLkBw23oT3rbR3FKV1O3LY9FewrAqyMP-oez8eoQKWVwZz4OSLfL4KBtqnkQ7WJLDDcyJfGagK4GCtMGDSpbVA4aEmVm0LvLFKvpJKkHHPzSltTMF3n87aI3pPVD3Jd0j3_8ZZhs/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-jDpwovu44WxRFrbXNLnDnikg98u-kuk2qkHzDKY_vc8vUtsM1-2bf2yCnxL1C7RUWGBpiAuSZasaDP58S3YS7CW4zlhv6GfLUahj1RQNoETziqfGiiffO2cQGy_B_EDpo97EHdFVUf7Q/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1wTe0SLy6SRTgwGMNGfEZBpPVT01mUy0jhz1ZZD1SewsRSoIQuHhvr1FE3Fa0mrtzvBrQf3cI4fM2wFLcvDeSOni6AhBaBg4a_ICrmLu1ssezF7je1sJPpMmLkjW7zkhYTtytMTT9i05A/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjop3sy5818QfZ_CN0g6U453WKlajhpMg0BQL0KMGNR8YH02ZgYCq-4UfDUcmLixBbD3eRvQ2qPOkxbdu_OAgoKbi-yuSIZBsJUbV39bWXv0m21lC2qVuVrFk-A0BfAnvBpEcf60amdnNea/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9YoBQK6Ha27CQTABAQ6hhlLN7xsgUu0sLaDjKELnYHm6mPD3xFVzyKJmUsl-s_XRsX4_ncC5oroCdVUa7EXTeUEskAhhtjFoozMWUsJUm2qagPMA9DRF40IBauemGE90prqNPquq9Shdn/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggkCI2SSKr4P9eGUmNSTXg2XVcf1pBZz0n884RF4TwI3wfeDNJIQAdMv90cUPvFDrtG80GotBnMwv0yxiVgTMfC49hqMGyArvIeql-_Qmf_Mz65cgY_s3f4qE1fRkQHpC3aNSXoVp0x2Qb/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcVzyn0dEi2TQ-_ylfiO6uJ2veHEw6eteZk6icnXnM2BMpk8IDctj8LENL8sm4ga5ZZ8E9-r-kkdNvGBL9HnLPns7_dJs53O32BamVP13GUS45IcLbVMAjT1cyTHaObsveW5wuI5JDiOKu/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK6efUh1DiTIaq94SrVahv-ryje1nnH0kfSIqMx8eJFVCTyLOcEr6yQK0rMrSnvrOArfLsRWx9BnZQqfP5siVATSx8wPpwijHHg-KQLXN5nyOopE7R-tS5reNnefDcFYIoxf6phHAQ96d6/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5JFmQezn2WDkGgxmqpkyN2PP2clCSg4pWsc4t_7y6l14wYMgcmGYJ71BhT00WyndTKAfERgBIdD8KGGyjBvseXkDpUwv-JJ9X6xv7gHGAPfemdC2npqVkvBmB_93uNRhSUZko2sU-oYI3/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIgtvgab5KFKjycYHC_PuAWNSMd4oRe-9PGDchfWs9nlprOeN-XK16NSRO_LUR4MQesC_QPDR51a6OOGrZmFCKeMAY2zh18TDBNM4ZtnO1P0XZcrIY5T5BUp3C6Fru7u9f4MVWA4L6vhq-/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0ckfP-vtKPWf9FGK1OQmUmOuzvnSf4uH0Bl88RC_HbQcw1tkXnDXXqCHmumHenN16LK7AubPg_Chz31I-fDeGEKVEISF2hW0XubkvtHeezaqsIafVAg8Ctz9vwLBW5tQjkFbM0NxwO3uS/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWfdjYmAzRsDwLPnldOvxu_zptMdheWIidlaKx9J28-gH3QK9kiHN94pVydn2IAhF3sHmuAPxHY2bAAAKA1gdA8w8PLbSUbhIi4ZrIL9ESOdfYqdTZ6OW8CURug1hoq6154Zcv3msp-3Ud/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtqFeLhWGiGJWSYU-2C_2If8M0ZfMHgT4RjYJEbL4nwhv8KynECNgPivqotc_QXx6NdEXCHjyrAv7yC9JevSTsEYq-0uGLBQRJScCHaSMZitSPhzWpuqJzCYhfzqFyNI01obKr4cnRIRZN/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAl0BKAF-eS3nKmehkQ_oVi5usR9CtkLlCMm33W5raITTcmb4cPrlXODeKcBmwYKw_rnDxSPcCiqTCz6g1N26vkydF3bZYF4t5Z7nYeGn5iAyKqWxT1vUvwlBB6Pxd1keJFl9w9AsmZrDt/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCGkCJ8OSy2BRpV8cUQjv6YYquAcnZlK4g4RF_9KMQ5V3kmV8as7_2Wj1YU38Ix-I3yG7pevvQwI2nC_gaGy2NA930RCB4Ekn4k8DrOiFO8-eTlfD4KkxZcb7FtkU5MaQYBBaw6P6W1YSi/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpijMrwYiWpcALcmx7aS_M0mL9aUKN3Pdjh3SOYqCoifpvd2RDkShuxVvtkI6jYcw6laFykLEZWaeS31Pow3gEpOyRoqrffWY-gR_KKBA0X7GLgO8pPjjCxIB7wecBBfUj5B9yjSWjE0jM/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjseJZpRLkBw23oT3rbR3FKV1O3LY9FewrAqyMP-oez8eoQKWVwZz4OSLfL4KBtqnkQ7WJLDDcyJfGagK4GCtMGDSpbVA4aEmVm0LvLFKvpJKkHHPzSltTMF3n87aI3pPVD3Jd0j3_8ZZhs/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-jDpwovu44WxRFrbXNLnDnikg98u-kuk2qkHzDKY_vc8vUtsM1-2bf2yCnxL1C7RUWGBpiAuSZasaDP58S3YS7CW4zlhv6GfLUahj1RQNoETziqfGiiffO2cQGy_B_EDpo97EHdFVUf7Q/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1wTe0SLy6SRTgwGMNGfEZBpPVT01mUy0jhz1ZZD1SewsRSoIQuHhvr1FE3Fa0mrtzvBrQf3cI4fM2wFLcvDeSOni6AhBaBg4a_ICrmLu1ssezF7je1sJPpMmLkjW7zkhYTtytMTT9i05A/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjop3sy5818QfZ_CN0g6U453WKlajhpMg0BQL0KMGNR8YH02ZgYCq-4UfDUcmLixBbD3eRvQ2qPOkxbdu_OAgoKbi-yuSIZBsJUbV39bWXv0m21lC2qVuVrFk-A0BfAnvBpEcf60amdnNea/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9YoBQK6Ha27CQTABAQ6hhlLN7xsgUu0sLaDjKELnYHm6mPD3xFVzyKJmUsl-s_XRsX4_ncC5oroCdVUa7EXTeUEskAhhtjFoozMWUsJUm2qagPMA9DRF40IBauemGE90prqNPquq9Shdn/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggkCI2SSKr4P9eGUmNSTXg2XVcf1pBZz0n884RF4TwI3wfeDNJIQAdMv90cUPvFDrtG80GotBnMwv0yxiVgTMfC49hqMGyArvIeql-_Qmf_Mz65cgY_s3f4qE1fRkQHpC3aNSXoVp0x2Qb/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcVzyn0dEi2TQ-_ylfiO6uJ2veHEw6eteZk6icnXnM2BMpk8IDctj8LENL8sm4ga5ZZ8E9-r-kkdNvGBL9HnLPns7_dJs53O32BamVP13GUS45IcLbVMAjT1cyTHaObsveW5wuI5JDiOKu/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK6efUh1DiTIaq94SrVahv-ryje1nnH0kfSIqMx8eJFVCTyLOcEr6yQK0rMrSnvrOArfLsRWx9BnZQqfP5siVATSx8wPpwijHHg-KQLXN5nyOopE7R-tS5reNnefDcFYIoxf6phHAQ96d6/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5JFmQezn2WDkGgxmqpkyN2PP2clCSg4pWsc4t_7y6l14wYMgcmGYJ71BhT00WyndTKAfERgBIdD8KGGyjBvseXkDpUwv-JJ9X6xv7gHGAPfemdC2npqVkvBmB_93uNRhSUZko2sU-oYI3/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIgtvgab5KFKjycYHC_PuAWNSMd4oRe-9PGDchfWs9nlprOeN-XK16NSRO_LUR4MQesC_QPDR51a6OOGrZmFCKeMAY2zh18TDBNM4ZtnO1P0XZcrIY5T5BUp3C6Fru7u9f4MVWA4L6vhq-/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

Tagcloud Cumulus Gaya Baru - Flash Animated Label Cloud

Widget Tagcloud Flash Animasi ini sepertinya trinspirasi dan mengadopsi kemampuan dan kinerja tagcloud cumulus. Dibuat lebih praktis dalam penggunaan. Pengguna widget tak lagi perlu memasukkan link menu yang akan ditampilkan satu persatu seperti yang harus dilakukan ketika menggunakan tagcloud cumulus. Anda hanya perlu memasukkan alamat blog dan secara otomatis tagcloud animasi flash ini akan bekerja memanfaatkan data label posting blogger anda. Dengan model baru seperti ini, tagcloud flash animasi yang mirip tagcloud cumulus ini menjadi pilihab alternatif yang cukup menarik bagi siapapun.

Flash Labels by Way2Blogging

Javascript dan xHTML Tagcloud Flash Animasi:

<div id="w2bFlashContent"><p style="display:none;">Flash Labels by <a href="http://www.way2blogging.org/">Way2Blogging</a></p></div>
<script type="text/javascript">
/*<![CDATA[*/
var w2bFlashLabelSettings = {
blogurl       : "http://gubhugreyot-demo-tutorial-blogger-1.blogspot.com/", /* ganti dg alamat blog anda */
color          : "000000", /* warna link menu  */
hoverColor     : "f00f00", /* hover link menu */
backgroundColor: "FFFFFF", /*  background */
size           : 10, /* ukuran font */
speed         : 100, /* kecepatan animasi */
width          : 300, /* lebar label cloud animasi */
height         : 300 /* tinggi label cloud animasi */
};
/*]]>*/
</script>
<script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/svn/trunk/w2b_new_flash_label_cloud.js"></script>

Cara menggunakan label cloud animasi

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)".
3. Anda akan menjumpai halaman untuk menambah gadget, klik "Add a Gadget/Tambah Gadget".
4. Sebuah window baru akan terlihat dengan beberapa pilihan gadget. Cari dan klik "HTML/Javascript".
   
   • Copy dan paste-kan javascript dan xHTML dalam box HTML/Javascript.
   • Ganti http://lightbox-demo-tutorial.blogspot.com dengan alamat blog anda.
   • Klik "SIMPAN/SAVE".
5. Buka blog dan lihat hasil penambahan widget recent comments.

Catatan/Keterangan :

1. Sesuaikan lebar kolom yang tersedia dengan mengatur lebar widget label cloud (pengaturan lebar di javascript!).
2. Pengaturan warna teks, hover dan beberapa yang lain juga terdapat di javascript.

Sumber :
http://www.way2blogging.org

Recent Comments dg Thumbnail (Avatar) u Blogger Template Designer

Widget Recent Comments ini sangat jauh berbeda dengan gadget recent comments dari blogger yang dapat anda install melalui "Add a Gadget". Jika gadget recent comment default blogger hanya menampilkan recent comments berupa teks, widget recent comments yang satu ini mampu menampilkan thumbnail/avatar si pemberi komentar seperti yang biasa kita lihat di kolom komentar yang terletak di bawah posting. Dengan bantuan effek opacity, widget recent comments yang hanya menggunakan sedikit javascript ini tak hanya bermanfaat sebagai salah satu penyedia informasi tercepat tentang komentar saja, namun di sisi yang lain juga memberi wajah dan penampilan berbeda pada blog. Menggunakan widget ini juga membuat berbagai modifikasi recent comments jauh lebih mudah dibandingkan jika menggunakan gadget recent comments bawaan blogger. Kode css disertakan sekaligus dalam widget sehingga mempermudah pengguna untuk melakukan berbagai perubahan wajah dan tampilan, seperti misalnya untuk penyesuaian dengan warna blog. Sebuah scrollbox sederhana juga telah ditambahkan dengan tinggi scrollbox max=300px. Untuk merubah tingginya anda hanya perlu merubah nilainya, dimana semakin besar maka box akan semakin tinggi.

Kode CSS, Javascript dan xHTML widget Recent Comments dg thumbnail

Kode CSS, Javascript dan xHTML :

<style type="text/css">
ul.GRrecentCom{list-style:none;margin:0;padding:0;}
.GRrecentCom li{background:none;margin:0 0 6px !important;padding:4px 6px;display:block;clear:both;overflow:hidden;list-style:none;border-bottom:1px dotted #555;}
.GRrecentCom li .GRavatar{padding:1px;background:#fefefe;box-shadow:1px 2px 2px #000;float:left;margin:2px 10px 0 0;position:relative;overflow:hidden;opacity:0.4;filter:alpha(opacity=40);}
.GRrecentCom li:hover .GRavatar{opacity:1.0;filter:alpha(opacity=100);}
.GRrounded{border-radius:3px;}
.GRcircle{border-radius:50%;}
.GRrecentCom li:hover{text-shadow:2px 2px 2px #888 !important;background:#bbb;border-bottom:1px dotted #888;border-radius:4px;}
.GRrecentCom li img{padding:0px;position:relative;overflow:hidden;display:block;}
.GRrecentCom li span{margin-top:4px;color:#666;display:block;font-size:12px;font-style:italic;line-height:1.4;}
.GRrecentCom li:hover span{color:#000;}
</style>
<script src="http://gubhugreyotprojects.googlecode.com/svn/widgets/GRrCommentsAvatar.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var
numComments = 25, /* jumlah komentar */
showAvatar = true, /* false untuk tanpa avatar */
avatarSize = 30, /* ukuran avatar (pixel) */
roundAvatar = false, /* true untuk avatar bulat */
characters = 100, /* jumlah karakter komentar */
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = false; /* true untuk menampilkan link widget */
//]]>
</script>
<div style="max-height:300px;overflow:auto;padding:5px 15px 5px 0;border-top:3px double #888;border-bottom:3px double #888;">
<script type="text/javascript" src="http://lightbox-demo-tutorial.blogspot.com/feeds/comments/default?alt=json&callback=GRrecentCom&max-results=25"></script>
</div>

Cara menggunakan dan membuat widget recent comments:

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)".
3. Anda akan menjumpai halaman untuk menambah gadget, klik "Add a Gadget/Tambah Gadget".
4. Sebuah window baru akan terlihat dengan beberapa pilihan gadget. Cari dan klik "HTML/Javascript".
   
   • Copy dan paste-kan Kode css, javascript dan xHTML dalam box HTML/Javascript.
   • Ganti http://lightbox-demo-tutorial.blogspot.com dengan alamat blog anda.
   • Klik "SIMPAN/SAVE".
5. Buka blog dan lihat hasil penambahan widget recent comments.

D E M O

Lihat recent comments dalam blog ini!

Catatan :

1. Dalam demo ini widget telah mengalami banyak modifikasi. Jika anda ingin membuat yang seperti terlihat dalam demo, silahkan tunggu tutorialnya di http://gubhugreyot.blogspot.com
2. Kode berwarna merah (2 kode) untuk merubah jumlah komentar yang ditampilkan.
3. Kode berwarna kuning untuk merubah ukuran avatar.
4. Kode berwarna biru muda untuk merubah jumlah karakter komentar.

Sumber :

http://www.way2blogging.org

How to Create Blogger Header with 2 Elements

Ini bukan sekedar membagi box header blogger menjadi 2 kolom, namun jauh lebih dari hal tersebut. Kita akan memecah elemen header menjadi 2 elemen di kanan dan kiri. Masing-masing akan berfungsi sebagaimana mestinya sebuah elemen dimana berbagai teks, kode html atau gadget (widget) bisa ditambahkan ke dalamnya.

Jika selama ini di bagian header elemen blogger hanya bisa digunakan untuk box bagi blog title dan blog description, maka dengan memecahnya menjadi 2 elemen maka siapapun dapat mengembangkan satu elemen yang baru tersebut untuk berbagai hal yang sebelumnya tak mungkin ditambahkan. pengguna hanya perlu memperhitungkan kira-kira berapa lebar elemen baru yang dibutuhkan. Pengaturan lebar header element yang lama (default) dan element yang baru dapat dengan mudah dilakukan. Pembagian kolom dilakukan dengan menggunakan nilai persen sehingga tinggal membagi nilai 100% menjadi 2 bagian. Klik ke dua screenshoot di atas agar ditampilkan dalam ukuran sesungguhnya!

D E M O

Klik link demo di bawah ini untuk melihat bentuk header blog setelah penambahan elemen baru:

Demo header blogger dengan 2 elemen

Cara membuat 2 Elemen di Header Blogger Template Designer

1. Login ke Blogger.
2. Setelah Halaman Dasbor (Dasboard) terbuka, klik Rancangan (Design).
3. Cari dan klik Edit HTML
4. Lakukan Backup Template untuk berjaga-jaga jika saat penambahan elemen baru terjadi kesalahan yang menyebabkan kerusakan template. Panduan dan tutorial Backup template dapat dibuka di sini !
5. Cari kode ]]></b:skin>, kemudian copy dan paste-kan kode CSS berikut tepat di atas kode ]]></b:skin>. Gunakan Ctrl + F untuk mempercepat pencarian kode.
   

   Kode CSS

   .GRnewHeader .widget h2.title, .GRnewHeader .widget h2{
          font-size:14px;
          text-transform:uppercase;
          font-weight:600;
          margin:10px;
   }
   .GRnewHeader .widget{
          padding:10px;
          font-size:12px;
          background:rgba(0,0,0,0.2);
          margin:5px;
   }

6. Cari kode:
   ]]>
   </b:template-skin>
7. Letakkan kode CSS di bawah ini tepat di atasnya
   

   Kode CSS

   #header {
          float:left;
          width:70%;
          margin:0;
          padding:0; 
   }
   #GR_headerRight {
          float: right;
          width: 30%; 
          padding:0;
          margin:0;
   }

8. Cari kode <div class='region-inner header-inner'>
   Di bawah kode di atas akan terlihat kode seperti yang terlihat di bawh ini:
   

   xHTML

   <div class='region-inner header-inner'>
         <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
   <b:widget id='Header1' locked='true' title='Your Blog Title (Header)' type='Header'/>
         </b:section>

9. Rubah kode di atas menjadi seperti di bawah ini:
   

   xHTML

   <div class='region-inner header-inner'>
         <b:section class='GRnewHeader' id='GR_headerRight' maxwidgets='1' showaddelement='yes'/>
         <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
   <b:widget id='Header1' locked='true' title='Your Blog Title (Header)' type='Header'/>
         </b:section>

10. Klik Save template (Simpan Template)
11. Klik Elemen Laman (Page Elemens).
12. Lihat di bagian Header sudah ada penambahan elemen baru di sebelah kanan hingga elemen header default berdampingan dengan elemen baru right header.
13. Coba gunakan untuk menambah gadget kemudian lihat hasilnya dengan membuka blog!
14. Selesai!

Catatan/Keterangan:

1. Anda bisa menambahkan bebrapa elemen CSS yang lain dalam kode CSS yang di atas kode ]]>/b:skin>
2. Background bisa disesuaikan dengan warna teks. Anda dapat menambahkan variable color atau mungkin saja menghapus/menghilangkan background.
3. Untuk merubah ukuran header kanan dan kiri gunakan perubahan nilai prosentase lebar di antara keduanya.
4. Jika tertarik untuk membuat header blogger dengan 3 elemen anda bisa membuka panduannya di link berikut:
   
   Cara membuat header blogger dengan 3 elemen

Cara Mengaktifkan & Menampilkan Widget Label Blogger

Dengan mengaktifkan widget atau gadget Label maka akan ada sebuah box yang berisi data posting berdasar label atau kategori yang sudah dibuat pada setiap posting. Anda dapat melakukan pengaturan pada fitur widget label untuk meniadakan atau menampilkan jumlah posting berdasar label. Jika posting sudah cukup banyak dan pada setiap label berisi posting dengan jumlah cukup besar akan lebih bagus jika jumlah posting pada widget label disertakan karena akan berpengaruh besar terhadap keinginan pengunjung untuk membuka.

Cara Menambah Gadget Label di Blogger
Klik setiap gambar untuk memperbesar!

1. Langkah pertama yang harus dilakukan tentunya adalah login di blogger karena semua penambahan gadget hanya bisa dilakukan setelah kita masuk di halaman dasbor. Untuk login ke blogger anda bisa klik di sini. Tuliskan alamat email secara lengkap jika anda menggunakan email selain dari google mail (yahoo mail, dll) dan cukup tuliskan user name jika anda gunakan email dari gmail. Tuliskan juga password anda di box yang kedua. Buatlah password yang sama seperti yang digunakan di email agar tak mudah lupa. Setelah semua lengkap dan benar, klik "Sign in".
2. Dasbor (Dasboard).
   Halaman ini akan anda jumpai setelah login. Beberapa fitur blogger tersedia di sini, diantaranya Posting, Comments, Settings, Design, Monetize, Stats, dll. Cari dan klik "Rancangan (Design)".
3. Add and Arrange Page Elements:
   Disinilah semua penambahan gadget/widget bermula. Halaman ini terdiri atas beberapa elemen penyusun blog. Anda bebas untuk menentukan sendiri dimana gadget akan di tambahkan. Elemen yang paling sering digunakan adalah pada bagian sidebar (kiri dan/atau kanan.
4. Tambahkan gadget (Add a Gadget):
   Banyak pilihan gadget yang tersedia, salah satu di antaranya Gadget Label. Klik gadget ini dan tunggu kembali beberapa saat.
5. Jika diperlukan lakukan pengaturan pada gadget label. Beberapa fitur pengaturan sudah tersedia dan anda hanya perlu "menandai" pengaturan yang sesuai. Secara umum para blogger banyak menggunakan pengaturan seperti yang terdapat dalam gambar. Beberapa memilih bentuk Cloud.
6. Setelah pengaturan widget Label selesai, lanjutkan dengan klik SIMPAN (SAVE).

Catatan/Keterangan:

Mungkin ada baiknya jika anda juga membaca tutorial tentang cara mebuat label (kategori) di boks posting agar pemahaman tentang widget (gadget) label ini lebih lengkap.
Trick dan cara membuat label (kategori) posting di Blogger

Cara Buat dan Pasang Page peel di Blogger Template Designer

Sekalipun page peel dapat dibuat dengan beberapa javascript, namun kali ini kita akan membuatnya dengan javascript yang paling sederhana. Bukan tanpa sebab jika javascript ini menjadi sangat simpel. Dua buah file flash (.swf) membuat semuanya menjadi terasa lebih praktis dan mudah. Anda hanya perlu membuat semua elemen pendukung page peel dalam ukuran yang tepat agar page peel yang didalamnya menggunakan fungsi iframe ini dapat ditampilkan secara sempurna.

Javascript page peel

Javascript:

var GRppeel = new Object();
GRppeel.ad_url = escape('http://gubhugreyot.blogspot.com');
GRppeel.small_path = 'https://sites.google.com/site/gubhugreyotproject/page-peel/iframe/gubhugreyot-small-path.swf';
GRppeel.small_image = escape('https://sites.google.com/site/gubhugreyotproject/page-peel/iframe/gubhugreyot-img-whynot-75x75.gif');
GRppeel.small_width = '195';
GRppeel.small_height = '195';
GRppeel.small_params = 'ico=' + GRppeel.small_image;
GRppeel.big_path = 'https://sites.google.com/site/gubhugreyotproject/page-peel/iframe/gubhugreyot-big-path.swf';
GRppeel.big_image = escape('https://sites.google.com/site/gubhugreyotproject/page-peel/iframe/gubhugreyot-img-whynot.jpg');
GRppeel.big_width = '650';
GRppeel.big_height = '650';
GRppeel.big_params = 'big=' + GRppeel.big_image + '&ad_url=' + GRppeel.ad_url;
function sizeup987(){
document.getElementById('GRbigpeel').style.top = '0px';
document.getElementById('GRsmallpeel').style.top = '-1000px';
}
function sizedown987(){
document.getElementById("GRsmallpeel").style.top = "0px";
document.getElementById("GRbigpeel").style.top = "-1000px";
}
GRppeel.putObjects = function () {
document.write('<div id="GRsmallpeel" style="position:absolute;width:'+ GRppeel.small_width +'px;height:'+ GRppeel.small_height +'px;z-index:9999;right:0px;top:0px;">');
document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"');
document.write(' codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"');
document.write(' id="GRsmallpeelObject" width="'+GRppeel.small_width+'" height="'+GRppeel.small_height+'">');
document.write(' <param name="allowScriptAccess" value="always"/> ');
document.write(' <param name="movie" value="'+ GRppeel.small_path +'?'+ GRppeel.small_params +'"/>');
document.write(' <param name="wmode" value="transparent" />');
document.write(' <param name="quality" value="high" /> ');
document.write(' <param name="FlashVars" value="'+GRppeel.small_params+'"/>');
document.write('<embed src="'+ GRppeel.small_path + '?' + GRppeel.small_params +'" name="GRsmallpeelObject" wmode="transparent" quality="high" width="'+ GRppeel.small_width +'" height="'+ GRppeel.small_height +'" flashvars="'+ GRppeel.small_params +'" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>');
document.write('</object></div>');
document.write('</script>');
document.write('<div id="GRbigpeel" style="position:absolute;width:'+ GRppeel.big_width +'px;height:'+ GRppeel.big_height +'px;z-index:9999;right:0px;top:0px;">');
document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"');
document.write(' codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"');
document.write(' id="GRbigpeelObject" width="'+ GRppeel.big_width +'" height="'+ GRppeel.big_height +'">');
document.write(' <param name="allowScriptAccess" value="always"/> ');
document.write(' <param name="movie" value="'+ GRppeel.big_path +'?'+ GRppeel.big_params +'"/>');
document.write(' <param name="wmode" value="transparent"/>');
document.write(' <param name="quality" value="high" /> ');
document.write(' <param name="FlashVars" value="'+ GRppeel.big_params +'"/>');
document.write('<embed src="'+ GRppeel.big_path + '?' + GRppeel.big_params +'" id="GRbigpeelEmbed" name="GRbigpeelObject" wmode="transparent" quality="high" width="'+ GRppeel.big_width +'" height="'+ GRppeel.big_height +'" flashvars="'+ GRppeel.big_params +'" swliveconnect="true" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>');
document.write('</object></div>');
setTimeout('document.getElementById("GRbigpeel").style.top = "-1000px";',1000);
}
GRppeel.putObjects();

Anda dapat melakukan percobaan terlebih dahulu dengan javascript yang sudah dilengkapi dengan 2 (dua) buah file flash (.swf) dan 2 (dua) buah image ini dengan cara mengupload terlebih dahulu di file hosting (di google sites atau google code). Bentuk javascript setelah diupload akan menjadi seperti berikut:

Link Javascript Page peel:

<script src="page-peel.js" type="text/javascript"></script>

Data file flash dan image yang harus diupload:

- https://sites.google.com/site/gubhugreyotproject/page-peel/iframe/gubhugreyot-small-path.swf
- https://sites.google.com/site/gubhugreyotproject/page-peel/iframe/gubhugreyot-big-path.swf
- https://sites.google.com/site/gubhugreyotproject/page-peel/iframe/gubhugreyot-img-whynot-75x75.gif
- https://sites.google.com/site/gubhugreyotproject/page-peel/iframe/gubhugreyot-img-whynot.jpg

Catatan/Keterangan:

1. Jika diperlukan anda dapat membuat gambar page peel sendiri berdasarkan ukuran image gubhugreyot-img-whynot-75x75.gif dan gubhugreyot-img-whynot.jpg.
2. Buat image dengan ukuran yang sama dengan kedua gambar di atas.
3. Simpan link javascript page-peel.js di atas tag </head> atau di bawah tag <body>

Tutorial lengkap cara membuat Page peel

Cara menambah gadget BloGGeR

Ini adalah sebuah tutorial blogger sederhana tentang cara menambah gadget blogger. Diharapkan panduan dan tutorial blogger ini dapat memberi manfaat bagi blogger-blogger yang baru memulai menerjuni dunia blogging. Tak terlalu banyak memang yang bisa diberikan melalui tulisan ini, hanya sekedar penambah informasi dan pengenalan blogger baru terhadap blog dan elemen-elemen pembentuknya.

Sebelum membahas lebih lanjut tentang cara menambah sebuah gadget (add a gadget) di blogger, rasanya akan lebih menarik seandainya kita sedikit mendalami apa yang dimaksud dengan gadget. Ini menjadi sangat menarik karena membicarakan tentang gadget tentu tak akan lepas dari istilah lain yang hampir serupa, yaitu "Widget". Beberapa kali penulis telah mencoba untuk memastikan "apakah gadget dan widget ini sama?", namun hingga saat ini tak satupun sebuah panduan atau tutorial yang menjelaskan "gadget dan widget" ini secara gamblang.

Karena berbagai keterbatasan informasi tentang dua istilah ini, penulis akhirnya mencoba untuk menterjemahkan pengertian keduanya berdasarkan apa yang selama ini ketahui.

Widget adalah sekumpulan kode html yang terdiri dari kode CSS, javascript dan xHTML atau slah satu dari ketiga elemen html di atas yang mempunyai fungsi khusus (tertentu) dan diperuntukkan untuk melengkapi fungsi blog/web yang sebelumnya belum ada (terpasang). Ini akan berbeda dengan gadget karena sebuah gadget sekalipun tersusun atas elemen yang sama namum belum tentu menjalankan sebuah fungsi khusus yang sebelumnya belum ada di blog/web. Pemahaman ini didasari atas ketersediaan gadget di blogger, dimana salah satu di antaranya adalah "gadget HTML/Javascript". Gadget ini adalah sebuah kenyataan bahwa "sebuah gadget" belum tentu merupakan kumpulan terpadu kode html dengan fungsi yang langsung dapat bekerja, karena bahkan setiap pemilik blog dapat menambahkan atau menyimpan sembarang kode html di dalam "Add a Gadget HTML/Javascript". Termasuk di dalamnya bahkan kode html yang sama sekali tak berkaitan dengan fungsi-fungsi blog (kode yang tak berguna).

Gadget dan widget banyak yang disediakan oleh blogger (blogger plugin) dan dapat anda akses melalui fitur "Rancangan (Design) | Elemen Laman (Page Elements) | Tambah Gadget (Add a Gadget). Anda dapat memilih dan memasang salah satu atau beberapa gadget sekaligus yang memang dibutuhkan untuk memberikan kenyamanan bagi pengunjung untuk menjelajahi dan menikmati semua posting. Beberapa situs juga menyediakan berbagai widget berbayar atau gratis. Tentu saja banyak diantaranya yang terlihat lebih menarik dan lebih baik jika dibandingkan dengan yang telah disediakan oleh blogger. Jika anda tertarik dan ingin menggunakan widget dari luar yang sudah disediakan blogger, anda bisa memanfaatkan "Gadget HTML/Javascript".

Cara Menambah Gadget Blogger
Klik setiap gambar untuk memperbesar!

1. Langkah pertama yang harus dilakukan tentunya adalah login di blogger karena semua penambahan gadget hanya bisa dilakukan setelah kita masuk di halaman dasbor. Untuk login ke blogger anda bisa klik di sini. Tuliskan alamat email secara lengkap jika anda menggunakan email selain dari google mail (yahoo mail, dll) dan cukup tuliskan user name jika anda gunakan email dari gmail. Tuliskan juga password anda di box yang kedua. Buatlah password yang sama seperti yang digunakan di email agar tak mudah lupa. Setelah semua lengkap dan benar, klik "Sign in".
2. Dasbor (Dasboard).
   Halaman ini akan anda jumpai setelah login. Beberapa fitur blogger tersedia di sini, diantaranya Posting, Comments, Settings, Design, Monetize, Stats, dll. Cari dan klik "Rancangan (Design)".
3. Add and Arrange Page Elements:
   Disinilah semua penambahan gadget/widget bermula. Halaman ini terdiri atas beberapa elemen penyusun blog. Anda bebas untuk menentukan sendiri dimana gadget akan di tambahkan. Elemen yang paling sering digunakan adalah pada bagian sidebar (kiri dan/atau kanan. Untuk gadget yang berfungsi sebagai tab menu horizontal (Link List, Blog List dan Pages) secara khusus ditempatkan di bawah header. Cobalah untuk klik salah satu "Add a Gadget" dan tunggu beberapa saat hingga window baru terbuka.
4. Tambahkan sebuah gadget (Add a Gadget):
   Banyak pilihan gadget yang tersedia, salah satu di antaranya HTML/Javascript. Cobalah dulu dengan gadget yang lain karena "Gadget HTML/Javascript" hanya digunakan untuk menambahkan widget atau kode html yang berasal dari luar blogger. Anda bisa mencobanya dengan menambahkan gadget "Label", kenudian untuk selanjutnya anda bisa mencoba yang lain. Cobalah sebanyak-banyaknya karena anda bisa menghapus widget ini kembali.
5. Klik "SIMPAN (SAVE)".
6. Lihat hasil penambahan gadget dengan membuka blog!