Cara Membuat Menu Floating Ala Cak Yit

Bagikan :

Tweet

Hai Sobat kali ini saya share " Cara Membuat Menu Floating Ala Cak Yit ". Cara ini cocok bagi anda yang ingin membuat navigasi, tapi saya menaruhnya di sisi kiri + melayang
Mau tau caranya... Langsung Ke Tutorialnya...

Cara Membuat Menu Floating Ala Cak Yit

1. Masuk Ke Beranda Blogger > Template > Edit HTML
2. Cari Kode ]]></b:skin> Atau </style> Untuk Mempermudah Pencaria Anda Dapat Tekan CTRL + F
3. Masukkan Kode Di Bawah Ini Di Atas Kode ]]></b:skin> Atau </style>

/* MENU NAVIGASI (FLOATING) Cak Yit */ 
.menu {text-shadow:none;position: fixed;height: 100%;width: 83px;background: #2c3e50;transition:width 1s;overflow: hidden;font-family: 'Offside', sans-serif;z-index: 99;left:0;top:0} .menu:hover {width: 270px;} .menuItem span {position: absolute;left:80px;top:40px;transition:color 1s;color:rgba(255,255,255,0);} .menu:hover .menuItem span {color:rgba(255,255,255,1);} .menuItem {color:#fff;position: relative;padding: 40px;transition:border .5s, background .2s;} .menuItem a {color:#fff;} .menuItem:hover {background: #34495e;cursor: pointer;} .satu {border-left:5px solid #16a085;} .satu:hover{border-left:20px solid #16a085;} .dua {border-left:5px solid #2980b9;} .dua:hover {border-left:20px solid #2980b9;} .tiga {border-left:5px solid #8e44ad;} .tiga:hover {border-left:20px solid #8e44ad;} .empat {border-left:5px solid #e67e22;} .empat:hover {border-left:20px solid #e67e22;} .lima {border-left:5px solid #e74c3c;} .lima:hover {border-left:20px solid #e74c3c;} .enam {border-left:5px solid #16a085;} .enam:hover{border-left:20px solid #16a085;}

4. Cari Kode </body>, Letakkan Kode Di Bawah Ini Di Atas Kode </body>

<div class='menu'> <div class='menuItem satu'><i class='fa fa-home icon-large'/><span><a href='http://cak-yit.blogspot.com/'>Home</a></span></div> 
<div class='menuItem dua'><i class='fa fa-comments icon-large'/><span><a href='http://cak-yit.blogspot.com/p/contact-us.html'>Contact Us</a></span></div> 
<div class='menuItem tiga'><i class='fa fa-bug icon-large'/><span><a href='http://cak-yit.blogspot.com/p/bugs.html'>Bugs</a></span></div> 
<div class='menuItem empat'><i class='fa fa-life-ring icon-large'/><span><a href='http://cak-yit.blogspot.com/'>Privacy Policy</a></span></div> <div class='menuItem lima'><i class='fa fa-exchange icon-large'/><span><a href='http://cak-yit.blogspot.com/p/tukar-link.html'>Tukar Link</a></span></div> <div class='menuItem enam'><i class='fa fa-bullhorn icon-large'/><span><a href='http://www.blogger.com/follow-blog.g?blogID=4744840177993790174'>Join Us</a></span></div> </div>

5. Kemudian Cari Kode </head>, Letakkan Kode Di Bawah Ini Di Atas Kode </head>

<link href='//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

6. Klik Simpan

Tag : CSS, Widget