Blogger CSS3 Sonar Menu

Blogger CSS3 Sonar Menu - Menu tidak bisa terpisahkan dari struktur sebuah template karena dengan keberadaan menu membuat pengunjung semakin mudah dalam menelusuri sebuah blog. Diluar sana banyak tutorial dalam membuat menu mulai dari yang simple sampe yang imposible " newbie dilarang masuk " hehe. Menu hal yang wajib dimiliki sebuah template dan kali ini untuk memenuhi kewajiban brada saya berikan sebuah menu sederhana tapi lagi-lagi cukup keren untuk brada miliki. Efect sonar hadir pada menu kali ini dan yang paling penting mudah dalam memasangnya. Untuk lebih jelasnya silahkan brada tengok demonya dibawah ini .

See Demo

Kustomisasi 

• Masuk pada Edit HTML 
• Cari Kode ]]></b:skin>
• Masukan Kode dibawah ini tepat diatas kode ]]></b:skin>

<style>
ul.sonarmenu{ /* Inspired by http://tympanus.net/codrops/2013/08/06/creative-link-effects */
list-style: none;
}
ul.sonarmenu li{
 display: inline;
}
ul.sonarmenu a{
position: relative;
display: inline-block;
color: black; /* font color */
text-decoration: none;
margin: 10px 20px;
text-transform: uppercase;
font-family: 'Raleway', sans-serif; /* font style (uses Google fonts) */
font-size: 22px; /* font size */
letter-spacing: 2px; /* letter spacing */
border-bottom: 2px solid transparent; /* Bottom border style */
}
ul.sonarmenu a:hover, ul.sonarmenu a:focus{
outline: none;
border-bottom: 2px solid #eee; /* Bottom border style on hover */
}
ul.sonarmenu a::before, ul.sonarmenu a:after{ /* shared style for two circles */
position: absolute;
top: 50%;
left: 50%;
width: 70px; /* width of outer circle */
height: 70px; /* height of outer circle */
border: 12px double rgba(0,0,0,0.1); /* style and color of circles */
border-radius: 50%;
content: '';
opacity: 0;
-webkit-transform: translateX(-50%) translateY(-50%) scale(0.2);
-moz-transform: translateX(-50%) translateY(-50%) scale(0.2);
transform: translateX(-50%) translateY(-50%) scale(0.2);
}
ul.sonarmenu a:after{ /* inner circle specific CSS */
width: 60px; /* width of inner circle */
height: 60px; /* width of inner circle */
border-width: 6px;
-webkit-transform: translateX(-50%) translateY(-50%) scale(0.8);
-moz-transform: translateX(-50%) translateY(-50%) scale(0.8);
transform: translateX(-50%) translateY(-50%) scale(0.8);
}
ul.sonarmenu a:hover:before, ul.sonarmenu a:hover:after{
-webkit-animation: pulsate 1.2s infinite; /* animation name duration loop etc */
-moz-animation: pulsate 1.2s infinite;
-ms-animation: pulsate 1.2s infinite;
animation: pulsate 1.2s infinite;
}
/* ### Keyframe animations ### */
@-webkit-keyframes pulsate{
  30%{
opacity: 1;
-webkit-transform: translateX(-50%) translateY(-50%) scale(1);
  }
100%{
opacity: 0.3;
-webkit-transform: translateX(-50%) translateY(-50%) scale(0.5);
}
}
@-moz-keyframes pulsate{
  30%{
opacity: 1;
-moz-transform: translateX(-50%) translateY(-50%) scale(1);
  }
100%{
opacity: 0.3;
-moz-transform: translateX(-50%) translateY(-50%) scale(0.5);
}
}
@-ms-keyframes pulsate{
  30%{
opacity: 1;
-ms-transform: translateX(-50%) translateY(-50%) scale(1);
  }
100%{
opacity: 0.3;
-ms-transform: translateX(-50%) translateY(-50%) scale(0.5);
}
}
@-keyframes pulsate{
  30%{
opacity: 1;
transform: translateX(-50%) translateY(-50%) scale(1);
  }
100%{
opacity: 0.3;
transform: translateX(-50%) translateY(-50%) scale(0.5);
}
}
</style>

Simpan dan sekarang untuk penempatan  kode HTML, silahkan !

• Masuk pada Tataletak
• Add Gadget/ HTML Javascript
• Masukan kode dibawah ini 

<ul class="sonarmenu">
<li><a href="#">Home</a></li>
<li><a href="#">Tools</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Forums</a></li>
</ul>

Catatan : 

• Untuk penambahan link , buatlah kode seperti ini <li><a href="#">Forums</a></li> dan simpan sebelum kode </ul> 
• "#" Ganti dengan link brada.

Source : http://www.dynamicdrive.com/style/csslibrary/item/css3_sonar_menu/