Cara Membuat Floating Menu Navigation Pada Blog

Cara Membuat Floating Menu Navigation Pada Blog – dari 9 style mega menu sekarang kita beralih lagi dan masih pada tema yang sama mengenai menu navigasi blogger namun dengan gaya yang berbeda. Mengenai floating menu tentu sudah tidak asing lagi di kalangan blogger. Sebelum melangkah lebih jauh ke tutorial saya akan sedikit menjelaskan terlebih dahulu mengenai floating menu navigation pada blog. Floating menu navigation merupakan sebuah navigasi menu yang terpasang didalam blog dan menempati posisi di bagian atas/fixed atau bisa dikatakan letak posisi floating menu adalah menggantikan navbar blogger yang terdapat diatas header blog. Cara memasang floating menu juga cukup mudah dan tidak terlalu rumit, bukan tidak mungkin jika floating menu navigation ini juga akan mempercantik desain blog. Langkah-langkah cara penerapannya kedalam blog pun sangat sederhana, berikut adalah tutorial mengenai Cara Membuat Floating Menu Navigation Pada Blog.

Demo

1. Login ke akun blogger terlebih dahulu.
2. Kemudian masuk ke Template dan Edit HTML.
3. Copy kode berikut ini lalu paste tepat dibawah 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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvwlWOYeETwseP9oTyRUu8N3XOYXm4FiYSAguIZzVUAEF4cWsqsyWdi6oZJX33TiJ8fUiahyphenhyphen3VDay9b-vcFaJ6XxwRhrqPJNVev_8XL-XvMia_N_z9FMOxarIsMk12w8k2q6XSIgm8x1Y/s1600/divider.png") no-repeat right top;
float: left;
margin: 0 0 0 0;
height: 46px;
}
.floating-menu-left li {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvwlWOYeETwseP9oTyRUu8N3XOYXm4FiYSAguIZzVUAEF4cWsqsyWdi6oZJX33TiJ8fUiahyphenhyphen3VDay9b-vcFaJ6XxwRhrqPJNVev_8XL-XvMia_N_z9FMOxarIsMk12w8k2q6XSIgm8x1Y/s1600/divider.png") no-repeat left top;
float: left;
margin: 0 0 0 0;
padding: 0 0 0 2px;
}
.floating-menu-left li a {
font-family: 'Raleway', 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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYOzKrGgZM8Zl8r3XMCa1ZQ6XDFN6jqxnS7ASrpmwE8VkFwcCFK4z1KNTRZxhTpZ5RS-BWeZbtCZ0MN6u4r2NFnwZ-J6rI50QOK54-x2vtN71lN4DMv56eIhU9vN0ISpKijdDIvF_Na5E/s1600/home-icon.png") 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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYOzKrGgZM8Zl8r3XMCa1ZQ6XDFN6jqxnS7ASrpmwE8VkFwcCFK4z1KNTRZxhTpZ5RS-BWeZbtCZ0MN6u4r2NFnwZ-J6rI50QOK54-x2vtN71lN4DMv56eIhU9vN0ISpKijdDIvF_Na5E/s1600/home-icon.png") 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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGmNlcXs75VOggYllR1RKNexg43lDV-sC5Lf2hx5EXCH_IKafLz0nHZ0S_OscyIhq-hOhLHtsUrhKymPr014AfEXEkJ9em7LLtCWAoGFJhaa9SDX0we3qgBvC6EPtX4bPlutcrM_tdSi0/s1600/categories-icon.png") 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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGmNlcXs75VOggYllR1RKNexg43lDV-sC5Lf2hx5EXCH_IKafLz0nHZ0S_OscyIhq-hOhLHtsUrhKymPr014AfEXEkJ9em7LLtCWAoGFJhaa9SDX0we3qgBvC6EPtX4bPlutcrM_tdSi0/s1600/categories-icon.png") 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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0SRxGFWYdTnBkOBMJ4laKwiiuUxjNTuN2b38C0QliTf2slWaKv8pOLa54w87WqCthNNTWsjuC_hHYz__1JfDNE7_lsElVWc4BCGathPdBBMz-c-FIR21CfdaYpxYEe_ZQPy9qDneMGZI/s1600/tags-icon.png") 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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0SRxGFWYdTnBkOBMJ4laKwiiuUxjNTuN2b38C0QliTf2slWaKv8pOLa54w87WqCthNNTWsjuC_hHYz__1JfDNE7_lsElVWc4BCGathPdBBMz-c-FIR21CfdaYpxYEe_ZQPy9qDneMGZI/s1600/tags-icon.png") no-repeat;
background-position: -13px 0;
}
.floating-menu-right {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvwlWOYeETwseP9oTyRUu8N3XOYXm4FiYSAguIZzVUAEF4cWsqsyWdi6oZJX33TiJ8fUiahyphenhyphen3VDay9b-vcFaJ6XxwRhrqPJNVev_8XL-XvMia_N_z9FMOxarIsMk12w8k2q6XSIgm8x1Y/s1600/divider.png") no-repeat right top;
float: right;
margin: 0 0 0 0;
}
.floating-menu-right li {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvwlWOYeETwseP9oTyRUu8N3XOYXm4FiYSAguIZzVUAEF4cWsqsyWdi6oZJX33TiJ8fUiahyphenhyphen3VDay9b-vcFaJ6XxwRhrqPJNVev_8XL-XvMia_N_z9FMOxarIsMk12w8k2q6XSIgm8x1Y/s1600/divider.png") no-repeat left top;
float: left;
margin: 0 0 0 0;
padding: 0 0 0 2px;
}
.floating-menu-right li a {
font-family: 'Raleway', 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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho7jk8Ge-RgwaG7H74O4Wc5FZhSTZ-rOOfnjUc7f6CwTUFnr6b_u5rPA4WQCwSn6pJZCDDLSP6Eqpmvp63ewtnm9z52-GU73DfLu7MTj9EuRCScyJy84u8HnfL24Ws13aa2RzBJgHgKzs/s1600/search-icon.png") 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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho7jk8Ge-RgwaG7H74O4Wc5FZhSTZ-rOOfnjUc7f6CwTUFnr6b_u5rPA4WQCwSn6pJZCDDLSP6Eqpmvp63ewtnm9z52-GU73DfLu7MTj9EuRCScyJy84u8HnfL24Ws13aa2RzBJgHgKzs/s1600/search-icon.png") 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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwaBWg0OUl3Ez5fkNCP-HDpZc7_pheB-WEvynGz5vuRQCIKSgK1HhlAvMevIOjaPUNTjdy-6Y0VCdaApxsAjpYpvAlbmYC27KGbJEwxj8FZ1ckiSV3ZGjhDbF9ZwQR5Q7QAQGFHso1WZI/s1600/twitter-icon.png") 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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwaBWg0OUl3Ez5fkNCP-HDpZc7_pheB-WEvynGz5vuRQCIKSgK1HhlAvMevIOjaPUNTjdy-6Y0VCdaApxsAjpYpvAlbmYC27KGbJEwxj8FZ1ckiSV3ZGjhDbF9ZwQR5Q7QAQGFHso1WZI/s1600/twitter-icon.png") 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: 'Raleway',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="text"] {
background: none;
border: none;
width: 270px;
}
.dropdown-menu.search #searchform input[type="submit"] {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnWq8AAvUzb3XcEvnMlDsbyWNSZkFxrjZYyR_K64tY1lzZwuEEy_chUrFMEJRweITfFCVWfmYslAk2rONuNXfKnVRnYpRxJpAulMJNYZQxoqYUa6wdMNhc67eZan577dkXDePDMkpSE3o/s1600/search-icon-form.png") 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="submit"]: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: 'Raleway', 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=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value='';' 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioHSWTf9xr2QfHbJhTmr-T9nSb0vYpAIFBCxA9wXy5L51mF3-GH0L5Io5IusBXjsjg6dnxQpWiQEG7A0EgOpH0MfKfyEgeJlk1FhTTiDdbg-gW9ejclLVcZ8JWd9X1WOZn9Nf3dhK2qGs/s1600/rss_icon@2x.png' width='40'/></a></li>
<li><a href='http://feeds.feedburner.com/masandes'><img alt='rss' height='40' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIZ9N4FFChIT2UtnQORFbZVMesEGktnVJx1gseX0JFWgw7Gy51XD6rjxWWjqBlkaYRI3t95RMnuJe4cebU_o6-1vgtdQuE9F4mzjKSIqzUQx6230pxY6WW3YKH7l6LGxYM91eV98jMZIM/s1600/email_icon@2x.png' width='40'/></a></li>
<li><a href='http://twitter.com/rizkyandes'><img alt='rss' height='40' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2e_ykC67QEx10P55OFuBA7qZDIFNfcDFKoQ_NxECMRony1tDuEUCotr0lkhdSjw7BHHIqw937KLoe_KHv7Mww_ajrQ6CcBn5DnUxkYMlR41xu6CdOZP2BR-cQ6MNn6Y_JUSTMhHtGQcI/s1600/twitter_icon@2x.png' width='40'/></a></li>
<li><a href='https://www.facebook.com/andestyle'><img alt='rss' height='40' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNlM4pivaDr3UjKza3p8EvyCTIosWSSwZJS1hoth5whs6xL-L8y1pP7Pp2Elq5m1D7UCW2ntRQAduihWqvOT7EducJwncPweVJ0q3KyHW5NkfqvpRVZfLh3NapiBTJQNRDIfFI20T3lT8/s1600/facebook_icon@2x.png' width='40'/></a></li>
<li><a href='https://plus.google.com/104093787575230359634'><img alt='rss' height='40' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPDgRTpemDzKnAHHrHASDy1l5tC6t3CWyrIhdlYki5vdhI0zJjKCOWgp6xljDo-MOiLPzWYpLixq_c6pOuFM7WvXxSGaqPjf-MhpOQZKvH4LxB5b1xZ5FXsPAHpScxf14dkn2dmjovY5c/s1600/google_icon@2x.png' width='40'/></a></li>
<li><a href='https://www.pinterest.com/andesrizky'><img alt='rss' height='40' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLw6jgdvpM5YDNsDBdzhqJy-erEtyz4KAPXAjiJptnj4Ld3aI6mISTbZFiYKuRVGsssoEVS1Bwqpz2KPpiWAptEG3y9HsJBJKUITmd36aiRjRlOX5M5_zcsF6dXE9FC6BJR97KJIHdowY/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&width=350&height=245&show_faces=true&colorscheme=light&stream=false&border_color=%23ffffff&header=false&appId=289293011171736' style='border:none; overflow:hidden; width:350px; height:245px;'/>
</div>
</div>
</li>
</ul>
</div>
</nav>

Keterangan:
Ganti 'http://mas-andes.blogspot.com' dengan link pada blog anda, dan anchor text bisa di sesuaikan.
Ganti tulisan yang berwarna merah dengan ID masing-masing.

4. Langkah terakhir Simpan Template dan bisa lihat hasilnya.

Sampai sini selesai sudah untuk Cara Membuat Floating Menu Navigation Pada Blog. Jika warna background maupun font kurang sesuai dengan warna template blog yang digunakan, silahkan bisa di rubah dengan memodifikasi warna sendiri yang kiranya sesuai dan bisa serasi dengan warna template yang digunakan.

50 Response to "Cara Membuat Floating Menu Navigation Pada Blog"

Anonymous

8/14/13, 12:26 AM

Wah udah ada yang baru lagi nih artikel Cara Membuat Floating Menu Navigation Pada Blog, bagus dan bermanfaat banget mas :)

Balas

Yanuar Catur

8/14/13, 1:01 AM

Floating menu navigation ini yg bagaimana to gan?

8/14/13, 6:18 AM

Demonya ada sob ??

kyknya blog saya udh adaan tuh.hehe

Oh iya req cara memasang iklan dgn css yah?he

Unknown

8/14/13, 10:37 AM

yang mana sih.. :D
.
yang menunya saat mouse di tarik kebawah ikut kebawah ikut namanya apaan.

mohon maap lahir batin mas andes ^O^ .liburannya udah selesai ahaha.

8/14/13, 10:47 AM

Makasih Sharenya Mas Andes, blog saya mmg sudah ada, tapi rada2 aneh kelihatannya.. kapan2 mau coba trik yang ini...

Sopala Multapa

8/14/13, 12:12 PM

tap mantap mas kereeennnn .........
demonya mana ya hehe

Mas Andes

8/14/13, 2:53 PM

udah saya jelasin diatas mas pada gambar juga ada :)

8/14/13, 2:59 PM

demonya tidak saya sertakan mas, hanya gambar diatas saja.
itu udah dilengkapi drop down.
ini yang udah ada mas:
http://mas-andes.blogspot.com/2013/06/cara-membuat-iklan-seperti-google.html
yang pake css ntar tutorial selanjutnya

8/14/13, 3:02 PM

tos dulu dong :)

8/14/13, 3:06 PM

iya.. yang letaknya seperti translate google di blog kamu.
mohon maap lahir batin juga miz tia. oleh2nya lempar kesini..

8/14/13, 3:09 PM

silahkan bang :)

8/14/13, 3:10 PM

demonya {display: none;} kang rul.
hehe saya pake gambar aja biar gak ribet bikin demo

8/14/13, 4:06 PM

mantap floating menunya, bisa diterapkan di blog yang lainnya.

8/14/13, 4:20 PM

Ini biasa yang dipakai pada template seperti mas sugeng ya mas.

Mang Lembu

8/14/13, 5:23 PM

keren nih kalau menu ini ditaro untuk blog kampungan milik sayah yeuh....cuman bikin berat ngga yah lodingnyah?

8/14/13, 6:22 PM

haha jadi kyk gitu gan? klo loadingnya lama ga gan? takutnya bikin berat ke blognya hehe

8/14/13, 6:37 PM

untuk tau bikin berat apa tidaknya ya sebelum dan sesudah pasang di tes dulu loadingnya bang :) http://developers.google.com/speed/pagespeed/insights/

8/14/13, 6:43 PM

gak tau mas, belom pernah liat templatenya.

8/14/13, 6:45 PM

tes sendiri aja ya bang loadingnya :)
http://developers.google.com/speed/pagespeed/insights/

Didah Sahidah

8/14/13, 7:59 PM

pengen pasang tapi berat gak yah???

8/14/13, 8:39 PM

Siip daah mas float menu navigasinya...wah agak telat saya

8/14/13, 9:52 PM

Wussst rame nikh sobat Mas Andes sangadt antosias di artkel ini
Salam kenal buat sobat blogging semua..semoga anda baik2 selalu yah Sob..?
Hatur salam kenal dari Karrysta - http://karristaent.blogspot.com

8/14/13, 11:05 PM

menu floating gak tau mas.. kayaknya bagus deh.??

Fuad

8/14/13, 11:52 PM

kunjungan malam sobat...
minal aidzin wal faidzin sobat..

http://kumpulantipshebat.blogspot.com/

8/15/13, 4:33 AM

kenapa hak pk demo gan ? kan kasihan bagi org pemula misalnya kaga tahu apa apa...

wah itu mirip iklan baris google y? saya coba y gan semoga berhasil !!

8/15/13, 6:22 AM

tadinya saya juga berpikiran begitu mas, namun sengaja tidak saya sertakan.. soalnya saya kira gambar diatas sudah bisa mewakili demonya. namun apabila ingin melihat demonya bisa kunjungi link ini:

http://demosliderblog.blogspot.com

pada menu Follow Me disitu terdapat keterangan Get Update Via Facebook, disitu letak fanspage facebook

8/15/13, 6:23 AM

seperti ini mbak demonya..
http://demosliderblog.blogspot.com/

8/15/13, 6:24 AM

minal aidzin wal faidzin juga mas, terimakasih kunjungannya

Staff Administrator

8/15/13, 9:17 AM

Menu ini bisa support buat semua tempe..eh template
Apa cuma buat template bawaan blogger mas :)

Anisayu Nastutik

8/15/13, 1:33 PM

nyoba pasang ah biar aku tahu rasanya
tapi kalo ga bisa datang lagi bertanya ya

8/15/13, 3:31 PM

kalo menu dan judul blog /headernya di blog saya di bikin floating gimana caranya kakakak :D .. pengen pake floating.
#salaman lagi ya .

8/15/13, 4:37 PM

Berkunjung sore mas, smbil liat 2 pemandangan kota johor di sore hari

8/15/13, 5:01 PM

komentar apa yah biar di bales sm miminnya :P

8/15/13, 6:43 PM

hehe sekarang muncul demonya mas .. dan eng ing eng kerennnn

8/15/13, 9:01 PM

buat semua template mas, yang penting template blog.
bukan template ms.word atau coreldraw :D

8/15/13, 9:03 PM

silahkan mbak caranya mudah kok :)

8/15/13, 9:06 PM

kok salaman doang.. sun-nya mana.. :D ngahaha
mesti deh kalo tanya selalu ada2 aja, msak header mau di bikin floating, ntar malah lucu dong :)

8/15/13, 9:09 PM

saya barusan malah kena sial mas, abis ujan jalan2 kecepretan mobil lewat :D nyengirrrr dehh..

8/15/13, 9:15 PM

hehemm.. jangan sambil gigit jari gitu kaliii mbak.. :)

8/15/13, 9:16 PM

gapapa mas telat dikit asal jangan sampe kebobolan aja

8/16/13, 2:04 AM

wah kalau dilempar sayang mas bisa ancur hehe...

8/16/13, 2:06 AM

ehem... saya nggak ikut campur ah hehe...

8/16/13, 2:07 AM

nggak apa-apa mas itu tandanya bakal dapet rejeki hehe...

Andimensi

8/18/13, 4:33 PM

sip keren mas.. pengen pasang tpi yang cuma seacrh box nya aja bsa gag ya? hehe..

http://anditiamath.blogspot.com/
mampir y mas,, hehe.. msih byk blajar..

8/24/13, 6:31 PM

ane mau pasang ah, makasih ya kang

10/28/13, 12:41 PM

keren...keren.....keren...mantap deh :)

12/18/13, 10:57 PM

keren nich
bisa diterapkan nich
thanks mas da berbagi

1/2/14, 4:30 PM

kalo mau dibikin transparan bisa ga gan??

12/14/14, 8:38 PM

bermanfaat sekali mas andes.... semoga jadi amal jariah buat mas andes,,,,, amin

Randy

3/6/15, 1:15 PM

terima kasih gan.... mau aku coba di template blog ku... karena aku masih pemula...
semoga bermanfaat...

kunjungi balik ya mas.. blog saya yang baru...

http://r-oren.blogspot.com

Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
Apabila artikel yang berjudul "Cara Membuat Floating Menu Navigation Pada Blog" ini bermanfaat, share ke jejaring sosial.

Konversi Kode

Blog Mas Andes

Cara Membuat Floating Menu Navigation Pada Blog

Berlangganan artikel via email

50 Response to "Cara Membuat Floating Menu Navigation Pada Blog"

Cara Membuat Floating Menu Navigation Pada Blog

Next

Newer Post

Previous

Older Post

Berlangganan artikel via email

50 Response to "Cara Membuat Floating Menu Navigation Pada Blog"