Menu Bar Keren dengan Tampilan Circle Style

Salam Blogger, kali ini Spongeblog akan berbagi widget menu bar dengan tampilan circle style. Seperti yang kita ketahui bersama bahwa menu bar sangat penting bagi blog kita. Dengan menu bar memudahkan pengunjung dalam menavigasi suatu blog. Menu bar juga sangat berguna untuk pengkategorian topik pada blog kita, terlebih kalau blog kita mempunyai bermacam-macam topik. Ini juga tentunya memudahkan pengunjung dalam menemukan konten yang mereka cari, sehingga ini disukai oleh mesin pencari.

Ada beberapa desain menu bar yang dibuat dengan CSS3 dan HTML yang membuat tampilan menu bar di blog kita semakin terlihat menarik dan keren. Salah satunya adalah menu bar dengan tampilan Circle Style.

Lebih jelasnya lihat screenshotnya:

Tertarik untuk menambahkan menu bar circle style di blog sahabat? Simak tutorial dibawah ini

Langkah 1

1. Pergi ke Blogger Dashboard >> Template

2. Klik Edit HTML

3. Cari]]> </ b: skin> (CTRL+F) dan tambahkan kode berikut tepat di atasnya

/* The CSS Code for the menu bar cyrcle menu bar */

.circlemenu{

width: 100%;

overflow:hidden;

}

.circlemenu ul{

margin: 0;

padding: 0;

font: bold 14px Verdana;

list-style-type: none;

text-align: center;

}

.circlemenu li{

display: inline;

margin: 0;

}

.circlemenu li a{

display:inline-block;

text-align:center;

text-decoration: none;

color: white;

background:#b30707;

margin: 0;

margin-right:5px;

width:100px;

height:100px;

border-radius: 400px;

-moz-border-radius: 400px;

-webkit-border-radius: 400px;

}

.circlemenu a span{

position:relative;

top:40%;

}

.circlemenu li a:visited{

color: white;

}

.circlemenu a:hover{

background: #ff1774;

}

 Langkah 2

1. Pergi ke blogger >> Tata Letak

2. Klik Tambah Gadget dan pilih 'HTML / Javascript'

3. Paste kode di bawah ini di kolom gadget

<div class="circlemenu">

<ul>

<li><a href="#"><span>Home</span></a></li>

<li><a href="#"><span>Download</span></a></li>

<li><a href="h#"><span>CSS</span></a></li>

<li><a href="#"><span>About</span></a></li>

<li><a href="http://www.bloggertrix.com/"><span>Contact Us</span></a></li>

</ul>    

</div>

Catatan: Ganti # dengan link Anda.

4. Simpan

Itulah tutorial membuat menu bar dengan tampilan Cyrcle Style. Kalau ada pertanyaan seputar tutorial diatas, sahabat bisa menuliskan pertanyaan pada kolom komentar dibawah ini. Semoga bermanfaat. Happy blogging :)