Minggu, 22 Januari 2012

Membuat Google Translate Bendera (Flag Icon)

Membuat Google Translate Bendera (Flag Icon)

Kali ini saya akan menjelaskan cara membuat google translate bendera (flag icon) ,sebelumnya saya juga telah memposting  cara membuat translate google di blog  pada posting sebelumnya , fungsi dari google translate adalah untuk menerjemahkan isi dari posting blog ke bahasa pengunjung blog yang dimengerti , seperti yang ada pada bagian sidebar blog ini , untuk cara buat translate google bendera ini sangat mudah .

Cara buat Google Translate Bendera


Fungsi nya tetap sama untuk menerjemahkan , tapi cara buat google translet bendera ini juga bertujuan mempermanis / memperindah tampilan blog anda
tutorial nya cukup sederhana


 Translate Bendera


Sebelum kalian membuat google translate bendera ini silahkan masuk ke blog anda --> biasa tambah gadget --> tambah javascript --> lalu copy paste kode ini

copy paste kode ini:

<style>
.google_translate img {filter:alpha(opacity=100);-moz-opacity: 1.0;opacity: 1.0;border:0;}
.google_translate:hover img {filter:alpha(opacity=30);-moz-opacity: 0.30;opacity: 0.30;border:0;}
.google_translatextra:hover img {filter:alpha(opacity=0.30)-moz-opacity: 0.30opacity: 0.30;border:0;}
</style>
<center>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9PY7NTkcsyJNWSU9mRDwOgIhPdMefJXF5wZkQ3yDhLaqG2-6gZqAwI5zzUTGE-IqrvSU1r6TiA8NCUaJk4v29H7sjMEduYmtqSDDzqEsG50G0U9lIBei07pLRTgPBvCejPpzPfVHJCeY/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24" /></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1KuPNJ-Ehti65DRDhPtoIK5G-q2mQnGo0OKs5C8Vgrg2agmoCPVxq0xnH5GjBnqj7qIGi-D4Rn81_WhX9xpvoHpxhxvnox_9PhMITAiHYvwGreNctuzrU4GgJOC_QMiD8DAvTIZ-YKqQ/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24" /></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdYRjPRz_I1aYGQoRSBXP4irjc0n9zPtWA-e8r0MFKqocBuu_kK8WHvBI4X2kzSvrFEXS2uOyf4hHxEuD4B7bJ5FwOB20QeKI_FfzXtv2U7-uGY6B2RK1p94a-JB4bZxD2MEQwHqx0eZFa/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24" /></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzsNTwMDhpF1gQ19PGh8UmZcS-yOnQKjJpNYQ_kbTlPKJzvrS6fkSNKql_IvZzT6NtaNA3Fl35yYA9nmzwhNOkZ9C5XM5C4HNQMhUMTLxbYX_fubQ_ZRqCuLfAX38dILpuVX3VRul3-Pzp/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24" /></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3d_4q-BUNeVhJ4M00MjIbi-HAp_CXcU43wMUs3ghpP6K1X5mp7r5pmU86HjzTbPQcMsOzSb2YpgYQzqA_ycw3YwLbn9Ji1RU1Yc1Myvvm3M89dU-khcCinvaiWdDjyDljxG4n7d4KUkA/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24" /></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaVBGZisrFDihh_qyU195cSCSu9THFkFTijQsAvbgyNT4nIlBUwqt4bUUWi6TF2yLuetFNlHqhEbksQZQcoQrAgVJx9LKicD9Hz6JunvMAYcBxuyKTRhbF-_ZBooMNk5zBQH3qkQyrfMc/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24" /></a>
<br />
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAYPRfnA1gvNqB8PS5miGm1_2dUrnQrA7Uwjn8p6cYAbN_EJaHRAoDfhtqXakXajy6QAQaHzMuRuzyLC_8cy9P3GUtjVdZYXU9OgqrHoHz5_QJOQzvsjJkdMSP1dlD2Ah0OirHiSNnKaY/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24" /></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cpt&hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG2TtFiDyGca8uhqXiEGR10LbEMwZ5HvFG5A5BwW-R1mVEVcuAW7_V7xhbWNDXoYTMDbl3rHqWj7edZ1Za7HNATkIXV5unLDOw2J-Zl8bv4K8DN9trX5IIgjrl8HCKB0rh9kzmyvvndpg/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24" /></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi76_NwYcto5tkb2NDrllecAVkf6pttM7N59nTR19kxx55KUGUQ5IWg6v23MwmGntlTogyg64x7VxQP2x4N-2BojuDKUqr_SNo3RoClhzr2njZrneJg60iWSGjET0UV9ejOUNx8wkw_SmYR/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24" /></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjccJzJraNxSSf7ZnxmX8p1fB41xWU7zVqdEbIEUzfJgVOCzB7WBKwzYYa7xUCsNQivKuRQbe4cBO_mkhAMNdqbEfM3-1J-Maitj8hVuN_dhXB4BPS5Gr3vHdR-7edQJZoaKKeEBbv7GKo/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24" /></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiggIt2uZ-1DGIdjU6-ly0GcRP8VH4BuOjxw_wC_vNLyJ5dcbtPnUTjIdgSpKJecxqOzpME4BuOnspqatWkGgzgeG-jKDkCAKxPQi0T7jTFp_Fvxor8uNavoG9_FP6omXTHSak0JxHVfR4/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24" /></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Czh-CN&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd3H3XF3_1k3cxwuaunLcGp35rw6WyFLJJxQJ7rRGoVSqz_2T0h-dQN8XihD3O1P-ZnmIygDqGlMdcpjb8virUAFw8W1aZJH7L_qbu_kAZiVQTzBKjVah1LV2Z80C6tt3TgnBh__1gu4Y/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24" /></a>
</center>


Lalu save template anda , sangat mudah cara buat translate google bergambar bendera .. silahkan nikmati tampilan translate google bendera ini selamat menikmati .
»»  READMORE...

Membuat Postingan Mirip Koran

Membagi postingan membagi menjadi 2 kolom ini maksudnya membagi post secara terpisah di kanan dan kiri. Biar tidak bingung coba deh lihat gambar di bawah ini.



Berjajar mirip koran

Sudah tahukan maksudnya ? jika tertarik ingin mencoba, berikut tutorialnya ..

1. Silahkan Login ke blog kamu


2. Kemudian klik Rancangan

3. Klik Edit Html

4. Back up template, buat jaga-jaga jika nanti terjadi kesalahan saat mengedit.
5. Nah, tinggal cari kode ]]></b:skin> ( gunakan ctrl + f agar mudah mencarinya ) dan copy code berikut ini di bawahnya.



<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
.post {
width:285px;
height:400px;
margin-right:5px;
overflow:hidden;
float:right;
border:3px double #808080;
}
</style>
</b:if>


Lanjut dengan mencari css .post{ contoh css nya seperti ini ( mungkin ada perbedaan dari template kamu )


.post{
background:#fff;
border:3px double #a5a5a5;;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin:0.5em 0.5em;
padding:0.5em;
font-family:"Verdana";
text-align:justify}


Jika sudah ketemu, coba perhatikan margin:0.5em 0.5em; kamu tinggal menyisipkan auto pada margintersebut hingga menjadi seperti di bawah ini.


.post{
background:#fff;
border:3px double #a5a5a5;;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin:0.5em auto 0.5em;
padding:0.5em;
font-family:"Verdana";
text-align:justify}


Jika sudah selesai simpan !

Kalau masih kesulitan anda bisa ganti Css milikmu dengan Css .post{ di atas !

Tutorial di atas saya ambil dari blog home-catalog.blogspot.com, serta saya source dari blog Tips Handphone jadi silahkan edit width, height, border, margin dan lainnya sesuai dengan template anda.

Semoga bermanfaat dan berhasil anda coba ^^

Description: Membuat Postingan Mirip Koran
Rating: 5.0
5.0 - Reviewer: DeeJayHan-Blog - ItemReviewed: Membuat Postingan Mirip Koran
»»  READMORE...

Minggu, 01 Januari 2012

Menambah Fitur Emoticon Pada Komentar Blog di Blogspot

Emoticon/smiley dapat mewakili ekspresi komentator blog. Selain itu, emoticon/smiley dapat lebih mempercantik  tampilan bagian komentar blog. Dengan menggunakan javascript, kita dapat melakukan hack untuk menambahkan fitur emoticon pada blog berplatform Blogger. Emoticon ini menggunakan basis perintah emoticon  Yahoo! yg telah kondang itu. Misalnya, ketika ingin menampilkan gambar emoticon senyum, digunakan perintah/menuliskan karakter :), dst. Di blogger, perintah tersebut dapat diadaptasi guna memunculkan tampilan gambar smiley/emoticon tertentu. Pada fitur emoticon komentar Blogger ini, saya menggunakan gambar-gambar berformat gif milik Yahoo! yg memiliki efek animatif (bergerak).
demo smiley/emoticon comment blogger

Cara Pasang/Buat Fitur Emoticon Pada Komentar Blogger

Jika sobat Blogger tertarik memasang fitur emoticon pada blog sobat, ikuti beberapa langkah pemasangannya. Pada intinya ada 3 poin langkah penting:
a. Memasang CSS yg mengatur tampilan emoticon.
b. Memasang kode HTML guna menampilkan preview emoticon/smiley di bagian atas kotak komentar. Fungsinya sebagai panduan pengunjung ketika hendak membuat emoticon pada komentar.
c. Memasang kode javascript, yg berfungsi mengconvert perintah menjadi gambar emoticon.

Berikut cara pemasangannya:
1. Masuk ke Design/Template > Edit HTML
2. Centang "Expand Widget Templates"
3. Copy paste kode CSS berikut di ATAS ]]></b:skin> (cari dg Ctrl + F):
.bukarahasiasmiley {background: none repeat scroll 0 0 #EFF5FB !important;font-size: small !important;padding: 5px !important;margin:auto !important;text-align: left !important;font-weight:bold !important;width:100% !important;-moz-background-clip: -moz-initial;-moz-background-origin: -moz-initial;-moz-background-inline-policy: -moz-initial;}
.bukarahasiasmiley span {padding-right: 3px !important;} 
img.brbsmly {height: auto !important;vertical-align: middle !important;width: auto !important;border:0px !important;}
Jika ingin ganti warna background, ganti #EFF5FB dengan kode warna lain.
4. Cari <b:if cond='data:post.embedCommentForm'>. Biasanya ada dua tag xml seperti itu, cari & pilih yg kedua, yaitu yg berpasangan dengan <b:include data='post' name='comment-form'/>.
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
5. Copy kode HTML berikut (klik select all & copy), letakkan di BAWAH/SETELAH <b:if cond='data:post.embedCommentForm'>.


6. Copy kode berikut & letakkan di atas </body>:
<script src='
https://sites.google.com/site/bukarahasiahost/blogger-comment-smileys/bukarahasiablogspot-ysmileys-bloggercomments.txt' type='text/javascript'></script>
7. Save template.
8. You are done!

Kini pengunjung n sobat dapat menggunakan emoticon/smiley di komentar blog sobat.
Have a nice Blogging.
»»  READMORE...