Membuat menu melayang Responsive blogger -->
✕

Kategori Berita

Iklan Semua Halaman




Template

Iklan Halaman Depan

Iklan Halaman Depan

Home

Membuat menu melayang Responsive blogger

komentarKomentar

Cara membuat menu melayang responsive di blogger (floating menu) cara membuat menu melayang di blogger yang mau saya berikan panduanya ini sangat mudah karena hanya butuh menambahkan 1 rangkaian kode html saja, sehingga anda tidak begitu sulit untuk menerapkanya.

Contoh menu melayang atau floating menu sepertidi foto di bawah ini

 

menu melayang

Caranya membuat atau menambahkan menu melayang di blogger yang responsive silahkan simak dibawah ini:

1.copi kode di bawah ini lalu pastekan di bawah kode </head>


<style>

#wctopdropcont{
  width:100%;
  height:37px;
  display:block;
  padding:0px;
  margin:0 0 22px 0;

 z-index:100;
  top:43px;
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:#180000;
}

#wctopdropnav{
  float:left;
  width:1050px;
  height:37px;
  display:block;
  padding:0;
  margin-left:40px;
}

#wctopdropnav ul{
  float:left;
  margin:0;
  padding:0;

}

#wctopdropnav li{
  float:left;
  list-style:none;
  line-height:37px;
  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=&#39;#b4df5b&#39;, endColorstr=&#39;#b4df5b&#39;,GradientType=0 ); /* IE6-9 */
}
#wctopdropnav li li a, #wctopdropnav li li a:link, #wctopdropnav li li a:visited{
  font-size: 12px;
background:#180000;
  color: #fff;
  width: 0px;
  margin: 0;
  padding: 0px 10px;
  line-height:27px;
  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=&#39;#b4df5b&#39;, endColorstr=&#39;#b4df5b&#39;,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:0px;
  padding:0px 0px ;
  margin:9px 10px 0px 0px;
   }
#wctopdropsoc img
{
margin-left:5px;
margin-top:-2px;
height:26px;
border:none;
}

</style>
 <div id='wctopdropcont'>
     <div id='wctopdropnav'>
         <ul>
           <li><a href='/'>Home</a></li>
           <li><a href='https://templateradioonline.blogspot.com/p/kontak.html'>Kontac </a></li>   
          
           <li><a href='https://templateradioonline.blogspot.com/p/daftar-isi.html'>Daftar isi</a>
               <ul>
                  <li><a href='#'>Item 1</a></li>
                  <li><a href='#'>Item 2</a></li>
                  <li><a href='#'>Item 3</a></li>
                  <li><a href='#'>Item 4</a></li>
                 
               </ul>
           </li>
    <li><a href='https://templateradioonline.blogspot.com/p/kontak.html'>Older</a>
             
             <ul>
                  <li><a href='#'>Widgets</a></li>
                  <li><a href='#'>Templates</a></li>
                  <li><a href='#'>SEO</a></li>
                  <li><a href='#'>Wordpress</a></li>
                  <li><a href='#'>Blogger</a></li>
                  <li><a href='#'>Customization</a></li>
               </ul>
           </li>
             <li><a href='#'> </a>          
           </li>
         </ul>
      </div>

      <div id='wctopdropsoc'>
        
      </div>
   </div>

2.simpan template anda dan selesai..

 

semoga bermanfaat cara singkat menambahkan menu melayang responsive di blogger. salam suara hati