Cara Membuat Floating Menu Navigation Pada Blog – 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.
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>
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.
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>Keterangan:
#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/AVvXsEhfhAL1kdQq02ZebNyRyRlmD9afgi8Zaf0mePkOpGOFOkbU2l-Kfkr_Q6pSmjMWOzS_W9jEHkNUUFHxwQxzN0nYBslgg-bbCcAcx7YIq6GMGL7Qp5XBgWL9uVN1sO4kD5gUZvKmnYZ5wTk/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/AVvXsEhfhAL1kdQq02ZebNyRyRlmD9afgi8Zaf0mePkOpGOFOkbU2l-Kfkr_Q6pSmjMWOzS_W9jEHkNUUFHxwQxzN0nYBslgg-bbCcAcx7YIq6GMGL7Qp5XBgWL9uVN1sO4kD5gUZvKmnYZ5wTk/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/AVvXsEhyfNeoYhH21a4bMDs5O9wQIMdBR8sLxiqZWx-2QUgsq3W6BhRPhjrSRzBHCH-vzRIH4uUjglddmEQ4fh-C00VvkQF4KncHsCtuwZfQH47rSJjMsKmFBo5oi86HFo9OtsbJdtq-A_dbfGM/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/AVvXsEhyfNeoYhH21a4bMDs5O9wQIMdBR8sLxiqZWx-2QUgsq3W6BhRPhjrSRzBHCH-vzRIH4uUjglddmEQ4fh-C00VvkQF4KncHsCtuwZfQH47rSJjMsKmFBo5oi86HFo9OtsbJdtq-A_dbfGM/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/AVvXsEhgZT4bzp_fQIn7NUxL1bocApx5tPG9SyUB10bOjL3BVEnKa1ZRQvliqjJ-85-6OH3Yyfdzp2WxVIXU1exKiikW-DTYrTzQTy_wLVnYCH4-9ZDTTx1-YGmy4yIqRGWsNrTEFfcsjexl9O4/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/AVvXsEhgZT4bzp_fQIn7NUxL1bocApx5tPG9SyUB10bOjL3BVEnKa1ZRQvliqjJ-85-6OH3Yyfdzp2WxVIXU1exKiikW-DTYrTzQTy_wLVnYCH4-9ZDTTx1-YGmy4yIqRGWsNrTEFfcsjexl9O4/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/AVvXsEjkjQdYmbvbDccSupNJpkPK2GSZT5kgDyRS_McTVwk_bHtLb7ZS5nyuJahQ7HglCYfp0rzNJHmA9sqnp1Ra7YfRX2_dSc2aN_eYBqpAApG9jKjfPqgLLia4eIAOmkHeNERXUG0s9rouUXs/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/AVvXsEjkjQdYmbvbDccSupNJpkPK2GSZT5kgDyRS_McTVwk_bHtLb7ZS5nyuJahQ7HglCYfp0rzNJHmA9sqnp1Ra7YfRX2_dSc2aN_eYBqpAApG9jKjfPqgLLia4eIAOmkHeNERXUG0s9rouUXs/s1600/tags-icon.png") no-repeat;
background-position: -13px 0;
}
.floating-menu-right {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfhAL1kdQq02ZebNyRyRlmD9afgi8Zaf0mePkOpGOFOkbU2l-Kfkr_Q6pSmjMWOzS_W9jEHkNUUFHxwQxzN0nYBslgg-bbCcAcx7YIq6GMGL7Qp5XBgWL9uVN1sO4kD5gUZvKmnYZ5wTk/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/AVvXsEhfhAL1kdQq02ZebNyRyRlmD9afgi8Zaf0mePkOpGOFOkbU2l-Kfkr_Q6pSmjMWOzS_W9jEHkNUUFHxwQxzN0nYBslgg-bbCcAcx7YIq6GMGL7Qp5XBgWL9uVN1sO4kD5gUZvKmnYZ5wTk/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/AVvXsEhyZq5M9FWAY03S_qxHHh067GIGqzL_BPnb4lsert_mbNtS40BjxnVkVoLfR58Spevq_usGOaqs1ITSUDZwiSCynhJuPJiwNCdhmiLhiBiRwdgLgQ57jEWgIkGa_Tm3Dt3nSyXzcHNe64E/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/AVvXsEhyZq5M9FWAY03S_qxHHh067GIGqzL_BPnb4lsert_mbNtS40BjxnVkVoLfR58Spevq_usGOaqs1ITSUDZwiSCynhJuPJiwNCdhmiLhiBiRwdgLgQ57jEWgIkGa_Tm3Dt3nSyXzcHNe64E/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/AVvXsEhISD84QywHwwyD-8G25N_nFjnnQipBISpLo6dhCMXkM1w6ZPYFUIMaiSVrzKJ0AKOOewD7HULbfHaaSjmpGsLSCxn6BEiJVfKjRmHbfukCKSHqTi8rF487ePNX417ctzIVyHlrgqW9lD4/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/AVvXsEhISD84QywHwwyD-8G25N_nFjnnQipBISpLo6dhCMXkM1w6ZPYFUIMaiSVrzKJ0AKOOewD7HULbfHaaSjmpGsLSCxn6BEiJVfKjRmHbfukCKSHqTi8rF487ePNX417ctzIVyHlrgqW9lD4/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/AVvXsEjs4tKU-BHQlcvoreeXmMf8Kn96doz-76qwLNTngvQRRc0oeXQPS6spOHXRE5K_A1uxvv2qNPALVl4KTbvyF_HhEzIwko1S9aNkbQyU-s45szNGINto55eQAWMsuAicRpT0B-Q_kqkSfko/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/AVvXsEjaKqQSZRYEf6gwkB8yNyao6lL0_5QV4-uTB9BEEv6s8kV039W9LW7yMbWIqHQ2qVRnOv3veZgouJ1-0ZfNp8_gi6AnWsYKfTc06DidW36blatftpy5DGa3MOFy2JykREGKdXY-0vQTnb4/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/AVvXsEjA6arTTaR0xBPLNaXevdnzItJ87gXpJ3Cidu9bXaOpwlMJP2lTYbHXqEQx-oJHwufYu3-Ea2R-ji6A7Yy58NtlWVeSpplSrztanm50iVXqrAfK0usyEDVPh5Hxs_tbrhTBekTOLZiNk7c/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/AVvXsEjRsb40usxG5B0ogW0aRZyW8i3sMJ6BW1JMvjIM8ET57CY1rqooAMdpkzFVOfFuVh8wWBiFkzA9ov0U1P3bgD7HeMuEV44d-ONR8aSWKr6IbzbwFtEtyd1wevok6f8rCBHj0_eOqrkyIaw/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/AVvXsEj3lLQY5f8_3K9Hy-N8KdacSeSo5y9pt-Eeymkg2viCe-iuyVl8ekeL8mjF2nrGfGQG2N8PMXSJKEmgCR5_C6AdR6uNe29euc1kUVoGjRy_OF6pxRd8bccFJ2BT_0wLWk8H-49rAbm2QoM/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/AVvXsEjtggb-k3xAuEJrCBA5zuvEtz6mnbDN0UoDeSX2Ld48xsthw59P-Ax_kcRLWoASQ_AMGDTj0lI37jHhU6ghZUMK-0VNJue_kdJivsq270r2hC0cZO3BWYlFZhfv6O7m4rUZWcJ5XI0dkiw/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/AVvXsEivZWo_7oun4cUAXjOxlKl6222niTSQjesJ1KZkYdmT84rVkJKmNK8Oj-MD69N15n1oiE81Q3pDDLBI9MDYhy2G9Ovg1Mp3eldwLJ4lSknXYMwyt7UI8JsZ3VXg2abSAgkb7d_pLK8Qpjw/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>
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.
" title="
