Blog iRvan eFendy: Membuat Animasi & Sticky Side Navigation Bar

:selamat Hallo,.. agan² 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. hihii
Untuk postingan kali ini saya akan share tutorial yang sangat menarik dan pasti nya buat mempercantik Tampilan Blog sobat biar tambah kereennn

yaitu Membuat Animasi & Sticky Side Navigation Bar
Okeyy, sobb langsung ajah menuju ke TKP :ngacir gak pake basa basi soalnya udah ngantuk banget ini,.. :)
Untuk DEMO nya silahkan sobat lihat langsung di bawah ini,..

D E M O

Simak langkah² dibawah ini:

1. Login ke akun blogger sobat

2. Klik Template » Edit HTML

3. Kemudian tekan Ctrl+F cari kode ]]></b:skin> atau </style>

4. Lalu tambahkan script CSS berikut ini tepat diatas kode ]]></b:skin> atau </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; }

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">

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>

Semoga tutorial ini bermanfaat bagi sobat.
Script Dibuat oleh Mohamed Abo El-Ghranek.

Blog iRvan eFendy

Thursday, March 2, 2023

Membuat Animasi & Sticky Side Navigation Bar

Simak langkah² dibawah ini:

Penerapannya:

No comments:

Post a Comment

Thursday, March 2, 2023

Membuat Animasi & Sticky Side Navigation Bar

Simak langkah2 dibawah ini:

Penerapannya:

No comments:

Post a Comment

Simak langkah² dibawah ini: