Cara Memasang Floating Menu Responsive di Blog

Apa itu Floating menu? Floating menu atau biasa disebut menu melayang adalah sebuah menu bar yang posisi tetap atau fixed artinya tidak berubah walaupun kamu scroll ke atas atau bawah, biasanya terletak di atas/bawah atau samping kanan/kiri blog kamu.

Lalu, apa itu responsive? Menu responsive adalah sebuah menu yang tampilannya akan mengikuti lebar layar gadget yang di gunakan, artinya menu yang posisinya akan selalu mengikuti lebar layar. Untuk lebih jelas mengenai Responsive baca artikel saya yang berjudul Template Blogger Responsive Rekomendasi 2013.

Menu floating yang akan saya bagikan ini bukan buatan saya, menu ini saya dapatkan dari salah satu website tapi saya lupa websitenya apa. Karena menunya sudah lama saya gunakan di template sebelum ini. Dan tentunya menu ini sudah saya modifikasi menjadi responsive.

Demo

Cara Memasang Floating Menu Responsive di Blog:

Ada 2 cara pemasangannya:

Cara pertama:

1. Login ke blogger.com

2. Masuk ke menu Template >> Edit HTML

3. Cari kode </head>, dan copy kode di bawah ini

<style>
#wctopdropcont{
width:100%;
height:40px;
display:block;
padding:0;
margin:0 0 22px 0;
z-index:100;
top:0px;
left:0px;
position:fixed;
box-shadow:2px 2px 5px #444444;
-moz-box-box-shadow:2px 2px 5px #444444;
-web-kit-box-shadow:2px 2px 5px #444444;
-goog-ms-box-shadow:2px 2px 5px #444444;
background:#000000;
}
#wctopdropnav{
float:left;
width:700px;
height:40px;
display:block;
padding:0;
margin-left:40px;
}
#wctopdropnav ul{
float:left;
margin:0;
padding:0;
}
#wctopdropnav li{
float:left;
list-style:none;
line-height:40px;
margin:0;
padding:0
background:#180000;
}
#wctopdropnav li a, #wctopdropnav li a:link{
color:#fff;
display:block;
margin:0;
font:16px georgia, verdana;
padding:10px;
text-decoration:none;
}
#wctopdropnav li a:hover, #wctopdropnav li a:active, #wctopdropnav .current_page_item a {
color:#fff;
padding:10px;
background: rgb(180,223,91); /* Old browsers */
background: -moz-linear-gradient(top, rgba(180,223,91,1) 0%, rgba(180,223,91,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(180,223,91,1)), color-stop(100%,rgba(180,223,91,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(180,223,91,1) 0%,rgba(180,223,91,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(180,223,91,1) 0%,rgba(180,223,91,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(180,223,91,1) 0%,rgba(180,223,91,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(180,223,91,1) 0%,rgba(180,223,91,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4df5b', endColorstr='#b4df5b',GradientType=0 ); /* IE6-9 */
}
#wctopdropnav li li a, #wctopdropnav li li a:link, #wctopdropnav li li a:visited{
font-size: 12px;
background:#000000;
color: #fff;
width: 150px;
margin: 0;
padding: 0px 10px;
line-height:30px;
position: relative;
}
#wctopdropnav li li a:hover, #wctopdropnav li li a:active {
color: #fff;
background: rgb(180,223,91); /* Old browsers */
background: -moz-linear-gradient(top, rgba(180,223,91,1) 0%, rgba(180,223,91,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(180,223,91,1)), color-stop(100%,rgba(180,223,91,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(180,223,91,1) 0%,rgba(180,223,91,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(180,223,91,1) 0%,rgba(180,223,91,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(180,223,91,1) 0%,rgba(180,223,91,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(180,223,91,1) 0%,rgba(180,223,91,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4df5b', endColorstr='#b4df5b',GradientType=0 ); /* IE6-9 */
}
#wctopdropnav li ul{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin:0px;
padding:0px
}
#wctopdropnav li:hover ul, #wctopdropnav li li:hover ul, #wctopdropnav li li li:hover ul, #wctopdropnav li.sfhover ul, #topwctopdropnav li li.sfhover ul, #topwctopdropnav li li li.sfhover ul{
left:auto
}
#wctopdropnav li:hover, #wctopdropnav li.sfhover{
position:static
}
#wctopdropsoc {
float:right;
width:220px;
padding:0px 0px ;
margin:9px 10px 0px 0px;
}
#wctopdropsoc img
{
margin-left:5px;
margin-top:-2px;
height:26px;
border:none;
}
/*Respnsive
http://aikonmedia.blogspot.com
*/
@media only screen and (max-width: 300px){
#wctopdropcont {width:100%; height:auto;}
#wctopdropnav {
width:auto;
height:auto;
display:block;
padding:0;
margin-left:1px;}
#wctopdropnav ul {margin:0; padding:0;}
#wctopdropnav li {float:left;
list-style:none;
line-height:auto;
margin:0;
padding:0;}
#wctopdropnav li ul {position:absolute; height:auto; width:auto; margin:0px; padding:0px;}
#wctopdropsoc {float:right; width:220px; padding:0px 0px; margin:9px 10px 0px 0px;}
#wctopdropsoc img {margin-left:2px; margin-top:-2px; height:20px; border:none;}
}
@media only screen and (max-width: 480px){
#wctopdropcont {width:100%; height:auto;}
#wctopdropnav {width:auto; height:auto; display:block; padding:0; margin-left:1px;}
#wctopdropnav ul {margin:0; padding:0;}
#wctopdropnav li {float:left;
list-style:none;
line-height:auto;
margin:0;
padding:0;}
#wctopdropnav li ul {position:absolute; height:auto; width:auto; margin:0px; padding:0px;}
#wctopdropsoc {width:220px; padding:0px 0px; margin:9px 10px 0px 0px;}
#wctopdropsoc img {margin-left:2px; margin-top:-2px; height:20px; border:none;}
}
@media only screen and (max-width: 768px){
#wctopdropcont {width:100%; height:auto;}
#wctopdropnav {width:auto; height:auto; display:block; padding:0; margin-left:1px;}
#wctopdropnav ul {margin:0; padding:0;}
#wctopdropnav li {float:left; list-style:none; line-height:auto; margin:0; padding:0;}
#wctopdropnav li ul {position:absolute; height:auto; width:auto; margin:0px; padding:0px;}
#wctopdropsoc {float:right; width:220px; padding:0px 0px; margin:9px 10px 0px 0px;}
#wctopdropsoc img {margin-left:2px; margin-top:-2px; height:20px; border:none;}
}
@media only screen and (max-width: 800px){
#wctopdropcont {width:100%; height:auto;}
#wctopdropnav {
width:auto;
height:auto;
display:block;
padding:0;
margin-left:1px;}
#wctopdropnav ul {margin:0; padding:0;}
#wctopdropnav li {float:left;
list-style:none;
line-height:auto;
margin:0;
padding:0;}
#wctopdropnav li ul {position:absolute; height:auto; width:auto; margin:0px; padding:0px;}
#wctopdropsoc {float:right; width:220px; padding:0px 0px; margin:9px 10px 0px 0px;}
#wctopdropsoc img {margin-left:2px; margin-top:-2px; height:20px; border:none;}
}
</style>
<div id='wctopdropcont'>
<div id='wctopdropnav'>
<ul>
<li><a href='http://aikonmedia.blogspot.com/'>Home</a></li>

<li><a href='#'>Tools</a>
<ul>
<li><a href='http://aikonmedia.blogspot.com/p/kode-warna.html'>Kode Warna 1</a></li>
<li><a href='http://html-color-codes.info/'>Color Picker</a></li>
<li><a href='http://aikonmedia.blogspot.com/p/parse-html.html'>Parse HTML</a></li>

</ul>
</li>
<li><a href='#'>Categories</a>

<ul>
<li><a href='http://aikonmedia.blogspot.com/search/label/Tutorial?max-results=5'>Blogging</a></li>
<li><a href='http://aikonmedia.blogspot.com/search/label/template?max-results=5'>Templates</a></li>
<li><a href='http://aikonmedia.blogspot.com/search/label/Info?max-results=5'>Info</a></li>
<li><a href='http://aikonmedia.blogspot.com/search/label/Gokil?max-results=5'>Gokil</a></li>
<li><a href='http://aikonmedia.blogspot.com/search/label/Lucu?max-results=5'>Lucu</a></li>
<li><a href='http://aikonmedia.blogspot.com/search/label/Ucapan?max-results=5'>Ucapan</a></li>
<li><a href='http://aikonmedia.blogspot.com/search/label/Ebook?max-results=5'>Ebook</a></li>
</ul>
</li>
<li><a href='#'>Contact us</a>

<ul>
<li><a href='https://www.facebook.com/pages/AIKON-MEDIA/366100086832676'>Facebook</a></li>
<li><a href='https://twitter.com/baguztguzt'>Twitter</a></li>
<li><a href='https://plus.google.com/101747732696776844820/'>Google+</a></li>
</ul>
</li>
<li><a href='http://aikonmedia.blogspot.com/p/privacy-policy.html'>Privacy Policy</a></li>
<li><a href='http://aikonmedia.blogspot.com/p/disclaimer.html'>Disclaimer</a></li>
</ul>
</div>
<div id='wctopdropsoc'>

<a href='http://feeds.feedburner.com/AikonMedia' target='_blank'><img alt='Subcribe to our RSS feeds' src='http://2.bp.blogspot.com/-ea9ILzszTF0/UR3ySvlxd0I/AAAAAAAABMQ/4QBrWHbt0FU/s1600/feed.png'/></a>
<a href='https://www.facebook.com/pages/AIKON-MEDIA/366100086832676' target='_blank'><img alt='Join Us on Facebook' src='http://1.bp.blogspot.com/-3wW_EmAR24w/UR3tVFL5fFI/AAAAAAAABLc/RMS76XM5sK8/s1600/fbb.png'/></a>
<a href='https://twitter.com/baguztguzt' target='_blank'><img alt='Follow us on Twitter' src='http://1.bp.blogspot.com/-wSCdvgK8Ctw/UR3tWusvgyI/AAAAAAAABL0/FY3nUvdlJx0/s1600/tww.png'/></a>
<a href='https://plus.google.com/101747732696776844820/' target='_blank'><img alt='Add to Circles' src='http://1.bp.blogspot.com/-YWI0K2Ebh2Q/UR3tVS1gDhI/AAAAAAAABLk/8hYaD0Yur_k/s1600/gpp.png'/></a>
</div>
</div>

4. Paste di bawah kode </head>

5. Simpan

Cara kedua:

1. Login ke blogger.com

2. Masuk ke menu Layout atau Tata Letak >>Add gadget atau tambah gadget

3. Cari HTML/JavaScript, lalu klik tambahkan atau tanda plus (+)

4. Copy kode yang sudah saya kasih di atas, lalu paste di dalam kotak HTML/JavaScript tadi

5. Simpan

Menu diatas akan bekerja jika kamu juga menggunakan template responsive. Ini 2 Blogger Template Responsive yang bisa kamu gunakan. Jika kesusahan dalam mengedit warna-warna dari menu di atas, sobat bisa menonton Vdeo Tutorial Cara Mudah Mengedit Template Blogger Part 1.

Semoga artikel tutorial Cara Memasang Floating Menu Responsive di Blog ini bermanfaat untuk teman-teman semua. Jika ada kesulitan mohon tanyakan di kolom komentar. Terima kasih