Cara Membuat Navigasi Keren Di Blog Seperti Tamplate Anjello
Kali ini saya akan membagikan tutorial cara membuat navigasi keren di blog. Naah navigasi ini saya buat agar blog kalian tampil lebih keren lagi. Sebelum saya menjelaskan intinya saya kan memberikan sedikit apa itu menu navigasi pada blog dan apa kegunaannya. Menu navigasi blog adalah suatu menu yang biasanya terdapat di atas dan di bawah header, dan kegunaan navigasi pada blog tersebut berguna untuk memudahkan para pengunjung untuk menjelajahi blog kita. Dengan memberikan navigasi pada blog kita maka tidak kita sadari kita juga telah mengoptimalkan SEO on page.
Apa itu SEO on page ?
SEO on page adalah suatu kegiatan mengoptimalkan SEO yang dilakukan di dalam blog kita sendiri. Jadi tanpa kita sadari dengan kita membuat menu navigasi dan pengunjug terasa nyaman kita telah melakukan optimasi SEO on page.
Eeeh kok saya malah bahas SEO yak.. Ya udah kita balik ke inti topik artikel ini. Di sini saya kan membagikan tutorial cara membuat menu navigasi keren di blog yang saya bongkar dari tamplate yang telah saya buat yaitu Anjello blogger tamplate. Di sini saya akan memberikan 2 navigasi yaitu navigasi top yang letaknya ada di atas header dan navigasi biasa yang letaknya biasa ada di bawah header.
Bagaimana penampakan kedua navigasi tersebut kalian bisa lihat demonya.
Cara Membuat Menu Navigasi Keren Di Blog.
Navigasi Top di atas header.
1. pertama kalian pergi ke menu edit tamplate dan cari terlebih dahulu kode seperti ini ]]></b:skin> atau </style> lalu kalian letakan kodr berikut tepat di atasnya.
2. Setelah itu kalian cari <div id='header-wrapper'> atau yang hampir sama dengan kode tersebut karena setiap tamplate berbeda - beda kodenya atau kalian juga bisa menaruhnya di bawah kode <div id='outer-wrapper'>.
3. Setelah itu kalian letakan kode berikut tepat di atas kode <div id='header-wrapper'>.
4. Setelah itu kalian bisa langsung save tamplate kalian.
Navigasi di atas telah saya lengkapi dengan menu sosial media, jadi apabila kalian tidak mengiginkan menu sosial media kalian bisa mengahpusnya sendiri.
Cara membuat navigasi di bawah header.
1. Pertama kalian pergi ke menu edit tamplate dan kalian cari kode css seperti berikut ]]></b:skin> atau </style> setelah itu kalian masukan kode di bawah tepat di atas kode di atas.
2. Setelah kalian memasukan kode diatas kali ini kalian harus mencari kode seperti ini </header> atau tepatnya di bawah script penutup header blog. Lalu kalian letakan kode ini di bawahnya.
Setelah itu kalian tinggal save tamplate kalian.
Note navigasi di atas sudah responive jadi kalian tidak usah melakukan edit navigasi agar responisve.
Naah itulah cara membuat navigasi keren di blog seperti tamplate anjello. Apabila ada yang kalian tanyakan seputar artikel ini silahkan berkomentar dengan bijak.
Apa itu SEO on page ?
SEO on page adalah suatu kegiatan mengoptimalkan SEO yang dilakukan di dalam blog kita sendiri. Jadi tanpa kita sadari dengan kita membuat menu navigasi dan pengunjug terasa nyaman kita telah melakukan optimasi SEO on page.
 |
| Cara membuat navigasi keren di blog |
Eeeh kok saya malah bahas SEO yak.. Ya udah kita balik ke inti topik artikel ini. Di sini saya kan membagikan tutorial cara membuat menu navigasi keren di blog yang saya bongkar dari tamplate yang telah saya buat yaitu Anjello blogger tamplate. Di sini saya akan memberikan 2 navigasi yaitu navigasi top yang letaknya ada di atas header dan navigasi biasa yang letaknya biasa ada di bawah header.
Baca Juga : Anjello Responsive And SEO Frendly Blogger Tamplate
Bagaimana penampakan kedua navigasi tersebut kalian bisa lihat demonya.
Cara Membuat Menu Navigasi Keren Di Blog.
Navigasi Top di atas header.
1. pertama kalian pergi ke menu edit tamplate dan cari terlebih dahulu kode seperti ini ]]></b:skin> atau </style> lalu kalian letakan kodr berikut tepat di atasnya.
/* NAVIGATION MENU 1 */
#menutop{width:100%;margin:0 auto;height:45px;background:#fff;border:1px solid #e9e9e9;}
#menutop ul,#menutop li{margin:0;padding:0;list-style:none;}
#menutop ul{height:45px}
#menutop li{float:left;display:inline;position:relative;font-family:'Open Sans';font-size:12px;
font-weight:bold;}
#menutop a{display:block;line-height:45px;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:45px;opacity:0;cursor:pointer}
#menutop label{font-family:'Open Sans';font-size:30px;font-weight:400;display:none;width:35px;height:45px;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:45px;line-height:45px;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.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.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.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.facebook:hover,#menutop li.twitter:hover,#menutop li.youtube:hover,
#menutop li.googleplus:hover,#menutop li.linkedin:hover{background:#fcfcfc;color:#8493a0;}
#menutop li.facebook:hover .fa.fa-facebook,#menutop li.twitter:hover .fa.fa-twitter,#menutop li.youtube:hover .fa.fa-youtube,#menutop li.googleplus:hover .fa.fa-google-plus,#menutop li.linkedin:hover .fa.fa-linkedin{color:#8493a0;}
@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;}
}
#menutop{width:100%;margin:0 auto;height:45px;background:#fff;border:1px solid #e9e9e9;}
#menutop ul,#menutop li{margin:0;padding:0;list-style:none;}
#menutop ul{height:45px}
#menutop li{float:left;display:inline;position:relative;font-family:'Open Sans';font-size:12px;
font-weight:bold;}
#menutop a{display:block;line-height:45px;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:45px;opacity:0;cursor:pointer}
#menutop label{font-family:'Open Sans';font-size:30px;font-weight:400;display:none;width:35px;height:45px;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:45px;line-height:45px;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.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.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.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.facebook:hover,#menutop li.twitter:hover,#menutop li.youtube:hover,
#menutop li.googleplus:hover,#menutop li.linkedin:hover{background:#fcfcfc;color:#8493a0;}
#menutop li.facebook:hover .fa.fa-facebook,#menutop li.twitter:hover .fa.fa-twitter,#menutop li.youtube:hover .fa.fa-youtube,#menutop li.googleplus:hover .fa.fa-google-plus,#menutop li.linkedin:hover .fa.fa-linkedin{color:#8493a0;}
@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;}
}
2. Setelah itu kalian cari <div id='header-wrapper'> atau yang hampir sama dengan kode tersebut karena setiap tamplate berbeda - beda kodenya atau kalian juga bisa menaruhnya di bawah kode <div id='outer-wrapper'>.
3. Setelah itu kalian letakan kode berikut tepat di atas kode <div id='header-wrapper'>.
<nav id='menutop'>
<input type='checkbox'/>
<label/>
<ul>
<li><a href='LINK/' title='Home'>Home</a></li>
<li><a href='http://bloganjello.blogspot.co.id/p/about.html'>About</a></li>
<li><a href='http://bloganjello.blogspot.co.id/p/blog-page.html'>Kontak</a></li>
<li><a href='http://bloganjello.blogspot.co.id/p/sitemap.html'>Sitemap</a></li>
<li><a href='http://bloganjello.blogspot.co.id/p/privacy-policy.html'>Privacy Policy</a></li>
<li><a class='dutt' href='#'>Patner</a>
<ul class='menux'>
<li><a href='LINK'>Submenu 1</a></li>
<li><a href='LINK'>Submenu 2</a></li>
<li><a href='LINK'>Submenu 3</a></li>
</ul>
</li>
<!-- Menu Link Sosial Media -->
<li class='sorting-01 facebook'><a href='LINK'><i class='fa fa-facebook fa-lg'/><span class='inv'/></a></li>
<li class='sorting-02 twitter'><a href='#'><i class='fa fa-twitter fa-lg'/><span class='inv'/></a></li>
<li class='sorting-03 googleplus'><a href=''><i class='fa fa-google-plus fa-lg'/><span class='inv'/></a></li>
<li class='sorting-06 linkedin'><a href='#'><i class='fa fa-linkedin fa-lg'/><span class='inv'/></a></li>
<li class='sorting-04 youtube'><a href='#'><i class='fa fa-youtube fa-lg'/><span class='inv'/></a></li>
</ul>
</nav>
<input type='checkbox'/>
<label/>
<ul>
<li><a href='LINK/' title='Home'>Home</a></li>
<li><a href='http://bloganjello.blogspot.co.id/p/about.html'>About</a></li>
<li><a href='http://bloganjello.blogspot.co.id/p/blog-page.html'>Kontak</a></li>
<li><a href='http://bloganjello.blogspot.co.id/p/sitemap.html'>Sitemap</a></li>
<li><a href='http://bloganjello.blogspot.co.id/p/privacy-policy.html'>Privacy Policy</a></li>
<li><a class='dutt' href='#'>Patner</a>
<ul class='menux'>
<li><a href='LINK'>Submenu 1</a></li>
<li><a href='LINK'>Submenu 2</a></li>
<li><a href='LINK'>Submenu 3</a></li>
</ul>
</li>
<!-- Menu Link Sosial Media -->
<li class='sorting-01 facebook'><a href='LINK'><i class='fa fa-facebook fa-lg'/><span class='inv'/></a></li>
<li class='sorting-02 twitter'><a href='#'><i class='fa fa-twitter fa-lg'/><span class='inv'/></a></li>
<li class='sorting-03 googleplus'><a href=''><i class='fa fa-google-plus fa-lg'/><span class='inv'/></a></li>
<li class='sorting-06 linkedin'><a href='#'><i class='fa fa-linkedin fa-lg'/><span class='inv'/></a></li>
<li class='sorting-04 youtube'><a href='#'><i class='fa fa-youtube fa-lg'/><span class='inv'/></a></li>
</ul>
</nav>
4. Setelah itu kalian bisa langsung save tamplate kalian.
Navigasi di atas telah saya lengkapi dengan menu sosial media, jadi apabila kalian tidak mengiginkan menu sosial media kalian bisa mengahpusnya sendiri.
Cara membuat navigasi di bawah header.
1. Pertama kalian pergi ke menu edit tamplate dan kalian cari kode css seperti berikut ]]></b:skin> atau </style> setelah itu kalian masukan kode di bawah tepat di atas kode di atas.
/* NAVIGATION MENU 2 */
#menu-wrapper{background:#374760;height:50px;width:100%;position:relative;}
#menu1{background:#374760;color:#fff;height:50px;}
#menu1 {border-bottom: 4px solid #00D3A3;}
#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:#00D3A3;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:#374760;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:#374760;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:#00D3A3;color:#fff;}
#menu1 .homers a:hover{background:#00A37E;color:#fff;}
#menu1 .homers1 a{box-shadow:inset 0 -4px 0 0 #00D3A3;color:#fff;}
#menu1 .homers1 a:hover{box-shadow:inset 0 -54px 0 0 #00D3A3;color:#fff;}
@media screen and (max-width:960px) {
#menu1{position:relative;background:#303F57;color:#fff;}
#menu1 ul{background:#374760;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:#00D3A3;color:#fff}
#menu1 li:hover{background:#00D3A3;color:#fff;}
#menu1 li:hover > a.ai,
#menu1 a.ai:hover{background:#00D3A3;color:#fff;}
#menu1 li:hover > a,
#menu1 li a:hover{background:#00D3A3;color:#fff;box-shadow:none;transition: .3s linear;}#menu1 ul.menus a{background:#374760;color:#fff;border-bottom:none;}
#menu1 ul.menus a:hover{background:#00D3A3;color:#fff;border-left:none;}
#menu1 ul.menus li{background:#374760;color:#fff;border-bottom:none;}
#menu1 ul.menus li:hover{background:#00D3A3;color:#fff;border-left:none;}
#menu1 ul.menus li a{background:#374760;color:#fff;border-bottom:none;}#menu1 ul.menus li a:hover{background:#00D3A3;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:#00D3A3;color:#fff;}
#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;}}
#menu-wrapper{background:#374760;height:50px;width:100%;position:relative;}
#menu1{background:#374760;color:#fff;height:50px;}
#menu1 {border-bottom: 4px solid #00D3A3;}
#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:#00D3A3;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:#374760;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:#374760;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:#00D3A3;color:#fff;}
#menu1 .homers a:hover{background:#00A37E;color:#fff;}
#menu1 .homers1 a{box-shadow:inset 0 -4px 0 0 #00D3A3;color:#fff;}
#menu1 .homers1 a:hover{box-shadow:inset 0 -54px 0 0 #00D3A3;color:#fff;}
@media screen and (max-width:960px) {
#menu1{position:relative;background:#303F57;color:#fff;}
#menu1 ul{background:#374760;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:#00D3A3;color:#fff}
#menu1 li:hover{background:#00D3A3;color:#fff;}
#menu1 li:hover > a.ai,
#menu1 a.ai:hover{background:#00D3A3;color:#fff;}
#menu1 li:hover > a,
#menu1 li a:hover{background:#00D3A3;color:#fff;box-shadow:none;transition: .3s linear;}#menu1 ul.menus a{background:#374760;color:#fff;border-bottom:none;}
#menu1 ul.menus a:hover{background:#00D3A3;color:#fff;border-left:none;}
#menu1 ul.menus li{background:#374760;color:#fff;border-bottom:none;}
#menu1 ul.menus li:hover{background:#00D3A3;color:#fff;border-left:none;}
#menu1 ul.menus li a{background:#374760;color:#fff;border-bottom:none;}#menu1 ul.menus li a:hover{background:#00D3A3;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:#00D3A3;color:#fff;}
#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;}}
2. Setelah kalian memasukan kode diatas kali ini kalian harus mencari kode seperti ini </header> atau tepatnya di bawah script penutup header blog. Lalu kalian letakan kode ini di bawahnya.
<div class='clear'/>
<nav id='menu1'>
<input type='checkbox'/>
<label><span>Anjello</span></label>
<ul>
<li class='homers'><a href='/'><i class='fa fa-home fa-2x fa-fw'/></a></li>
<li><a href='http://bloganjello.blogspot.co.id/search/label/Ngeblog'>Ngeblog</a></li>
<li><a href='http://bloganjello.blogspot.co.id/search/label/SEO'>SEO</a></li>
<li><a href='http://bloganjello.blogspot.co.id/search/label/Adsense'>Adsense</a></li>
<li><a href='LINK'>Tamplate</a></li>
<li><a class='dutt' href='#'>coding</a>
<ul class='menus'>
<li><a href='http://bloganjello.blogspot.co.id/search/label/Html'>Html</a></li>
<li><a href='LINK'>CSS</a></li>
<li><a href='http://bloganjello.blogspot.co.id/search/label/Widget'>Widget</a></li>
</ul>
</li>
</ul>
<a>MENU</a></nav>
<nav id='menu1'>
<input type='checkbox'/>
<label><span>Anjello</span></label>
<ul>
<li class='homers'><a href='/'><i class='fa fa-home fa-2x fa-fw'/></a></li>
<li><a href='http://bloganjello.blogspot.co.id/search/label/Ngeblog'>Ngeblog</a></li>
<li><a href='http://bloganjello.blogspot.co.id/search/label/SEO'>SEO</a></li>
<li><a href='http://bloganjello.blogspot.co.id/search/label/Adsense'>Adsense</a></li>
<li><a href='LINK'>Tamplate</a></li>
<li><a class='dutt' href='#'>coding</a>
<ul class='menus'>
<li><a href='http://bloganjello.blogspot.co.id/search/label/Html'>Html</a></li>
<li><a href='LINK'>CSS</a></li>
<li><a href='http://bloganjello.blogspot.co.id/search/label/Widget'>Widget</a></li>
</ul>
</li>
</ul>
<a>MENU</a></nav>
Setelah itu kalian tinggal save tamplate kalian.
Note navigasi di atas sudah responive jadi kalian tidak usah melakukan edit navigasi agar responisve.
Naah itulah cara membuat navigasi keren di blog seperti tamplate anjello. Apabila ada yang kalian tanyakan seputar artikel ini silahkan berkomentar dengan bijak.
Wih..keren gan (Y) bisa juga nih untuk blog saya yang acak adul :'v
ReplyDelete