Cara membuat menu spotlight dengan CSS3 di blog

Menu Spotlight memanfaatkan properti radius-border CSS3 dan transisi untuk menambahkan latar belakang bulat ke item menu ketika mouse diarahkan ke item menu masing-masing. Hasilnya adalah seperti flash (menyala seperti kilatan cahaya).

View Demo

KODE CSS 
 

.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 */
}

• Silahkan masuk ke akun blogger anda kemudian -> Klik Drop Down Menu
• Kemudian pilih -> Template -> Backup template anda terlebih dahulu -> Edit HTML  

• Cari tag/kode ]]></b:skin> tekan CTR+F untuk memudahkan pencarian
• Pastekan kode CSS tepat diatas tag  ]]></b:skin> 
• Simpan template... 

 KODE HTML 

<div class="spotlightmenu">
<ul>
<li><a href="http://jalu-pangna.blogspot.com"><span>Home</span></a></li>
<li><a href="http://jalu-pangna.blogspot.com/p/blog-page_14.html"><span>Site map</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/tips%20dan%20triks%20blog"><span>Tips dan trik blog</span></a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/CSS"><span>CSS</span></a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/jquery-javascript"><span>JQueryJavaScript</span></a></li>
  <li><a href="http://jalu-pangna.blogspot.com/search/label/widget"><span>Gadget/widget</span></a></li>
</ul>
</div>

• Masuk lagi ke Blogger -> Tata Letak ->Tambahkan Gadget -> HTML/Javascript 
• Pastekan kode di atas didalamnya

CATATAN: 

• Silahkan Ganti link warna kuning dengan URL/Link anda
• Ganti judul Menu sesuai dengan menu yang anda inginkan
• Simpan gadget, selesai... 

Written by: jalupangna

Wawasan spiritual dan blogging, Updated at: 20.52