Cara Menambahkan Navigasi Menu Responsive Dropdown untuk Blogger.

NAVIGASI menu merupakan elemen penting dalam blog. Di daftar menu ini kita menampilkan link halaman statis, link label,

konten unggulan, juga bisa eksternal link ke blog lain.

Navigasi menu responsive menjadi hal wajib di era mobile-friendly. Dengan menu responsif, maka pengunjung bisa dengan

mudah menemuka "peta" konten blog kita.

Berikut ini salah satu desain Navigasi Menu Responsive Dropdown untuk Blogger dari MBG. Sudah dites dan berhasil.

Penampakan versi Desktop dan Mobile (responsive) menu ini sebagai berikut:

Navigasi Menu Responsive Dropdown

Navigasi Menu Responsive Dropdown

Cara Membuat Navigasi Menu Responsive Dropdown untuk Blogger
Cara membuat navigasi menu keren ini sangat mudah:
1. Template > Edit HTML
2. Copas KODE CSS Responsive Menu berikut ini di atas kode ]]></b:skin> atau </style>

#menu-wrapper{background:#4b3f57;height:50px;width:100%;position:relative;}#menu1

{background:#4b3f57;color:#fff;height:50px;}#menu1 {border-bottom: 4px solid #f35d5c;}#menu1 ul,#menu1 li

{margin:0;padding:0;list-style:none;}#menu1 ul{height:50px}#menu1 li{float:left;display:inline;position:relative;font-

family:Arial;font-size:14px;font-weight:400;text-transform:capitalize;}#menu1 li a{color:#fff;}#menu1 a

{display:block;line-height:50px;padding:0 20px;text-decoration:none;color:#fff;transition:all 0.2s ease-in-out;}#menu1

li:hover > a{background:#3f354a;color:#fff;}#menu1 li a:hover{color:#fff;}#menu1 li:last-child a{border-right:none;}#menu1

input{display:none;margin:0;padding:0;width:80px;height:50px;opacity:0;cursor:pointer}#menu1 label{font-

family:Arial;font-size:30px;font-weight:400;text-transform:capitalize ;display:none;width:35px;height:51px;line-

height:51px;text-align:center}#menu1 label span{font-size:13px;position:absolute;left:35px}#menu1 ul.menus

{visibility:hidden;opacity:0;height:auto;overflow:hidden;width:166px;background:#3f354a;position:absolute;z-

index:99;display:none;color:#fff;transition:all 0.3s ease-in-out;}#menu1 li > ul.menus{transition:all 0.3s linear;}#menu1

li:hover > ul.menus{visibility:visible;opacity:1;display:block;-moz-animation: fadeInUp .3s ease-in-out;-webkit-animation:

fadeInUp .3s ease-in-out;animation: fadeInUp .3s ease-in-out;transition:all 0.3s linear;}#menu1 a.ai,#menu1 a.trigger2

{padding:0 27px 0 14px;transition:all 0.3s linear;}#menu1 li:hover > a.ai,#menu1 a.ai:hover

{background:#3f354a;color:#fff}#menu1 li > a.ai::after {content:"";margin:0 auto;background:url

('http://2.bp.blogspot.com/-mHVCs4K3A84/U9vKbpqhSmI/AAAAAAAAE5E/y7Dp7HzmenA/s1600/arrow.png') no-

repeat;width:10px;height:10px;line-height:50px;position:absolute;top:20px;right:10px;transition:all 0.3s linear;}#menu1

li:hover > a.ai::after {content:"";margin:0 auto;background:url('http://3.bp.blogspot.com/-ihlfaVl0yFM/U9vMSJa-

tLI/AAAAAAAAE5Q/9SRXYxdvmmI/s1600/arrowhover.png') no-repeat;width:10px;height:10px;line-

height:50px;position:absolute;top:20px;right:10px;transition:all 0.3s linear;}#menu1 ul.menus a

{background:#3f354a;color:#fff;border-bottom:1px solid #3a3144;transition:all .3s linear;}#menu1 ul.menus a:hover

{background:#322a3b;color:#fff;transition:all .1s linear;}#menu1 ul.menus li{display:block;width:100%;font-family:'Open

Sans';font-size:13px;font-weight:400;text-transform:none;}#menu1 ul.menus li:hover{width:100%;}#menu1 ul.menus li:last-

child {border-bottom:none;}#menu1 ul.menus li:first-child a{border-top:none;}#menu1 ul.menus li:last-child a{border-

bottom:none;}#menu1 ul.menus li:hover a {background:#322a3b;color:#fff;}#menu1 .homers a{background:#f35d5c;color:#fff;}

#menu1 .homers a:hover{background:#d95353;color:#fff;}#menu1 .homers1 a{box-shadow:inset 0 -4px 0 0 #f35d5c;color:#fff;}

#menu1 .homers1 a:hover{box-shadow:inset 0 -54px 0 0 #f35d5c;color:#fff;}
@media screen and (max-width:960px) {#menu1{position:relative;background:#4b3f57;color:#fff;}#menu1 ul

{background:#3f354a;position:absolute;top:100%;right:0;left:0;z-index:5;height:auto;display:none;}#menu1 ul.menus

{width:100%;position:static;}#menu1 li{display:block;width:100%;text-align:left;}#menu1 a{border:none;}#menu1 li a

{color:#fff;}#menu1 li a:hover{background:#f35d5c;color:#fff}#menu1 li:hover{background:#f35d5c;color:#fff;}#menu1

li:hover > a.ai,#menu1 a.ai:hover{background:#f35d5c;color:#fff;}#menu1 li:hover > a,#menu1 li a:hover

{background:#f35d5c;color:#fff;box-shadow:none;transition: .3s linear;}#menu1 ul.menus a

{background:#3f354a;color:#fff;border-bottom:none;}#menu1 ul.menus a:hover{background:#f35d5c;color:#fff;border-

left:none;}#menu1 ul.menus li{background:#3f354a;color:#fff;border-bottom:none;}#menu1 ul.menus li:hover

{background:#f35d5c;color:#fff;border-left:none;}#menu1 ul.menus li a{background:#3f354a;color:#fff;border-bottom:none;}

#menu1 ul.menus li a:hover{background:#f35d5c;color:#fff;border-left:none;}#menu1 input,#menu1 label{display:inline-

block;position:absolute;right:0;top:0;}#menu1 input:after,#menu1 label:after {content:"";background:url

('http://1.bp.blogspot.com/-P2RRijDirXA/U8ftwSomm6I/AAAAAAAAEbo/tLU4c5dk2K4/s1600/nav-icon.png') no-repeat;

width:30px;height:30px;display:inline-block;position:absolute;right:15px;top:17px;}#menu1 input{z-index:4}#menu1

input:checked + label{color:#fff;font-weight:700}#menu1 input:checked ~ ul{display:block}#menu1 .homers a

{background:transparent;color:#fff;}#menu1 .homers a:hover{background:#f35d5c;color:#fff;}#footer-widgetfix

{width:100%;overflow:hidden;}#menu1 li:hover > a.ai::after{content:"";width:6px;height:6px;border:2px solid #fff;border-

right-width:0;border-top-width:0;transform:rotate(320deg);-webkit-transform:rotate(320deg);-moz-transform:rotate

(320deg);-o-transform:rotate(320deg);-ms-transform:rotate(320deg);position:absolute;top:19px;right:12px;transition:all .3s

linear;}}

3. Simpan KODE HTMLNavigasi Responsive Menu berikut ini di bawah kode </header> atau di atas kode <div class='main-

wrapper'> atau yang semisalnya.

<nav id='menu1'>
<input type='checkbox'/>
<label><span>CB</span></label>
<ul>
<li class='homers'><a href='/'><i class='fa fa-home fa-2x fa-fw'></i></a></li>
<li><a href='#'>Drop Down1</a>
<ul class='menus'>
<li><a href='#'>Tab 1</a></li>
<li><a href='#'>Tab 2</a></li>
<li><a href='#'>Tab 3</a></li>
</ul>
</li>
<li><a href='#'>Seo</a></li>
<li><a href='#'>Template</a></li>
<li><a href='#'>Widget</a></li>
<li><a href='#'>Social Media</a></li>
</ul>
<a href='#' id='pull'>MENU</a></nav>

4. Ganti nama menu dengan versi Anda dan tanda pagar (#) dengan url linknya.
5. Karena menu responsive ini menggunakan gambar home dari Font Awe Glooger - Template Blog SEO Responsive Gaya Majalah

Berita

TEMPLATE blog seo friendly, fast loading, dan responsive terbaru ini didesain untuk blog majalah, berita, atau galeri.

Namun, template blog seo friendly gratis ini cocok juga untuk niche blog lainnya, termasuk blog pribadi. Secara, template

ini mobile friendly dan bersih-ringan.

Desain tampilannya modern, stylish. Keren. Nama template ini Glooger. Tampilan mobilenya lebih keren, apalagi jika warna

judul posting diubah menjadi biru atau hitam agar lebih user friendly. Secara, warna merah atau warna terang-menyala tidak

bagus buat mata pengguna.

Glooger - Template Blog SEO Responsive Gaya Majalah Berita

DEMO | DOWNLOAD

Glooger is an all purpose Blogger theme designed for online magazine, technology blog, food recipe blog, or news and

editorial ventures. Glooger has a responsive layout and a unique modern design. The layout will adapt to different screen

sizes which will make your website compatible with any devices such as smartphones, tablets, laptop or desktop computers.

Built with latest coding standards and clean design, the theme is envisioned to provide you a long-term and powerful

solution for online projects.

Features:

    Responsive
    SEO Friendly
    Google Testing Tool Validator
    Mobile Friendly
    Custom 404 Page
    Fast Loading
    Magazine
    Light Box
    Minimal
    Tech Blog
    Ads Ready
    Clean Layout
    Simple Design
    Drop Down Menu
    Social Sharing
    HTML5 & CSS3
    Browser Compatibility


Template Blog SEO Responsive Gaya Majalah Berita ini sangat beda sehingga membuat blog Anda unik dan beda dengan yang

lain, apalagi jika Anda modif. Good Luck & Happy Blogging!some, pastikan di template Anda sudah ada link ke font awesome.

Jika belum ada, maka tambahkan kode berikut ini di atas kode </head>