Hmm.. sebelumnya sudah tau menu drop down belum? yang belum tau silakan lihat paling atas dari blog ini yang berjejer ada tulisan home, tips tricks blog, info sehat, dan lain-lain. Dan sekarang arahkan kursor anda ke tab menu tips tricks blog dan nanti pasti akan muncul seperti daftar yang turun kebawah. Nah itu yang namanya menu dropdown. Tapi jauh sebelumnya saya juga pernah share tentang cara membuat tab menu biasa (yang dulu ini tanpa menu dropdown dan biasaya lebih digunakan untuk newbie). Tapi apa salahnya mencoba cara membuat menu dropdown ini agar blog sobat terlihat lebih professional.

screenshot menu dropdown

Oia, cara ini aku dapat dari wartaberata.com. Dan cara ini menurutku cara yang paling mudah dari beberapa artikel lain yang pernah saya lihat. Saya sungguh berterimakasih akhirnya bisa memasang menu dropdown ini berkat tutorial dari kang wartabeta. Ok begini caranya..

Sebelumnya backup template duyu..

1. Login ke blogger (yang diperbarui bahasa Indonesia)

2. Masuk ke template - edit html -  centang pada expand template widget

3. Cari kode ini ]]></b:skin> (gunakan ctrl+F untuk search) lalu tepat diatasnya letakkan kode ini

#NavbarMenu {background: #555 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMHBF5y8MvJbZqG2wb8OS3nmwERF1CNtbUN87LThJqc1q891lC3Et12Uw75ouU94l8iCiGLwEBVAWBqgEZTt1egzYmT-4DGdCq33cpmsh60q_wTY20pCOjAEtK0tQHfbjyE9cxDNPONkI/s400/navbar11.png);width: 960px;height: 35px;font-size: 12px;font-family: arial, Verdana;color: #FFF;font-weight: bold;margin: 0;padding: 0;}#NavbarMenuleft {width: 710px;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;margin: 0;padding: 0;}#nav li a, #nav li a:link, #nav li a:visited {color: #FFF;display: block;font-size: 14px;font-weight:bold;font-family: sans-serif, Verdana;font-weight: bold;text-transform: none;margin: 0;padding: 9px 15px 8px;}#nav li a:hover, #nav li a:active {background: #555;color: #FFF;margin: 0;padding: 9px 15px 8px;text-decoration: none;-webkit-transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;-ms-transition: all .2s ease-in-out;-o-transition: all .2s ease-in-out;transition: all .2s ease-in-out;}#nav li li a, #nav li li a:link, #nav li li a:visited {background: #555;width: 200px;color: #FFF;font-size: 14px;font-family: "ms sans serif", Verdana;font-weight: normal;text-transform: none;float: none;margin: 0;padding: 7px 10px;border-bottom: 1px dotted #7F7F7F;border-left: 1px solid #7F7F7F;border-right: 1px solid #7F7F7F;-webkit-transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;-ms-transition: all .2s ease-in-out;-o-transition: all .2s ease-in-out;transition: all .2s ease-in-out;}#nav li li a:hover, #nav li li a:active {background: #777;color: #FFF;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;}

4. Selanjutnya cari kode ini  <div id='header-wrapper'> lalu tepat dibawahnya pastekan kode ini

contoh menu drop down untuk kode dibawah

<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a href='http//zamedaku.blogspot.com'>Home</a></li>
<li><a href='http//zamedaku.blogspot.com'>profil</a></li>
<li><a href='http//zamedaku.blogspot.com'>Blogging</a></li>
<li><a href='http//zamedaku.blogspot.com'>Menu turun &#187;</a>
<ul>
<li><a href='http//zamedaku.blogspot.com'>Menu turun 1</a></li>
<li><a href='http//zamedaku.blogspot.com'>Menu turun 2</a></li>
<li><a href='http//zamedaku.blogspot.com'>Menu turun 3</a></li>
<li><a href='http//zamedaku.blogspot.com'>Menu turun 4</a></li>
<li><a href='http//zamedaku.blogspot.com'>Menu turun 5</a></li>
</ul></li>
<li><a href='http//zamedaku.blogspot.com'>Contact us</a></li>
</ul>
</div>
</div>

Untuk link warna merah rubahlah dengan link anda, untuk warna oranyerubahlah untuk nama menu-menunya.

5. Simpan. Dan lihat hasilnya....

Cara mengganti template blogger, inilah satu hal yang mungkin dipertanyakan oleh blogger pemula, sudah pasti para blogger ingin tampilan blognya lebih keren dan profesional dari pada blog yang tampilannya berantakan, loadingnya berat ataupun tidak ramah sama sekali kepada pengunjung, ada juga yang tampilan blognya disesuaikan dengan kesukaannya contohnya template naruto dan lain-lain.

Kenapa ganti template..? mungkin ini yang terjadi pada anda yaitu bosan dengan yang itu-itu aja, pingin template yg lengkap misalnya saja anda ingin template yang mempunyai menu horizantal, menu breadcrumbs, dll sedangkan anda tidak paham dengan edit HTML, dan ada juga karna templatenya rusak karna kesalahan pemasangan widget,gadget dan kesalahan ketika mengedit HTML.

Template seperti apa yang baik dan cocok untuk blog kita ? yaitu template yang anda pilih menurut pilihan anda sendiri dan yang pas dengan hati anda baik itu melalui saran dari teman blogger yang laen ataupun tidak, karna andalah yang tau karakter blog anda.

Untuk mendownload template kalian bisa mencarinya di:
http://btemplates.com
http://blogtemplate4u.com/
http://www.freetemplatesblogger.info/
dan lain lain.

Bagaimaina cara mengganti template ? anda bisa googling template seseuai dengan selera anda, yang mempunyai format .XML, dan biasanya template berformat .XML ini dicompress dalam format .ZIP maka kita harus mengekstraknya terlebih dahulu. dengan cara klik kanan seperti gambar dibawah ini.

File template anda sudah siap ? selanjutnya masuklah ke akun blogger anda dan arahkan kursor pada blog yang kan anda ganti templatenya klik gambar kertas kemudian pilih template. 

Kemudian pilih cadangkan/pulihkan 

Kemudian klik browse dan cari file .XML yang telah anda ekstrak tadi.

Kemudian klik unggah

Jika muncul peringatan widget/gadget, pilih saja pertahankan widget/gadget, agar gadget yang terpasang pada blog anda tidak hilang dan tidak susah susah tuk menambahkannya lagi.

Langkah - langkah mengganti kursor yang cantik Sebagai berikut :

1. Copy script berikut ini :

<style type="text/css">
body {
cursor:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjucySDT7BqD6zEg97bEuNawH1eHTLQfvUs6CVL21Jye_3iWH86Fss89Sz6aMjbJB5ZC1Y_WZr3YMTI-r8XNbEenqWnOAlZFLlMISlJi_j0gn6iV1XSMJ_NIch71PPoGxjQNZhJYcxp5VE/h120/1.gif")
,default}
</style>

akan menghasilkan bentuk kursor seperti ini :

Berikut ini adalah beberapa pilihan cursor yang bisa digunakan Copy script yang ada dibawah masing-masing kursor yang anda inginkan ganti tulisan yang berwarna merah :

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjucySDT7BqD6zEg97bEuNawH1eHTLQfvUs6CVL21Jye_3iWH86Fss89Sz6aMjbJB5ZC1Y_WZr3YMTI-r8XNbEenqWnOAlZFLlMISlJi_j0gn6iV1XSMJ_NIch71PPoGxjQNZhJYcxp5VE/h120/1.gif

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLAMlYOzoDJ9ss1WC7H68UPUfFtSSxqniH35uy9Y3XIJy4xjAY29xs8C56GNpDhwf5UG9_lMi4_ZJRFEJe22dk_y6fyUibd4-OYrVgENy7ejUK223cyw4WVPUfcfZBvmqBLKp7INgrFGk/h120/2.gif

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnuGF9tTenKDq9NQjMllnICATmcsG31RGmyvr6swxhUc5ivW4zt9mkRI6E6kBQfqFOqtuXj2KHmlM2PSN1SXIrOlnU9ySMud1D8i0L-gg1DkT7_s8HnPZ2Lls5_3il3JrLsygSes98RFI/h120/3.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoR7NLnIkChTZKN8-YG24ojmPka8YpROTIKkEs_IwRb4caaY8sPF1xiup5kjBeMP7P_lPNhqn1u2A9NKG7y2CG9eLcNolyPELjkh8eNXE3j789CP_XMXj0Rrh0tbpA-qMQLZcyKCIP61o/h120/4.gif

Setelah di copy script di atas langkah selanjutnya pengaturan diblog sahabat sebagai berikut :

1. Klik Rancangan.

2. Pilih Tata letak.

3. Klik Tambah Gadget.

4. Pilih HTML/Javascript kemudian paste script tersebut.

5. Simpan dan lihat hasilnya...

Berikut ini adalah beberapa pilihan lain alamat link kursor yang bisa digunakan :

a. http://i771.photobucket.com/albums/xx357/cebol_01/Kursor.png

b. http://i34.photobucket.com/albums/d132/JuL14_ok/pinkbutterflies.gif
c. http://i40.photobucket.com/albums/e230/dh34sy/flame.gif

d. http://i425.photobucket.com/albums/pp332/hippmibjkt/sym455.jpg

e. http://i340.photobucket.com/albums/o350/tomrat2212/emon.gif

f.  http://i872.photobucket.com/albums/ab288/bebe_munya/kursor1.gif

g. http://i872.photobucket.com/albums/ab288/bebe_munya/kursor2.gif

TIPS :

jika Anda mempunyai sidebar yang sebelah kiri jangan taruh script berikut ke widget sidebar sebelah kiri. Anda bisa menaruhnya di sidebar sebelah kanan atau lebih baik ditaruh di footer.

semoga bermanfaat...

Ada sebagian sobat yang merasa domain blogspot dirasa terlalu panjang dan ingin beralih menggunakan domain yang lebih pendek. Sehingga mereka harus membeli domain dan menyewa tempat hosting yang kadang ini cukup membingungkan bagi blogger pemula. Walau sebenarnya banyak penjual domain dan tempat hosting yang bersaing dengan harga yang mungkin cukup terjangkau. Tapi bagaimana jika ada domain gratis dan hostingnyapun tetap gratis? Tentunya tetap menggunakan layanan milik blogger. Jika sobat tertarik di sini kita akan mengganti domain gratis blogspot dengan co.cc.
Untuk mengganti domain blogspot ke co.cc saya sarankan sobat membuat blog baru. Karena sayang jika mengganti blog yang sudah mempunyai traffik.
Di bawah ini adalah cara mengganti domain blogspot ke co.cc

• Buat blog di blogspot yang nanti ingin sobat ganti namanya dengan co.cc.
• Kemudian masuk ke www.co.cc
• Di sini sobat harus registrasi terlebih dahulu.
  Klik Create an account now
  Isi formulir pendaftaran.
  Beri tanda pada I accept the Terms of Service.
  Kemudian klik Create an account now.
  Jika sudah terbuka halaman baru klik pada Getting A New Domain
  
  Maka akan terbuka halaman baru lagi Masukan alamat blog yang ingin di ganti nama domainnya. Kemudian klik check availability.
  Seperti gambar yang terlihat di bawah ini.
  
  
• Jika alamat yang sobat inginkan tersedia maka akan muncul keterangan seperti berikut.
  
  
• Kemudian klik continue to registration.
  Maka akan muncul keterangan Your new domain has been successfully registered.
  
• Klik Setup.
  Maka akan terbuka halaman baru.
  
• Klik pada Please domain setup now
  
• Pada halaman selanjutnya pilih 2. Zone Records
  Maka sobat akan melihat tampilan seperti gambar di bawah ini.
  
  Isi Zone Records dengan :
  Host : nama domain yang di daftarkan misal www.activekita.co.cc
  TTL : tetap pada ID
  Type : CNAME
  Value : ghs.google.com
  Kemudian beri tanda pada Apply this setting to all the domains registered in the future.
  
• Klik setup.

Pada tahap ini kita telah selesai setting pada co.cc,selanjutnya kita tinggal setting pada blogspotnya.

• Masuk keblog sobat.
  
• Pilih settings ( pengaturan )
  
• Klik publishing (Publikasikan)
  
• Klik Domain Ubahsuaian ( Costom Domain )
  
• Klik beralih ke pengaturan lanjut ( Switch to advanced settings ).
  
• Pada kolom Your domain masukan doman co.cc yang telah sobat buat.
  Misal: www.activekita.co.cc
  
• Use a missing files host? pilih no.
  
• Masukkan Word Verification
  
• Simpan.

Dari sini sobat sudah mengganti domain blogspot dengan co.cc.
Biasanya beberapa saat sudah bisa di akses, paling lama menunggu 24 jam.
Untuk memulai bisa klik di sini atau melalui banner di bawah.

Selamat menggunakan domain baru.