Headline
Loading...

Efek Rolling Pada Menu Navigasi Blog

EFek Roling atau berputar saat mouse mnyentu bagian yang di inginkan, hal ini memberikan efek yang menarik untuk di pandang oleh sebagiab blogger maka pada menu navigasi terbaru tanpa edit html memukau dengan css yang elegan dan membuat menu navigasi pada blog anda tampil beda untuk itu saya akan sharingkan cara memasang menu navigasi dengan sentuhan CSS

  • Login ke account blog anda
  • Tata Letak---Tambah Gadget Baru
  • Copy dan pastekan di  Html  Javascript baru
/ <style>
nav a {
  position: relative;
  display: inline-block;
  margin: 15px 25px;
  outline: none;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 400;
  text-shadow: 0 0 1px rgba(255,255,255,0.3);
  font-size: 1.35em;}

nav a:hover, nav a:focus {outline: none;}
.cl-effect-1 {position: relative;z-index: 1;}
.cl-effect-1 a {overflow: hidden;margin: 0 15px;}

.cl-effect-1 a span {
  display: block;
  padding: 10px 20px;
  background: #0f7c67;
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  transition: transform 0.3s;}

.cl-effect-1 a::before {
  position: absolute;
  top: 0;left: 0;
  z-index: -1;
  padding: 10px 20px;
  width: 100%;
  height: 100%;
  background: #fff;
  color: #0f7c67;
  content: attr(data-hover);
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  transition: transform 0.3s;
  -webkit-transform: translateX(-25%);}

.cl-effect-1 a:hover span,
.cl-effect-1 a:focus span {
  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  transform: translateX(100%);}

.cl-effect-1 a:hover::before,
.cl-effect-1 a:focus::before {
  -webkit-transform: translateX(0%);
  -moz-transform: translateX(0%);
  transform: translateX(0%);}
</style>
<nav class="cl-effect-1">
<a href="/" data-hover="Sahabat"><span>Sahabat</span></a>
<a href="/" data-hover="Blogger"><span>Blogger</span></a>
<a href="/" data-hover="Tujuh-tujuh"><span>Tujuh-tujuh</span></a>
</nav>
</div>
  • Simpan dan Lihat Hasilnya
di 10.09

1. Berikan Komentar Anda Sesuai dengan Judul Artikel.
2. Komentar yang menyertakan link aktif, iklan, atau titip link, akan dimasukan ke folder SPAM.
3. Untuk pertanyaan Out Of Topic ( OOT ) silahkan klik Forum

Konversi KodeEmotionForum

Back to Top