Firman Webs

Cara Membuat Blog, template blogger, tips and trick, berita, games, software downloads, widgets blog, firman webs
Cara Membuat Floating Menu Navigation Pada Blog

Cara Membuat Floating Menu Navigation Pada Blog

Unknown Tuesday 13 August 2013 0 comments Print
Floating Menu Navigation BloggerCara 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(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsnER5SgsBjlh42tgInFW4BG7wsVFuDi5nCFzDT5SK7D1HB4rgrfbMhTwOScMiczR472A0i3kmn0RoLaJZFc5v6dSinEB5etciPZ0k9XexvbymTyZXKwpa3MWrTBVjS4Rxucbb1VjYE2w/s1600/divider.png&quot;) no-repeat right top;
float: left;
margin: 0 0 0 0;
height: 46px;
}
.floating-menu-left li {
background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsnER5SgsBjlh42tgInFW4BG7wsVFuDi5nCFzDT5SK7D1HB4rgrfbMhTwOScMiczR472A0i3kmn0RoLaJZFc5v6dSinEB5etciPZ0k9XexvbymTyZXKwpa3MWrTBVjS4Rxucbb1VjYE2w/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;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXwdzbjnWGelxxY6gGUPSEBwmGmMNb3432Q-lWYx_hRuSddET3qsq05DVjaoea9D8eeZ5XYEgtqUofwBk1stnpIueFIRbAAWdcba-52fz_RbB5TSmCR1pcLMmQsrryQzOhAkEmoaxxU-c/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;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXwdzbjnWGelxxY6gGUPSEBwmGmMNb3432Q-lWYx_hRuSddET3qsq05DVjaoea9D8eeZ5XYEgtqUofwBk1stnpIueFIRbAAWdcba-52fz_RbB5TSmCR1pcLMmQsrryQzOhAkEmoaxxU-c/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;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz2GNo-acbUHMoHbFWfq_a3gnloARkBuX4bX72oP6TfPpREj0z-iBubc8IuzRV8sSR4-ihiVgNMbvguQCkZNwotSDY-vYd2ORvicoF3fn07neHBJ0LTDLuWSP4JCjKzlL9WfxuKeiiWQU/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;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz2GNo-acbUHMoHbFWfq_a3gnloARkBuX4bX72oP6TfPpREj0z-iBubc8IuzRV8sSR4-ihiVgNMbvguQCkZNwotSDY-vYd2ORvicoF3fn07neHBJ0LTDLuWSP4JCjKzlL9WfxuKeiiWQU/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;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgA4RKdlyovY42nXKVdHqPSQdXoMC-5Dr14eQ7d-WooCYlRzOe3eLVP9GBDi6Q5L3V7Pz4nekTEgNwx6pPnuODgKGTsRpsAFx0Armncg8QpXCs7NIXNi4h97VF329G6u5WY_JMEakWhzc/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;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgA4RKdlyovY42nXKVdHqPSQdXoMC-5Dr14eQ7d-WooCYlRzOe3eLVP9GBDi6Q5L3V7Pz4nekTEgNwx6pPnuODgKGTsRpsAFx0Armncg8QpXCs7NIXNi4h97VF329G6u5WY_JMEakWhzc/s1600/tags-icon.png&quot;) no-repeat;
background-position: -13px 0;
}
.floating-menu-right {
background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsnER5SgsBjlh42tgInFW4BG7wsVFuDi5nCFzDT5SK7D1HB4rgrfbMhTwOScMiczR472A0i3kmn0RoLaJZFc5v6dSinEB5etciPZ0k9XexvbymTyZXKwpa3MWrTBVjS4Rxucbb1VjYE2w/s1600/divider.png&quot;) no-repeat right top;
float: right;
margin: 0 0 0 0;
}
.floating-menu-right li {
background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsnER5SgsBjlh42tgInFW4BG7wsVFuDi5nCFzDT5SK7D1HB4rgrfbMhTwOScMiczR472A0i3kmn0RoLaJZFc5v6dSinEB5etciPZ0k9XexvbymTyZXKwpa3MWrTBVjS4Rxucbb1VjYE2w/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;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6SIoOSBjCROUR_cxurtF3jxsgQHX34uIvM0fit-HMkkPgfVlY8K-y8nYblRuEMqK4PRzeTIxsjAnc47613RCfvS5VXDkkjQlXCGhmqvbwiCWTLA87PUTkHJWf-RSZ3KjkutfGBM9E0Ok/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;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6SIoOSBjCROUR_cxurtF3jxsgQHX34uIvM0fit-HMkkPgfVlY8K-y8nYblRuEMqK4PRzeTIxsjAnc47613RCfvS5VXDkkjQlXCGhmqvbwiCWTLA87PUTkHJWf-RSZ3KjkutfGBM9E0Ok/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;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8XPmyOI6eKRFqE4MrvOUn4V3lPTj-1WIM1NVKASFrI2uYmOcmseKHRyvXDaOFINQE0xLx6EDQLXUjQ_8Naeg3dkG2bUfTmMcco-sEz3cjDvEQvuKTE9ggHJk23RevwnEY2psEzW-hQ7I/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;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8XPmyOI6eKRFqE4MrvOUn4V3lPTj-1WIM1NVKASFrI2uYmOcmseKHRyvXDaOFINQE0xLx6EDQLXUjQ_8Naeg3dkG2bUfTmMcco-sEz3cjDvEQvuKTE9ggHJk23RevwnEY2psEzW-hQ7I/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;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT507F1uLpNNpGkSguQn36bZC491Gl1Sfj2hXjRnNRZ7EVTRw0Z0D1OgRdrrOOukcfZbx2Dmw5ONoI-0G5WRnX-w69SHqLH1Vi_bKXBT899Qd8sv35A2VzDVJx4IHJHr5N2XYFaiz7Hc8/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr8-6kzHzpn0vMDk9JEpdXd8mnq2uX308pDbB9KgAareLiNzYy6MYyy5g_44sVaByUKpnk2JTueeIOXVjus1T8j0edtPJAgisuWtTjHk6vPHdPjhdQRpalfKBKK712JLHFsCJ-NE79Xwk/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/AVvXsEjqPjUPj2oFXZDqnt9VsLFrovhOkJUtfyEkW0WdcBWQUo6GrU43vKPXx-84ce2d2DEsDt82uP9pWOw7jC6oUhJsdR4ZeKi0W-McTbzBU0OZyeGnYdTJ0p3UnjWeBrcW9iokKSfHqBe2tLs/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/AVvXsEjCRThyphenhyphen1_4uy6AXhbhM83Aep4vu1sAer6VOuzUt6iNQB-mji3AmbTPPL1GmKrpnJ9qw-JXLdXSDXuT-fNSc8NMAAt0ehuuSHrD8eqrM62XbHAqtES7zl2LNINrqSREGEFgpwgBKb08hH_g/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/AVvXsEicoEadcsmgMY52e_xlyN60HqlZUfaHggMvELh4YVs0NKb_bS0-9zU7-jWrUCv3-znxT82d5VByi8A1qPruuXJhiola1elxptQdGP6ASj1qxLo4sECyL2WBP5YpKPLetClMp0boHGC0pEI/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/AVvXsEg6ZCUWRXtXbitx-USi3c5P9_tMYGqz9ZVJ9KrH5Sd-A5XJQ3KDG8WiJMG6XHgd8quOu4Rr_OtPX9FlKqYXNUHs2oIEmLXewGV60276KvRC29v3NH1lQTI5pCAivXbn6baSX1f52TzhlQM/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/AVvXsEhZrqgINfrEC9iknB0XBMVnkSF7F3JDQyk1zb8Whx9TSbiI43ZyPanYrSpdegcTwYH7e1i0dZKceivKWqSLCiyNPBWhO-ka7XfgIrgPV2Msr5pjWZ9b9SYybyot8b9NxPY_DTH11b-pjt4/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=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.

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

  • 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