Membuat Curved Glossy Navigation Bar untuk Blogger

Ini adalah Curved Glossy Navigation Bar untuk Blogger. Saya akan menjelaskan bagaimana untuk menambahkannya ke blogger. Menu ini baik-baik saja bekerja dengan setiap browser internet modern. Anda dapat menghubungkan dengan Anda halaman utama dengan menggunakan navigasi bingkai Link. Saya menggunakan CSS3 dan HTML, Silakan anda Coba

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 ]]> </ b: skin> dengan menggunakan Ctrl + F 

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

/* The CSS Code for the menu starts here Tempat Blogging */
.Tblogging_glossymenu1{
 position: relative;padding: 0 0 0 34px;margin: 0 auto 0 auto;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8brCCc2XkiUFmkDVrpLArzaeimq_HdWjLPleuw45HNKadJddolxvzswaFj9tvzPML6Ga0ToZu06q28Bz2aHFPhE9JckYf8FKZjKwZCA8mQMvZxUfIqfSswnTbJP_8CYv0bJzd5hZ5zm4/s46/Tb_menupu_bg.gif) repeat-x;
 height: 46px;
 list-style: none;
}
.Tblogging_glossymenu1 li{
 float:left;
}
.Tblogging_glossymenu1 li a{
 float: left;display: block;color:#000;
 text-decoration: none;
 font-family: sans-serif;
 font-size: 13px;
 font-weight: bold;
 padding:0 0 0 16px;
 height: 46px;
 line-height: 46px;
 text-align: center;
 cursor: pointer;
}
.Tblogging_glossymenu1 li a b{
 float: left;display: block;padding: 0 24px 0 8px;
}
.Tblogging_glossymenu1 li.current a, .Tblogging_glossymenu1 li a:hover{
 color: #fff;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZOOv_BUDKQgeFj3CCdHAI2I1AQJs93WWtZJeHWF887rasU6VHeKdGU7u0oFYa_a3DCxVbHfo_C3KRZlGV6Z9Dnmr2yqexslCwCKYW38xHZ0zBrWuMIdjEFt1mpvUitMNuX30IvywxhOw/s46/Tb_menupu_hover_left.gif) no-repeat;
 background-position: left;
}
.Tblogging_glossymenu1 li.current a b, .Tblogging_glossymenu1 li a:hover b{
 color: #fff;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9SuKQN7pvvrgD3THL6G84arJBq3JPxcinWqb1JTWUIlmHm3l5Z0_xkqILEZLOTS-HFzuikkn7UKAwJ4Zr6pWYWZPnGlefqKZHNYIXlLVACY0pd2HvPwA9o4IIXxk2s1tZhXPltx3A5nw/s250/Tb_menupu_hover_right.gif) no-repeat right top;
}

6. Pergi ke blogger dan klik Layout

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

8. Paste kode di bawah ini.

<ul class="Tblogging_glossymenu1">
 <li class="current"><a href="#"><b>Home</b></a></li>
 <li><a href="#"><b>CSS</b></a></li>
 <li><a href="#"><b>Forums</b></a></li>
 <li><a href="#"><b>Webmaster Tools</b></a></li>
 <li><a href="#"><b>JavaScript</b></a></li>
 <li><a href="#"><b>Contact Us</b></a></li>
</ul>

Ganti # dengan link Anda.

9. Sekarang menyimpan HTML / Javascript '.

Itulah Cara Untuk Membuat Curved Glossy Navigation Bar untuk Blogger. Sekian dulu untuk artikel kali in, semoga bermanfaat.
Komen Ya

Share this post