Hallo,.. agan2 ganteng dan cantik lagi pada ngapain nich :) udah lama sekali ya ane gak posting tutorial buat agan. Ya maklum lah karena sibuk di dunia nyata jadi gak sempet urus blog. hihiiMembuat Animasi & Sticky Side Navigation Bar DEMO
Simak langkah2 dibawah ini:
1. Login ke akun blogger
2. Klik Template Edit HTML
3. Kemudian tekan Ctrl +F cari kode ]]></b:skin> </style>
4. Lalu tambahkan script CSS ]]></b:skin> </style>
#snav {
position : fixed ;
top : 20 %;
z - index : 9999 ;
font - size : 18px ;
font - family : 'Open Sans' , sans - serif ;
}
#snav ul { list-style: none; }
#snav * {
margin : 0 ;
padding : 0 ;
outline : 0 ;
transition : all . 5s ease ;
- webkit - transition : all . 5s ease ;
- moz - transition : all . 5s ease ;
- o - transition : all . 5s ease ;
- webkit - box - sizing : border - box ;
- moz - box - sizing : border - box ;
box - sizing : border - box ;
}
#snav li a {
text - decoration : none ;
color : #fff;
display : block ;
position : relative ;
}
#snav .fa {
vertical - align : middle ;
font - size : 18px ;
width : 35px ;
height : 35px ;
line - height : 35px ;
text - align : center ;
position : relative ;
z - index : 4 ;
}
#snav li span {
font - size : 15px ;
vertical - align : middle ;
height : 35px ;
line - height : 35px ;
width : auto ;
white - space : nowrap ;
overflow : hidden ;
display : block ;
padding : 0 15px ;
position : absolute ;
top : 0 ;
visibility : hidden ;
z - index : 3 ;
}
#snav li a:hover .fa { transform: rotate(720deg); }
#snav li a:hover span { visibility: visible; }
#snav li span { background-color: #555; }
/* icons color and background before hover */
#snav li .fa {
background - color : #EEE;
color : #555
}
/* icons hover color */
#snav li a:hover .fa { color: #fff; }
/* repeated colors from 1 to 10 each hover color repeated after 10 menu items */
#snav li:nth-child(10n+1) span,
#snav li:nth-child(10n+1) a:hover .fa { background-color: #8350DD; }
#snav li:nth-child(10n+2) span,
#snav li:nth-child(10n+2) a:hover .fa { background-color: #4EC5DB; }
#snav li:nth-child(10n+3) span,
#snav li:nth-child(10n+3) a:hover .fa { background-color: #3DC25D; }
#snav li:nth-child(10n+4) span,
#snav li:nth-child(10n+4) a:hover .fa { background-color: #99BE24; }
#snav li:nth-child(10n+5) span,
#snav li:nth-child(10n+5) a:hover .fa { background-color: #38c; }
#snav li:nth-child(10n+6) span,
#snav li:nth-child(10n+6) a:hover .fa { background-color: #ff0000; }
#snav li:nth-child(10n+7) span,
#snav li:nth-child(10n+7) a:hover .fa { background-color: #000; }
#snav li:nth-child(10n+8) span,
#snav li:nth-child(10n+8) a:hover .fa { background-color: #F1A111; }
#snav li:nth-child(10n+9) span,
#snav li:nth-child(10n+9) a:hover .fa { background-color: #777; }
#snav li:nth-child(10n+10) span,
#snav li:nth-child(10n+10) a:hover .fa { background-color: #30555C; }
#snav.en {
left : 0 ;
text - align : left ;
}
#snav.en li span { left: -100px; }
#snav.en li a:hover span { left: 35px; } Copy
5. Tekan
Ctrl +
F cari kode
<head> Lalu masukan script di bawah ini tepat di atas kode
<head>
<link href = "//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel = "stylesheet" > Copy
6. Kemudian
simpan template sobat.
Penerapannya:
Supaya animasi dan sticky muncul di blog sobat » Silahkan masukan kode
HTML berikut ini kedalam template atau widget blog sobat.
<div id = "snav" class = "en" >
<ul>
<li> <a href = "#" > <i class = "fa fa-home" ></i> <span> Home </span> </a> </li>
<li> <a href = "#" > <i class = "fa fa-css3" ></i> <span> CSS3 </span> </a> </li>
<li> <a href = "#" > <i class = "fa fa-html5" ></i> <span> HTML5 </span> </a> </li>
<li> <a href = "#" > <i class = "fa fa-git" ></i> <span> Git </span> </a> </li>
<li> <a href = "#" > <i class = "fa fa-android" ></i> <span> Android </span> </a> </li>
<li> <a href = "#" > <i class = "fa fa-apple" ></i> <span> Apple </span> </a> </li>
<li> <a href = "#" > <i class = "fa fa-bitcoin" ></i> <span> Bitcoin </span> </a> </li>
<li> <a href = "#" > <i class = "fa fa-facebook" ></i> <span> Facebook </span> </a> </li>
<li> <a href = "#" > <i class = "fa fa-twitter" ></i> <span> Twitter </span> </a> </li>
<li> <a href = "#" > <i class = "fa fa-google" ></i> <span> Google </span> </a> </li>
</ul>
</div>
Copy
Semoga tutorial ini bermanfaat bagi sobat.
Script Dibuat oleh
Mohamed Abo El-Ghranek.
Welcome to my blog 😊
Modal Kecil bisa mendapatkan hasil yg luar biasa...
My life is my message.
jangan lupo mampir ke blog saya ya gan di www.portalcoding.com
Cuma Slidernya tidak bisa jalan ya jika blogspot di alihkan ke dot.ID
Mohon infonya.
Tolong gan !!