Cara Membuat Css Spotlight Menu Di Blogger

Seperti halnya Css circle menu ,Css spotlight menu ini juga di buat menggunakan css dan css3 border radius property dan transisi membentuk background lingkaran,pada menu ini ketika anda menujukan mouse anda ke menu maka menu tersedbut akan bersinar membentuk lingkaran pada backgroud menu.Background akan bekerja pada semua browser pada umumnya termasuk IE9,yang mendukunng Css3 termasuk FF3.5+, Safari 3.1+, Google Chrome, and Opera 11.6+.

Lihat Demo

Adapun cara pembuatanya adalah :

1. login ke blogger dengan ID sobat.

2. Pilih More options --->pilih Templete.

4. Backup/Restore Templete anda.

3. Pilih Edit HTML.

5. Centang tulisan "expand template widget".

6. Lalu cari kode (untuk mempermudah pencarian tekan F3 atau ( Ctrl+ F )) ]]></b:skin> .

7. Letakan (copy&paste) CSS code di bawah ini diatas kode ]]></b:skin>

.spotlightmenu{
width: 100%;
overflow:hidden;
}

.spotlightmenu ul{
margin: 0;
padding: 0;
font: bold 14px Verdana; /* font style and size */
list-style-type: none;
text-align: center; /* "left", "center", or "right" align menu */
}

.spotlightmenu li{
display: inline-block;
position:relative;
padding: 5px;
margin: 0;
margin-right: 5px; /* right margin between menu items */
}
.spotlightmenu li a{
display:inline-block;
padding: 5px;
min-width:50px; /* horizontal diameter of spotlight */
height:50px; /* vertical diameter of spotlight */
text-decoration: none;
color: black;
margin: 0 auto;
overflow:hidden;
-moz-transition: all 0.5s ease-in-out; /* CSS3 transition to animate all A properties */
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

.spotlightmenu li:hover a{
color: white;
background: #a71b15; /* background color of spotlight */
-webkit-border-radius: 50%; /* large radius to create circular borders */
-moz-border-radius: 50%;
border-radius: 50%;
}

.spotlightmenu li a span{
position:relative;
top:35%; /* move text down so it appears centered within menu item */
}

2.Kode Html copy kode di bawah ini dan pastekan diantara kode <body> dan kode </body> di mana anda ingin menampilkan menu tersebut.

<div class="spotlightmenu">
<ul>
<li><a href="http://bambangpage.blogspot.com/">Home</a></li>
<li><a href="http://gudangmenu.blogspot.com/">Gudang Menu</a></li>
<li><a href="http://cilimoes.blogspot.com/">Cilimoes</a></li>
<li><a href="">Forums</a></li>
<li><a href="">JavaScript</a></li>
</ul>
</div>

8.Klik save templete button

9.selesai....

Selamat Mencoba dan semoga bermanfaat......

Jika Anda Menyukai Artkel Seperti Di atas,Link back ke artikel ini dengan mengcopy salah satu kode di bawah ini