Telolet Apps

Cara Membuat Menu Navigasi Responsive di Atas Header Icon Media Sosial di Blog

Gambar ini hanya Contoh

Tutorial Cara Membuat Menu Navigasi Responsive di Atas Header Plus Media Sosial di Blog

Menu Navigasi Blog yang sudah Profesional biasanya berisi About, Contact, Disclaimer, Sitemap, Privasi dan lain-lain.

Menu Navigasi yang saya sebutkan diatas juga menjadi salah syarat agar Blog diterima oleh Google AdSense.

Seperti salah satu kata dari judul postingan diatas, yaitu "Responsive" yang artinya dapat menyesuaikan di layar Handphone apa saja, berbeda jika judul postingan diatas tidak ada kata Responsive, yang berarti tidak dapat menyesuaikan pada layar Handphone yang saat ini sudah banyak peminatnya untuk digunakan berselancar di dunia maya.

Berikut Cara Memasang Menu Navigasi di Atas Header + Icon Media Sosial di Blog dibawah ini:

- Login ke akun Blogger.com

- Selanjutnya menuju Template/Edit HTML

- Cari kode <div class=header-wrapper> (gunakan CTRL F)

- Kemudian copy kode dibawah ini, pastekan di bawah kode <div class=header-wrapper>

<nav id=menutop><br /><input type=checkbox/><br /><label/><br /><ul><li>About</li><li>Contact</li><li>Sitemap</li><li class=sorting-01 facebook><i class=fa fa-facebook fa-lg/><span class=inv/></li><li class=sorting-02 twitter><i class=fa fa-twitter fa-lg/><span class=inv/></li><li class=sorting-03 googleplus><i class=fa fa-google-plus fa-lg/><span class=inv/></li><li class=sorting-06 rss-square><i class=fa fa-rss-square fa-lg/><span class=inv/></li><li class=sorting-04 youtube><i class=fa fa-youtube fa-lg/><span class=inv/></li></ul></nav>

- Tahap yang pertama sudah selesai, sekarang tahap yang kedua, cari kode </head> (gunakan CTRL F)

- Copy kode di bawah ini, pastekan di atas kode </head>

<style>#menutop{width:100%;margin:0 auto;height:40px;background:#fff;border-bottom:1px solid #e9e9e9;} #menutop ul,#menutop li{margin:0;padding:0;list-style:none;} #menutop ul{height:40px} #menutop li{float:left;display:inline;position:relative;font-family:trebuchet MS;font-size:13px; font-weight:bold;} #menutop a{display:block;line-height:40px;padding:0 14px;text-decoration:none;color:#919392;} #menutop ul li:hover a{color:#666;} #menutop input{display:none;margin:0 0;padding:0 0;width:100%;height:40px;opacity:0;cursor:pointer} #menutop label{font-family:trebuchet MS;font-size:30px;font-weight:400;display:none;width:35px;height:40px;line-height:45px;text-align:center;} #menutop label span{font-size:13px;position:absolute;left:35px} #menutop ul li ul{height:auto;overflow:hidden;position:absolute;z-index:99;color:#919392} #menutop ul li ul li a{color:#919392;height:40px;line-height:40px;background:#fff;width:100%;} #menutop ul.menux{visibility:hidden;opacity:0;height:auto;overflow:hidden;background:#fff;position:absolute;z-index:99;color:#919392;box-shadow: 0px 2px 3px rgba(0,0,0,0.1);top:10px;transition:all 0.3s ease-in-out;} #menutop li:hover > ul.menux{visibility:visible;opacity:1;top:45px;} #menutop a.dutt{padding:0 27px 0 14px} #menutop a.dutt::after{content:"f0d7";font-family:FontAwesome;margin:0 auto;width:10px;height:10px;line-height:45px;position:absolute;top:0;right:10px;} #menutop a.dutt:hover::after,#menutop ul li:hover a.dutt::after{content:"f0d7";font-family:FontAwesome;margin:0 auto;width:10px;height:10px;line-height:45px;position:absolute;top:0;right:10px;} #menutop ul.menux li a{background:#fff;color:#919392;} #menutop ul li ul li a:hover{background:#fcfcfc;color:#8493a0;} #menutop li.facebook {padding:0 5px;} #menutop li.rss-square,#menutop li.facebook,#menutop li.twitter,#menutop li.youtube,#menutop li.googleplus,#menutop li.linkedin{background:#fff;text-align:center;color:#666;float:right;transition:all 0.2s ease-in-out;} #menutop li a.rss-square:hover,#menutop li a.facebook:hover,#menutop li a.twitter:hover,#menutop li a.youtube:hover,#menutop li a.googleplus:hover,#menutop li a.linkedin:hover{color:#8493a0;} #menutop li.rss-square .fa.fa-rss-square,#menutop li.facebook .fa.fa-facebook,#menutop li.twitter .fa.fa-twitter,#menutop li.youtube .fa.fa-youtube,#menutop li.googleplus .fa.fa-google-plus,#menutop li.linkedin .fa.fa-linkedin{color:#919392;transition:all 0.2s ease-in-out;} #menutop li.rss-square:hover,#menutop li.facebook:hover,#menutop li.twitter:hover,#menutop li.youtube:hover, #menutop li.googleplus:hover,#menutop li.linkedin:hover{background:#fcfcfc;color:#8493a0;} #menutop li.rss-square:hover .fa.fa-rss-square{color:#CC6600} #menutop li.facebook:hover .fa.fa-facebook{color:#000099} #menutop li.twitter:hover .fa.fa-twitter{color:#0099FF} #menutop li.youtube:hover .fa.fa-youtube{color:#B00000} #menutop li.googleplus:hover .fa.fa-google-plus{color:#990000} #menutop li.linkedin:hover .fa.fa-linkedin{color:#0066FF} @media screen and (max-width:960px) { #menutop li:hover > ul.menux{display:block;} #menutop ul{border:none;border-bottom:4px solid #e9e9e9;} #menutop{position:relative;border:none;border-bottom:4px solid #e9e9e9;} #menutop ul{background:#fff;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none;} #menutop ul.menux{width:100%;position:static;border:none} #menutop li{display:block;float:none;width:auto;text-align:left} #menutop li a{color:#666} #menutop li a:hover{background:#f1f1f1;color:#f9f9f9} #menutop li:hover{background:#8493a0;color:#fff;} #menutop a.dutt{font-weight: bold;} #menutop li:hover > a.dutt,#menutop a.dutt:hover{background:#b1b1b1;color:#fff;} #menutop input,#menutop label{display:inline-block;position:absolute;right:0;top:0;} #menutop input:after,#menutop label:after {content:"f0c9";font-family:FontAwesome; font-style:normal;font-weight:normal;text-decoration:none;font-size:30px;color:#666; display:inline-block;position:absolute;right:15px;top:25%;line-height:30px;} #menutop input{z-index:4;} #menutop input:checked + label{color:#fff;font-weight:700} #menutop input:checked ~ ul{display:block} #menutop ul li ul li a{width:100%;color:#666;} #menutop ul li ul li a:hover{background:#8493a0;color:#fff;} #menutop ul.menux a{background:#fff;color:#666;} #menutop ul.menux a:hover{background:#8493a0;color:#fff;} #menutop ul.menux li{background:#fff;color:#666;} #menutop ul.menux li:hover{background:#8493a0;color:#fff;} #menutop ul.menux li a{background:#fff;color:#666;} #menutop ul.menux li a:hover{background:#f1f1f1;color:#8493a0;} </style>

- Tahap Terakhir, copy kode di bawah ini, pastekan kembali diatas kode </head>

<script type=text/javascript>// var cb=function(){var e=document.createElement(link); e.rel=stylesheet,e.href=//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css; var t=document.getElementsByTagName(head)[0]; t.parentNode.insertBefore(e,t)},raf=requestAnimationFrame||mozRequestAnimationFrame||webkitRequestAnimationFrame||msRequestAnimationFrame;raf?raf(cb):window.addEventListener(load,cb); //</script>

- Jika semua sudah selesai, klik Simpan Template

- Hasilnya

Available link for download

Cara Mudah Membuat Menu Navigasi Drop Down Responsive di Blog

Apa yang dimaksud dengan Menu Navigasi Drop Down? Menu Navigasi Drop Down adalah Menu Navigasi menurun, Menu Navigasi Drop Down sangat membantu bagi kalian yang ingin memasang kategori/label Blog di bawah header atau bisa juga meletakkan label tertentu seperti Blog saya ini contohnya.

Banyak cara membuat/memasang Menu Navigasi Drop Down di Google, tetapi tidak semuanya work saat di terapkan di Blog, kebanyakan hasilnya GATOT alias gagal total. Parahnya lagi saat sudah menambahkan kode Menu Navigasi Drop Down dan menyimpan Template Blog tiba-tiba Template Blog menjadi error. Alasannya hanya satu karena tidak cocok dengan Template Blog.

Kalau dari pengalaman saya sendiri mencari kode Menu Navigasi Drop Down di mesin pencari mbah Google selalu berujung gatot, kemudian saya berinisiatif sendiri dan mengutak atik Template dari Blog saya yang satunya, kebetulan Blog saya yang satunya Menggunaakan Menu Navigasi Drop Down, jadi saya copy kode Menu Navigasi Drop Down pada Template Blog saya yang satunya tadi, kemudian saya edit dan saya coba pasang di Blog saya yang ini, hasilnya ternyata sukses.

Cara pemasangannya pun tidak ribet seperti tutorial yang ada di mesin pencari. Penasarankan? baiklah langsung saja simak Cara Mudah Memasang Menu Navigasi Drop Down Responsive di Blog dibawah ini:

- Pertama-tama login ke Blogger.com

- Langsung menuju menu Template/Edit HTML

- Cari kode Menu Navigasi Blog kalian, Contoh:



- Ganti dengan kode dibawah ini

<div class=clear/>
<input type=checkbox/>
<label>&#8801;<span>Navigasi&#160;Menu</span></label>
<ul>
<li><a href=/>Home</a></li>
      <li><a href=URL>ANDROID <font size=1>&#9660;</font></a>
        <ul class=menus>
    <li><a href=URL>GAME</a></li>
    <li><a href=URL>APLIKASI</a></li>
    <li><a href=URL>LAUNCHER</a></li>
    <li><a href=URL>TUTORIAL</a></li>
    <li><a href=URL>EMULATOR</a></li>
    <li><a href=URL>CHEAT</a></li>
    <li><a href=URL>SAVE DATA</a></li>
        </ul>
    </li>
<li><a href=URL>PC <font size=1>&#9660;</font></a>
        <ul class=menus>
    <li><a href=URL>GAME</a></li>
    <li><a href=URL>SOFTWARE</a></li>
    <li><a href=URL>EMULATOR</a></li>
    <li><a href=URL>TUTORIAL</a></li>
        </ul>
    </li>
    <li><a href=URL>BLOGGER <font size=1>&#9660;</font></a>
        <ul class=menus>
    <li><a href=URL>TUTORIAL</a></li>
    <li><a href=URL>JAVASCRIPT</a></li>
    <li><a href=URL>SUB MENU</a></li>
    <li><a href=URL>SUB MENU</a></li>
        </ul>
    </li>
   <li><a href=URL>TIPS DAN TRIK <font size=1>&#9660;</font></a>
        <ul class=menus>
    <li><a href=URL>FACEBOOK</a></li>
    <li><a href=URL>TWITTER</a></li>
    <li><a href=URL>INSTAGRAM</a></li>
        </ul>
    </li>
    <li><a href=URL>NEWS <font size=1>&#9660;</font></a>
        <ul class=menus>
    <li><a href=URL>INFORMASI TERBARU</a></li>
    <li><a href=URL>JADWAL</a></li>
    <li><a href=URL>PREDIKSI DAN HASIL</a></li>
        </ul>
    </li>
    <li><a href=URL>UNCATEGORIZED <font size=1>&#9660;</font></a>
        <ul class=menus>
    <li><a href=URL>GAME JAVA</a></li>
    <li><a href=URL>GAME SYMBIAN</a></li>
    <li><a href=URL>DOWNLOAD MP3</a></li>
    <li><a href=URL>TEMA JAVA</a></li>
    <li><a href=URL>VIDEO</a></li>
    <li><a href=URL>FOTO LUCU</a></li>
    <li><a href=URL>REQUEST</a></li>
        </ul>
    </li>
    <li><a href=URL>CERPEN</a></li>
   </ul>
</nav>

- Bisa juga kalian edit terlebih dahulu sesuka hati kalian

- Hasilnya

Available link for download