loading...

Cara Membuat Floating Menu Navigation Melayang Di Blog Keren

Cara Membuat Floating Menu Navigation Melayang Di Blog Keren - Sebelumnya saya selaku admin Anas Blogging Tips ingin mengucapkan "Selamat Hari Raya Idul Adha" Setelah kemarin merayakan hari kebesaran Islam, yakni Idul Adha sekarang saya akan memberikan sebuah tutorial yang mungkin bisa lebih mempercantik lagi keindahan blog sobat. Tutorial kali ini adalah Bagaimana Caranya Membuat Floating Menu Navigation Melayang di blog yang sangat keren menurut saya sendiri.
Floating Menu Navigation bisa juga disebut sebagai Fixed Menu Navigation. Artinya adalah menu navigasi/navbar yang berada diatas header dan bersifat menempel dan akan melayang diatas jika blog kita discroll.
Baca juga : Cara Membuat Judul Artikel Menjadi Mode Dropdown
Mungkin sebelum membuatnya sobat ingin terlebih dahulu membuat live demonya, silahkan klik tombol dibawah ini untuk melihat demo Floating Menu Navigation nya secara langsung.



Baiklah tanpa basa basi lagi silahkan ikuti tutorial nya berikut ini.

1. Login ke akun blogger sobat
2. Masuk ke menu HTML >> Edit HTML
3. Copy kode dibawah ini kemudian pastekan di bawah kode <body>
<style>
#floating-navigation {
background: darkgreen;
border-bottom: 1px solid #30917b;
height: 45px;
position: fixed;
top: 0;
width: 100%;
z-index: 9999;
box-shadow: 0 5px 8px -1px #00ff00;
}
.floating-menu-left {
background: url(&quot;http://1.bp.blogspot.com/-sJP-gsi1vVg/UVg5Fbao70I/AAAAAAAAAPI/iAGcVetKX40/s1600/divider.png&quot;) no-repeat right top;
float: left;
margin: 0 0 0 0;
height: 46px;
}
.floating-menu-left li {
background: url(&quot;http://1.bp.blogspot.com/-sJP-gsi1vVg/UVg5Fbao70I/AAAAAAAAAPI/iAGcVetKX40/s1600/divider.png&quot;) no-repeat left top;
float: left;
margin: 0 0 0 0;
padding: 0 0 0 2px;
}
.floating-menu-left li a {
font-family: &#39;Raleway&#39;, sans-serif;
font-weight: 600;
font-size: 13px;
line-height: 13px;
color: #FFFFFF;
text-decoration: none;
text-transform: uppercase;
}
.floating-menu-left li.small-logo a {
background: #52e052;
display: block;
width: 56px;
height: 45px;
position: relative;
}
.floating-menu-left li.small-logo a:hover {
background: #ffffff;
height: 46px;
}
.floating-menu-left li.small-logo a span.home-icon {
background: url(&quot;http://3.bp.blogspot.com/-tcrbdLbnmDI/UVg5GrI0HCI/AAAAAAAAAP0/PbumiF-RzAA/s1600/home-icon.png&quot;) no-repeat;
background-position: 0 0;
width: 16px;
height: 15px;
display: block;
position: absolute;
top: 14px;
left: 21px;
}
.floating-menu-left li.small-logo a:hover span.home-icon {
background: url(&quot;http://3.bp.blogspot.com/-tcrbdLbnmDI/UVg5GrI0HCI/AAAAAAAAAP0/PbumiF-RzAA/s1600/home-icon.png&quot;) no-repeat;
background-position: -16px 0;
width: 16px;
height: 15px;
display: block;
}
.floating-menu-left li.categories a {
padding: 16px 20px;
display: inline-block;
height: 13px;
position: relative;
}
.floating-menu-left li.categories a:hover {
background: #ffffff;
color: #000;
}
.floating-menu-left li.categories a span.categories-icon {
background: url(&quot;http://2.bp.blogspot.com/-ZMu_3gLR4Sw/UVg5FbDrXqI/AAAAAAAAAPE/-1FweVegnVs/s1600/categories-icon.png&quot;) no-repeat;
float: left;
width: 13px;
height: 12px;
display: block;
margin: 0 8px 0 0;
}
.floating-menu-left li.categories a:hover span.categories-icon {
background: url(&quot;http://2.bp.blogspot.com/-ZMu_3gLR4Sw/UVg5FbDrXqI/AAAAAAAAAPE/-1FweVegnVs/s1600/categories-icon.png&quot;) no-repeat;
background-position: -13px 0;
}
.floating-menu-left li.hot-tags a {
padding: 16px 20px;
display: inline-block;
height: 13px;
position: relative;
}
.floating-menu-left li.hot-tags a:hover {
background: #ffffff;
color: #000;
}
.floating-menu-left li.hot-tags a span.tags-icon {
background: url(&quot;http://4.bp.blogspot.com/-vSTK_OIKltU/UVg5HoRSrdI/AAAAAAAAAQg/hZIA_th2eGA/s1600/tags-icon.png&quot;) no-repeat;
float: left;
width: 13px;
height: 13px;
display: block;
margin: 0 8px 0 0;
}
.floating-menu-left li.hot-tags a:hover span.tags-icon {
background: url(&quot;http://4.bp.blogspot.com/-vSTK_OIKltU/UVg5HoRSrdI/AAAAAAAAAQg/hZIA_th2eGA/s1600/tags-icon.png&quot;) no-repeat;
background-position: -13px 0;
}
.floating-menu-right {
background: url(&quot;http://1.bp.blogspot.com/-sJP-gsi1vVg/UVg5Fbao70I/AAAAAAAAAPI/iAGcVetKX40/s1600/divider.png&quot;) no-repeat right top;
float: right;
margin: 0 0 0 0;
}
.floating-menu-right li {
background: url(&quot;http://1.bp.blogspot.com/-sJP-gsi1vVg/UVg5Fbao70I/AAAAAAAAAPI/iAGcVetKX40/s1600/divider.png&quot;) no-repeat left top;
float: left;
margin: 0 0 0 0;
padding: 0 0 0 2px;
}
.floating-menu-right li a {
font-family: &#39;Raleway&#39;, sans-serif;
font-weight: 600;
font-size: 13px;
line-height: 13px;
color: #FFFFFF;
text-decoration: none;
text-transform: uppercase;
}
.floating-menu-right li.search a {
padding: 16px 20px;
display: inline-block;
height: 13px;
position: relative;
}
.floating-menu-right li.search a:hover {
background: #ffffff;
color: #000;
}
.floating-menu-right li.search a span.search-icon {
background: url(&quot;http://1.bp.blogspot.com/-_glFiLOwyfk/UVg5Hsoc1cI/AAAAAAAAAQU/uIq6AZf9cLI/s1600/search-icon.png&quot;) no-repeat;
float: left;
width: 14px;
height: 15px;
display: block;
margin: -1px 8px 0 0;
}
.floating-menu-right li.search a:hover span.search-icon {
background: url(&quot;http://1.bp.blogspot.com/-_glFiLOwyfk/UVg5Hsoc1cI/AAAAAAAAAQU/uIq6AZf9cLI/s1600/search-icon.png&quot;) no-repeat;
background-position: -14px 0;
}
.floating-menu-right li.twitter a {
padding: 16px 20px;
display: inline-block;
height: 13px;
position: relative;
}
.floating-menu-right li.twitter a:hover {
background: #ffffff;
color: #000;
}
.floating-menu-right li.twitter a span.twitter-icon {
background: url(&quot;http://2.bp.blogspot.com/-bZ37kBlEglc/UVg5IFQSpjI/AAAAAAAAAQs/g1BWbePgmkE/s1600/twitter-icon.png&quot;) no-repeat;
float: left;
width: 16px;
height: 13px;
display: block;
margin: 0 8px 0 0;
}
.floating-menu-right li.twitter a:hover span.twitter-icon {
background: url(&quot;http://2.bp.blogspot.com/-bZ37kBlEglc/UVg5IFQSpjI/AAAAAAAAAQs/g1BWbePgmkE/s1600/twitter-icon.png&quot;) no-repeat;
background-position: -16px 0;
}
.floating-menu-right li.share a {
padding: 16px 20px;
display: inline-block;
height: 13px;
}
.floating-menu-right li.share a:hover {
background: #ffffff;
color: #000;
}
#floating-navigation .floating-menu-left li a {
cursor: pointer;
}
#floating-navigation .floating-menu-left li .dropdown-menu {
background: #ffffff;
padding: 20px;
display: none;
position: absolute;
top: 45px;
height: 0;
margin: 0 0 0 0;
list-style: none;
-webkit-box-shadow: 0px 1px 10px darkgreen;
-moz-box-shadow: 0px 1px 10px darkgreen;
box-shadow: 0px 1px 10px darkgreen;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
-webkit-animation: showmenu 0.2s;
-moz-animation: showmenu 0.2s;
-ms-animation: showmenu 0.2s;
-o-animation: showmenu 0.2s;
}
#floating-navigation .floating-menu-left li:hover .dropdown-menu {
display: block;
height: auto;
}
#floating-navigation .floating-menu-left li .dropdown-menu.categories {
width: 226px;
}
#floating-navigation .floating-menu-left li .dropdown-menu.categories ul {
margin: 0 0 0 0;
list-style: none;
}
#floating-navigation .floating-menu-left li .dropdown-menu.categories li {
background: none;
width: 100%;
display: block;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
#floating-navigation .floating-menu-left li .dropdown-menu.categories li a {
font-family: &#39;Raleway&#39;,sans-serif;
font-size: 22px;
font-weight: 500;
color: #666666;
display: block;
height: auto;
line-height: 28px;
padding: 5px 0;
text-align: left;
text-decoration: none;
text-transform: none;
}
#floating-navigation .floating-menu-left li .dropdown-menu.categories li a:hover {
color: #000;
background: darkgreen;
}
#floating-navigation .floating-menu-left li .dropdown-menu.hot-tags {
padding: 20px 15px 15px 20px;
width: 226px;
}
#floating-navigation .floating-menu-left li .dropdown-menu.hot-tags ul {
margin: 0 0 0 0;
list-style: none;
}
#floating-navigation .floating-menu-left li .dropdown-menu.hot-tags ul li {
background: none;
float: left;
margin: 0 5px 5px 0;
padding: 0 0 0 0;
}
#floating-navigation .floating-menu-left li .dropdown-menu.hot-tags ul li a {
background: #000;
color: #ffffff;
padding: 3px 6px;
font-size: 13px;
line-height: 21px;
height: auto;
text-transform: none;
}
#floating-navigation .floating-menu-left li .dropdown-menu.hot-tags ul li a:hover {
background: #222222;
}
#floating-navigation .floating-menu-right li a {
cursor: pointer;
}
#floating-navigation .floating-menu-right li .dropdown-menu {
background: #ffffff;
padding: 20px;
display: none;
position: absolute;
top: 45px;
height: 0;
margin: 0 0 0 0;
list-style: none;
-webkit-box-shadow: 0px 1px 10px darkgreen;
-moz-box-shadow: 0px 1px 10px darkgreen;
box-shadow: 0px 1px 10px darkgreen;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
-webkit-animation: showmenu 0.2s;
-moz-animation: showmenu 0.2s;
-ms-animation: showmenu 0.2s;
-o-animation: showmenu 0.2s;
}
#floating-navigation .floating-menu-right li:hover .dropdown-menu {
display: block;
height: auto;
}
.dropdown-menu.search {
width: 323px;
}
.dropdown-menu.search #searchform {
display: block;
overflow: hidden;
border: 1px solid #dfdfdf;
}
.dropdown-menu.search #searchform input[type=&quot;text&quot;] {
background: none;
border: none;
width: 270px;
}
.dropdown-menu.search #searchform input[type=&quot;submit&quot;] {
background: url(&quot;http://1.bp.blogspot.com/-jXkoCaHajbA/UVg5HAGjuOI/AAAAAAAAAP8/1iLcW3QH-cI/s1600/search-icon-form.png&quot;) no-repeat center center;
cursor: pointer;
width: 14px;
height: 15px;
margin: 8px 5px 0 0;
display: block;
float: left;
border: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.dropdown-menu.search #searchform input[type=&quot;submit&quot;]:hover {
filter:alpha(opacity=80);
-webkit-opacity: 0.8;
-moz-opacity: 0.8;
opacity: 0.8;
}
#floating-navigation .floating-menu-right li .dropdown-menu.social-icons {
width: 350px;
margin-left: -251px;
}
.ie #floating-navigation .floating-menu-right li .dropdown-menu.social-icons {
width: 350px;
margin-left: -250px;
}
.chrome #floating-navigation .floating-menu-right li .dropdown-menu.social-icons,
.opera #floating-navigation .floating-menu-right li .dropdown-menu.social-icons,
.safari #floating-navigation .floating-menu-right li .dropdown-menu.social-icons {
width: 350px;
margin-left: -248px;
}
.dropdown-menu.social-icons h4 {
font-family: &#39;Raleway&#39;, sans-serif;
font-weight: 500;
font-size: 16px;
line-height: 22px;
color: #666666;    
text-transform: uppercase;
margin: 0 0 10px 0;
}
.dropdown-menu.social-icons .social-icons-section {
width: 100%;
border-bottom: 1px dotted #dfdfdf;
margin: 0 0 20px 0;    
padding: 0 0 20px 0;
diplay: block;
overflow: hidden;
}
.dropdown-menu.social-icons .social-icons-section ul {
display: block;
margin: 0 0 0 0;
list-style: none;
overflow: hidden;    
z-index: 99999;
}
.dropdown-menu.social-icons .social-icons-section ul li {
background: none;
float: left;
margin: 0 20px 0 0;
padding: 0 0 0 0;
}
.dropdown-menu.social-icons .social-icons-section ul li:last-child {
margin: 0 0 0 0;
}
.dropdown-menu.social-icons .social-icons-section ul li a {
display: block;
width: 40px;
height: 40px;
padding: 0 0 0 0;
}
.dropdown-menu.social-icons .facebook-box-section {
width: 100%;
display: block;
overflow: hidden;
z-index: 99999;
}
#floating-navigation .floating-menu-right li .dropdown-menu.share-buttons {
width: 95px;
margin-left: -29px;
}
#floating-navigation .floating-menu-right li .dropdown-menu.share-buttons ul {
display: block;
margin: 0 0 0 0;
list-style: none;
overflow: hidden;
width: 100%;
height: auto;
}
#floating-navigation .floating-menu-right li .dropdown-menu.share-buttons ul li {
background: none;
padding: 0 0 0 0;
width: 100%;
z-index: 99999;
display: block;
zoom: 1;
float: left;
overflow: hidden;
height: 20px;
position: relative;
}
#floating-navigation .floating-menu-right li .dropdown-menu.share-buttons ul li iframe {
position: absolute;    
z-index: 99999;
display: block ! important;
cursor: default;
}
#floating-navigation .floating-menu-right li .dropdown-menu.share-buttons ul li a {
padding: 0 0 0 0;
height: auto;
}
#floating-navigation .floating-menu-right li .dropdown-menu.share-buttons ul li a:hover {
opacity: 0.8;
-webkit-opacity: 0.8;
-moz-opacity: 0.8;
opacity: 0.8;
}
</style>
<nav id='floating-navigation'>
<div class='wrapper'>
<ul class='floating-menu-left'>
<li class='small-logo'>
<a href='http://mas-andes.blogspot.com'><span class='home-icon'/></a></li>
<li class='categories'>
<a><span class='categories-icon'/>Categories</a>
<div class='dropdown-menu categories'>
<div class='categories-menu-section'>
<ul class='categories-menu'>
<li><a href='http://mas-andes.blogspot.com' title='Technology'>Technology</a></li>
<li><a href='http://mas-andes.blogspot.com' title='computer'>Computer</a></li>
<li><a href='http://mas-andes.blogspot.com' title='Graphics'>Graphics</a></li>
<li><a href='http://mas-andes.blogspot.com' title='Mobile'>Mobile</a></li>
<li><a href='http://mas-andes.blogspot.com' title='Social Surfing'>Social Surfing</a></li>
<li><a href='http://mas-andes.blogspot.com' title='Blogging'>Blogging</a></li>
</ul>
</div>
</div>
</li>
<li class='categories'>
<a href='http://mas-andes.blogspot.com'><span class='categories-icon'/>About Me</a>
</li>        
<li class='hot-tags'>
<a href='http://mas-andes.blogspot.com'><span class='tags-icon'/>Disclaimer</a>
</li>
<li class='hot-tags'>
<a href='http://mas-andes.blogspot.com'><span class='tags-icon'/>Sitemap</a>
</li>
</ul>
<ul class='floating-menu-right'>
<li class='search'>
<a><span class='search-icon'/>Search</a>
<div class='dropdown-menu search'>
<form action='http://mas-andes.blogspot.com' id='searchform' method='get' role='search'>
<input id='s' name='s' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' type='text' value='Type keyword and hit enter...'/>
<input id='searchsubmit' type='submit' value=''/>
</form>
</div>
</li>
<li class='twitter'>
<a><span class='twitter-icon'/>Follow Me</a>
<div class='dropdown-menu social-icons'>
<div class='social-icons-section'>
<h4>Follow On:</h4>
<ul>
<li><a href='http://feeds.feedburner.com/masandes'><img alt='rss' height='40' src='http://4.bp.blogspot.com/-PP86tZWlKsU/UVg5GnmUWNI/AAAAAAAAAQA/RD_Zuu6Jssw/s1600/rss_icon@2x.png' width='40'/></a></li>
<li><a href='http://feeds.feedburner.com/AnasBloggingTips'><img alt='rss' height='40' src='http://1.bp.blogspot.com/-Qopknuen_xc/UVg5FS-zu7I/AAAAAAAAAPM/A7s4b_K1ago/s1600/email_icon@2x.png' width='40'/></a></li>
<li><a href='http://twitter.com/AnasTipsCom'><img alt='rss' height='40' src='http://4.bp.blogspot.com/-IX-iDTIi7e8/UVg5IPLpFdI/AAAAAAAAAQw/r3Prw78JkYA/s1600/twitter_icon@2x.png' width='40'/></a></li>
<li><a href='https://www.facebook.com/AnasBloggingTips'><img alt='rss' height='40' src='http://3.bp.blogspot.com/-bHBTZ2Squ98/UVg5F3s-5ZI/AAAAAAAAAPk/oa0id4qS_4M/s1600/facebook_icon@2x.png' width='40'/></a></li>
<li><a href='https://plus.google.com/xxx'><img alt='rss' height='40' src='http://2.bp.blogspot.com/-3dugcG7fd6w/UVg5F9v_1kI/AAAAAAAAAPc/EYNfcFgV8vE/s1600/google_icon@2x.png' width='40'/></a></li>
<li><a href='https://www.pinterest.com/xxx><img alt='rss' height='40' src='http://2.bp.blogspot.com/--x1xxjtys0E/UVg5Ggy_7yI/AAAAAAAAAP4/8CPvT2JtHzI/s1600/pinterest_icon@2x.png' width='40'/></a></li>
</ul>
</div>
<div class='facebook-box-section'>
<h4>Get Update Via Facebook</h4>
<iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/andestyle&amp;width=350&amp;height=245&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;border_color=%23ffffff&amp;header=false&amp;appId=xxx' style='border:none; overflow:hidden; width:350px; height:245px;'/>
</div>
</div>
</li>
</ul>
</div>
</nav>

4. Ganti terlebih dahulu kode yang berwarna merah dengan kode ID sobat masing-masing. Warna default dari Floating Menu Navigation ini adalah berwarna hijau sesuai demo, sobat bisa menggantinya dengan cara mengganti kode warnanya.
5. Selanjutnya, jika sudah diatur semua sesuai selera, silahkan klik tombol Simpan Template.

Baca juga : Cara Menghapus Sidebar Blog
Nah itulah bagaimana Cara Membuat Floating Menu Navigation atau Fixed Menu diatas header dengan mudah dan keren sekali.

Dan silahkan follow Anas Blogging Tips untuk terus mengetahui Panduan, Trik, Dan Tips Lengkap Lain nya Tentang Blogging serta nantikan artikel berikutnya ya.

Terima kasih sobat telah membaca artikel "Cara Membuat Floating Menu Navigation Melayang di Blog Keren". Sobat tidak diperbolehkan untuk menyalin (copy-paste) segala dan keseluruhan konten 
Anas Blogging Tips

0 Response to "Cara Membuat Floating Menu Navigation Melayang Di Blog Keren"

Post a Comment