Media informasi Entertainment, Tutorial Blogger, Blogger Template, Fakta Unik, Teknologi, And More

Search This Blog

Membuat Menu Float/Fixed Style Magazine

Menu Float/Fixed Style Magazine
Membuat Menu Float/Fixed Style Magazine - Menu Fixed ini saya buat untuk para Bloggers yang sangat suka pada Menu yang terlihat fresh dan Wow :P,  mungkin dari beberapa pengguna Blogger tidak mementingkan Menu ini, dengan alasan yang bermacam-macam, sesungguhnya, dengan Menu ini sobat telah membantu para pengunjung untuk menekan atau melihat Menu pada blog sobat, tanpa perlu men-Scroll ke atas lagi, karena menu ini Fixed (Sticky) yang artinya selalu menempel pada tampilan blog sobat, ok tidak perlu panjang lebar lagi, kita buat saja langsung Menu Fixed ini.

Fitur


  • Tentu saja Stylesh
  • Sedia Dropdown
  • Kolom Pencarian (Search Form)
  • Social media Menu
  • Facebook Like Fanpage

Cara Menerapkan Menu Float/Fixed


Sebelum menerapkan-nya ada baiknya jika kita melihat Demo nya terlebih dahulu :


Letakkan script dibawah ini tepat dibawah <body> jika tidak menemukan kode tersebut, biasanya kode telah di Desain pada template Download tertentu, tapi sobat fokuskan pencarian pada <body jika tetap tidak ditemukan kode tadi, carilah kode </head> biasanya kode <body> akan ditemukan tepat dibawah kode </head>.

<style>
#top-navigation {
background: #46A28D;
border-bottom: 1px solid #30917b;
height: 45px;
position: fixed;
top: 0;
width: 100%;
z-index: 9999;
box-shadow: 0 5px 8px -1px rgba(0, 0, 0, 0.2);
}

.top-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;
}

.top-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;
}

.top-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;
}

.top-menu-left li.small-logo a {
background: #46a28d;
display: block;
width: 56px;
height: 45px;
position: relative;
}

.top-menu-left li.small-logo a:hover {
background: #ffffff;
height: 46px;
}

.top-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;
}

.top-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;
}

.top-menu-left li.categories a {
padding: 16px 20px;
display: inline-block;
height: 13px;
position: relative;
}

.top-menu-left li.categories a:hover {
background: #ffffff;
color: #46a28d;
}

.top-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;
}

.top-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;
}

.top-menu-left li.hot-tags a {
padding: 16px 20px;
display: inline-block;
height: 13px;
position: relative;
}

.top-menu-left li.hot-tags a:hover {
background: #ffffff;
color: #46a28d;
}

.top-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;
}

.top-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;
}

.top-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;
}

.top-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;
}

.top-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;
}

.top-menu-right li.search a {
padding: 16px 20px;
display: inline-block;
height: 13px;
position: relative;
}

.top-menu-right li.search a:hover {
background: #ffffff;
color: #46a28d;
}

.top-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;
}

.top-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;
}

.top-menu-right li.twitter a {
padding: 16px 20px;
display: inline-block;
height: 13px;
position: relative;
}

.top-menu-right li.twitter a:hover {
background: #ffffff;
color: #46a28d;
}

.top-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;
}

.top-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;
}

.top-menu-right li.share a {
padding: 16px 20px;
display: inline-block;
height: 13px;
}

.top-menu-right li.share a:hover {
background: #ffffff;
color: #46a28d;
}
/* Drop Menu */

#top-navigation .top-menu-left li a {
cursor: pointer;
}

#top-navigation .top-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 1px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
-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;
}

#top-navigation .top-menu-left li:hover .dropdown-menu {
display: block;
height: auto;
}

#top-navigation .top-menu-left li .dropdown-menu.categories {
width: 226px;
}

#top-navigation .top-menu-left li .dropdown-menu.categories ul {
margin: 0 0 0 0;
list-style: none;
}

#top-navigation .top-menu-left li .dropdown-menu.categories li {
background: none;
width: 100%;
display: block;
margin: 0 0 0 0;
padding: 0 0 0 0;
}

#top-navigation .top-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;
}

#top-navigation .top-menu-left li .dropdown-menu.categories li a:hover {
color: #46a28d;
}

#top-navigation .top-menu-left li .dropdown-menu.hot-tags {
padding: 20px 15px 15px 20px;
width: 226px;
}

#top-navigation .top-menu-left li .dropdown-menu.hot-tags ul {
margin: 0 0 0 0;
list-style: none;
}

#top-navigation .top-menu-left li .dropdown-menu.hot-tags ul li {
background: none;
float: left;
margin: 0 5px 5px 0;
padding: 0 0 0 0;
}

#top-navigation .top-menu-left li .dropdown-menu.hot-tags ul li a {
background: #46a28d;
color: #ffffff;
padding: 3px 6px;
font-size: 13px;
line-height: 21px;
height: auto;
text-transform: none;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
}

#top-navigation .top-menu-left li .dropdown-menu.hot-tags ul li a:hover {
background: #222222;
}

#top-navigation .top-menu-right li a {
cursor: pointer;
}

#top-navigation .top-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 1px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
-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;
}

#top-navigation .top-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;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}

.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;
}

#top-navigation .top-menu-right li .dropdown-menu.social-icons {
width: 350px;
margin-left: -251px;
}

.ie #top-navigation .top-menu-right li .dropdown-menu.social-icons {
width: 350px;
margin-left: -250px;
}

.chrome #top-navigation .top-menu-right li .dropdown-menu.social-icons,
.opera #top-navigation .top-menu-right li .dropdown-menu.social-icons,
.safari #top-navigation .top-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;
}

#top-navigation .top-menu-right li .dropdown-menu.share-buttons {
width: 95px;
margin-left: -29px;
}

#top-navigation .top-menu-right li .dropdown-menu.share-buttons ul {
display: block;
margin: 0 0 0 0;
list-style: none;
overflow: hidden;
width: 100%;
height: auto;
}

#top-navigation .top-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;
}

#top-navigation .top-menu-right li .dropdown-menu.share-buttons ul li iframe {
position: absolute;
z-index: 99999;
display: block ! important;
cursor: default;
}

#top-navigation .top-menu-right li .dropdown-menu.share-buttons ul li a {
padding: 0 0 0 0;
height: auto;
}

#top-navigation .top-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='top-navigation'>
<div class='wrapper'>
<ul class='top-menu-left'>
<li class='small-logo'>
<a href='/'><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='#' title='Technology'>Technology</a></li>
<li><a href='#' title='Have Fun with computer'>Computer</a></li>
<li><a href='#' title='Have Fun with computer'>Graphics</a></li>
<li><a href='#' title='Have Fun with computer'>Mobile</a></li>
<li><a href='#' title='Have Fun with computer'>Social Surfing</a></li>
<li><a href='#' title='Have Fun with computer'>Blogging</a></li>
</ul>
</div>
</div>
</li>
<li class='categories'>
<a href='#'><span class='categories-icon'/>About Us</a>
</li>
<li class='hot-tags'>
<a href='#'><span class='tags-icon'/>Write For Us</a>
</li>
<li class='hot-tags'>
<a href='#'><span class='tags-icon'/>Get In Touch</a>
</li>
</ul>
<ul class='top-menu-right'>
<li class='search'>
<a><span class='search-icon'/>Search</a>
<div class='dropdown-menu search'>
<form action='http://www.discocheeze.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 Us</a>
<div class='dropdown-menu social-icons'>
<div class='social-icons-section'>
<h4>Follow Us</h4>
<ul>
<li><a href='http://feeds.feedburner.com/FajriAndaviar'><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/
FajriAndaviar'><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/
FajriAndaviar'><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/MuhamadNurfajrii'><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/105598237067179812797'><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/Your-Pinterest'><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>Facebook Fanpage</h4>
<iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/FajriOfficialFanpage&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=140836909399878' style='border:none; overflow:hidden; width:350px; height:245px;'/>
</div>
</div>
</li>
</ul>
</div>
</nav>

Setelah itu Simpan Template.

Perhatian: Ganti semua link seperti Facebook, Facebook Fanpage, Facebook AppId ( pada Like Facebook Fanpage ), Twitter, Feedburner, Google+, Pinterest, dan ganti www.discocheeze.blogspot.com dengan Url blog sobat, dan ganti tanda # (Pagar) serta kata-kata Menu tadi.

Selesai sudah tutorial saya saat ini, tolong Follow blog saya ini jika sobat suka dengan artikel-artikel blog ini, jika ada kekurangan bisa sobat berkomentar dikolom yang telah saya sediakan, untuk segala kekurangan saya ucapkan maaf, Wassalam.
Ditulis oleh: Pada :
Label : Tutorial Blogger

Post a Comment