Cara Menulis Kode HTML Pada Postingan Blog

Bagi newbie seperti saya belajar menjadi bloger memang harus sabar and tekun, apalagi kalau kita ingin memposting artikel yang mencantumkan kode HTML didalamnya, wuiihh...repot mas,,,itu dulu,Bagi newbie seperti saya yang belum tahu gimana cara menampilkan kode HTML pada postingan sehingga newbie tidak kebingungan mencari-cari kode HTML yang diposting ini dia caranya :


Ada beberapa cara yang saya dapat, antara lain :
1. Buka situs http://centricle.com/tools/html-entities, terus Masukkan File HTML yang akan kita posting di Blog nantinya. Setelah itu, tekan kode "Encode" untuk mengubahnya jadi file yang bisa tampil di blog.

2. Gunakan Software-software untuk Web Design, seperti Macromedia Dreamwaver, Microsoft Frontpage,atau yang lain, atau bisa juga dengan software-software blogtools seperti post2blog dll.

Terus tuliskan semua kode pada area design, kemudian copy kode-kode tersebut dari area HTML Code. Nah kode-kode dalam area HTML Code tersebut lah yang harus diposting kedalam blog.

3. Buka File Editor HTML
Tulis semua script yang akan diposting secara Normal (file HTMLnya..)
Ganti semua kode HTML berikut dengan kode-kode pengganti :


Yang harus dirubah adalah:

#Kode < dirubah menjadi <
#Kode > dirubah menjadi >
#Kode " dirubah menjadi "
#Kode ± dirubah menjadi ±
#Kode Spasi dirubah menjadi

dan kode-kode lain...
Semoga bermanfaat..

sumber : masbugie

Read More

Membuat Text Area

Apa itu text area?. Untuk memudahkan anda memahami apa itu text area, silahkan alihkan perhatian anda ke kolom sebelah kanan layar, di bawah tulisan Mau tuker link, ada sebuah kotak yang di dalamnya berisi text kode-kode HTML, itulah yang di sebut text area. Nah dengan melihat contoh tadi, maka dapat kita katakan bahwa Text area adalah area atau tempat untuk menyimpan text atau tulisan dengan membentuk area baru. Biasanya text area ini di gunakan untuk menyimpan kode-kode HTML ataupun text lainnya agar bisa di copy oleh para pengunjung.

Untuk membuat text area, silahkan anda Copy kode di bawah ini :

<p align="center"><textarea name="code" rows="6" cols="20"> Tulis text ataupun kode-kode yang anda inginkan di sini, maka nanti tulisan anda akan tampil di dalam text area </textarea></p>

Sebagai contoh : 

<span style="color:#722D32;"> Tulis text ataupun kode-kode yang anda inginkan di sini, maka nanti tulisan anda akan tampil di dalam text area </span>

Keterangan : rows="6", menunjukan tinggi dari text area, jadi jika anda menginginkan text area yang tinggi maka silahkan ganti angka " 6 tadi dengan angka yang lebih tinggi nilainya.

Cols="20", menunjukan lebar dari text area. Jika anda menginginkan text area yang lebar maka silahkan ganti angka " 20 " tadi dengan angka yang lebih tinggi nilainya.

Text Area dengan memakai HighLight

Ada variasi lain dari membuat text area ini, yakni text area dengan menggunakan tombol highlight. dengan adanya tombol highlight ini akan memudahkan bagi para pengunjung untuk mengcopy seluruh text ataupun kode-kode yang di berikan, karena dengan hanya sekali tekan saja pada tombol highlight tadi, maka seluruh text ataupun kode-kode yang ada di dalamnya akan di highlight dan tinggal di copy saja. Fasilitas ini sangat berguna tatkala text ataupun kode-kode yang di berikan dalan jumlah yang sangat banyak dan ini akan mengurangi resiko tertinggalnya suatu text ataupun kode-kode untuk di copy. Untuk membuat text area dengan menggunakan highlight ini silahkan anda copy kode HTML di bawah : 

<div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Highlight All"> </div><div align="center"></div><p align="center"><textarea style="WIDTH: 300px; HEIGHT: 144px" name="txt" rows="100" wrap="VIRTUAL" cols="55">simpan tulisan anda di sini, maka tulisan yang anda tulis akan muncul di sini dan siap di copy oleh para pengunjung</textarea></p></div></form>

Sebagai contoh : 

<span style="color:#722D32;">simpan tulisan anda di sini, maka tulisan yang anda tulis akan muncul di sini dan siap di copy oleh para pengunjung</span>

Agar anda lebih memahami kode di atas, sedikit akan saya uraikan. Kode di atas mempunyai dua elemen bagian, yakni elemen kode untuk membuat tombol yang bertuliskan Highlight All, dan yang kedua adalah elemen kode untuk membuat text area.

Elemen tombol highlight All : 

• <div align="center"> --->kata center menunjukan bahwa posisi tombol akan berada di tengah, jadi jika anda ingin posisi tombol berada di tepi sebelah kiri, tinggal ganti dengan kata left. Dan jika ingin berada di tepi sebelah kanan, tinggal ganti dengan kata right. 
• <input onclick="javascript:this.form.txt.focus();this.form.txt.selec()"> --->kode ini artinya ketika tombol highlight di klik, maka seluruh text yang ada di dalamnya akan di highligt (di tandai atau di blok), jadi anda jangan merubah tulisan ini.
• Value="Highlight All" --->kata Highlight All adalah kata yang akan muncul di dalam tombol, jadi jika anda ingin merubah tulisan ini silahkan ganti dengan kata yang anda inginkan.

Element text area : 

1. <p align="center"> ---> ini menunjukan bahwa text area akan berada di tengah, nah jika anda ingin text area anda berada di tepi kiri, ganti kata center dengan kata left, bila ingin ditepi kanan, ganti dengan kata right. 
2. <text style="WIDTH: 300px"> --->kata "WIDTH:300px" menunjukan lebar dari text area tersebut sebanyak 300 pixel, jadi jika anda ingin memperpendek atau memperpanjang lebar text area, anda tinggal menggantinya dengan angka yang anda inginkan. misal: "WIDTH:700px;"
3. HEIGHT: 144px  ---> angka "144px" menunjukan bahwa text area akan mempunyai tinggi sebesar 144 px, jadi jika anda ingin merubahnya tinggal ganti angka tersebut dengan angka yang anda inginkan. Misal : HEIGHT:160px.

Contoh text area yang memakai tombol highlight diatas, memuat skript untuk melindungi dari right click para pengunjung. skript ini di pakai apabila anda tidak ingin tulisan-tulisan anda di copy paste oleh pengunjung. bagi yang berminat silahkan copy lalu pasang pada kode HTML anda antara kode dan selamat mencoba.











 



 

Read More

Cara Menambah Elemen Halaman Diatas Header

Kali ini saya ingin berbagi trik blog cara menambah elemen halaman diatas header dan cara membuat manu tab navigator horizontal.

bagaimana cara menambah elemen di atas header. 

Anda mesti dalam keadaan log in ke blogger. 

Masuk menu tata letak=>Edit HTML. Untuk mengantisipasi hal yang tidak anda inginkan, baiknya download lengkap dulu (backup) dulu template anda.Jangan lupa untuk mencentang kotak kecil Expand Template Widget.

Copi kode di dalam kotakberikut, paste diatas kode ]]&gt;&lt;/b:skin&gt;

</code></span><span class="fullpost"><span style="color: red;">#under_header{ margin:10px 0; padding:1%; width:100%; }</span></span><span class="fullpost"><code><span style="color:#722D32;"></span>

Cari kode seperti ini: 

<span style="color: rgb(114, 45, 50);"> </span></code></span><span class="fullpost"><div id='header-wrapper'>  <br> <b:section class='header' id='header' maxwidget="1" showaddelement="no"> <br> <b:widget id='Header1' locked='true' title='test (Header)' type='Header'/> <br> </b:section> <br>     </div> </span><span class="fullpost"><code><span style="color:#722D32;"></span>

Paste kode didalam kotak berikut dibawah kode tadi

</code></span></p><p><span class="fullpost"><span style="color: red;"><div id="under_header"> <br> <b:section class='header' id='underheader' preferred='yes'/> <br> </div></span></span><span class="fullpost"><code> <br></code></span></p><p><span class="fullpost"><code><span style="color:#722D32;"></span>

Coba sekarang lihat ke elemen halaman udah ada laman atau kolom untuk tambah gadgetnya apa belum? Kalau belum mungkin ada yang keliru, coba lagi!

sumber : amatullah

Read More

Memasang Widget Google Translate Pada Blog

Sesuai dengan namanya. Widget ini berfungsi untuk menerjemahkan bahasa yang satu ke bahasa yang lain. Dengan memasang widget ini, maka pengunjung yang berasal dari negara lain juga bisa menikmati konten diblog anda. Selain itu, anda juga bisa memanfaatkan widget ini untuk belajar bahasa asing lho. Menarikkan?

Sebenarnya google translate ini sudah pernah saya bahas pada beberapa waktu yang lalu. Namun karena widget ini sudah mengalami perubahan yaitu menggunakan icon-icon bendera sehingga tampilannya menjadi lebih menarik.

Contohnya seperti ini yang dibuat oleh mad tomatoe

dan ini yang dibuat oleh kang rohman

Oleh sebab itu, pada postingan ini saya ingin membahas kembali dengan menyajikan widget buatan saya sendiri. Seperti yang dibawah ini










Widget ini saya buat dengan mengganti icon bendera yang berbentuk seperti pin dan diberi sedikit efek shadow sehingga hasilnya menjadi seperti diatas. Semoga tidak terlalu mengecewakan.

Bagi anda yang tertarik, silahkan copy kode dibawah ini.

Untuk Google Translate 2 baris. Gunakan kode dibawah ini:
 

</code></span></p><p><span class="fullpost"><code><span style="color: rgb(114, 45, 50);"> </span></code></span><style><br>.translate img {<br>filter:alpha(opacity=100);<br>-moz-opacity: 1.0;<br>opacity: 1.0;<br>border:0;<br>padding-left:<span style="color: rgb(51, 51, 255);">0</span>px;<br>}<br>.translate:hover img {<br>filter:alpha(opacity=50);<br>-moz-opacity: 0.50;<br>opacity: 0.50;<br>border:0;<br>}<br></style><br><br><div style="text-align:center"><br><a <span class="IL_AD" id="IL_AD1">class</span>="translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cen&hl=en'); <span class="IL_AD" id="IL_AD5">return</span> false;"><img alt="English" border="0" align="absbottom" title="English" height="24" src="<span style="color: rgb(255, 0, 0);">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikfj85tO9FV_ThyV2Z0ysfiUu1DjcG48KIEDti0AcX-seMCEYK3VSsIiqpw5bausmshuy8CkOJTN7etJQzsIWoQtgUziCDJspxTxWaC8O7cCNUJ1m6C2qYnwgBs_yBLdYnaolKH_mG3cv6/s144/uk-flag.png</span>" style="cursor: pointer;margin-right:<span style="color: rgb(0, 0, 0);">8</span>px" width="24"/></a><br><br><a class="translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="24" src="<span style="color: rgb(255, 0, 0);">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ49VWDr7bZcZAW2Yz9JZsSjUKhE8MKq5FMBjNBffk_wvECAH_5BfgOf-u61jBRBRB3TZ-b7woiaz5o3iqvfvKWrOg9fO_me3_u-oGaOXScAFYrybnrQKnW4yN_w-JSIjfFyNv3BzRPYvW/s144/france-flag.png</span>" style="cursor: pointer;margin-right:<span style="color: rgb(0, 0, 0);">8</span>px" width="24"/></a><br><br><a class="translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="24" src="<span style="color: rgb(255, 0, 0);">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifCgEPOq7idH4wLex48UcJmM9a0Up7s4l30uMCizThoEEcl5kASdhzAerZqX-0sUeOAv_lKXkOm_o4ZbF4hiJsKWk-EqTswN7sf9JxVwcaI4Eml9io4TC2Nvuz6RG3wNDukandsc1p6vxL/s144/german-flag.png</span>" style="cursor: pointer;margin-right:<span style="color: rgb(0, 0, 0);">8</span>px" width="24"/></a><br><br><a class="translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="24" src="<span style="color: rgb(255, 0, 0);">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWxPhy4-JB8b6GaF-B9FRBqAk_RFQLYAOB42sL6sn959TuGw_k0cdKUY6sorcatJJXMXJnqKAUr1IAW5-7bDMNRcK1ZyX6dJVHbhpypuluNpElzYfAEAqFr_gw2Q-hKk1LB10pGqZGLh3S/s144/spain-flag.png</span>" style="cursor: pointer;margin-right:<span style="color: rgb(0, 0, 0);">8</span>px" width="24"/></a><br><br><a class="translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="24" src="<span style="color: rgb(255, 0, 0);">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQNFC0wUQg1kPZQOgKhBz4UOKT4VPnxtfAQql6ZVRgAtDZ9ovM9z3o3CtAHtcpFo-dl4KFqSR5yLkBF9z0-HDvgQ8i2svb67f1avzaIDP4F8cs9fEX3Uy5P5OQ_iDwiWmDhLcOppW3WTLK/s144/italy-flag.png</span>" style="cursor: pointer;margin-right:<span style="color: rgb(0, 0, 0);">8</span>px" width="24"/></a><br><br><a class="translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="24" src="<span style="color: rgb(255, 0, 0);">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQd2GBUURdiQD98HbkDmhFrKGs_Ky1sBkXNFJAf_WWdtvuhji92I1SJBgJkp5fIzTFAEK_DFQCRZDvgyiQ7wIn2krXzSVRJgXNcUu1OgaP-_tu0MQFNI5etTvl3gsNIvwV5IvC8eWS2haR/s144/dutch-flag.png</span>" style="cursor: pointer;margin-right:<span style="color: rgb(0, 0, 0);">8</span>px" width="24"/></a><br><br/><br/><br><a class="translate" href="#" target="_blank" rel="nofollow" title="<span class="IL_AD" id="IL_AD3">Russian</span>" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="24" src="<span style="color: rgb(255, 0, 0);">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjztaasTXkCZu247_95nEZQhX5e5w-dk-iZ-O8m8nPojMrzO-Hx-Afgw8F4XaJpU7irx5QZNU1Af-3kboQNl2c3Bf-mGqDOJYrKhpmefIR5DDCeYxDrnfNFwB_cX73bWc0DjvlmEpSxjs0r/s144/russian-flag.png</span>" style="cursor: pointer;margin-right:<span style="color: rgb(0, 0, 0);">8</span>px" width="24"/></a><br><br><a class="translate" href="#" target="_blank" rel="nofollow" title="Brazil" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cpt&hl=en'); return false;"><img alt="Brazil" border="0" align="absbottom" title="Brazilian" height="24" src="<span style="color: rgb(255, 0, 0);">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPN17S4E93tHhP0tWm7AILJ50nCNoogUjGv0BP2HrfiZ8UDI0olTV4ya-gOHHyqkQj-6Tj4bjsiY4YYF8QYUxbw5CjKpYFt8SvqXNBW72fG5My-9aL-MQlgCeUV-PCEcHtvtD5DO2DJLv-/s144/brazil-flag.png</span>" style="cursor: pointer;margin-right:<span style="color: rgb(0, 0, 0);">8</span>px" width="24"/></a><br><br><a class="translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="24" src="<span style="color: rgb(255, 0, 0);">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVVFij12y9SW4zfUmlo6QnuslXZds9eBF45AScsu7rMfEmrKq0Iw6AW9zyE5LPf_iGKv2MRZOri7AiDcZe97Sz43xS9F5ihEgv2PpJRkk1jTazGbMTzMkvJt8caoWzMaTNvtW9vuhzH4A_/s144/japan-flag.png</span>" style="cursor: pointer;margin-right:<span style="color: rgb(0, 0, 0);">8</span>px" width="24"/></a><br><br><a class="translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="24" src="<span style="color: rgb(255, 0, 0);">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyL2ZRXMb2UXlQrirKO60h-bEhxvbc23lU8xudMkYfXznRbNN7NRGnykZU7SDSwvFDUfST3BMF_dC95zyrOuPgTR5jJar1rnsXx6GwK8_FM-_aiBGZ-nncK4-O7gEvV6n5TvOdGD9KtmNv/s144/korean-flag.png</span>" style="cursor: pointer;margin-right:<span style="color: rgb(0, 0, 0);">8</span>px" width="24"/></a><br><br><a class="translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="24" src="<span style="color: rgb(255, 0, 0);">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5hx3IC0LUEgpoiK1YbENhAeqpnvU-AdpO3xkMZM0rlu9KdoLVgKeGa99AZ7eVFJWjCJYDLJx9zKboGYy4natOyWnXSRg5KUDkef4eIwPtspBTluxUgoivHHrelzsGyxVz8YPIl51vDvEK/s144/arab-flag.png</span>" style="cursor: pointer;margin-right:<span style="color: rgb(0, 0, 0);">8</span>px" width="24"/></a><br><br><a class="translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Czh-CN&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="24" src="<span style="color: rgb(255, 0, 0);">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjYlIoWBcvl8hk_03etAH_nfdQi-NwYX1JJ_Bjw-L_cP54LCDzBRXO1q4IxVyqf7Q_EJFk7H2VuRM1Ugpd7VYeOO6blR4ji3T8OOARlMRHm0CD1je8325eDJV59ePLZGm5Oaexn-Gdfo5s/s144/china-flag.png</span>" style="cursor: pointer;margin-right:<span style="color: rgb(0, 0, 0);">8</span>px" width="24"/></a><br><br><div style="font-size:9px; padding:8px 0px 0px 0px"><br><a href="http://www.ngacirnich.blogspot.com/2011/08/memasang-widget-google-translate-pada.html" target="_blank">Translate Widget</a> by Google<br></div></div></p><p><span class="fullpost"><code><span style="color: rgb(114, 45, 50);"> </span>

Untuk Google Translate 3 baris. Gunakan kode dibawah ini:

</code></span></p><p><style><br>.translate img {<br>filter:alpha(opacity=100);<br>-moz-opacity: 1.0;<br>opacity: 1.0;<br>border:0;<br>padding-left:<span style="color: rgb(51, 51, 255);">0</span>px;<br>}<br>.translate:hover img {<br>filter:alpha(opacity=50);<br>-moz-opacity: 0.50;<br>opacity: 0.50;<br>border:0;<br>}<br></style><br><br><div style="text-align:center"><br><a class="translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="24" src="<span style="color: rgb(255, 0, 0);">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikfj85tO9FV_ThyV2Z0ysfiUu1DjcG48KIEDti0AcX-seMCEYK3VSsIiqpw5bausmshuy8CkOJTN7etJQzsIWoQtgUziCDJspxTxWaC8O7cCNUJ1m6C2qYnwgBs_yBLdYnaolKH_mG3cv6/s144/uk-flag.png</span>" style="cursor: pointer;margin-right:<span style="color: rgb(0, 0, 0);">8</span>px" width="24"/></a><br><br><a class="translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="24" src="<span style="color: rgb(255, 0, 0);">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ49VWDr7bZcZAW2Yz9JZsSjUKhE8MKq5FMBjNBffk_wvECAH_5BfgOf-u61jBRBRB3TZ-b7woiaz5o3iqvfvKWrOg9fO_me3_u-oGaOXScAFYrybnrQKnW4yN_w-JSIjfFyNv3BzRPYvW/s144/france-flag.png</span>" style="cursor: pointer;margin-right:<span style="color: rgb(0, 0, 0);">8</span>px" width="24"/></a><br><br><a class="translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="24" src="<span style="color: rgb(255, 0, 0);">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifCgEPOq7idH4wLex48UcJmM9a0Up7s4l30uMCizThoEEcl5kASdhzAerZqX-0sUeOAv_lKXkOm_o4ZbF4hiJsKWk-EqTswN7sf9JxVwcaI4Eml9io4TC2Nvuz6RG3wNDukandsc1p6vxL/s144/german-flag.png</span>" style="cursor: pointer;margin-right:<span style="color: rgb(0, 0, 0);">8</span>px" width="24"/></a><br><br><a class="translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="24" src="<span style="color: rgb(255, 0, 0);">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWxPhy4-JB8b6GaF-B9FRBqAk_RFQLYAOB42sL6sn959TuGw_k0cdKUY6sorcatJJXMXJnqKAUr1IAW5-7bDMNRcK1ZyX6dJVHbhpypuluNpElzYfAEAqFr_gw2Q-hKk1LB10pGqZGLh3S/s144/spain-flag.png</span>" style="cursor: pointer;margin-right:<span style="color: rgb(0, 0, 0);">8</span>px" width="24"/></a><br><br/><br/><br><a class="translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="24" src="<span style="color: rgb(255, 0, 0);">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQNFC0wUQg1kPZQOgKhBz4UOKT4VPnxtfAQql6ZVRgAtDZ9ovM9z3o3CtAHtcpFo-dl4KFqSR5yLkBF9z0-HDvgQ8i2svb67f1avzaIDP4F8cs9fEX3Uy5P5OQ_iDwiWmDhLcOppW3WTLK/s144/italy-flag.png</span>" style="cursor: pointer;margin-right:<span style="color: rgb(0, 0, 0);">8</span>px" width="24"/></a><br><br><a class="translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="24" src="<span style="color: rgb(255, 0, 0);">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQd2GBUURdiQD98HbkDmhFrKGs_Ky1sBkXNFJAf_WWdtvuhji92I1SJBgJkp5fIzTFAEK_DFQCRZDvgyiQ7wIn2krXzSVRJgXNcUu1OgaP-_tu0MQFNI5etTvl3gsNIvwV5IvC8eWS2haR/s144/dutch-flag.png</span>" style="cursor: pointer;margin-right:<span style="color: rgb(0, 0, 0);">8</span>px" width="24"/></a><br><br><a class="translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="24" src="<span style="color: rgb(255, 0, 0);">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjztaasTXkCZu247_95nEZQhX5e5w-dk-iZ-O8m8nPojMrzO-Hx-Afgw8F4XaJpU7irx5QZNU1Af-3kboQNl2c3Bf-mGqDOJYrKhpmefIR5DDCeYxDrnfNFwB_cX73bWc0DjvlmEpSxjs0r/s144/russian-flag.png</span>" style="cursor: pointer;margin-right:<span style="color: rgb(0, 0, 0);">8</span>px" width="24"/></a><br><br><a class="translate" href="#" target="_blank" rel="nofollow" title="Brazil" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cpt&hl=en'); return false;"><img alt="Brazil" border="0" align="absbottom" title="Brazilian" height="24" src="<span style="color: rgb(255, 0, 0);">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPN17S4E93tHhP0tWm7AILJ50nCNoogUjGv0BP2HrfiZ8UDI0olTV4ya-gOHHyqkQj-6Tj4bjsiY4YYF8QYUxbw5CjKpYFt8SvqXNBW72fG5My-9aL-MQlgCeUV-PCEcHtvtD5DO2DJLv-/s144/brazil-flag.png</span>" style="cursor: pointer;margin-right:<span style="color: rgb(0, 0, 0);">8</span>px" width="24"/></a><br><br/><br/><br><a class="translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="24" src="<span style="color: rgb(255, 0, 0);">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVVFij12y9SW4zfUmlo6QnuslXZds9eBF45AScsu7rMfEmrKq0Iw6AW9zyE5LPf_iGKv2MRZOri7AiDcZe97Sz43xS9F5ihEgv2PpJRkk1jTazGbMTzMkvJt8caoWzMaTNvtW9vuhzH4A_/s144/japan-flag.png</span>" style="cursor: pointer;margin-right:<span style="color: rgb(0, 0, 0);">8</span>px" width="24"/></a><br><br><a class="translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="24" src="<span style="color: rgb(255, 0, 0);">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyL2ZRXMb2UXlQrirKO60h-bEhxvbc23lU8xudMkYfXznRbNN7NRGnykZU7SDSwvFDUfST3BMF_dC95zyrOuPgTR5jJar1rnsXx6GwK8_FM-_aiBGZ-nncK4-O7gEvV6n5TvOdGD9KtmNv/s144/korean-flag.png</span>" style="cursor: pointer;margin-right:<span style="color: rgb(0, 0, 0);">8</span>px" width="24"/></a><br><br><a class="translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="24" src="<span style="color: rgb(255, 0, 0);">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5hx3IC0LUEgpoiK1YbENhAeqpnvU-AdpO3xkMZM0rlu9KdoLVgKeGa99AZ7eVFJWjCJYDLJx9zKboGYy4natOyWnXSRg5KUDkef4eIwPtspBTluxUgoivHHrelzsGyxVz8YPIl51vDvEK/s144/arab-flag.png</span>" style="cursor: pointer;margin-right:<span style="color: rgb(0, 0, 0);">8</span>px" width="24"/></a><br><br><a class="translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Czh-CN&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="24" src="<span style="color: rgb(255, 0, 0);">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjYlIoWBcvl8hk_03etAH_nfdQi-NwYX1JJ_Bjw-L_cP54LCDzBRXO1q4IxVyqf7Q_EJFk7H2VuRM1Ugpd7VYeOO6blR4ji3T8OOARlMRHm0CD1je8325eDJV59ePLZGm5Oaexn-Gdfo5s/s144/china-flag.png</span>" style="cursor: pointer;margin-right:<span style="color: rgb(0, 0, 0);">8</span>px" width="24"/></a><br><br><div style="font-size:9px; padding:8px 0px 0px 0px"><br><a href="http://www.ngacirnich.blogspot.com/2011/08/memasang-widget-google-translate-pada.html" target="_blank">Translate Widget</a> by Google<br></div></div></p><p><span class="fullpost"><code></code></span></p><p><span class="fullpost"><code></code></span></p><p><span class="fullpost"><code></code></span></p><p><span class="fullpost"><code></code></span></p><p><span class="fullpost"><code></code></span></p><p><span class="fullpost"><code><span style="color:#722D32;"></span>

1. Kalau sudah, buka kotak HTML/ javascript lalu pastekan kodenya kedalam kotak.

2. Klik Save. Selesai. Silahkan lihat hasilnya.


Jika anda merasa letaknya kurang pas dengan kolom sidebar anda. Anda bisa menyesuaikan jaraknya dengan mengganti nilai 0 pada padding-left. Semakin tinggi nilainya semakin lebar jaraknya. Dan jika anda ingin mengganti icon benderanya dengan icon lain. Silahkan ganti tulisan bewarna merah dengan alamat url icon anda.

Selamat mencoba. Semoga bermanfaat..

sumber : herman blog

Read More