Membuat Menu Translate Pada Blog

Apakah anda pernah tau menu language pada website, seperti yang saya pakai di pojok kanan, menarik bukan karna dengan menu tersebut kita tidak perlu susah payah menterjemahkan blog kita kedalam banyak bahasa, cukup satu bahasa dan nati akan langsung auto translate.
pingin tau caranya????? langsung ke TKP

1. Masuk ke BLOGGERdan login.
2. masuk menu RANCANGAN dan pilih TAMBAH GADGET
3. Pilih HTML/Java Script
4. Copy menu dibawah ini pada Gadget tersebut.
5. <div style="text-align: center;">
   <a class="translate" href="http://www.blogger.com/rearrange?blogID=7853740271258926131&amp;sectionId=footer&amp;action=editWidget&amp;widgetType=HTML&amp;referrer=directory#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cen&amp;hl=en'); return false;"><img alt="English" title="English" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBwJ2HwAvSi1NYjiCdbUs1l0JxGV1zY-C0I0NCU1l5YUMGJfb4X5A7krA253_Xl6PnPj-wxuOU5YZLMSVoxjXOzeBGBRNOsUAdudSTbW4BHdY8QsD2LVfijQIcLh3rm3dWt1AmZymo6u36/s144/uk-flag.png" style="cursor: pointer; margin-right: 8px;" align="absbottom" border="0" height="24" width="24" /></a>
   
   
6.  Kemudian simpan. dan lihat hasilnya
7. Script diatas merupakan sample 1 bahasa yaitu bahasa Inggris (english), untuk script lengkapnya seperti gadget yang saya pakai silahkan download script lengkapnya disini 

Semoga bermanfaat

Continue reading >>

Membuat Menu Drop Down pada Blog

Karena banyak teman yang curhat dan mengalami kebingungan untuk membuat menu drop down untuk menghemat tempat dengan menu yang lebih banyak serta memperindah website kita, nah untuk mempersingkat waktu ini saya kasih tips n triknya,

Bagaimana cara buatnya?
1.  Login ke Blogger.
2.  Pilih Edit Tamplate
3.  pilih Edit HTML, sebelum mengotak atik HTMl Code sebaiknya backup template untuk backup
4.  cari kode ]]></b:skin>
5.  Silakan anda copy kode di bawah ini dan simpan diatas code  ]]></b:skin>

/* ----- NAVBAR MENU ----- */
#NavbarMenu {width: 100%;height: 20px;background:#000000 top;color: #000000;margin: 0 auto 0;padding: 0;font: bold 12px Arial, Tahoma, Verdana;border-top: 1px solid #000000;border-bottom: 1px solid #FFFFFF;}
#NavbarMenuleft {width: 680px;float: left;margin: 0;padding: 0;}
#nav {margin: 0;padding: 0;}
#nav ul {float: left;list-style: none;margin: 0;padding: 0;}
#nav li {list-style: none;background: transparent url('#') repeat-x top left;margin: 0;padding: 0;}
#nav li a,
#nav li a:link,
#nav li a:visited {color: #000000;display: block;text-transform: capitalize;margin: 0;padding: 9px 15px 8px;font: bold 12px VERDANA;}
#nav li a:hover,
#nav li a:active {background:#99C9FF;color: #3D81EE;margin: 0;padding: 9px 15px 8px;text-decoration: none;}
#nav li li a,
#nav li li a:link,
#nav li li a:visited {background: transparent url('#') repeat-x top;width: 150px;color: #000;text-transform: lowercase;float: none;margin: 0;padding: 7px 10px;border-bottom: 1px solid #99C9FF;border-left: 1px solid #99C9FF;border-right: 1px solid #99C9FF;font: normal 15px,;}
#nav li li a:hover,
#nav li li a:active {background: #99C9FF;color: #3D81EE;padding: 7px 10px;}
#nav li {float: left;padding: 0;}
#nav li ul {z-index: 9999;position: absolute;left: -999em;height: auto;width: 170px;margin: 0;padding: 0;}
#nav li ul a {width: 140px;}
#nav li ul ul {margin: -32px 0 0 171px;}
#nav li:hover ul ul,
#nav li:hover ul ul ul,
#nav li.sfhover ul ul,
#nav li.sfhover ul ul ul {left: -999em;}
#nav li:hover ul,
#nav li li:hover ul,
#nav li li li:hover ul,
#nav li.sfhover ul,
#nav li li.sfhover ul,
#nav li li li.sfhover ul {left: auto;}
#nav li:hover,
#nav li.sfhover {position: static;}

6. Simpan template dan masuk ke menu Element Laman

7. Untuk lebih muda buat membuat menunya Tambah Widged, HTML/Java Script

8. copy code ini:

<div id='navbarmenu'>
<div id='navbarmenuleft'>
<ul id='nav'>

<li><a class='indukmenu' href='http://el-zany.blogspot.com/' title='link'> Beranda</a></li> 

<li><a class='indukmenu' href='http://swararinggit.blogspot.com/p/product.html' title='link'>Web Mail</a>

<ul>

<li><a href='http://www.blogger.com/' target='_blank'>Blogspot</a></li>
<li><a href='http://mail.yahoo.co.id/ target='_blank''>Yahoo Mail</a></li>
</ul></li>
 

</ul></div></div>

8. Save.

9. untuk menambah menu perhatikan kode yang di blok <li></li>

10. Selamat mencoba

semoga bermanfaat,

Continue reading >>