Cara Menciptakan Sajian Navigasi Responsive Di Atas Header

Baca Juga

Hello, jikalau anda pernah mengunjungi blog aku maka akan terlihat perubahan, yakni perubahan pada template. Saya jarang menciptakan artikel dikarenakan sedang menciptakan sebuah template yang nantinya aku akan terapkan pada blog saya. Kini template yang aku buat tersebut sudah aku terapkan pada blog saya. Nantinya kalo banyak yang minat, template ini akan aku bagikan. Ok pribadi saja ke intinya, dikala anda meliat blog saya, maka akan terlihat Menu Navigasi. Menu Navigasi yaitu sajian yang wajib ada disetiap template, alasannya yaitu sajian ini berkhasiat dikala mendaftar Adsense. Jika tidak ada sajian navigasi ini, maka akan tertolak oleh Google Adsense. Para blogger biasa menggunakannya untuk meletakkan form halaman khusus contohnya contact us. Menu Navigasi yang aku bagikan kali ini sangat responsive baik versi desktop maupun versi mobile. Menu ini akan menyesuaikan dengan perangkat yang anda gunakan. Saya sendiri sudah mendesain sajian ini seminimalis mungkin biar super responsive. Ok, pribadi aku ke proses pembuatan.

Cara Membuat Menu Navigasi Responsive di Atas Header

Cara Pertama :

1. Buka Blogger - Kemudian Login.

2. Dashboard - Tema.

3. Edit HTML.

Proses Pembuatan :

1. Temukan isyarat ]]></b:skin> atau </style>

2. Copy & Paste isyarat berikut ini, dan letakkan diatas kode ]]></b:skin> atau </style>

/*Top Menu Navigasi */ .menu-wrapper {background:#374760;position:relative;z-index:96;overflow:hidden;margin:0 auto;padding:5px;border-radius:2px;} .top-menu {display:block;margin:0 auto;float:left;padding:0;width:100%;background:transparent;border:none;} .top-menu ul {width:100%;padding:0;margin:0;text-align:left;} .top-menu li {list-style-type:none;float:left;padding:0;margin:0;} .top-menu li a {position:relative;font-family:'Open Sans Condensed';font-size:16px;font-weight:400;background-color:transparent;color:#fff;display:block;margin:5px;padding:8px 12px;line-height:100%;transition:color 0.3s;height:20px;border-radius:4px;} .top-menu ul li a:active, .top-menu ul li.highlight a {line-height:100%;text-decoration:none;} .top-menu ul li a:hover {background:#36a7f2;color:#fff;border-radis:2px;text-decoration:none;} .top-menu li.socialwrap {float:right;} .top-menu li.socialwrap a i{text-align:center;color:#fff;transition:initial;} .top-menu li.socialwrap a:hover{background:#36a7f2;color:#fff;} .top-menu li.socialwrap.pinterest {border-right:0;} .top-menu a#pull {display:none;} @media only screen and (max-width:768px) { .menu-top li ul { background:#222222; border:none; box-shadow:none; } .menu-wrapper {margin:0;border:1px solid #e6e6e6;} .top-menu {display:block;width:100%;padding:0} .top-menu ul {text-align:center;} .top-menu ul {display:none;height:auto;} .top-menu a#pull{height:30px;color:#fff;display:inline-block;font-family:"Open Sans";font-size:12px;font-weight:700;padding:10px;position:relative;text-align:center;font-size:20px;width:100%;float:left;} .top-menu a#pull:before{content: '\f0c9';font-family: FontAwesome;font-style: normal;font-weight: bold;text-decoration: none;font-size: 30px;color: #999;display: inline-block;position: absolute;left: 15px;top: 20%;} .top-menu a#pull:hover{background:transparent} .top-menu li {display:block;width:50%;text-align:left;border-right:none;} .top-menu li a {padding:15px 20px;display:block;} .top-menu li a:hover, nav a:active {background:#ef4824;border:none;color:#fff;} .top-menu ul li a:hover {background:#36a7f2;color:#fff;border-radius:4px;} .top-menu li.socialwrap {float:left;} .top-menu li.socialwrap.twitter {border-left:0;} .active {display:block;} } @media only screen and (max-width: 480px) .top-menu a#pull {     height:35px; } @media only screen and (max-width:640px) { .menu-wrapper {margin:0 auto 20px auto;border-radius: 4px;} } @media only screen and (max-width:480px) { .top-menu li {display:block;width:100%;text-align:left;border-right:none;} }

3. Temukan isyarat <header id='header-wrapper'> , </header>  , <div class='header-wrapper'> atau yang menyerupai. Atau anda dapat meletakan isyarat berikut ini, diatas sajian header milik anda.
4. Copy & Paste isyarat berikut ini, dan letakkan diatas kode  <header id='header-wrapper'> , </header>  , <div class='header-wrapper'>

<div class='menu-wrapper'> <nav class='top-menu'> <ul> <li><a href='/p/blog-page_51.html' title='Contact us'><i class='fa fa-envelope'/> CONTACT US</a></li> <li><a href='/p/daftar-isi-postingan.html' title='Sitemap'><i class='fa fa-list'/> SITEMAP</a></li>        <li><a href='/p/disclaimer.html' title='Disclaimer'><i class='fa fa-check-circle'/> DISCLAIMER</a></li> <li><a href='/p/privacy-policy.html' title='Privacy Policy'><i class='fa fa-unlock-alt'/> PRIVACY POLICY</a></li> <li><a href='###' title='Advertisement'><i class='fa fa-gg-circle'/> ADVERTISEMENT</a></li> <li><a href='/p/partner_3.html' title='My Partner'><i class='fa fa-external-link'/> LINK PARTNER</a></li>             </ul>          <a href='#' id='pull'>MENU</a>           </nav></div>

5. Temukan isyarat </head> atau </body>
6. Copy & Paste isyarat berikut ini, dan letakkan diatas isyarat </head> atau </body>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'/> <script type='text/javascript'> //<![CDATA[ // Menu Top $(document).ready(function(){var str=location.href.toLowerCase();$('.top-menu ul li a').each(function(){if(str.indexOf(this.href.toLowerCase())>-1){$("li.highlight").removeClass("highlight");$(this).parent().addClass("highlight")}})}) $(function(){var pull=$('#pull');menu=$('.top-menu ul');menuHeight=menu.height();$(pull).on('click',function(e){e.preventDefault();menu.slideToggle()});$(window).resize(function(){var w=$(window).width();if(w>320&&menu.is(':hidden')){menu.removeAttr('style')}})}); //]]> </script>

7. Simpan Template!

Demikian Tutorial Blogger kali ini, bila terjadi kesalahan silakan jangan sungkan untuk berkomentar dibawah ini. Terakhir, silakan anda lihat homepage anda, sajian tersebut udah muncul atau belum. . Sekian dari saya, Semoga Bermanfaat! Thanks for Reading : Cara Membuat Menu Navigasi Responsive di Atas Header