Cara Memnuat Menu Navigasi Blogger CSS3 Sonar Menu

Cara meletakkannya, ikuti langkah-langkah di bawah ini:
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>

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>

 Keterangan:

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

 Selamat Mencoba

Demo