CARA MEMASANG Tooltip Effect Navigation Menu TRANSPARANT di blogspot

HOW TO MAKE Tooltip Effect Navigation Menu transparant FOR BLOGGER,...Atau
cara memasang menu tooltip navigasi menu transparant
di blog agan,..berikut tutornya,..

Demo Lihat Disini

* buka blog ente
* pilih template >>> edit HTML
* Cari kode ini </header>
* kemudian copas kode dibawah tepat diatas kode </header>

<nav>
  <menu>
    <li><a href='#'>&#9728;</a></li>
    <li><a href='#'>&#9992;</a></li>
    <li><a href='#'>&#10052;</a></li>
    <li><a href='#'>&#9742;</a></li>
  </menu>
</nav>
<nav class='menu2'>
  <menu>
    <li><a href='#'>HOME</a></li>
    <li><a href='#'>BLOG</a></li>
    <li><a href='#'>ACTION</a></li>
    <li><a href='#'>NEWBIE</a></li>
    <li><a href='#'>SLOW</a></li>
    <li><a href='#'>LINK1</a></li>
    <li><a href='#'>LINK2</a></li>
    <li><a href='#'>LINK3</a></li>
    <li><a href='#'>LINK4</a></li>
    <li><a href='#'>LINK5</a></li>
  </menu>
</nav>

* kemudian cari kode ini ]]></b:skin>
* dan copy kode dibawah kemudian letakkan tepat diatas kode ]]></b:skin>

body {
  background-color: #0a68bb;
  background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggU_y7nmQJtdruy2FsZ3TWmAPxMOFAQBlI8LK5vby84iLBiTk_gjad4qWGn1vLn4PfQVSGVmhBuEbQKktFqxuWD25aSh7-dvZhYMoA2wulRF6lV66vTxTBIByn4TogvpFvJ722h20zHg/s1600/wallpaper-625037.jpg');
  
}

nav {
  margin : 50px auto;
  width  : 100%;
}

menu {
  border-radius : 3px;
}

menu:after , menu:before {
  display : block;
  content : ' ';
}

menu:after {
  clear : both;
}

li {
  list-style-type : none;
  background      : linear-gradient(rgba(220,220,255,0.4) 85%, rgba(255,255,255,0.5) 100%);

  float   : left;
  cursor  : pointer;
  padding : 3px 10px;
  border-top    : 2px solid rgba(200,200,255,0.5);
  border-bottom : 2px solid rgba(50,50,50,0.4);
}

li:first-child {
  border-radius : 5px 0 0 5px;
}

li:last-child {
  border-radius : 0 5px 5px 0;
}

a {
  display : block;
  padding : 10px 13px;
  font-size : 26px;
  text-decoration : none;
  border-radius   : 5px;
  position        : relative;
  top   : 0;
  color : #FFF;   
  transition : all .4s;
}

li:hover a {
  top   : -20px;
  color : #4eacff;
  background-color: #fff;
  box-shadow : 0 0 5px 0 rgba(255, 255, 255, 0.7);
  transition : all .4s;
}

li a:after {
  display  : block;
  content  : '';
  position : absolute;
  top  : 100%;
  left : 42%;
  border-style : solid;
  border-color : transparent;
  border-width : 5px 5px 0 5px;
  transition   : all .4s;
}

li:hover a:after {
  border-color : white transparent transparent transparent;
  transition   : all .4s;
}

/*************************************/

.menu2 {
  width : 100%;
}

.menu2 a {
  font-family : georgia;
  font-size   : 14px;
  font-style  : italic;
  text-transform : capitalize;
}

.menu2 li {
  border-right  : 1px solid rgba(200,200,255,0.5);
  border-left   : 1px solid rgba(40,40,40,0.2); 
}

.selected {
  top   : -20px;
  color : #4eacff;
  background-color: #fff;
  box-shadow : 0 0 5px 0 rgba(255, 255, 255, 0.7);
  transition : all .4s;
}

.selected:after {
  border-color : white transparent transparent transparent;
  transition   : all .4s;
}

* terakhir silahkan di save / simpan

>>> SELAMAT MENCOBA GAN <<<

QUEEN TRICK BLOG

CARA MEMASANG Tooltip Effect Navigation Menu TRANSPARANT di blogspot

Entri Populer

Label