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 .
Kustomisasi
- Masuk pada Edit HTML
- Cari Kode ]]></b:skin>
- Masukan Kode dibawah ini tepat diatas kode ]]></b:skin>
<style>Simpan dan sekarang untuk penempatan kode HTML, silahkan !
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>
- 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/
Keyeen wae eung tutorna.. aya ganjelan saalit ieuteh sabenerna.. asa kurang cocok sareng nama domain,duniaradioku sareng tutorial :)
BalasHapustapi tetep kecepirit :)
awalnya kang saya mau membahas dunia radio tapi berhubung blog kesayngan di banned gara-gara ikut kontes .. jadi saya putuskan untk menjadikan blog ini utama dan membahas tutor kang .. padahal awal mula saya ngeblog membahas kebudayan sunda ..kabawa angin kang !!
Hapushehehe.. Ulin Karuhun atuh di update kanggo budaya sunda kang
Hapusiya kang siap eta ge ari bahan mah tos nyampak mung wegah na ari kana budaya teh sok rada liat hehe
HapusKeren pisan tutornya kang ;)
BalasHapusOh..ya baru nyadar..logo di headernya di ganti ya kang..
iya mas bud.. ada rencana ganti dari originally blog contest menjadi action blog ,saya putuskan untuk benar-benar membahas tutor blog .apapun resikonya , tutornya spesial untuk newbie makanya tutor saya ringan-ringan .. mau benar-benar ganti nama templatenya belum kelar-kelar ,, Full Responsive maunya.
HapusTutorial dari Kang Ruly selalu bagus uy hehehe.... :)
BalasHapusbiasa aja kang .. itu ge menang panggih hehe
Hapussaatnya diterapkan kang di blog ane ehehe :D
BalasHapussilahkan sob dicoba barangkali cuco ..
HapusKang Ruly tea atuh tukang ngoprek template,nepi kapoho kana siaran di radio heuheuheu,,,,
BalasHapussaking seriusna kang Rul ngoprek-ngoprek template jadina pararohonya hehe...
Hapushaha bener kang lain bohong eta teh ...
HapusMaksudnya sonar menu itu menu yang mengarahkan ke situs lain yah kang atau gimana? Maklum masih pemula hehe...
BalasHapuskayaknya bukan sonar gitar deh mas :D
Hapusya seperti menu yang biasa ...
Hapusdan yg pasti bukan sonarta yang rhoma irama hehe
oh begitu yah, ngerti saya sekarang hehe...
Hapusnice lah ngertos mah hehe
Hapusdinamakan sonar itu karena efek mouseovernya kayanya masbero hhi :D
Hapus*bisa dicoba nih kalo pas ada wkt :)
mantap kang rul menunya unik seperti namanya, tapi hasilnya keren, sonar menu..
BalasHapusdibuat seunik mungkin mas ...
Hapuswah mangtab nih dah make kode css3.
BalasHapustapi kenapa namanya sonar kang? ^_^
kan efectnya seperti sonar sob ...
Hapushampir setahun lebih saya pake tamplate yang pake menu seperti ini, emang berguna banget, tapi keluhannya blog jadi berat lodingnya...liat demonya jadi kepinginpasang lagi...ngga nahankalau liat yang keren teh da....;o)
BalasHapuspasang aja kang itung-itung reuni he
Hapuswaduh laman demo nya penuh properto demo semua..
BalasHapussy jadi kesulitan mencari menunya nih
remotenya dinyalain dulu mas biar tahu yang dimaksud hehe...
Hapuswah disini keren-keren ya tutorialnya.
BalasHapusAda yah Kang Menu Blogger nama nya kaya Drummer, juga Eletric Guitar
BalasHapusNice deh Kang Ruly, ijin nyimak , tapi saya masih newbie gak apa2 Kang.? tt3tt3tt3