Cara Membuat Google Translate Bendera Pada Blog

Nah kita akan belajar cara membuat google translate caranya itu mudah banget kok pasti para gan bisa... hehehe

Dan nanti hasilnya seperti ini:

Berikut ini cara-caranya:

1. Login ke blogger.
2. Pilih tab rancangan - edit HTML

3. Lalu Paste kan kode di bawah ini:

 <style> .translate img { filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; border:0; padding-left:0px; } .translate:hover img { filter:alpha(opacity=50); -moz-opacity: 0.50; opacity: 0.50; border:0; } </style> <div style="text-align:center"> <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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUCBrcI-ts9uGK4M9EVCZ4WwaXXrNDMTltOC8C3DXHWGxRbRRvKxO3g2b8F2wr2XyJjVI47ersuA_z6Sa7iS7pi3MBZSenGtf7aGyrdqyRmcgwf5XxvPwnPc6opKCfdDm0QUKGSIpTRx8r/s144/uk-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw0Xj2XKbfqOPZe2t51IymbJ0n9y0eTfdsWEzVK69RIRUmVuCeZNCmSWFT80pzLfTCqstO_gN9hHVCB4sqc6KKJR-KxG8pA0arvs7SWU6vJuoFSFYOY6drWVKzecO0PwSFOhRMVRhU0-Gy/s144/france-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR8dtRgcMvtdFLA_37_1vXR8a-M96qRKjaRoMkIk5VdQECRrELFnct75yDn22zth09VlUPaGTUtO7yPsfDC940Pda4TIKmBA5NFv0wumsD43dEKAxwfJa9cbk4Gcmmcna2gplOqAxxXxWf/s144/german-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyQZHB2kBxi_891SRhi2ya55uZEFUyM9YG1enhcpRvJPpGRbX_rtwahC-n4kU-F_DQUQ5quldrZjDz-Zu0gdQTKZaoLIUQih8nZ8vbpsaWJVQ9R5MzuqvV_oqjkFikF364lDyNvBqCY7Bl/s144/spain-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjil1VaAr4CxY47fIUn9i31jqMliZBwOqfk5HW8fzPrEvQTFHTRKxiGCKpzS0i9Se_azTulZmp5WeJOXLc17jvtjtM5paMP9l7YFx8NQ0o6l8sI7FglTOd4zxzhg5v2b1sfwVsPB1uwBwbx/s144/italy-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzmgqfrb1LCaW6A_EsxBVNKSrfIzrSoUmBQV8p8MKP3TGAEHdr85DDZWzqcrLrIQNgecSUiLyGgCGUdiVnYlTRWfG2iGbvjMup0T2YwDGH3VgsDCG-JFlEUkPqcYxR8SVKJwtZ_BBIRbk-/s144/dutch-flag.png" style="cursor: pointer;margin-right:8px" 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdsjE0urQ0x9amSsUhSsD6EY4HHwSzj4McCQ20T1j7mNhOb4WcNOoZ8mQQowTrVLWaIIp_0uyFNW-ScRQzfaVoBJfM-nNl-nOZlCORL1rMDzr9CHbTcsZSynWJVBpBas_cz5EMECNhcEOs/s144/russian-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSs_SaUASd5vfoii9HOpPEV2aqJApvwMZjd2Yc4W7-rArxrdT_JoYrb-fDINWETgUOVHiobxl88Z7kJ0fG09fqeluill2HESL0wpUWHYiQn6YoKAyzFHvm1MKCIwBB-XQ3URpGRF_I6q1F/s144/brazil-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuZ2c0bg962UD_mLPyNB823Ej_zZXOnwFLeLzllxqThE44fOVlrXHhn_xcOjn2CvZj6hD2MnPkiv8RrUgZmWW8EgFn-20UBcFbWTDUFDNanT3kiihG6m4p8SOrXW6QODAzaMdXOgm5JZ6t/s144/japan-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdO3Zl-9_3JV5r7rhTw_xTKyT8aFw6cFv5nOadeAzya8fpnhHuE1d5e6VOm9xOoW-T9hy4gl6MqyHeAr3LbO3qLRcDir3InYNHuJcItXjCYUIqnMPsyhw3VciQhN7gVdlErXIG3EzkYcUQ/s144/korean-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPgCbrQWKvLtd-SRp80Dq597enCBl-4qDmOgWi9TGbS3ZjSINSi4JZx8Ipe2LzTsfNkc9aw0-MQtX9qOrYuqKRBQEJ3RWzLlVGf3JCX8X7o2Ry2mGvqDcRn8QQNng-kgVDFP7Xdi3nlCbC/s144/arab-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkLl_SjIAYA-x1px6t3lHzJi3h5OFhXw3OubG6TwGce_Fvs0FV11zTu_n-vMcg4j-FFNNNMJnRlW0zlFzpQkFhMnN76ceLoWkUDtHzAmt0Pgzdd99eGowmCsIejRD3Cxh5EGsXOXGmZwIj/s144/china-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <div style="font-size:9px; padding:8px 0px 0px 0px"> <a href="http://juntenxblog.blogspot.com" title="translate widget"/>Translate Widget</a> by Google </div></div>

 4. Lalu di Simpan atau di Save

Cara Membuat Header Atau Logo Keren Di Blog

1. Kalian Harus masuk ke alamat berikut dan pilih salah satu:

• www.textspace.net
  
• www.flamingtext.com
  
• cooltext.com
  
• www.simwebsol.com
  
• www.logomatik.net
  
• www.thelogoshop.info 
  

 2. Misalnya aja bro.... saya milih flamingtext.com dan yang saya pilih itu "page 8" bro.... nanti hasilnya    seperti ini:

3. Kemudian anda harus mengganti logo teksnya bro....dan formatnya terserah anda bro....

nih hasil saya :

4. Kemudian anda klik "Create Logo" bro.... Nanti hasilnya seperti ini:

 

5. Lalu anda klik "Personal Use" bro.... Tapi biasanya suruh daftar dulu.... baru bisa ke cara selanjutnya....

kalau sudah nanti kalian akan menemukan hasil seperti ini:

6. Kemudian gambar anda..... anda SAVE bro... caranya.... :

• Klik kanan pada gambar anda
  
• Lalu klik "Simpan Gambar dengan nama lain"
  
• Atau "SAVE AS IMAGE"
  

7. Sekarang anda sudah punya bahannya..... sekarang langsung aja.... seperti biasa

8. Log in Blogger dulu

9. Setelah itu klik "TATA LETAK" berada pada kiri bawah nanti hasilnya seperti gini:

 

10. Setelah itu klik "EDIT" pada header blog anda. Misalnya: Kita Belajar Bersama(Header) itu pada blog saya

11. Kemudian input gambar anda yang anda simpan tadi kemudian klik "penempatan" klik "Selain Judul dan Keterangan" nanti hasilnya seperti ini:

 

Cara Membuat Menu Drop Down dibawah atau diatas Header

Sahaba mazinu tentunya ingin mempercantik blog bukan? Nah pada kesempatan ini mazinu akan memberikan tutorial blogger kepada kalian mengenai Bgaimna menu dibawah atau diatas Header? Emm,, dengan kita menampilkan menu drop down atau menu Naik Turun dibawah Header atau diatas header, tepatnya yaitu pada judul Blog kita tentunya blog kita akan lebih keren dan lebih elegan dengan memasang widget satu ini. Mazinu kemarin juga memasang menu drop down,, dan mazinu yakin insyaalloh pasti berhasil, karena sebelumnya sudah saya praktekkan! Jika kalian tertarik membuat Menu + Sub menu yang dibuat Drop Down silahkan ikuti petunjuk atau cara mazinu ini ya? yang hasilnya nanti seperti ini :

MAAF CARA INI BELUM BISA DIGUNAKAN. MASIH DALAM PERBAIKAN :)

Woauuuww,, setelah kalian meliha gambar diatas tentunya kalian tertarik untuk membuatnya bukan?
naahh berikut caranya :

Cara Membuat Menu Drop Down dibawah atau diatas Header

• Kalian harus login terlebih dahulu ke blogger
• Klick Design, dan Edit HTML
• Cari kode ]]></b:skin> {untuk memudahkan mecari kodenya klick Ctrl + F} dan letakkan kode berikut tepat Diatas kode ]]></b:skin>

/* Menu Horizontal Dropdown ----------------------------------------------- */ #menuwrapperpic{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqswV-ie0SZM5LXj0MWu0dXkPIrrnSgw-Rv-y_rUR3pqmbEtxbbyIiyfpb_BkcF_ykwq-UK68wk4aXLw0sbpPTQk8kmVtrYHU-XAoHNTJnRVE0tNecYs1rPVXMt-KmJny6KtgWzTQcF_I/s1600/menubar.png) repeat-x;width:960px;margin:0 auto;padding:0 auto} #menuwrapper{width:960px;height:35px;margin:0 auto} .menusearch{width:300px;float:right;margin:0 auto;padding:0 auto} .clearit{clear:both;height:0;line-height:0.0;font-size:0} #menubar{width:100%} #menubar,#menubar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0} #menubar a{display:block;text-decoration:none;font-size:12px;font-weight:700;text-transform:uppercase;color:#CECECF;border-right:1px solid #191919;padding:12px 10px 8px} #menubar a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZsYc9Jbnzt7t0GvMM_U6HHjrJQYUdSrCSZfFyvVQdlxZ2AnQHy3-GWnzKCUBqZOdEAW3Mfzrz6lTCo9AK7ulAQQTDhl1asAfvA2mC0CCCu5XP_FGqTaXnjnsbxtU3Fff6DMhyphenhyphen1rIGOvA/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:12px 24px 8px 10px} #menubar li{float:left;position:static;width:auto} #menubar li ul,#menubar ul li{width:170px} #menubar ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px} #menubar li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:5px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)} #menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{background-color:#222;color:#E98C0A} #menubar li:hover ul,#menubar li.hvr ul{display:block} #menubar li:hover ul a,#menubar li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none} #menubar li ul li.hr{border-bottom:1px solid #444;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:4px 0} #menubar ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none} 

• Kode warna merah diatas silahkan rubah sesuai selera anda!
• Selanjutnya kalian cari kode berikut:
  <header>  : untuk menempatkan menu di atas nama blog
  </header> : untuk menempatkan menu di bawah nama blog
• Copy kode di bawah ini dan letakkan tepat di atas kode <header> atau di bawah kode </header>

<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='http://mazinubersahabat.blogspot.com/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_qZSDZ0Ih8GiEC3djZKST8rHdNebZ4B6Ni-lOdfXTWs3YwyJC_8qMMT_v_LJydGRSEG1UyZaKWerbdZm3ZJgnVYJhnVCaTPDR59udw_qWjeqmk1eOBRIH6NG-4b5Ril8SxQKV-r1EGdg/s1600/home_white.png' style='padding:0px;'/>Home</a></li>
<li><a href='http://mazinubersahabat.blogspot.com/' target='new'>Tentang Admin</a></li>
<li><a class='trigger'>Contact Us</a>
<ul>
<li><a href='http://mazinubersahabat.blogspot.com/' target='new'>Sub Menu 1</a></li>
<li class='hr'/>
<li><a href='http://mazinubersahabat.blogspot.com/'>Sub Menu 2</a></li>
<li><a href='http://mazinubersahabat.blogspot.com/' target='new'>Sub Menu 3</a></li>
<li><a href='http://mazinubersahabat.blogspot.com/' target='new'>Sub Menu 4</a></li>
</ul>
</li>
<li><a href='http://mazinubersahabat.blogspot.com/' target='new'>Menu</a></li>
<li><a class='trigger'>Menu Drop Down</a>
<ul>
<li><a href='http://mazinubersahabat.blogspot.com/'>Sub Menu 1</a></li>
<li class='hr'/>
<li><a href='http://mazinubersahabat.blogspot.com/'>Sub Menu 2</a></li>
<li class='hr'/>
<li><a href='http://mazinubersahabat.blogspot.com/'>Sub Menu 3</a></li>
<li class='hr'/>
</ul>
</li>
<li><a class='trigger'>Menu Blog</a>
<ul>
<li><a href='http://mazinubersahabat.blogspot.com/'>Blog 1</a></li>
<li class='hr'/>
<li><a href='http://mazinubersahabat.blogspot.com/'>Blog 2</a></li>
<li class='hr'/>
<li><a href='http://mazinubersahabat.blogspot.com/'>Blog 3</a></li>
<li class='hr'/>
<li><a href='http://mazinubersahabat.blogspot.com/'>Blog 4</a></li>
</ul>
</li>
</ul> <div class='menusearch'>
<div style='float:right;padding:8px 8px 0 0;'>
<form action='http://mazinubersahabat.blogspot.com/' method='get' target=''>
<input name='sitesearch' style='display:none;' value='http://mazinubersahabat.blogspot.com/'/>
<input id='search-box' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' style='width:170px;border:none;padding:4px 10px; font:italic 12px Georgia;color:#666; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvf3G-dAwlY1TQmp9V9TZVjmAHoG4Xwb4UIO36dyO2ANrrK_n1WmmwAJOa3VMhBMhTzanvFuhDe96GGn0te_6nRloibBewzVpl5cjAYz9lnyzeN3qnlwBiozpl8ss5aTpDD_e8-FqvjIk/s1600/field-bg.gif) no-repeat;' type='text' value='Cari disini ya sob...'/><input align='top' id='search-btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlFRjQVVkH9GIQxxmiPMvhAGOHx14mreR11fDVqFP9LCqjsInVGvUZMhpLnSTykaCWhN7mOJQ8GPhgebbSlTsmlr13MhU0bfmbjJsq3Kgf_RuvPagaZitrk1TL967NS2F-MdZbqs1GtG0/s1600/bg_search.gif' type='image' value='Search'/>
</form></div></div><br class='clearit'/></div><div style='clear:both;'/></div>

• Kode yang mazinu beri warna orange adalah URL tujuan,, silahkan ganti sesuai yang kalian kehendaki!
• Simpan dan Lihat Hasilnya!

Cara Membuat Banner Iklan di Blog

Hasil kerja Blogging sobat harusnya menghasilkan suatu keuntungan. Ngapain bersusah payah untuk Blogging namun tidak ada yang sobat hasilkan. Jadi apa keuntungan kita dari Blogging?

Salah satunya adalah dengan adanya iklan. Jadi, jika ada yang memasang iklan pada Blog sobat, maka si pemasang harus membayar dengan tarif yang telah ditentukan. Jadi kita para Blogger harus berusaha membuat Blog sebagus mungkin agar Blog kita ramai dan menarik seseorang untuk memasang iklan di Blog kita.

Untuk memudahkan para pemasang iklan memasang iklan di blog sobat, sobat baiknya menyediakan kotak banner iklan.

Membuat Banner Iklan:
1. Sediakan Gambar untuk Promosi pemasangan iklan. Sebaiknya gambar tersebut menarik seperti gambar animasi. Untuk membuat animasi dengan efek yang menarik, salah satu caranya adalah membuat banner animasi.
2. Jika Gambar telah siap, maka sobat login ke akun Blogger sobat.
3. Masuk ke bagian Template dan pilih Edit HTML.
4. Cari kode ]]></b:skin>, agar lebih mudah gunakan tombol ctrl+F.
5. Masukan kode berikut diatas kode ]]></b:skin>.
 

#super-beeads {margin:0px;padding:0px;text-align:center}
#super-beeads  img {margin:1px 1px;text-align:center;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;-webkit-box-shadow: 1px 2px 1px #ccc;-moz-box-shadow: 1px 2px 1px #ccc;box-shadow: 1px 2px 1px #ccc;}
#super-beeads img:hover {-moz-opacity: 0.7;opacity: 0.7;filter:alpha(opacity=70);}

Sobat bisa membuat 4 kotak iklan sekaligus dengan posisi 2 baris x 2 kolom.
Untuk lebih jelasnya, beginilah contoh hasil pembuatanya:

Perhatikan, untuk kode berwarna merah adalah jarak antara kotak iklan atas dengan kotak iklan bawah, sedangkan untuk warna biru adalah jarak antara kotak iklan kiri dan kotak iklan kanan. Sesuaikan dengan keinginan sobat.

6. Setelah selesai, save Template sobat.
7. Tahap selanjutnya, sobat masuk ke bagian Tata Letak.
8. Klik tambah gadget pada bagian dimana sobat akan memasang kotak iklan.
9. Masukan kode berikut, (sesuaikan berapa kotak iklan yang akan sobat buat).

<div id="super-beeads">
<a href="Masukkan-Url" target="_blank" title="Title-Iklan"><img alt="Alt/Text Gambar" border="0" src="Url Gambar" /></a>
<a href="Masukkan-Url" target="_blank" title=" Title-Iklan"><img alt="Alt/text Gambar" border="0" src="Url Gambar" /></a>
<a href="Masukkan-Url" target="_blank" title="Title-Iklan"><img alt="Alt/Text Gambar" border="0" src="Url Gambar" /></a>
<a href="Masukkan-Url" target="_blank" title="Title-Iklan"><img alt="Alt/Text Gambar" border="0" src="Url Gambar" /></a>
</div>

Catatan, Untuk kode warna merah adalah Url tujuan gambar, untuk kode warna hijau adalah Title gambar, untuk kode warna kuning adalah Alt/Text Gambar, untuk kode warna biru adalah Url gambar.
Kode diatas akan menghasilkan 4 gambar dengan urutan: kiri atas, kanan atas, kiri bawah dan kanan bawah. Silakan hapus salah satu jika tidak diperlukan.
Sobat bisa memasukan Url promosi pemasangan iklan pada gambar, atau jika telah ada yang memasang iklan sobat masukan Url tujuan iklan gambar tersebut.

10. Simpan pekerjaan sobat dan lihat hasilnya.
sumber: Super-Bee

#Atau jika sobat akan memasang iklan dengan gaya standard, langsung saja tambahkan gadget di posisi yang sobat inginkan, pilih mode HTML/Javascript, dan masukan kode berikut. Tentunya sobat perhatikan dahulu besar sidebar harus dapat menampung besar gambar.

<a href="http://regibrader-free.blogspot.com/p/blog-page_1328.html" target="_blank" title="Pasang Iklan Disini"><img alt="Pasang Iklan Disini" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmWQF9EBV6LAl-X6DgQkw9ZIlEkvAG0h9iqZez7RJRSeguZtcqgsgDUg4sWJ_h0I5iap_l_siay4YVIrfKT3f-I7W3hDaaD8Gj7ox8EuktKbWOtjOlHw70D-XDf7-XQSk7AVcBS3AAeMo/s1600/pasang+iklan+728x90.gif" /></a>

merah = URL tujuan iklan
biru = Url Gambar
hijau = Title
kuning = alt gambar

Semoga sobat mengerti dengan pembahasan ini, dan mudah-mudahan berhasil. Sukses untuk kita semua...

Gabungan Widget Like Facebook, Follow Twitter, dan Google+ untuk Blog

Saya pernah membagikan cara membuat widget tombol like facebook, tombol follow me twitter, dan tombol google +1. Kali ini saya akan bagikan salah satu hasil penggabungan widget-widget tersebut dalam satu buah widget, dengan ditambah satu widget lagi yaitu follow on google+.
Tujuan dibuatnya widget ini adalah, mengumpulkan widget-widget sosial pada satu area, sehingga pengunjung akan lebih mudah menemukan widget sosial pada Blog sobat. Selain itu juga agar tata letak widget terlihat rapih, karena widget-widget sosial ini diletakan dalam sebuah tampilan kotak, dan dalam tampilan kotak tersebut setiap widget-nya memiliki ruang masing-masing. OK, untuk lebih jelasnya coba perhatikan screenshot widget tersebut di bawah ini.

Bagaimana? sobat suka dan ingin menerapkanya di blog sobat? Silakan ikuti langkah-langkah berikut ini.
1. Login ke akun Blogger sobat.
2. Masuk pada bagian Tata Letak.
3. Klik tambahkan gadget di posisi yang sobat inginkan.
4. Pilih mode HTML/Javascript.
5. Masukan kode berikut.

<style>
        /* Social Widget */
        #ForYouFree-bar {
            border: 0;
            margin-bottom: 10px;
            margin: 0 auto;
                width:300;
        }
        .fb-likebutton {
            background: #fff;
            padding: 10px 13px 0 10px;
            border-right: 1px solid #D8E6EB;
           border-left: 1px solid #D8E6EB;
           border-bottom: 1px solid #D8E6EB;
            margin:0px;
                height:45px;
        }
        .googleplus {
            background: #F5FCFE;
            border-top: 1px solid #FFF;
            border-bottom: 1px solid #ebebeb;
            border-right: 1px solid #D8E6EB;
            border-left: 1px solid #D8E6EB;
            border-image: initial;
            font-size: .90em;
            font-family: "Arial","Helvetica",sans-serif;
            color: #000;
            padding: 9px 11px;
            line-height: 1px;}
        .googleplus span {
            color: #000;
            font-size: 11px;
            position: absolute;
            display:inline-block;
            margin: 9px 70px;}
        .g-plusone {    float: left;}
    .gplus {
            background: #fff;
            padding: 0px;
            border: 0px solid #C7DBE2;
            margin-bottom:-13px;}

        .twitter {
            background: #EEF9FD;
            padding: 10px;
            border: 1px solid #C7DBE2;
            border-top: 0;}
</style>

    <!--begin of social widget-->
<div style="margin-bottom:10px;">
<div id="ForYouFree-bar" >

    <!-- Google Plus-->
    <div class="gplus"> <link href="http://plus.google.com/116159611196713950391" rel="publisher" />

    <!-- Place this tag where you want the badge to render -->
<g:plus href="http://plus.google.com/116159611196713950391" width="300" height="69" margin="0px" theme="light"></g:plus>
</div>

    <div class="fb-likebutton">
    <!-- Facebook -->
    <iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com/braderblog&amp;send=false&amp;layout=standard&amp;width=230&amp;show_faces=false&amp;font=arial&amp;colorscheme=light&amp;action=like&amp;height=80&amp;appId=142184962628769" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:230px; height:80px;" allowtransparency="true"></iframe>
</div>

    <div class="googleplus">
    <!-- Google -->
<g:plusone size="standard" annotation="inline" width="300" href="http://regibrader-free.blogspot.com"></g:plusone>
</div>

    <div class="twitter">
    <!-- Twitter -->
<a class="twitter-follow-button" data-lang="id" data-show-count="true" href="https://twitter.com/Regy_Brader">Ikuti @Regy_Brader</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>

</div></div>

Saya hanya share widget dengan script yang telah ada, yang telah dibuat kawan Blogger lain sebelumnya. Widget ini cocoknya dipasang pada sidebar dengan lebar sekurang-kurangnya 300px. Kecuali untuk para Blog master, mungkin widget ini bisa dipasanng dimanapun ia inginkan. Silakan, edit lebih lanjut widget ini jika memang sobat bisa.

Namun saya tidak khawatir, kebanyakan Blogger menggunkan sidebar yang tidak kurang dari 300px.
Keterangan:
Ubah kode berwarna merah dengan url Blog sobat.
Ubah kode berwarna hijau dengan ID Twitter sobat.
Ubah kode berwarna orange dengan ID Google Plus sobat.

Ubah kode berwarna biru dengan alamat halaman Fanspage Facebook sobat.
Kalau sobat belum punya halaman Fanspage Blog sobat di Facebook, tentunya sobat harus buat dulu. Silakan baca panduanya,http://wulanmeylianawaty.blogspot.com/2013/10/cara-membuat-halaman-blog-di-facebook.html

6. Jika kode telah diletakan dan selesai disesuaikan, maka klik Simpan.

Silakan lihat hasilnya, semoga berhasil.

Cara Membuat Halaman Blog di Facebook

Salah satu cara mempromosikan Website / Blogspot adalah memperkenalkanya di Facebook. Apalagi jika sobat baru membuat Blog, saya sangat menganjurkan untuk membuat halaman dan mempromosikanya di Facebook.
Setelah sobat membuat halaman Blogspot di Facebook, baiknya sobat membuat widget Like Box Facebook halaman Blogspot di Blog. Ini dilakukan untuk memberi tau pada pengunjung Blog bahwa Blog tersebut juga mempunyai halamanya di Facebook. Baca Cara Membuat Like Box Facebook di Blog dan Cara Membuat Tombol Like Facebook di Blog.
Baik, kali ini saya akan bahas dahulu cara membuat halaman di Facebook.
Berikut langkah-langkah untuk membuat halaman Website / Blogspot di Facebook:
1. Login ke Facebook dengan akun sobat.
2. Agar lebih cepat, langsung saja isikan alamat http://www.facebook.com/pages/create.php, dan masuklah ke URL tersebut.
3. Memilih Produk, pilih "Merek atau Produk" karena Blog merupakan produk yaitu konten dalam Blog sobat.

4.  Pilih Kategori sesuai dengan isi konten Blog sobat dan buat nama halaman, setelah itu centang pada bagian kotak dan Klik mulai.

5. Masukan Foto Profil halaman, setelah selesai klik Selanjutnya.

 6. Buat Informasi/deskripsi halaman, dan URL Blog sobat. Setelah selesai klik Simpan Info.

7. Membuat web Facebook sesuai dengan keinginan sobat. Setelah selesai klik Atur alamat.

8. Pada bagian ini, terserah sobat akan mengaktifkan iklan atau tidak. Pilih sesuai dengan yang sobat inginkan.

Selesai, halaman Blog sobat pada Facebook telah dibuat.
Untuk mengetahui URl halaman Blog. Masuk ke halaman utamanya, dan lihat URl nya pada tab URL

Cara Mendaftar dan Memasang Widget Histats di Blog

Sudah lama saya ingin membuat posting tentang mendapatkan data pengunjung dan widget dari histats untuk Blog. Namun baru sekarang bisa terlakasana dan akan saya bahas pada artikel Cara Mendaftar dan Memasang Widget Histats di Blog. Histats baik digunakan untuk memantau pengunjung pada Blog sobat untuk membantu sobat mengetahui perkembangan pada blog sobat, atau untuk memamerkan keramaian pengunjung Blog sobat pada publik, hehe.
Histats ini akan memberikan data Traffik pengunjung secara detail meliputi: jumlah pengunjung yang sedang online pada Blog sobat, penayangan hari ini, pengunjung hari ini, total kunjungan, total penayangan, kota/negara pengunjung berasal dan lain-lain.

Bagaimana? tertarik untuk mendapatkan data dari Histats? Silakan daftar, dapatkan info dan widgetnya.

1. Masuk ke halaman Histats, dan klik register.

2. Pada form create new account, isikan data-data yang diminta histats. Istilah surename adalah nama keluarga atau nama belakang sobat. Setelah pengisian selesai, centang pada kotak I have read and agree Publisher Agreement Terms, isikan kode captcha dan klik Register.

3. Akan tampil tulisan berikut yang meminta sobat memeriksa alamat email untuk verifikasi.

4. Maka periksalah kotak masuk pada email sobat, akan ada pesan dari histats. Klik link yang diberikan histats untuk verifikasi.

5. Akan muncul pesan dari histats bahwa akun anda telah aktif, dan meminta sobat untuk login.

6. Maka lakukanlah login dan mulai menggunakan Histats. Jika telah login, klik Add e website.

7.  Pada form create new website/blog isikan data yang diminta histats, diantarnya:

• Site url : url Blog.
• Language : bahasa yang digunakan pada Blog.
• Time Zone : Zona waktu di tempat sobat berada.
• Category : kategori konten pada Blog.
• Title : Judul Blog.
• Description : Deskripsi singkat isi Blos.
• Page views start value : angka memulai dihitunngnya penayangan. Jika dari nol, maka biarkan kosong
•  Visitors start value : angka memulai dihitunngnyapengunjung. Jika dari nol, maka biarkan kosong
• Stats visibility : pilih opsi pertama jika data traffik akan ditampilkan pada publik.
• Centang kotak Accept pada opsi  Terms of use & Privacy Policy.
• Isikan kode captcha.

Jika telah selesai mengisi form create new website/blog, klik Continue.

Selesai, sobat sudah membuat akun histats dan mendaftarkan Blog sobat untuk diberi panatauan pengunjung oleh histats. Silakan operasikan sendiri, karena yang akan saya bahas selanjutnya adalah mendapatkan widget dari histats untuk dipasang pada Blog.

8. Klik pada nama Blog yang akan sobat pasang widget histats.

9. Pada halaman ini akan tampil secara rinci data pengunjung sobat. Klik Counter CODE.

10. Klik add new counter

11. Terdapat banyak tampilan, silakan pilih yang sobat suka.

11. Centang data-data yang sobat butuhkan untuk ditampilkan pada Blog sobat, dan klik save.

12. Klik Counter Id yang baru dibuat.

13. Sobat akan diberikan kode oleh histats, pilih opsi standard saja dan coppy kodenya.

14. Lalu pastekan pada widget Blog sobat. Masuk Blogger>>Tata Letak>> Tambahkan Gadget>> HTML/Javascript>>Paste>>Simpan

Selesai, widget histats telah terpasang pada Blog sobat. Namun biasanya widget tersebut menyesuaikan terlebih dahulu, jadi harus sabar yah sobat...

Cara Membuat Widget Google+ Follower dengan Efek Keren

Posting terakhir pada bulan Ramadhan dan sebelum mudik lebaran. Saya akan bagikan widget Google+ Follower yang telah dimodifikasi hingga memiliki efek yang keren. Sebelumnya, apakah Google Plus itu? Google Plus adalah sosial media dari Google, yang pastinya sudah tidak asing lagi di kalangan Blogger.
Karena yang saya tahu saat ini pengguna akun Blogger juga otomatis memiliki akun Google plus, begitulah kurang lebih. Untuk menghubungkan satu pengguna dengan pengguna lain, Google plus juga mempunyai istilah Follower. Namun yang akan saya bahas kali ini tidak akan menggali tentang Google plus. Melainkan widget Follower dari Google plus untuk Blogspot, yaitu Google+ Follower.
Sebenarnya widget ini telah disediakan oleh Blogpot pada daftar widget, pasti sobat Blogger tahu. Namun, masih polos belum ada efek apapun. Untuk sobat yang tidak suka kepolosan, silakan terapkan salah satu efek yang akan saya berikan ini pada widget Google+ Follower milik sobat.
Contoh tampilanya seperti berikut.

Widget pertamanya berwarna putih, dan berubah menjadi abu-abu ketika disentuh kursor.

Ok, untuk sobat yang suka dengan widget ini, silakan simak langkah-langkah membuatnya.
1. Login ke akun Blogger sobat.
2. Masuk ke bagian Tata Letak.
3. Klik Tambahkan gadget di posisi yang sobat inginkan.
4. Pilih mode HTML/Javascript.
5. Masukan kode berikut

<style>
.bloggerspiceGplus{
    margin: 10px auto;
    background-color: #FEFEFE;
    width: 260px;
    padding: 10px 0 10px 10px;
    height: 280px;
    overflow: hidden;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    border: 3px solid #D3D3D3;
}
.bloggerspiceGplus:hover {
    border: 3px solid #D3D3D3;
    background-color: #D3D3D3;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
</style>
<div class="bloggerspiceGplus">
<div class="g-plus" data-action="followers" data-height="280" data-href="https://plus.google.com/116159611196713950391" data-source="blogger:blog:followers" data-width="280"></div>
</div>

Keterangan:
Ubah kode berwarna merah dengan ID Google plus sobat.
Kode berwarna hijau adalah warna mula-mula pada widget.
Kode berwarna biru adalah warna pada widget ketika disentuh kursor.
Kode berwarna pink bercetak tebal adalah ukuran kotak yang membungkus widget.
Kode berwarna pink yang bercetak miring adalah ukuran widget Google+ Follower sendiri.

Untuk mengetahui ID Google plus sobat, silakan masuk ke Google plus. Dan perhatikan gambar berikut.

6. Klik Simpan, jika sobat tidak mengubah kode tampilanya, maka hasilnya akan seperti berikut.

Memasang Widget Label Cloud dengan Ukuran Font yang Berbeda

Bagi seorang Blogger (khususnya pada Blogspot) yang sudah tidak pemula lagi, istilah label bukanlah hal yang asing. Mereka menerapkan Label ini pada Blog-nya untuk mengelompokan artikel berdasarkan jenisnya. Hal ini tentunya dilakukan untuk membantu pengunjung Blog agar lebih mudah dalam menjelajahi sebuah Blog. Namun bagaimanakah seorang Blogger menampilkan Label ini agar pengunjung dapat melihat kategori-kategori artikel pada Blog-nya?
Blogspot sudah menyediakan widget untuk Lebel dengan dua pilihan tampilan, yaitu tampilan Daftar dan tampilan Cloud. Nah, sekarang saya akan membahas widget Label dengan tampilan Cloud. Berbeda dengan tampilan daftar yang menampilkan daftar label secara vertikal, tampilan Cloud ini menampilkan widget label dengan terus menjejerkan nama-nama label seperti sebuah kalimat.
Ternyata widget Label Cloud ini dapat dimodifikasi agar tampilanya lebih menarik. Kali ini saya akan bagikan salah satu cara memodifikasinya yang akan menghasilkan tampilan widget Label Cloud dengan ukuran Font yang berbeda. Hasil modifikasi ini juga membuat, semakin banyak Label diisi artikel, maka nama Label akan ditampilkan dengan ukuran Font yang besar. Sedangkan sebaliknya, jika sebuah Label jarang diisi artikel maka nama Label akan ditampilkan dengan ukuran font yang kecil.

Bagaimana? Tertarik untuk menerapkanya di Blog sobat? Silakan ikuti langkah-langkah membuatnya.

• Memasang widget Label Cloud.

1. Login ke akun Blogger sobat.
2. Masuk ke bagian Tata Letak.
3. Klik Tambahkan Gadget di posisi yang sobat inginkan untuk dipasang widget Label Cloud.
4. Silakan pilih widget Label dan sobat tentukan tampilanya. Yang paling penting adalah sobat harus memilih opsi "Cloud".

5. Klik Simpan, dan widget Label Cloud pun telah terpasang di Blog sobat.

• Memodifikasi widget Label Cloud.

6. Berikutnya adalah memodifikasi widget Label Cloud tersebut. Masuk ke bagian Template dan klik Edit HTML.
7. Dengan menggunakan tombol ctrl+F, carilah kode ]]></b:skin> dan letakan kode berikut di atas kode ]]></b:skin> tersebut.

.label-size-1 a {
font-size: 13px;
text-decoration: none;
color:#4B8A08;
}
.label-size-2 a {
font-size: 15px;
text-decoration: none;
color:#DF0101;
}
.label-size-3 a {
font-size: 16px;font-family: Arial, Trebuchet MS, Verdana;text-decoration: none;
color:#045FB4;
}
.label-size-4 a {
font-size: 18px;
text-decoration: none;
color:#DF7401;
}
.label-size-5 a {
font-size: 23px;
text-decoration: none;
color:#045FB4;
}
.label-size-1 a:hover,
.label-size-2 a:hover,
.label-size-3 a:hover,
.label-size-4 a:hover,
.label-size-5 a:hover { text-decoration:underline;}

Re-Edit:
Ubahlah kode berwarna merah dan bercetak tebal miring, dengan kode HTML warna yang sobat inginkan.
Dengan kode di atas maka akan menghasilkan widget Label Cloud dengan ukuran font yang berbeda dan warna-warni, seperti contoh berikut.

Jika sobat tidak menyukai tampilan yang warna-warni atau hanya ingin satu warna saja, silakan hapus kode yang berwarna merah (color:#XXXXXX;). Maka dengan script ini akan menghasilkan widget Label Cloud dengan ukuran font yang berbeda saja.

Lalu font yang dihasilkan akan berwarna apa? Tentunya warna font ditentukan oleh setelan pada Template Blog yang sobat gunakan. Berikut contoh hasilnya.

8. Klik Simpan Template, dan silakan lihat hasilnya.