Css Icon Hover Effect Navigation Bar For Blogger

Sedikit Info Seputar Css Icon Hover Effect Navigation Bar For Blogger Terbaru 2017 - Hay gaes kali ini team Android Apps For Free, kali ini akan membahas artikel dengan judul Css Icon Hover Effect Navigation Bar For Blogger , kami selaku Team Android Apps For Free telah mempersiapkan artikel ini untuk sobat sobat yang menyukai Android Apps For Free. semoga isi postingan tentang Artikel menu, yang saya posting kali ini dapat dipahami dengan mudah serta memberi manfa'at bagi kalian semua, walaupun tidak sempurna setidaknya artikel kami memberi sedikit informasi kepada kalian semua. ok langsung simak aja sob
Judul: Berbagi Info Seputar Css Icon Hover Effect Navigation Bar For Blogger Terbaru
link: Css Icon Hover Effect Navigation Bar For Blogger

Berbagi Css Icon Hover Effect Navigation Bar For Blogger Terbaru dan Terlengkap 2017

Every web developers using Css3 Icon hover effect during their development process.There have many techniques they have to focus on.Like faster loading,efficient and handling easier.There have lot of advantages of using Css3 hover effects,web developers and webmasters know it well.Designing website also learning process.On this tutorials also show us how to use Css3 Icon hover effect  navigation bar without using any JavaScript library. Css3 always helpful to customize our animation easily.It is very easy because optimized by HTML.Hope every visitors have browsing experience with,how is the Css3 Icon hover effect works.

Navigation bar is very important  bloggers. We can navigate our pages, categories without having problem.There have lot of benefits of using Css3 Icon hover effect navigation bar.It help our audience to find our important pages like contact us page, About us, Advertising etc.And other thing is, if you choose some nice looking navigation bar, it help to make your blog attractive.By studying this tutorial, you can learn how to add Css3 Icon hover effect navigation bar to blogger.This is very useful
web developers as well. You can check demo by demo button.How this helpful to you.

How to add Css Icon Hover Effect Navigation Bar

1. Go to Blogger Dashboard > Template

2. Backup your template
3. Click on Edit HTML
4. Find  ]]></b:skin>   and add below code just above it

/* The CSS Code for the menu starts here bloggertrix.com */ #btrix-nav {margin: 100px auto;list-style: none;width: 632px;height: 87px;overflow-y: hidden;}
#btrix-nav li {float: left;}
#btrix-nav li a {display: block;color: white;width: 120px;height: 61px;margin-top: 24px;text-decoration: none;text-align: center;border-top: 1px solid #bbb;border-bottom: 1px solid #555;}
#btrix-nav li a span.aname {font: bold 17px/61px "Arial";color: #fff;text-transform: uppercase;cursor: pointer;position: relative;top: 0;transition: top .5s ease;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);}
#btrix-nav li a img {position: relative;top: 0;transition: top .5s ease;}
#btrix-nav li a:hover {cursor: pointer;}
#btrix-nav li a:hover img {top: -85px;}
#btrix-nav li a:hover .aname {top: 85px;}
#btrix-nav li:nth-child(1) a {background: #3eb006;border-radius: 5px 0 0 5px;border-left: 1px solid #bbb;}
#btrix-nav li:nth-child(2) a {background: #9bc704;}
#btrix-nav li:nth-child(3) a {background: #0dc3ff;}
#btrix-nav li:nth-child(4) a {background: #51a2ec;}
#btrix-nav li:nth-child(5) a {background: #6e3cab;border-radius: 0 5px 5px 0;border-right: 1px solid #555;}

5. Go to blogger Layout
6. Click Add Gadget and select 'HTML/Javascript'
7. Paste below code.

<div id="btrix-nav">
<li> <a href="#"><span class="aname">Homes</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilaC7obV5dpwuWtFyRaMB3jv0goirv9vABvtCoCRS3n2zlTghl3fVhuMgtnkpUcu9N0K-iJgo_Bxaqj02Pdq-Re3VlTUYy8Jz5nF32h1QiHt9EvGuBpQ_vcUqdWLNeygDsG-2MVV3YL_c/s1600/btrix-home.png" /> </a> </li>
<li> <a href="#"> <span class="aname">Download</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwzMfs1-tx4VlCbHYBjU0vsBAoyL85ViaS5Z5P4dZPkOZiR5RClMsDkqVN8_rK7EbC_og03ED01oyM_XvVJ3gpAmPagMEmp0HPkgemRkXQJXY_v1VZbvN5KkD6gIteXbcD8g1uXq-WJfk/s1600/btrix-download.png" /> </a> </li>
<li> <a href="#"> <span class="aname"> MySql</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFVjon0MBhWtvCy_w2sCuikJgLg9C-osaIJXJmDEkpavFP3M9UJxx2IuC7AXD5tZcwOkd_qDCkEtfk6ssTFs256Fr0wLOrEW8FfyFd_VHPXcW_PRUebcVuVfPyl9CrBtiUDEj4lRYT0AU/s1600/btrix-mysql.png" /> </a> </li>
<li> <a href="#"> <span class="aname"> Html</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXJkH-SmodoSHGu4sUP5GxkdASIkV6oII4khtHB-tccQV9bdOWO2x_J8l37S9vVbUD5x9-3hlSS7S83e0PLRiRl8VmZoEKu2EUgkzK0Bqz7xbgGe9DeX-g1kmGKcJiMd_JKtG-PD6fO6A/s1600/Btrix-html.png" /> </a> </li>
<li> <a href="#"> <span class="aname">Contact</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmmMBhl7Cwltfl18fUXwoEEYyzLHWVHv-DwC0Axa6Io7eUmiKqiBfIGHi2mZTy9IcQEQ1ucGz9OXbq42QyoY4HSRUjh76_kHOd5vA-fJXYFRMKcQl1sYY8CQx7sh4XhkihyphenhyphenhOSGqMlBic/s1600/btrix-contact.png" /> </a> </li> </div>

Replace # with your links.

8. Now save your HTML/Javascript'.

You are done. If you have any problem related to this Css Icon Hover Effect Navigation Bar. Just leave a comment.I will help to you.

Itulah sedikit Artikel Css Icon Hover Effect Navigation Bar For Blogger terbaru dari kami

Semoga artikel Css Icon Hover Effect Navigation Bar For Blogger yang saya posting kali ini, bisa memberi informasi untuk anda semua yang menyukai Android Apps For Free. jangan lupa baca juga artikel-artikel lain dari kami.

Terima kasih Anda baru saja membaca Css Icon Hover Effect Navigation Bar For Blogger