cara memgedit menu drop down sub menu pada blogger

Download Anime Subtitle Indonesia

Asslamau alaikum wr,wb .
Bissmilah, hari ini saya memberi tahu cara mengedit DROP DOWN pada blogger ... sebelumnya saya berterimakasih kepada Allah S.W.T yang telah memberikan nikmat ...

Langsung aja gan ...

TONTON VIDEONYA SUPAYA KAMU LEBIH PAHAM πŸ‘‡
VIDEO TUTORIAL

 1. Login dulu ke Blog anda ya Broo jangan salah masuk blog nya orang lainπŸ˜„
2. Lalu pilih menu Template Dan Pilih edit Html.





3. Setelah itu anda cari kode ]]></b:skin> , lalu copy paste kode di bawah ini dan tepelkan tepat di atas kode di atas.

 /* Menu Navigasi Caritau*/
#navigation{height:38px;width:925px;position:relative;background-color:#393939;box-shadow:0 2px 6px 0 #ccc;-moz-box-shadow:0 2px 6px 0 #ccc;margin:0 auto 0;padding:0 18px 0 18px;border-bottom:3px solid #426DEC;}#navigation li{position:relative;line-height:38px;float:left;list-style:none;display:inline-block;padding:0 0 0 0;margin:0 0 0 0;}#navigation li a{padding:0 18px;color:#eee;display:block;font-family:'Oswald',Arial,Helvetica,sans-serif;letter-spacing:0.5;font-size:14px;font-weight:500;text-align:left;text-shadow:1px 1px 0 #222;}#navigation li a.home{background-position:16px -54px;width:46px;padding:0 0;background-color:#426DEC;text-indent:-9999px;overflow:hidden;}#navigation li a{border-left:1px solid #222;border-right:1px solid #444;}#navigation li:hover a{background-color:#426DEC;color:#fff;}#navigation li .sub-nav-wrapper{display:block;position:absolute;z-index:30;margin-left:0px;}#navigation li .sub-nav-wrapper .sub-nav{width:150px;margin:4px 0 0 0;padding:0 0 0 0;background:#fff;border-top:1px solid #fff;box-shadow:0 1px 2px rgba(0,0,0,0.35);}#navigation li:hover .sub-nav-wrapper{display:block;}#navigation li .sub-nav-wrapper .sub-nav li{list-style:none;float:none !important;line-height:26px;display:block;margin:0 0 0 0;padding:0;text-align:left;border-bottom:1px solid #d7d7d7;}#navigation li .sub-nav-wrapper .sub-nav li:first-child{}#navigation li .sub-nav-wrapper .sub-nav li:last-child{border:none;}#navigation li .sub-nav-wrapper .sub-nav li a{border:none !important;background:transparent !important;display:block;padding:0 20px;font-size:12px;font-weight:small;color:#4b4b4b !important;text-shadow:none;box-shadow:inset 0 0 2px rgba(255,255,255,1.0);-moz-box-shadow:inset 0 0 2px rgba(255,255,255,1.0);-webkit-box-shadow:inset 0 0 2px rgba(255,255,255,1.0);}#navigation li .sub-nav-wrapper .sub-nav li:hover{background:#eaeaea;border-bottom:1px solid #ccc;}#navigation li .sub-nav-wrapper{pointer-events:none;opacity:0;filter:alpha(opacity=0);top:0;transition:all 0.35s ease-in-out;-moz-transition:all 0.35s ease-in-out;-webkit-transition:all 0.35s ease-in-out;}#navigation li:hover .sub-nav-wrapper{pointer-events:auto;opacity:1;filter:alpha(opacity=100);top:30px;}
#navigation #search{font-family:'Oswald',Arial,Helvetica,sans-serif;float:right;margin:5px 0 5px 10px;}#navigation li.search{float:right;line-height:normal;}#navigation #search input[type="text"]{height:28px;line-height:28px;background-color:#5b5b5b;background-position:188px -245px;border:0 none;font-size:10px;font-weight:515;text-shadow:1px 1px 0 #222;color:#fff;width:57px;padding:0 15px;-webkit-transition:all 0.7s ease 0 s;-moz-transition:all 0.7s ease 0s;-o-transition: all 0.7s ease 0s;transition:all 0.7s ease 0s;box-shadow: inset 2px 2px 0 #4f4f4f;}#navigation #search input#search-button{height:28px;width:30px;background-color:#4b4b4b;background-position:8px -246px;border:none;float:right;cursor:pointer;}#navigation #search input[type="text"]:focus{background-color:#fff;text-shadow:none !important;outline:none;width:155px;color:#555;box-shadow: inset 2px 2px 0 #eee;}#navigation #search input#search-button,.post-info-icon,.home,.back-to-top{background-image:url("http://3.bp.blogspot.com/-60fYApN0j2M/Ub8uXOv4rNI/AAAAAAAACBs/6PDa4uu3cHk/s1600/csg-51bf2d6764c79.png");background-repeat:no-repeat;}
4. Nah sekarang untuk memanggil kode CSS nya, copy dan paste kode dibawah ini dan tempelkan di bawah kode </header>

 <nav>
<ul id='navigation'>
<li class='current'>
<a class='home' href='/' title='Home'>Home</a>
</li>
<li>
<a href='#' title='Menu 1'>Menu 1</a>
<div class='sub-nav-wrapper'>
<ul class='sub-nav'>
<li><a href='#' title='Sub Menu 1'>Sub Menu 1</a></li>
<li><a href='#' title='Sub Menu 2'>Sub Menu 2</a></li>
<li><a href='#' title='Sub Menu 3'>Sub Menu 3</a></li>
</ul>
</div>
</li>
<li><a href='#' title='Menu 2'>Menu 2</a></li>
<li><a href='#' title='Menu 3'>Menu 3</a></li>
<li>
  <a href='#' title='Menu 4'>Menu 4</a>
<div class='sub-nav-wrapper'>
<ul class='sub-nav'>
<li><a href='#' title='Sub Menu 1'>Sub Menu 1</a></li>
<li><a href='#' title='Sub Menu 2'>Sub Menu 2</a></li>
<li><a href='#' title='Sub Menu 3'>Sub Menu 3</a></li>
<li><a href='#' title='Sub Menu 4'>Sub Menu 4</a></li>
</ul>
</div>
</li>
<li><a href='/Error404' title='Error'>Error</a></li>
<li class='search'>
<form action='/search' id='search' method='get'>
<input name='q' placeholder='Cari Apa Gan...' size='45' type='text'/><input id='search-button' type='submit' value=''/></form>
</li>
</ul>
</nav>
5.Ganti # , Menu , Dan Sub Menu .Sesuai Keinginan sobat
6.Simpan Template Sobat... selesai menu Dropdown.
Download Anime Subtitle Indonesia

You might also like

0 Comments