gubhugreyot : Demo & Tutorial: Blog Tools

Showing posts with label Blog Tools. Show all posts

Sunday, 1 April 2012

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

Login ke blogger
Setelah halaman dasbor terbuka, klik "Rancangan/Design".
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.
Ada beberapa pilihan gadget. Pilih dan klik Gadget "HTML/Javascript".
Copy dan pastekan "Kode CSS dan xHTML-1" atau "Kode CSS dan xHTML-2" ke dalam box HTML/Javascript.
Klik "SIMPAN/SAVE"
Buka blog dan coba untuk menggunakan Widget Google Flag Translate.
Selesai!

Catatan/Keterangan :

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

Monday, 19 March 2012

jQuery Scoll to top plus CSS3 Effects

jQuery Scroll to top Controll ini tak berbeda dengan yang selama ini sudah terpostingkan di banyak blog. Hampir semuanya bersumber dari dinamicdrive.com. Yang membedakan posting ini dengan semua posting lain tentang "jQuery Scroll to Top Controll" adalah pada penggunaan css3 yang berfungsi untuk menampilkan beberapa effek baru agar terlihat lebih dinamis. Jika scroll to top yang lain menggunakan bentuk "tips/tooltips" default browser, yang inipun berbeda juga karena melibatkan css2 yang dipadu dengan css3. Agar lebih jelas bagaimana "bentuk penampilan beda" dari jQuery scroll to top controll yang telah dipadukan dengan css3 ini silahkan anda coba dengan mengarahkan sekaligus klik scroll to top contoll di ujung kanan bawah halaman. Anda juga bisa mencobanya pada controll back to top yang berupa teks link di bawah kode css.

Javascript :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://gubhugreyotprojects.googlecode.com/svn/tools/jqGRscrolltop.js" type="text/javascript"></script>

Kode CSS :

.jqGRscrolltop{
        position:relative;
        font-weight:bold;
        padding:2px 4px;
        text-decoration:blink;
        color:#eee;
        background:#900;
        margin:20px;
        display:inline-block;
        opacity:0.5;
        filter:alpha(opacity=50);      
}
.jqGRscrolltop:hover{
        opacity:1.0;
        filter:alpha(opacity=100); 
}
.jqGRscrolltop:after{
        font-size:16px;
        font-weight:bold;
        font-family:Courier, monospace;
        text-align:center;
        position:absolute;
        right:-200px;
        top:-50px;
        content:"Scroll Back to Top";
        line-height:30px;
        width:30px;overflow:hidden;
        height:30px;
        background:#888;
        border-radius:4px;
        border:3px double #aaa;
        color:#eee;
        text-shadow:1px 1px 1px #000;
        opacity:0;
        filter:alpha(opacity=0);
        z-index:-10;
}
.GRscrolltop,.jqGRscrolltop:after{
        transition:0.6s linear;
        -o-transition:0.6s linear;
        -moz-transition:0.6s linear;
        -webkit-transition:0.6s linear;
        -ms-transition:0.6s linear;
}
.jqGRscrolltop:hover:after{
        width:190px;
        right:0;
        z-index:12;
        opacity:1.0;
        filter:alpha(opacity=100);
        box-shadow:2px 2px 4px #000;
}
.GRscrolltop{
        width:37px;
        height:40px;
        opacity:0.4;
        background:transparent url(https://lh6.googleusercontent.com/-EeYri7NMau0/T2eGKcLZY-I/AAAAAAAAAc0/u1yBzCHWtrw/h120/GRscrolltop.png) center no-repeat;
        background-size:35px 38px;
        filter:alpha(opacity=40);
        border:3px double transparent;
        padding:5px;
        border-radius:10%; 
} 
.GRscrolltop:hover{
        opacity:1.0;
        filter:alpha(opacity=100);
        background:rgba(0,0,0,.4) url(https://lh6.googleusercontent.com/-EeYri7NMau0/T2eGKcLZY-I/AAAAAAAAAc0/u1yBzCHWtrw/h120/GRscrolltop.png) center no-repeat;
        background-size:35px 38px;
        border:3px double #930;
        border-radius:50%;
}

Login ke Blogger.
Halaman Dasbor/Dasboard :
Klik "Rancangan/Design".
Klik "Edit HTML".
Lakukan Backup Template.
Cari Kode ]]></b:skin>
Copy javascript dan letakkan di bawah ]]></b:skin>
Copy kode CSS dan letakkan di atas ]]></b:skin>
Klik "Simpan Template/Save Template".

Jika anda ingin menggunakan sebuah ling controll untuk back to top seperti yang terletak di atas kode css, gunakan xHTML berikut:

xHTML link scroll to top controll :

<a class="jqGRscrolltop" href="#GRtop">Back to TOP</a>

Catatan/Keteoangan :

Untuk mengganti image yang digunakan sebagai contoll, ganti 2 background dengan alamat:
https://lh6.googleusercontent.com/-EeYri7NMau0/T2eGKcLZY-I/AAAAAAAAAc0/u1yBzCHWtrw/h120/GRscrolltop.png.
Jika ingin merubah ukuran image contoll, lakukan perubahan pada :
background-size:35px 38px;
Panduan lebih lengkap dengan kode css yang sedikit berbeda dapat anda buka di sini!

Sunday, 11 March 2012

Hidden Text Sizer

Ini sedikit berbeda jika dibandingkan dengan Text Sizer-1 yang berfungsi untuk merubah ukuran teks di seluruh halaman blog. Hidden text sizer diarahkan untuk bagian bagian tertentu saja (dokumen tertentu). Dengan sebuah id (GRpost) anda bebas untuk menentukan dokumen yang mana yang akan diberi fungsi sizer.

Satu hal lain yang membuat "Hidden Rext Sizer" berbeda adalah pada kode css yang dipergunakan. Penambahan css3 transition membuat text sizer yang tersembunyi akan bergerak secara perlahan memperlihatkan diri ketika cursor diarahkan di atasnya. Anda bisa memahami lebih jelas dengan mencoba fungsi text sizer dan peranan css3 dengan mencoba menggunakan text sizer yang ada pada ujung bawah-kanan halaman.

Menggunakan "Hidden Text Sizer" sangat mudah karena anda tinggal memasukkan dokumen di antara tag pembuja dan penutup dari div dengan id "GRpost".

Contoh cara menggunakan dokumen sizer:

Contoh xHTML :

<div id="GRpost">
Tuliskan teks di sini di antara tag pembuka dan penutup div
</div>

Kode yang digunakan membuat Hidden Text Sizer:

Kode CSS :

<style type="text/css">
.GRsizerfix{
        position:fixed;
        right:-250px;
        bottom:0;
        opacity:0.5;
        filter:alpha(opacity=50);
        transition:0.8s;
        -o-transition:0.8s;
        -moz-transition:0.8s;
        -webkit-transition:0.8s;
        -ms-transition:0.8s;
}
.GRsizerfix:hover{
        opacity:1.0;
        filter:alpha(opacity=100);
        z-index:10;right:0;
}
.GRsizecontroll{
        background:#555;
        padding:6px 0;
        width:385px;
        margin:0 auto;
}
.GRsizecontroll span{
        padding:7px 8px 7px 12px;
        margin:0 8px;
        background:#aaa;
        font-size:18px;
        font-weight:bold;
        color:#000;
        text-shadow:2px 2px 2px #888;
}
a.GRsizer_controll{
        font-size:14px;
        font-weight:bold;
        display:inline-block;
        padding:4px 6px;
        margin:0;
        background:#aaa;
        border:5px solid #900;
        border-right-width:1px;
        background:#666;
        color:#fff;
        box-shadow:0 0 4px #eee;
}
a.GRright{
        border-right-width:5px;
}
a.GRsizer_controll:active{color:#888;outline:none;outline:0 solid;}
</style>

Javascript :

<script type="text/javascript">
//<![CDATA[
var tgs = new Array('div', 'td', 'tr', 'a');
var szs = new Array('9pt', '10pt', '11pt', '12pt', '14pt', '16pt', '18pt');
var startSz = 1;

function ts(trgt, inc) {
    if (!document.getElementById) return
    var d = document,
        cEl = null,
        sz = startSz,
        i, j, cTags;
    sz += inc;
    if (sz < 0) sz = 0;
    if (sz > 6) sz = 6;
    startSz = sz;
    if (!(cEl = d.getElementById(trgt))) cEl = d.getElementsByTagName(trgt)[0];
    cEl.style.GRtext_sizer = szs[sz];
    for (i = 0; i < tgs.length; i++) {
        cTags = cEl.getElementsByTagName(tgs[i]);
        for (j = 0; j < cTags.length; j++) cTags[j].style.fontSize = szs[sz]
    }
}
function tsz(trgt, sz) {
    if (!document.getElementById) return
    var d = document,
        cEl = null,
        i, j, cTags;
    if (!(cEl = d.getElementById(trgt))) cEl = d.getElementsByTagName(trgt)[0];
    cEl.style.fontSize = sz;
    for (i = 0; i < tgs.length; i++) {
        cTags = cEl.getElementsByTagName(tgs[i]);
        for (j = 0; j < cTags.length; j++) cTags[j].style.fontSize = sz
    }
}
function resizeShort(short, summary) {
    short.setStyle({
        overflow: 'hidden'
    });
    if (summary) {
        var i = 0;
        var text = summary.innerHTML.stripTags();
        summary.update(text);
        while (short.scrollHeight > short.offsetHeight) {
            i++;
            if (i > 100) break;
            var text = summary.innerHTML;
            summary.update(text.replace(/\W*\w+\W*$/, ''))
        }
    }
}
//]]>
</script>

Cara menyimpan javascript dan kode CSS

Copy dan pastekan javascript dan kode css "Hidden Text Sizer" melalui Add a Gadget yang dapat di akses melalui:
Dasbor » Rancangan (Design) » Elemen Laman (Page Elements).
Panduan cara menyimpan javascript dan kode css melalui Add a Gadget dapat anda baca melalui link di bawah ini:
Panduan : Detail cara tambah gadget, kode css & javascript
Atau anda juga bisa melihat cara membuat Text Sizer-1 :
Panduan Lengkap membuat Text Sizer - 1
Untuk merubah posisi Text Sizer lakukan pada kode CSS:
- right:-250px;
  Untuk mengatur posisi ke kanan dan kiri.
- bottom:0;
  Untuk mengatur jarak dari bawah.
- Gunakan kode seperti pada Contoh xHTML di atas untuk menempatkan dokumen yang akan diperbesar atau diperkecil ukuran teks-nya.
Untuk merubah besaran perubahan font pada fungsi text sizer dapat dilakukan melalui javascript dan xHTML (9pt, 10pt ... dst).

Text Sizer »09 10 11 12 14 16 18

Top Navigation Bar

gubhugreyot : Demo & Tutorial

Sunday, 1 April 2012

Pasang Widget Google Flag Translate -Translator

Kode CSS dan xHTML-1

Kode CSS dan xHTML-2

Monday, 19 March 2012

jQuery Scoll to top plus CSS3 Effects

Javascript :

Kode CSS :

xHTML link scroll to top controll :

Sunday, 11 March 2012

Hidden Text Sizer

Contoh xHTML :

Kode CSS :

Javascript :

Total Pageviews