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

Demo Click here

Tweet

Ditulis Oleh: wisata pisak at 10:09 AM