Menu Navigasi Keren Ala Simplify

AA Sciences, Aldi Andreansyah - Menu Navigasi Ala Simplify, Menu Dropdown Ala Simplify, Menu Navigasi Ala Simplify Blog Responsive, Menu Navigasi Keren Ala Simplify Blogger.

Menu Navigasi Keren Ala Simplify - Adanya sebuah tampilan yang cantik pada sebuah website atau blog merupakan bagian inti dalam keinginan kita terutama para user di karena kan adanya hal yang cantik para user tersebut pula bertujuan untuk memberi kenyamanan untuk para pengunjung tersebut agar banyak nya kunjungan dari pengunjung tersebut sehingga menghasilkan visitor yang membludak setidaknya.

Dengan adanya sebuah menu navigasi salah satu nya hal tersebut akan membuat kita terutama untuk tampilan sebuah website atau blog menjadi tampil cantik di karenakan hal tersebut yakni dengan adanya menu navigasi sebagian besar akan memberi kesan yang baik dalam sebuah website atau blog agar tampil cantik tersebut.

Tidak hanya itu menu navigasi berperan penting untuk membahas agar para pengunjung menemukan halaman halaman tertentu dalam website atau blog kalian yang dimana biasa nya yang diadakan dalam sebuah website atau blog yaitu seperti : sebuah postingan tertentu, halaman label, halaman arsip, halaman page not found, halaman eksternal/internal dan halaman lainnya yang dimana halaman apa saja dapat diakses dalam blog tersebut asalkan berisi URL dan URL tersebut tidak lah rusak.

Di kali ini AA Sciences akan membagikan mengenai menu navigasi yakni yang dimana menu navigasi ini digunakan dalam Simplify, yaps Simplify, Simplify bukan lah berarti sebuah orang maupun sebuah website tetapi Simplify adalah sebuah tampilan atau biasa yang disebut Template nya sebuah website khususnya, yang dimana sudah tak asing lagu Template berfungsi sebagai alat dimana kita menciptakan sebuah tampilan agar menjadi sebuah keinginan kita sendiri.

Membahas Simplify, Simplify merupakan sebuah Template yang didirikan oleh idnthemes atau jika orang nya yakni Mbak Arlina, yaps arlina, arlina merupakan sebuah website khusus yang dimana tempatnya berbagi sebuah tutorial blogger bahkan memberi kan sebuah Template baik itu premium (berbayar) dan free (gratis), sudah pastinya jika fitur berbayar dan gratis memiliki sebuah fitur yang berbeda baik masalah SEO dan fitur lengkapnya yang tidak di dapatkan pada Template berbasis Premium tentunya.

Sekian pembahasan mengenai menu navigasi nya, Jika kalian sudah penasaran mengenai tutor Cara Membuat Menu Navigasi Ala Simplify di Blogger, maka langsung saja simal tutorial nya di bawah ini :

Cara Membuat Menu Navigasi Keren Ala Simplify Blogger

Pembuatan CSS nya terlebih dahulu :

• Pastikan kalian sudahlah Login terlebih dahulu pada akun Blogger kalian.
• Template - > Edit HTML - > CTRL+F (untuk memudahkan pencarian) lalu cari kode ]]></b:skin> atau dapat juga kode </style>.
• Jika sudah ditemukan kode ]]></b:skin> atau </style> nya tadi, langsung saja kalian Salin kan Script CSS/Menu Navigasi Ala Simplify nya di bawah ini tepat sebelum ]]></b:skin> atau </style>, berikut CSS nya :

/* Simplify2 Main Navigation by https://aldiandreansyah.blogspot.co.id */

#simplify-duo{font-size:0;padding:0;margin:0 auto;float:left}

#simplify-duo ul.menus{height:auto;overflow:hidden;position:absolute;z-index:99;display:none}

#simplify-duo a{display:block;height:60px;line-height:60px;color:#fff;font-size:14px;overflow:hidden;padding:0 10px;text-transform:uppercase;transition:initial}

#simplify-duo ul > li a i {color:#fff}

#simplify-duo ul > li a:hover i {color:#fff}

#simplify-duo ul{margin:0 auto;padding:0;float:left}

#simplify-duo ul li{position:relative;margin:0;list-style:none}

#simplify-duo ul > li {float:left;}

#simplify-duo input {display:none;margin:0;padding:0;width:80px;height:45px;opacity:0;cursor:pointer}

#simplify-duo label {display:none;width:55px;height:48px;line-height:48px;text-align:center}

#simplify-duo label span {font-size:16px;position:absolute;left:55px}

#simplify-duo ul.menus li {display:block;width:100%;text-transform:none;text-shadow:none;}

#simplify-duo ul.menus a {color:#fff;line-height:55px}

#simplify-duo li a:hover,#simplify-duo ul.menus a:hover,#simplify-duo li a:active,#simplify-duo ul.menus a:active{background:rgba(0,0,0,0.1);color:#fff}

#simplify-duo li ul{display:none;background:#30cc91;margin:0;height:auto;position:absolute;top:99%;left:0;z-index:12;box-shadow:1px 2px 5px rgba(0,0,0,0.1);}

#simplify-duo li:hover ul.menus,#simplify-duo li:hover > ul{display:block;}

#simplify-duo li:hover ul.menus,#simplify-duo li:hover > ul{visibility:visible;opacity:1;}

#simplify-duo li li{display:block;float:none;font-size:13px;height:auto;clear:both;margin-left:0;line-height:36px;}

#simplify-duo li li:last-child {border:0;}

#simplify-duo li ul ul {left:100%;top:0}

#simplify-duo li li > a{background:#374760;color:#fff;display:block;margin:0;text-decoration:none;text-transform:none;min-width:180px;height:36px;line-height:36px;padding:0 13px;font-size:11px;border:0;;border-left:3px solid transparent;margin-top:0;transition:initial;}

#simplify-duo li li a:hover{background:rgba(0,0,0,0.1);color:#fff}

Kalian dapat mengubah jarak, batas, warna border, solid,font, jenis font, rata kiri/kanan/tengah/atas/bawah sesuai kebutuhan Kalian.

Pembuatan HTML nya :

• Masih dalam mode Template - > CTRL+F (untuk memudahkan pencarian) - > Cari Letak Bagian atas (header) kalian atau biasanya kode tag nya yakni </head> atau </header> - > Letakkan HTML pemanggil nya di bawah ini tepat sebelum dan dapat juga sesudah </head> atau </header>, berikut Script HTML nya :

<nav id='simplify-duo'>

  <input type='checkbox'><i aria-hidden='true' class='fa fa-list'/></input>

<ul id='simplify-click'>

<li><a href='#' itemprop='url'><span itemprop='name'>Menu 1<i class='fa fa-caret-down fa-fw'/></span></a>

<ul>

<li><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='name'>Home</span></a></li>

<li><a href='/p/about-us.html' itemprop='url'><span itemprop='name'>About</span></a></li>

<li><a href='/p/hubungi-kami.html' itemprop='url'><span itemprop='name'>Contact</span></a></li>

<li><a href='/p/disclaimer.html' itemprop='url'><span itemprop='name'>Disclaimer</span></a></li>

<li><a href='/p/privacy-policy.html' itemprop='url'><span itemprop='name'>Privacy Policy</span></a></li>

<li><a href='/p/sitemap.html' itemprop='url'><span itemprop='name'>Sitemap</span></a></li>

<li><a href='/p/terms-of-service.html' itemprop='url'><span itemprop='name'>Terms of Service</span></a></li>

<li><a href='/p/pasang-iklan.html' itemprop='url'><span itemprop='name'>Pasang Iklan</span></a></li>

<li><a href='/p/blogwalking-dan-comment.html' itemprop='url'><span itemprop='name'>Blogwalking dan Comment</span></a></li>

</ul></li>

<li><a href='#' itemprop='url'><span itemprop='name'>Menu 2<i class='fa fa-caret-down fa-fw'/></span></a>

<ul>

<li><a href='https://www.facebook.com/aldiandreansyahofficial' itemprop='url'><span itemprop='name'>Facebook</span></a></li>

<li><a href='https://twitter.com/aldiandreansyah_official' itemprop='url'><span itemprop='name'>Twitter</span></a></li>

<li><a href='https://plus.google.com/+aldiandreansyah' itemprop='url'><span itemprop='name'>Google+</span></a></li>

<li><a href='https://www.instagram.com/aldiandreansyah_official' itemprop='url'><span itemprop='name'>Instagram</span></a></li>

<li><a href='https://www.youtube.com/aldiandreansyah' itemprop='url'><span itemprop='name'>Youtube</span></a></li>

<li><a href='https://www.blogger.com/follow-blog.g?blogID=7559214632370258218' itemprop='url'><span itemprop='name'>Follow Our Blog</span></a></li>

</ul></li>

<li><a href='#' itemprop='url'><span itemprop='name'>BLOGGER <i class='fa fa-caret-down fa-fw'/></span></a>

<ul>

<li><a href='http://aldiandreansyah.blogspot.co.id/search/label/Tutorial%20Blogger' itemprop='url'><span itemprop='name'>Tutorial Blogger</span></a></li>

<li><a href='http://aldiandreansyah.blogspot.co.id/search/label/CSS' itemprop='url'><span itemprop='name'>CSS</span></a></li>

<li><a href='http://aldiandreansyah.blogspot.co.id/search/label/HTML' itemprop='url'><span itemprop='name'>HTML</span></a></li>

<li><a href='http://aldiandreansyah.blogspot.co.id/search/label/Javascript' itemprop='url'><span itemprop='name'>Javascript</span></a></li>

<li><a href='http://aldiandreansyah.blogspot.co.id/search/label/Jquery' itemprop='url'><span itemprop='name'>Jquery</span></a></li>

<li><a href='http://aldiandreansyah.blogspot.co.id/search/label/Meta%20Tag' itemprop='url'><span itemprop='name'>Meta Tag</span></a></li>

<li><a href='http://aldiandreansyah.blogspot.co.id/search/label/Template' itemprop='url'><span itemprop='name'>Template</span></a></li>

<li><a href='http://aldiandreansyah.blogspot.co.id/search/label/Widget' itemprop='url'><span itemprop='name'>Widget</span></a></li>

<li><a href='#' itemprop='url'><span itemprop='name'>Tools Blogger <i class='fa fa-caret-down fa-fw'/></span></a></li>

<li><a href='http://aldiandreansyah.blogspot.co.id/p/css-minifier.html' itemprop='url'><span itemprop='name'>CSS Minifier</span></a></li>

<li><a href='http://aldiandreansyah.blogspot.co.id/p/font-awesome.html' itemprop='url'><span itemprop='name'>Font Awesome</span></a></li>

<li><a href='http://aldiandreansyah.blogspot.co.id/p/kumpulan-kode-warna-html.html' itemprop='url'><span itemprop='name'>Kumpulan Kode Warna HTML</span></a></li>

<li><a href='http://aldiandreansyah.blogspot.com/p/ads-converter.html' itemprop='url'><span itemprop='name'>Script Parse Ads Adsense</span></a></li>

<li><a href='http://aldiandreansyah.blogspot.com/p/kamus-html.html' itemprop='url'><span itemprop='name'>Kamus HTML</span></a></li>

</ul>

</li>

<li><a href='#' itemprop='url'><span itemprop='name'>PELAJAR <i class='fa fa-caret-down fa-fw'/></span></a>

<ul>

<li><a href='http://aldiandreansyah.blogspot.co.id/search/label/PAI' itemprop='url'><span itemprop='name'>Agama Islam</span></a></li>

<li><a href='http://aldiandreansyah.blogspot.co.id/search/label/B.INDO' itemprop='url'><span itemprop='name'>Bahasa Indonesia</span></a></li>

<li><a href='http://aldiandreansyah.blogspot.co.id/search/label/IPA' itemprop='url'><span itemprop='name'>Ilmu Pengetahuan Alam</span></a></li>

<li><a href='http://aldiandreansyah.blogspot.co.id/search/label/PPKN' itemprop='url'><span itemprop='name'>Pendidikan Kewarganegaraan</span></a></li>

<li><a href='http://aldiandreansyah.blogspot.co.id/search/label/SBK' itemprop='url'><span itemprop='name'>Seni Budaya</span></a></li>

<li><a href='http://aldiandreansyah.blogspot.co.id/search/label/TKJ' itemprop='url'><span itemprop='name'>Teknik Komputer dan Jaringan</span></a></li>

</ul>

</li>

<li><a href='#' itemprop='url'><span itemprop='name'>SOSMED <i class='fa fa-caret-down fa-fw'/></span></a>

<ul>

<li><a href='http://aldiandreansyah.blogspot.co.id/search/label/Facebook' itemprop='url'><span itemprop='name'>Facebook</span></a></li>

<li><a href='http://aldiandreansyah.blogspot.co.id/search/label/Twitter' itemprop='url'><span itemprop='name'>Twitter</span></a></li>

<li><a href='http://aldiandreansyah.blogspot.co.id/search/label/Instagram' itemprop='url'><span itemprop='name'>Instagram</span></a></li>

<li><a href='http://aldiandreansyah.blogspot.co.id/search/label/Google+' itemprop='url'><span itemprop='name'>Google+</span></a></li>

<li><a href='http://aldiandreansyah.blogspot.co.id/search/label/Youtube' itemprop='url'><span itemprop='name'>Youtube</span></a></li>

</ul>

</li>

<li><a href='http://aldiandreansyah.blogspot.co.id/search/label/News' itemprop='url'><span itemprop='name'>News <i class='fa fa-globe'/></span></a></li>

<li><a href='http://aldiandreansyah.blogspot.co.id/search/label/Trending' itemprop='url'><span itemprop='name'>TRENDING <i class='fa fa-thumbs-o-up'/></span></a></li>

<li><a href='#' itemprop='url'><span itemprop='name'>Lainnya <i class='fa fa-caret-down fa-fw'/></span></a>

<ul>

<li><a href='http://aldiandreansyah.blogspot.co.id/search/label/Review' itemprop='url'><span itemprop='name'>Review</span></a></li>

<li><a href='http://aldiandreansyah.blogspot.co.id/search/label/Cenderamata' itemprop='url'><span itemprop='name'>Cenderamata</span></a></li>

<li><a href='http://aldiandreansyah.blogspot.co.id/search/label/Teknologi' itemprop='url'><span itemprop='name'>Teknologi</span></a></li>

<li><a href='http://aldiandreansyah.blogspot.co.id/search/label/SEO' itemprop='url'><span itemprop='name'>SEO</span></a></li>

<li><a href='http://aldiandreansyah.blogspot.co.id/search/label/Android' itemprop='url'><span itemprop='name'>Android</span></a></li>

<li><a href='http://aldiandreansyah.blogspot.co.id/search/label/Aplikasi' itemprop='url'><span itemprop='name'>Aplikasi</span></a></li>

<li><a href='http://aldiandreansyah.blogspot.co.id/search/label/Games' itemprop='url'><span itemprop='name'>Games</span></a></li>

<li><a href='http://aldiandreansyah.blogspot.co.id/search/label/Download' itemprop='url'><span itemprop='name'>Download</span></a></li>

<li><a href='http://aldiandreansyah.blogspot.co.id/search/label/Musik%20MP3' itemprop='url'><span itemprop='name'>Musik MP3</span></a></li>

<li><a href='http://aldiandreansyah.blogspot.co.id/search/label/Kesehatan' itemprop='url'><span itemprop='name'>Kesehatan</span></a></li>

<li><a href='http://aldiandreansyah.blogspot.co.id/search/label/Sholawat' itemprop='url'><span itemprop='name'>Sholawat</span></a></li>

<li><a href='http://aldiandreansyah.blogspot.co.id/search/label/Kunci%20Guitar' itemprop='url'><span itemprop='name'>Kunci Guitar</span></a></li>

<li><a href='http://aldiandreansyah.blogspot.co.id/search/label/Lirik%20Lagu' itemprop='url'><span itemprop='name'>Lirik Lagu</span></a></li>

</ul>

</li>

</ul>

</nav>

Kalian dapat mengubah URL dengan tag sesudah href= , lalu ubah dengan URL tertentu kalian baik itu postingan, label, arsip, popular post dan URL lainnya. Dan dapat juga kalian ubah Nama Nama Tag tertentu dengan kode sesudah Tag <span itemprop'name'> nya dan ubah sesuai keinginan kalian.

Pembuatan Agar Menu Navigasi Ala Simplify nya Tampil Responsive :

• Masih dalam mode Template - > CTRL+F (untuk memudahkan pencarian) - > Cari kode Tag ]]></b:skin> atau </style> - > Jika sudah, Letakkan CSS tampil responsive nya di bawah ini tepat sebelum Tag ]]></b:skin> atau </style>, berikut Script CSS nya :

@media screen and (max-width:1366px) {

#menu {display:block;}

#simplify-duo{background:#30cc91;font-size:initial;position:relative;display:block;padding:15px;text-transform:uppercase;box-shadow:none;float:none;text-align:left;border-bottom:1px solid rgba(0,0,0,0.05)}

#simplify-duo ul{background:#374760;position:absolute;top:100%;left:0;z-index:3;height:auto;float:none;display:none;border-top:1px solid rgba(0,0,0,0.05);}

#simplify-duo ul > li{float:none}

#simplify-duo ul.menus{width:100%;position:static;padding-left:20px}

#simplify-duo li{display:block;float:none;width:auto}

#simplify-duo li a:hover,#simplify-duo ul.menus a:hover{background:#30cc91;color:#374760;}

#simplify-duo a{background:#30cc91;padding:12px;height:initial;line-height:initial;color:#374760;border:0;border-bottom:1px solid rgba(0,0,0,0.05);margin:0;font-weight:400;text-transform:capitalize;}

#simplify-duo ul > li a i{color:#374760;float:right}

#simplify-duo input,#simplify-duo label{position:absolute;top:0;left:0;display:block}

#simplify-duo input{z-index:4}

#simplify-duo input:checked + label{color:#30cc91}

#simplify-duo input:checked ~ ul{display:block;width:100%}

#simplify-duo li:hover > ul{width:100%}

#simplify-duo li li {border:0;}

#simplify-duo li li > a{background:#374760;color:#fff;height:auto;font-size:12px;line-height:30px;padding:0 10px;}

#simplify-duo li li:hover, #simplify-duo li li a:hover {background:#30cc91;color:#fff;}

#simplify-duo li ul {background:#fff;padding:0;position:relative;width:100%;left:initial;box-shadow:none;border:0;}

#simplify-duo li:hover ul.menus,#simplify-duo li:hover > ul{left:initial}

#simplify-duo a i {float:right;}

#simplify-duo ul{height:195px;overflow:auto;}

}

Kalian dapat mengubah jarak, batas, warna, rata kiri/kanan/tengah/atas/bawah sesuai kebutuhan Kalian. Dan dapat pula kalian ubah berapa ukuran yang ingin di tampilkan pada tampilan responsive pada script @media screen and (max-width:1366px) dan ubah 1366px nya sesuai kebutuhan kalian.

• Langkah Terakhir, Langsung saja Simpan Template dan lihat hasilnya.

Demikian, mengenai Cara Membuat Menu Navigasi Ala Simplify di Blogger yang dapat AA Sciences sampaikan, semoga bermanfaat dan sekaligus menambah wawasan kalian, Amin.

Share this post