Membuat Menu Float Mudah di Blog

Selasa, 06 September 2016

Banyak orang bertanya bagaimana membuat menu melayang di blog biasanya di sebut Float , menu ini sangat memudahkan pembaca blog kita sehingga bila di scroll kebawah menu itu akan tetap muncul di atas layar browser kamu. Dalam pembuatannya mudah seperti membuat menu-menu lain di blog. Menu ini juga dapat memperindah tampilan blog kamu. Ok admin akan memberikan langkah- langkahnya

berikut langkah-langkahnya :

1. Buka akun blogger kamu, ya pastinya haha
2. Masuk ke menu template
3. Lalu edit html
4. Cari kode (ctrl + f) ]]></b:skin> , lalu masukkan kode html di bawah ini :

/* Wrapper */
#invertnew-wrapper{padding:0 20px;position:relative;max-width:1140px;margin:0 auto;}
#wrapper{max-width:1140px;margin:auto;clear:both;padding-top:20px}
#header-wrap{background:#fff;width:100%;position:relative;margin:auto;border-bottom:1px solid #e5e5e5;border-top:1px solid #eee;height:60px;line-height:60px;text-align:center}
/* Top Menu */
.topmein-wrapper{background:#2e2e2e;position:fixed;top:0;left:0;right:0;overflow:hidden;width:100%;height:50px;line-height:50px;z-index:99;-webkit-transform:translateZ(0);box-shadow:0 1px 5px rgba(0,0,0,0);}
.main-navigation{display:block;margin:0 auto;width:100%;max-width:1140px}
.main-navigation ul {width:100%;padding:0;margin:0;text-align:right;}
.main-navigation li{list-style-type:none;float:left;padding:0;line-height:50px;height:50px;margin:0}
.main-navigation li a{font-size:12px;font-weight:700;color:#fff;text-transform:uppercase;display:inline-block;margin:0;padding:0 20px;text-align:center}
.main-navigation ul li a:active,.main-navigation ul li a:hover:active,.main-navigation ul li.highlight a:hover,.main-navigation ul li a:hover,.main-navigation li.searchbutton:hover:after {color:#fbb034;text-decoration:none;}
.main-navigation ul li:hover,.main-navigation ul li.socright:hover {color:#fbb034;}
.main-navigation ul li:active,.main-navigation ul li.highlight a,.main-navigation ul li.highlight {color:#fff;}
.main-navigation ul li.socright{float:right;}
.main-navigation ul li.socright a{padding:0 20px;font-weight:400;min-width:55px}
.main-navigation a#pull {display:none;}
.topmein-wrapper.scrolling{background:rgba(255,255,255,.99);box-shadow:0 1px 5px rgba(0,0,0,0.1);}
.topmein-wrapper.scrolling .main-navigation li a,.topmein-wrapper.scrolling .main-navigation li.searchbutton:after{color:#888;}
.topmein-wrapper.scrolling .main-navigation ul li a:active,.topmein-wrapper.scrolling .main-navigation ul li.highlight a,.topmein-wrapper.scrolling .main-navigation ul li a:hover:active,.topmein-wrapper.scrolling .main-navigation ul li.highlight a:hover,.topmein-wrapper.scrolling .main-navigation ul li a:hover,.topmein-wrapper.scrolling .main-navigation li.searchbutton:hover:after{color:#30a8e6;text-decoration:none;}
.topmein-wrapper.scrolling .main-navigation li.highlight,.topmein-wrapper.scrolling .main-navigation ul li:hover,.topmein-wrapper.scrolling .main-navigation ul li:hover.socright{color:#30a8e6;}
.topmein-wrapper.scrolling .main-navigation li.searchbutton {background:transparent;}
.topmein-wrapper.scrolling,.topmein-wrapper.scrolling .main-navigation li{height:55px;line-height:55px;}

5. Lalu masukkan kode html di bawah ini, di bawah kode </head> :

<body expr:class='"loading" + data:blog.mobileClass'>
<div class='topmein-wrapper'>
<div class='invertnew-wrapper clearfix'>
<nav class='main-navigation'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='alamatblogkamu' title='nama 1'>nama 1</a></li>
<li><a href='alamatblogkamu' title='nama 2'>nama 2</a></li>
<li><a href='alamatblogkamu' title='nama 3'>nama 3</a></li>
<li class='searchbutton' title='Cari artikel'/>
<li class='socright'><a href='https://www.blogger.com/follow-blog.g?blogID=1304236395982050665' rel='nofollow' target='_blank' title='Gabung di blog ini'><i class='fa fa-plus'/><span class='inv'/></a></li>
<li class='socright'><a href='https://plus.google.com/112220088660348916874' rel='nofollow' target='_blank' title='Ikuti lewat Google+'><i class='fa fa-google-plus'/><span class='inv'/></a></li>
<li class='socright'><a href='#' rel='nofollow' target='_blank' title='Ikuti lewat Facebook'><i class='fa fa-facebook'/><span class='inv'/></a></li>
<li class='socright'><a href='#' rel='nofollow' target='_blank' title='Ikuti lewat Twitter'><i class='fa fa-twitter'/><span class='inv'/></a></li>
<li class='menu' title='Menu'/>
</ul>
<a href='#' id='pull'>Menu</a>
</nav>
</div>
</div>
<div id='header' itemscope='itemscope' itemtype='http://schema.org/WPHeader'>
<div class='maxwrap'>
   <b:section id='headerdua' maxwidgets='1' showaddelement='no'>
     <b:widget id='Header1' locked='true' title='Gecko Jowo (Header)' type='Header' version='1' visible='true'>
       <b:includable id='main'>
  <b:if cond='data:useImage'>
    <b:if cond='data:imagePlacement == "BEHIND"'>

6. Ganti alamatblogkamu dengan alamat blog kamu, ya iyalah masak blog aku, dan ganti juga nama 1, nama 2, nama 3 dengan sesuka kamu, mau mantan atau pacar, selingkuhan juga boleh haha

Sekian postingan kali ini karena sudah malam hahaha, Semoga bermanfaat teman.

Tag : Tutorial Blog

Membuat Menu Float Mudah di Blog

0 Komentar untuk "Membuat Menu Float Mudah di Blog"

Total Tayangan Halaman

About

Membuat Menu Float Mudah di Blog

Previous

Next

0 Komentar untuk "Membuat Menu Float Mudah di Blog"

Total Tayangan Halaman

About