Menu Navigation Bergaya Lingkaran Untuk Blogger

Ini merupakan Gaya Lingkaran bar navigasi. Saya akan menjelaskan bagaimana untuk menambahkannya Menu Navigation Bergaya Lingkaran Untuk Blogger. Menu ini baik-baik saja bekerja dengan setiap browsers. Anda dapat menghubungkan dengan halaman utama Anda dengan menggunakan navigasi bingkai Link. Saya menggunakan CSS3 dan HTML, Silakan Cek demo. Ok Langsung saja simak artikel berikut.

Demo

1. Masuk ke akun blogger dan klik drop down.

2. Sekarang pilih "Template" Seperti bawah.

3. Sekarang Anda dapat melihat Live pada blog, klik EDIT HTML Button "

4. Cari tag ini ]]> </ b: skin> dengan menggunakan Ctrl + F

5. Paste kode di bawah Sebelum tag ]]> </ b: skin>

/* Start Script Menu Bergaya Lingkaran Tempat Blogging */
<style type="text/css">
.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;
}
</style>
/* End Script Menu Bergaya Lingkaran Tempat Blogging */

6. Pergi ke blogger dan klik Layout

7. Klik Tambah Gadget dan pilih 'HTML / Javascript

8. Paste kode di bawah ini. 

<div class="circlemenu">
<ul>
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>Download</span></a></li>
<li><a href="#"><span>CSS</span></a></li>
<li><a href="#"><span>About</span></a></li>
<li><a href="http://mas-basir.blogspot.com/"><span>Contact Us</span></a></li>
</ul>
</div>

Informasi : Ganti # dengan link Anda.

9. Sekarang menyimpan HTML / Javascript '.

Dan selesai juga Tutorial kali ini. Sekian dulu Postingan Artikel kali ini yang membahas tentang Menu Navigation Bergaya Lingkaran Untuk Blogger. semoga artikel di atas dapat membantu anda, dan bermanfaat bagi anda.

Share this post