Cara Buat Mega Menu Dropdown Blogger

Seperti biasanya admin akan memberikan tutorial blogging yan pastinya bermanfaat dan keren. Seperti judul di atas admin akan memberikan tutorial membuat mega menu dropdown blogger. Kenapa dinamakan mega menu dropdown ?. Untuk menjawabnya silahkan lihat gambarnya di atas, Sudah punya gambaran kan?. Nah sekarang saatnya admin bagi tutorialnya untuk kalian.

• Masuk ke blogger pilih tema- HTML.
• Cari kode </b:skin> lalu letakan kode berikut ini di atasnya.

/***** Menu *****/.menu-bbt{padding:0;}.navigasi{width:100%;background: #ff4b1f; /* fallback for old browsers */background: -webkit-linear-gradient(to left, #ff4b1f , #1fddff); /* Chrome 10-25, Safari 5.1-6 */background: linear-gradient(to left, #ff4b1f , #1fddff); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */float:left; }nav select{width:100%;font-size:120%;font-family: 'News Cycle', sans-serif;}nav {width:67%;margin: 0;padding: 0;float:left;}nav .toggle{ display: none; }nav input[type=checkbox]{display: none;}nav input[type=checkbox]:checked ~ #menus {display: block;}nav:after {content: "";display: table;clear: both;}nav ul {float: left;padding: 0;margin: 0;list-style: none;position: relative;}nav ul li {margin: 0px;display: inline-block;float: left;}nav a, nav a:visited {display: block;padding: 0 0.5em;color: #FFF;line-height: 58px;text-decoration: none;}nav ul li ul li:hover { background:rgba(44,62,80,0.3); }nav a:hover { background-color:rgba(44,62,80,0.3);color:#fff;text-decoration:none;}nav ul ul {width:510px;display: none;position: absolute;top: 60px;z-index:1;background: #5D4157; /* fallback for old browsers */background: -webkit-linear-gradient(to left, #9A8C83 , #7AA1A3); /* Chrome 10-25, Safari 5.1-6 */background: linear-gradient(to left, #9A8C83 , #7AA1A3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */}nav ul li:hover > ul { display: inherit; }nav ul ul li {width:170px;float:left;}nav ul ul ul li {position: relative;top: -60px;left: 170px;}nav li > a:after { content: ' \f107';font-family:fontawesome;}nav li > a:only-child:after { content: ''; }nav .fa-2 {font-size: 170%;margin:0.4em 0.2em 0 0;float:right;}/***** Search *****/.search {width:29.9%;position: relative;display:block;float:right;padding:0;margin:0;border-left:1px solid rgba(255,255,255,0.3);}.search-field i.fa {color:rgba(255,255,255,0.5);font-size:150%;padding:0.55em 0.5em 0 0.5em;float:left}.search-field input {background:transparent;border:0;font-family: 'News Cycle', sans-serif;font-size:120%;color:#fff;width:50%;outline:none;padding:0 0 0 0.7em;margin:0;float:left;line-height: 60px;border-left:1px solid rgba(255,255,255,0.3);}.search-submit{background:transparent;width:25%;display:block;float:right;padding:0;margin:0;}.search-submit input {background:rgba(255,255,255,0.1);font-family: 'News Cycle', sans-serif;font-size:120%;border:0;width:100%;color:#fff;padding:0 1em;margin:0;line-height: 57px;cursor:pointer;}.search-submit input:hover{background: rgba(44,62,80,0.3);color:#fff;}

• Selanjutnya cari kode tempat menu navigasi blogger yang lama biasanya diawali dengan tag <nav> sampai tag </nav> lalu ganti /replace dengan kode berikut.

<div class='kolom menu-bbt'><div class='bbt'><div class='navigasi'><nav itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'><label class='toggle' for='drop'>Menu <i class='fa fa-bars fa-2'></i></label><input id='drop' type='checkbox'/><ul class='menu'><li><a href='/' itemprop='url'><i class='fa fa-home'></i>
<span itemprop='name'>Beranda</span></a></li><li><label class='toggle' for='drop-1'>Halaman <i class='fa fa-angle-down'></i></label><a href='#'>Halaman</a><input id='drop-1' type='checkbox'/><ul><li><a href='/p/tentang.html' itemprop='url'><i class='fa fa-user'></i>
<span itemprop='name'>Tentang</span></a></li><li><a href='/p/kontak.html' itemprop='url'><i class='fa fa-envelope-o'></i>
<span itemprop='name'>Kontak</span></a></li><li><a href='/p/syarat-dan-ketentuan.html' itemprop='url'><span itemprop='name'>Ketentuan</span></a></li></ul></li><li><label class='toggle' for='drop-2'>Blogger <i class='fa fa-angle-down'></i></label><a href='/search/label/blogger?'>Blogger</a><input id='drop-2' type='checkbox'/><ul>
<li><a href='#' itemprop='url' title='Cara Membuat Menu Di Blog'><span itemprop='name'>Membuat Menu</span></a></li><li><a href='#' itemprop='url' title='Cara Membuat Read More Menu Di Blogger'><span itemprop='name'>Buat Read More</span></a></li><li><a href='' itemprop='url' title='Cara Membuat Related Post Di Blogger'><span itemprop='name'>Related Post</span></a></li><li><a href='-tabel-html-di-blogger.html' itemprop='url' title='Cara Membuat Tabel Di Blog'><span itemprop='name'>Membuat Tabel</span></a></li><li><a href='#' itemprop='url' title='Cara Membuat Custom Domain Blogger'><span itemprop='name'>Custom Domain</span></a></li><li><a href='#' itemprop='url' title='Cara Memasang Lagu Di Blog'><span itemprop='name'>Memasang Lagu</span></a></li><li><a href='#' itemprop='url'><span itemprop='name'>Widget Jam</span></a></li><li><a href='#' itemprop='url' title='Cara Memasang Video Youtube Di Blog'><span itemprop='name'>Memasang Video</span></a></li><li><a href='e-di-blogger.html' itemprop='url' title='Cara Memasang Icon Font Awesome Di Blog'><span itemprop='name'>Font Awesome</span></a></li></ul></li><li><label class='toggle' for='drop-2'>Cantik Sehat <i class='fa fa-angle-down'></i></label><a href='#'>Cantik Sehat</a><input id='drop-2' type='checkbox'/><ul><li><a href='/search/label/kecantikan?' itemprop='url'><span itemprop='name'>Kecantikan</span></a></li><li><a href='/search/label/kesehatan?' itemprop='url'><span itemprop='name'>Kesehatan</span></a></li><li><a href='/search/label/tutorial%20jilbab?' itemprop='url'><span itemprop='name'>Tutorial Jilbab</span></a></li></ul></li><li><label class='toggle' for='drop-3'>Printer <i class='fa fa-angle-down'></i></label><a href='#'>Printer</a><input id='drop-3' type='checkbox'/><ul><li><a href='/search/label/service%20printer?' itemprop='url'><span itemprop='name'>Service Printer</span></a></li><li><a href='/search/label/driver%20printer?' itemprop='url'><span itemprop='name'>Driver Printer</span></a></li></ul></li><li><label class='toggle' for='drop-4'>Lainnya <i class='fa fa-angle-down'></i></label><a href='#'>Lainnya</a><input id='drop-4' type='checkbox'/><ul><li><a href='/search/label/pendidikan?' itemprop='url'><span itemprop='name'>Pendidikan</span></a></li><li><a href='/search/label/lirik%20lagu?' itemprop='url'><span itemprop='name'>Lirik Lagu</span></a></li><li><a href='/search/label/resep?' itemprop='url'><span itemprop='name'>Resep</span></a></li></ul></li></ul></nav><div class='search'><form action='' method='get'><input name='cx' type='hidden' value='partner-pub-7780461270496838:2861500790'/><input name='cof' type='hidden' value='FORID:10'/><input name='ie' type='hidden' value='UTF-8'/><div class='search-field'><i class='fa fa-search'></i><input name='q' placeholder='Cari yg lain...' type='text'/></div><div class='search-submit'><input name='sa' type='submit' value='Cari'/></div></form></div><!-- search-field --></div></div></div>
<li><a href='#' itemprop='url' title='Cara Membuat Blog'><span itemprop='name'>Membuat Blog</span></a></li>
<li><a href='#' itemprop='url' title='Cara Mengganti Template Blog'><span itemprop='name'>Merubah Template</span></a></li>
<div class='kolom mbbt'><div class='bbt'><div class='ruang krbbt'>
<div class='ruang main section' id='main'><div class='widget Blog' data-version='1' id='Blog1'>
<div class='topad'>
</div></div></div></div></div></div></div></div>

• Sekarang tinggal save template kalian. 

Tweet

Postingan terkait:

Ditulis Tarsisius — Maret 23, 2017 — 4 Comments — Tutorial