Home / blogger / Membuat Menu Blogger

Membuat Menu Blogger

Posted by Unknown Saturday, March 9, 2013 0 comments
Cara membuat menu dibawah header blog
Sobat blogger kali ini saya akan coba share bagaimana cara membuat menu blogger, seperti yang telah sobat ketahui menu pada blogger terdiri dari menu vertikal dan horizontal. nah kali ini yang akan kita bahas disini adalah menu dropdown diatas header.

Untuk membuat menu pada blogger memang memerlukan pengetahuan dalam membuat script, tapi sobat tenang saja saya sudah sediakan script yang dibutuhkan untuk pembelajaran kali ini.
Untuk melihat contoh sobat blogger bisa lihat demonya Disini apabila sobat tertarik untuk memasang menu blogger yang serupa bisa ikuti panduannya dibawah ini

  1. Pertama sobat login dulu ke akun blogger
  2. Kemudian pilih rancangan dan klik edit html => lanjutkan
  3. Sobat cari kode ]]></b:skin> lalu letakan kode berikut tepat diatas kode ]]></b:skin>


 /* Menu Horizontal Dropdown ----------------------------------------------- */ #menuwrapperpic{background: url(http://2.bp.blogspot.com/-eVufkC686Cw/TwGo8YAlWwI/AAAAAAAAAYM/tWP7l3ENpjY/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/AVvXsEiTkF98ozP17rJifjHNuGkAW9Tco5VCH54XuRSM_VDZUPL1AiydN30L9qRKd502ktXzODJx7pqkcAIEk4bdHRH0DkgzJojtN03AF_v58XMBcjb3iB9zetM5e9Tx2G2O4HJJUY0F2Gdzejg/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}
Selanjutnya sobat cari kode <head> untuk menempatkan menu diatas header dan </head> untuk menempatkan menu dibawah header, copy kode dibawah ini dan letakan diatas <head> atau dibawah </head>

 <div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgquQP6P8Je4iZvT1p3nm85MWH8eor4Qx0LWuTJr7NetEk05zIzFq9cMGc148Edx87mj1buYVJp6zNg4QAUe3VuR8qJ2jBztEdZGiNu-_FqpDluN-TYxZH-6sENIet-BuCsORXmz1Qlid4/s1600/home_white.png' style='padding:0px;'/>Home</a></li>
<li><a href='http://www.blogger.com/profile/06961337061354681028' target='new'>Tentang Admin</a></li>
<li><a class='trigger'>Contact Us</a>
<ul>
<li><a href='https://plus.google.com/u/0/106997202037581570725' target='new'>Goggle +</a></li>
<li class='hr'/>
<li><a href='http://twitter.com/den_zuaz' target='new'>Contact on Twitter</a></li>
<li><a href='http://www.myspace.com/denzuaz' target='new'>Contact on Myspace</a></li>
<li><a href='http://www.facebook.com/zuazTama' target='new'>Zuaz&#39;Z on Facebook</a></li>
</ul>
</li>
<li><a href='http://zuazz.blogspot.com' target='new'>Zuaz&#39;Z Creator</a></li>
<li><a class='trigger'>Tips dan Trik</a>
<ul>
<li><a href='http://zuazz.blogspot.com/search/label/tips%20dan%20trik%20komputer'>Komputer</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/tips%20dan%20trik%20blog'>Blogspot</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/facebook'>Facebook</a></li>
<li class='hr'/>
</ul>
</li>
<li><a class='trigger'>Kategori</a>
<ul>
<li><a href='http://zuazz.blogspot.com/2012/01/tv-online.html'>TV Online</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/computer'>Komputer</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/desain%20grafis'>Desain Grafis</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/game'>Game</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/microsoft'>Microsoft</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/software%20aplikasi'>Software APP</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/software%20program'>Software Program</a></li>
</ul>
</li>
</ul> <div class='menusearch'>
<div style='float:right;padding:8px 8px 0 0;'>
<form action='http://zuazz.blogspot.com/search' method='get' target=''>
<input name='sitesearch' style='display:none;' value='http://zuazz.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/AVvXsEgXQLx-Bh8uwBgV0Yh4E-tMyhG0IqmGchH0NzbjdiJKvZgI4Ftr87KJZT-r7w-FFtLsSX4EYFATyx4H2bTmid3Pnxps7czdPkS8kd3UbBqIwRFj2YUE2pu44IjqvwOPrSASr0QxF7mlGoo/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/AVvXsEjaPep1NB-hScKa-YsqtxlnhLUOsnQXrZCjzh0s5PeNVn7bqMcQc-CK-08KqgWhk7tGg-q_tzu4Y3Te0OlmwsfsGCqcJyZTwZphq3IIDZNcATDKGxhPCpJt5TdMGSmbBYL0VfWa-tY3w6Q/s1600/bg_search.gif' type='image' value='Search'/>
</form></div></div><br class='clearit'/></div><div style='clear:both;'/></div>
Kode yang berwarna merah adalah URL tujuan silahkan sobat ganti dengan URL blog sobat, dan kode yang berwarna kuning adalah tampilan kalimat pada menu dropdown silahkan sobat rubah sesuai kebutuhan. 

 Demikian panduan membuat menu blogger semoga bermanfaat.
TERIMA KASIH ATAS KUNJUNGAN SAUDARA
Judul: Membuat Menu Blogger
Ditulis oleh Unknown
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke http://membuatblog-sendiri.blogspot.com/2013/03/membuat-menu-blogger.html. Terima kasih sudah singgah membaca artikel ini.
Categories:

If You Like This Post, Share it With Your Friends

0 comments:

Post a Comment

Powered by Blogger.