Showing posts with label Menu bar. Show all posts
Showing posts with label Menu bar. Show all posts

Thursday, July 30, 2015

Colorful JQuery Unique Drop Down Menu bar for Blogger

File Under: , , , 22 comments

This is a unique colourful drop down menu bar implemented by me. Now days there are lot of jQuery menu bar tutorials available on the internet that you can use it for blogger.However i focused on to create colourful menubar. Because its hard to find a kind of menubars. I hope you like this. Please dont forget to share with your social profiles.


Check all menubars from bloggertrix.com

Bloggertrix menu bars

Colorful_Unique_Drop_Down_Menu



Awesome 3d Effect Css Menu bar for Blogger


1. Go to Blogger Dashboard > Template
2. Find </head>
3. Paste below code just above it.

<link href="http://preview.bloggertrix.com/coloful_unique_dropdown_menu/js/boilerplate.css" rel="stylesheet" type="text/css">
<link href="http://preview.bloggertrix.com/coloful_unique_dropdown_menu/js/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
<link href="http://preview.bloggertrix.com/coloful_unique_dropdown_menu/js/SpryMenuBarVertical.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Noto+Serif' rel='stylesheet' type='text/css'>
<script src="http://preview.bloggertrix.com/coloful_unique_dropdown_menu/js/respond.min.js"></script>
<script src="http://preview.bloggertrix.com/coloful_unique_dropdown_menu/js/SpryMenuBar.js" type="text/javascript"></script>
<style>
.menubar {width: 750px;float: left;-moz-box-shadow: 0px 0px 19px #000000;-webkit-box-shadow: 0px 0px 19px rgb(0, 0, 0);box-shadow: 0px 0px 8px rgb(0, 0, 0);padding: 7px;border-radius: 4px;position: relative;margin-top: 50px;background-color: rgb(255, 255, 255);margin-left: 23%;
</style>
     
4.  Again find </body>
5. Paste below code just above it.
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"http://preview.bloggertrix.com/coloful_unique_dropdown_menu/js/SpryMenuBarDownHover.gif", imgRight:"http://preview.bloggertrix.com/coloful_unique_dropdown_menu/js/SpryMenuBarRightHover.gif"});
var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgRight:"http://preview.bloggertrix.com/coloful_unique_dropdown_menu/js/SpryMenuBarRightHover.gif"});
</script>


6. Now save your  Template  and go to blogger Layout
7. Click Add Gadget and select 'HTML/Javascript'
8. Paste below code.
<div class="menubar"> <ul id="MenuBar1" class="MenuBarHorizontal"> <li style="text-indent: 10px;width:80px;height:44px;background-color:#1d75bd";><a id="navhd" href="#">Home</a></li> <li class="choosedestination"><a id="navhd" class="MenuBarItemSubmenu" href="http://www.bloggertrix.com/" style="">Free blogger tricks</a> <ul id="destination1"> <li style="height: 34px;line-height: 10px;"><a class="MenuBarItemSubmenu" href="#">Item 3.1</a> <ul id="destination1" class="" style="margin-left: 175px;margin-top: -2px;"> <li id="desti_nav"><a href="#" class="">Item 3.1.1</a></li> <li id="desti_nav"><a href="#" class="">Item 3.1.2</a></li> </ul> </li> <li id="desti_nav"><a href="#">Item 3.2</a></li> <li id="desti_nav"><a href="#">Item 3.3</a></li> <li id="desti_nav"><a href="#">Item 3.3</a></li> <li id="desti_nav"><a href="#">Item 3.3</a></li> <li id="desti_nav"><a href="#">Item 3.3</a></li> <li id="desti_nav"><a href="#">Item 3.3</a></li> <li id="desti_nav"><a href="#">Item 3.3</a></li> <li id="desti_nav"><a href="#">Item 3.3</a></li> <li id="desti_nav"><a href="#">Item 3.3</a></li> </ul> </li> <li class="holidaytp" style=""><a id="navhd" class="MenuBarItemSubmenu" href="http://www.bloggertrix.com/">CSS Tricks</a> <ul id="holidayt" > <li style="height: 34px;line-height: 10px;"><a class="MenuBarItemSubmenu" href="#">Item 3.1</a> <ul id="holidayt" style="margin-left: 175px;margin-top: -2px;"> <li id="holiday_nav"><a href="#">Item 3.1.1</a></li> <li id="holiday_nav"><a href="#">Item 3.1.2</a></li> </ul> </li> <li id="holiday_nav"><a href="#">Item 3.2</a></li> <li id="holiday_nav" ><a href="#">Item 3.3</a></li> </ul> </li> <li class="retriveb" style=" width: 145px;"><a id="navhd" class="MenuBarItemSubmenu" href="http://www.bloggertrix.com/">JQuery Menu bars</a> <ul id="retrivemy"> <li style="height: 34px;line-height: 10px;"><a class="MenuBarItemSubmenu" href="#">Item 3.1</a> <ul id="retrivemy" style="margin-left: 175px;margin-top: -2px;"> <li id="Retrivebk"><a href="#">Item 3.1.1</a></li> <li id="Retrivebk"><a href="#">Item 3.1.2</a></li> </ul> </li> <li id="Retrivebk" ><a href="#">Item 3.2</a></li> <li id="Retrivebk" ><a href="#">Item 3.3</a></li> </ul> </li> <li class="makeanen" style="width: 127px;" ><a id="navhd" class="MenuBarItemSubmenu" href="#">Make an Enquiry</a> <ul id="makenanEnquery"> <li style="height: 34px;line-height: 10px;"><a class="MenuBarItemSubmenu" href="#">Item 3.1</a> <ul id="makenanEnquery" style="margin-left: 175px;margin-top: -2px;"> <li id="mkeinq"><a href="#">Item 3.1.1</a></li> <li id="mkeinq"><a href="#">Item 3.1.2</a></li> </ul> </li> <li id="mkeinq"><a href="#">Item 3.2</a></li> <li id="mkeinq"><a href="#">Item 3.3</a></li> </ul> </li> <li style="text-indent:10px;width: 109px;background-image: url(http://preview.bloggertrix.com/coloful_unique_dropdown_menu/js/images/naw-bar6.png);background-repeat: repeat-x; margin-left: 1px;"><a id="navhd" href="#">Contact Us</a> </ul> </div>  

7. Now save your HTML/Javascript'.You are done. If you have any problem related to this unique Menu bar. Just leave a comment.I will help to you.

Author Bio: Sohan Jayasinghe is the owner and author of Bloggertrix.com .He has been blogging since 2009 and writing Blogger trix since 2010.If you want to contact him, Just leave a message via contact us page or connect with facebook or twitter
Read More

Wednesday, June 10, 2015

Awesome 3d Effect Css Menu bar for Blogger

File Under: , , , 26 comments

Today i came up with new blogger widget, its a smooth 3d effect menu bar with jquery.You can add it to your blogger and make it some more nice.From the beginning, i gave lot of menu bar collection for blogger.
Did you check them  all?

If not Click below link
Awesome CSS Menubar For blogger

3d_Effect_Css_Menu



Awesome 3d Effect Css Menu bar for Blogger


1. Go to Blogger Dashboard > Template
2. Find ]]></b:skin>
3. Paste below code just below it.

<style>
@import url(http://fonts.googleapis.com/css?family=Raleway);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {margin: 0;padding: 0;border: 0;list-style: none;line-height: 1;display: block;position: relative;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
#cssmenu:after,
#cssmenu > ul:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}
#cssmenu #menu-button {display: none;}
#cssmenu {width: auto;font-family: Raleway, sans-serif;line-height: 1;}
#cssmenu > ul {background: #3db2e1;}
#cssmenu > ul > li {float: left;-webkit-perspective: 1000px;-moz-perspective: 1000px;perspective: 1000px;}
#cssmenu.align-center > ul {font-size: 0;text-align: center;}
#cssmenu.align-center > ul > li {display: inline-block;float: none;}
#cssmenu.align-right > ul > li {float: right;}
#cssmenu > ul > li > a {padding: 16px 20px;font-size: 14px;color: #ffffff;letter-spacing: 1px;text-transform: uppercase;text-decoration: none;background: #3db2e1;-webkit-transition: all .3s;-moz-transition: all .3s;
  -o-transition: all .3s;transition: all .3s;-webkit-transform-origin: 50% 0;-moz-transform-origin: 50% 0;transform-origin: 50% 0;-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;transform-style: preserve-3d;
}
#cssmenu > ul > li.active > a {color: #dff2fa;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover {color: #dff2fa;-webkit-transform: rotateX(90deg) translateY(-23px);-moz-transform: rotateX(90deg) translateY(-23px);transform: rotateX(90deg) translateY(-23px);
  -ms-transform: none;
}
#cssmenu > ul > li > a::before {position: absolute;top: 100%;left: 0;z-index: -1;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;width: 100%;height: 100%;padding: 16px 20px;color: #dff2fa;background: #19799f;content: attr(data-title);
  -webkit-transition: background 0.3s;-moz-transition: background 0.3s;transition: background 0.3s;-webkit-transform: rotateX(-90deg);-moz-transform: rotateX(-90deg);transform: rotateX(-90deg);
  -webkit-transform-origin: 50% 0;-moz-transform-origin: 50% 0;transform-origin: 50% 0;-ms-transform: translateY(- -18px);
}
#cssmenu > ul > li:hover > a::before,
#cssmenu > ul > li > a:hover::before { background: #3db2e1;}
#cssmenu.small-screen {width: 100%;}
#cssmenu.small-screen > ul,
#cssmenu.small-screen.align-center > ul {
  width: 100%;
  text-align: left;
}
#cssmenu.small-screen > ul > li,
#cssmenu.small-screen.align-center {
  float: none;
  display: block;
  border-top: 1px solid rgba(100, 100, 100, 0.1);
}
#cssmenu.small-screen > ul > li:hover > a,
#cssmenu.small-screen > ul > li > a:hover {
  color: #dff2fa;
  -webkit-transform: none;
  -moz-transform: none;
  transform: none;
  -ms-transform: none;
}
#cssmenu.small-screen > ul > li > a::before {
  display: none;
}
#cssmenu.small-screen #menu-button {
  display: block;padding: 16px 20px;cursor: pointer;font-size: 14px;text-decoration: none;color: #ffffff;text-transform: uppercase;letter-spacing: 1px;background: #3db2e1;}
#cssmenu.small-screen #menu-button:after {
  content: "";position: absolute;right: 20px;top: 17px;display: block;-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;border-top: 2px solid #ffffff;border-bottom: 2px solid #ffffff;width: 22px;height: 3px;
}
#cssmenu.small-screen #menu-button.menu-opened:after {
  border-top: 2px solid #dff2fa;
  border-bottom: 2px solid #dff2fa;
}
#cssmenu.small-screen #menu-button:before {
  content: "";position: absolute;right: 20px;top: 27px;display: block;width: 22px;
  height: 2px;
  background: #ffffff;
}
#cssmenu.small-screen #menu-button.menu-opened:before {
  background: #dff2fa;
}

  </style>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script charset='utf-8' src='http://preview.bloggertrix.com/3d_cssmenu/script.js' type='text/javascript'/> 
       

4. Now go to blogger Layout
5. Click Add Gadget and select 'HTML/Javascript'
6. Paste below code.
<div id='cssmenu'>
<ul>
   <li class='active'><a href='#'>Home</a></li>
   <li><a href='#'>Products</a></li>
   <li><a href='#'>Company</a></li>
   <li><a href='#'>Contact</a></li>
</ul>
</div>


7. Now save your HTML/Javascript'.You are done. If you have any problem related to this 3d Effect Css Menu bar. Just leave a comment.I will help to you.

Author Bio: Sohan Jayasinghe is the owner and author of Bloggertrix.com .He has been blogging since 2009 and writing Blogger trix since 2010.If you want to contact him, Just leave a message via contact us page or connect with facebook or twitter
Read More

Sunday, September 8, 2013

Sky Blue Blogger Navigation Bar With Social Icons

File Under: , , 5 comments

Navigation bar is very important  part of your website.Because it helps visitors to navigate our website and make easy to  them find relevant content of our site.Therefore we have to use attractive blogger navigation bar for our blogs.Its not very hard job to find attractive blogger navigation bar. Bloggertrix.com provided lot of navigation's bars.Just check Menu Bars under categories.

Using CSS we can design more attractive blogger navigation bars.CSS language is very easy to learn and very flexible.We can apply CSS to any webpages.There have ton of tutorials about CSS languages.You can copy paste any code and modify blogger navigation bar to suit your needs.

Today I'm gonna explain about how to add Sky blue blogger navigation bar with social icons.Pretty huh? Will see how can we do it.Actually i want to say.This blogger navigation bar helps you to add social profiles links as well.However just have a look demo page.You can get a idea about it very well.Let see, how to add this for blogger.

Sky+Blue+Blogger+Navigation+Bar


Some of stylish navigation bars.
           Css Icon Hover Effect Navigation Bar For Blogger
           Css3 Dark Blue Navigation Bar For Blogger
           Css3 Navigation Bar With Google Custom Search Box
           Get All Navigation bars

How to add Sky Blue Blogger Navigation Bar With Social Icons


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
#topMenu{border:1px solid #7DF; border-radius:6px; background:#00AAEB; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnVxjx2WMq8D6oyfvbPbF90ZTAT89EOzrJWo0KHRdxEdv-lFpbcA3kJKUMUgIybmRwoj_lBN0kouj5kLYfmexREOEv5Vy3Jmjg_m_nmAyi4ROPIjQnNh64bJEPO7mmZe5McO3EJI34o04/s1600/bk_topmenu.png) 100% 0 no-repeat,-moz-linear-gradient(top, #00c1fa 0%,#0094dd 100%); /* FF3.6+*/background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnVxjx2WMq8D6oyfvbPbF90ZTAT89EOzrJWo0KHRdxEdv-lFpbcA3kJKUMUgIybmRwoj_lBN0kouj5kLYfmexREOEv5Vy3Jmjg_m_nmAyi4ROPIjQnNh64bJEPO7mmZe5McO3EJI34o04/s1600/bk_topmenu.png) 100% 0 no-repeat,-webkit-gradient(linear,left top,left bottom,color-stop(0%,#00c1fa),color-stop(100%,#0094dd)); /* Chrome,Safari4+*/background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnVxjx2WMq8D6oyfvbPbF90ZTAT89EOzrJWo0KHRdxEdv-lFpbcA3kJKUMUgIybmRwoj_lBN0kouj5kLYfmexREOEv5Vy3Jmjg_m_nmAyi4ROPIjQnNh64bJEPO7mmZe5McO3EJI34o04/s1600/bk_topmenu.png) 100% 0 no-repeat,-webkit-linear-gradient(top, #00c1fa 0%,#0094dd 100%); /* Chrome10+,Safari5.1+*/background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnVxjx2WMq8D6oyfvbPbF90ZTAT89EOzrJWo0KHRdxEdv-lFpbcA3kJKUMUgIybmRwoj_lBN0kouj5kLYfmexREOEv5Vy3Jmjg_m_nmAyi4ROPIjQnNh64bJEPO7mmZe5McO3EJI34o04/s1600/bk_topmenu.png) 100% 0 no-repeat,-o-linear-gradient(top, #00c1fa 0%,#0094dd 100%); /* Opera 11.10+*/background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnVxjx2WMq8D6oyfvbPbF90ZTAT89EOzrJWo0KHRdxEdv-lFpbcA3kJKUMUgIybmRwoj_lBN0kouj5kLYfmexREOEv5Vy3Jmjg_m_nmAyi4ROPIjQnNh64bJEPO7mmZe5McO3EJI34o04/s1600/bk_topmenu.png) 100% 0 no-repeat,-ms-linear-gradient(top, #00c1fa 0%,#0094dd 100%); /* IE10+*/background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnVxjx2WMq8D6oyfvbPbF90ZTAT89EOzrJWo0KHRdxEdv-lFpbcA3kJKUMUgIybmRwoj_lBN0kouj5kLYfmexREOEv5Vy3Jmjg_m_nmAyi4ROPIjQnNh64bJEPO7mmZe5McO3EJI34o04/s1600/bk_topmenu.png) 100% 0 no-repeat,linear-gradient(to bottom, #00c1fa 0%,#0094dd 100%); /* W3C */background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnVxjx2WMq8D6oyfvbPbF90ZTAT89EOzrJWo0KHRdxEdv-lFpbcA3kJKUMUgIybmRwoj_lBN0kouj5kLYfmexREOEv5Vy3Jmjg_m_nmAyi4ROPIjQnNh64bJEPO7mmZe5McO3EJI34o04/s1600/bk_topmenu.png) 100% 0 no-repeat,filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#00c1fa',endColorstr='#0094dd',GradientType=0 ); /* IE6-9 */}
#topMenu ul.sf-menu li{border-right:1px solid #80CFFF}
#topMenu ul.sf-menu li a{color:#CBEBFE; text-shadow:#008FE8 1px 1px}
#topMenu ul.sf-menu li li a{color:#CBEBFE}
#topMenu ul.sf-menu li a:hover{color:#FFF}
#topMenu ul.sf-menu li li{}
#socialIcons li{border-left:1px solid #2BC9FD}
#topMenu{width:960px; height:46px; position:absolute; top:125px; left:0; -webkit-box-shadow:0 6px 6px -6px #999; -moz-box-shadow:0 6px 6px -6px #999; box-shadow:0 6px 6px -6px #999}
#topMenu ul.sf-menu li{float:left; padding:0 15px; font-size:12px;list-style: none;margin-left: -10px;}
#topMenu ul.sf-menu li a{text-decoration:none; text-transform:uppercase; font-weight:bold; padding:4px 0}
#topMenu ul.sf-menu li a:hover{text-shadow:none}
#topMenu ul.sf-menu li li{padding:0; border:none}
#topMenu ul.sf-menu li li a{font-weight:normal; padding:4px 12px}

#socialIcons{position:absolute; right:0;  margin:0 0}
#socialIcons li{float:left; padding:0 10px;list-style: none;}
#socialIcons li a{display:block; text-indent:-9999px; width:24px; height:19px}
#socialIcons li a:hover{background-position:0 -19px}
#socialIcons .twitter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9hMqEEVCP7W9sWM9A7Ma6Uf9jEx-Na0b0nPs52t9yDW0nS5fCENmMM1Kott0Xk6x2KkoauA6mlZA-0TsnuGPZ319ODuu9m31roNKzXds_szw69Xy73jdNt5MdQmm-OO89c6hkxqqmzyo/s1600/ico_twitter.png) 0 0 no-repeat}
#socialIcons .facebook{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8f0loa-h4m_KlR-l8FoqQJE6SW_OD_gcw9DB4vobIJr_hgZhhUpmSzZVwV3tl0V8Ta0OTAT_CUiFgigagdBqYSTAcMxcGAuDe9HFNLkMcAURhmsCLr0fYWj6p_0lGZEESk7WxXAVYook/s1600/ico_facebook.png) 0 0 no-repeat}
#socialIcons .flickr{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2I6y_ClRPnDBjb0fUQ-YCMPOrIlpkxjRURZ0SAx6seCN-41r7KQaCgNM_yA1nPYK7XkL_80ttUAPVVFuM3dDzxeSOzKiH88lX0i6SS9Cz8sVGTFsk4NndRika5J4h_pZA2kInbvIHorI/s1600/ico_flickr.png) 0 0 no-repeat}
#socialIcons .linkedin{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwrSdMZV_4gvB61v2Wvo11U8bRvoZ5pBw6YSXSJ5MDZt_h4aUddOnLxbcT0F_oHYLhddIg5Iu_EzJOWIVrB0OpXm2dbQi_FU_ZFKSbJhGvuKANbqXhcVlF342392ahIqgJtOplhsmJU0Y/s1600/ico_linkedin.png) 0 0 no-repeat}
#socialIcons .vimeo{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1Nfo-hNUn5MIYrTIxPtxs1pJ5tyYB9efVVXbjo3fC9rShP6WyGHQt7Mk3kXAmkMKGT3WiS3Rom7BaES_E1Q2q-mZf-YS9fUC_TKV-Wb33pCQ_Oue_TBWiGZOTmMfv3TWCBUCdy2TmZcw/s1600/ico_vimeo.png) 0 0 no-repeat}
#socialIcons .googleplus{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlzWTVbzVciiej7dInoZlI44lERG4HUgFkENl8hTtbbL9skLtH-99Mbbtj4CLHeuysvBCAdsVqfpeJHhrDIbbUnGSul59nOwvJ9wI-w5E-lVnsKwAMzq2N9GE5Fzo7lQ3JQrZ1d1tKcOA/s1600/ico_google.png) 0 0 no-repeat}
#socialIcons .rss{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcasDa82YMGzfqowsbHvQIIzcsphx6D-JwRLFEJC1PWAdCJJof-I6B5GQWzg-dgAMPfRlPJxMePV2wnv48DGExV_FgMCAiHuvn5zErQ9DnwUA_OpJxtdmbBRKWHLxwmQ4c1UH64d83e2g/s1600/ico_rss.png) 0 0 no-repeat}

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

<div id="topMenu">
<ul class="sf-menu sf-js-enabled sf-shadow" id="menu-topmenu">
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="http://www.bloggertrix.com/">Contact Us</a></li>
</ul>

<ul id="socialIcons">
<li><a class="twitter tooltip" href="http://www.twitter.com/bloggertrix"  target="_blank">Follow us on Twitter</a></li>
<li><a class="facebook tooltip" href="http://www.facebook.com/bloggertrix" target="_blank">Join us on Facebook</a></li>
<li><a class="linkedin tooltip" href="http://www.linkedin.com/" target="_blank">Join us on LinkedIn</a></li>
<li><a class="googleplus tooltip" href="https://plus.google.com/" target="_blank">Join us on Google+</a></li>
<li><a class="flickr tooltip" href="http://www.flickr.com/" target="_blank">Watch us on Flickr</a></li>
<li><a class="vimeo tooltip" href="https://vimeo.com/" target="_blank">Watch us on Vimeo</a></li>
<li><a class="rss tooltip" href="http://bloggertrix.com/feeds/posts/default"  target="_blank">RSS Feeds</a></li>
</ul>
</div>
Replace # with your links. and social profile as well.

8. Now save your HTML/Javascript'.

You are done. If you have any problem related to this Sky Blue Blogger Navigation Bar. Just leave a comment.I will help to you.
Read More

Saturday, August 17, 2013

Css Icon Hover Effect Navigation Bar For Blogger

File Under: , 6 comments

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

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/AVvXsEib98FxdOWWW-nQBDjW-LgXOr800Q2XpWtJ7qDfoCXKQs5IAsexnC7sfRXncgD8Mt0j1GjLxeuOFkkiRJb6HDnmsslo29Swzt4q6vDqGvLMYJx0NRe18Bu8PIC7BHI5SJ0xvBkp7AxrFBM/s1600/btrix-home.png" /> </a> </li>
<li> <a href="#"> <span class="aname">Download</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjiLIDOzp9c2vI-S0NXX5FvopSZh54mZTY2aFIEG3m-1KcviVXqnoXjGwJFVI9iXuY9sd5CBWICcSeqLMVd1YdHrdCQLJmSNmaegGyPLT9Ra9AB08HZw42RUuJD9CuaT_ovw5cDxpUQkY/s1600/btrix-download.png" /> </a> </li>
<li> <a href="#"> <span class="aname"> MySql</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGfIzWrcKPdg4gtNXnA7Zhg7O3HPKF3HaPT1ItNtvb3oaDtZ5FE1DbpDRlQ41WOSeC5a3HAiSsZFo_3KJLBV7r84SPDU-fsDBhOW9SXn8hX4OV4eBulj-W5zaFJKCCWnSjWC2W9OmjlwA/s1600/btrix-mysql.png" /> </a> </li>
<li> <a href="#"> <span class="aname"> Html</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1ZMLqVu6UlnLxHbGWlYyMPzXadA43KFZnipUWQXlSKrFQP-4lwiBbP2gW_gg3z8rGUidqafQSfhAkb0TYcvLHcxv_CyF05vwV7BwM0kmzP0RxndXFMtuYyf_QaijaGo1S1O6b059T9M8/s1600/Btrix-html.png" /> </a> </li>
<li> <a href="#"> <span class="aname">Contact</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcgud-A5UmquU7qiawv7tzzWukedXMYcCZqf_FCEyZpn9midmuhb1vOVUuIbnw-WQKNbMWowucJ73EnM2xEG71UXFlDEvL7DhqoUi2xLwQP1_oNvKotE_ObbHeIlvS2Qimsg5OVzs0G34/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.
Read More

Saturday, August 10, 2013

Css3 Dark Blue Navigation Bar For Blogger

File Under: , 5 comments

Navigation bar is very important in websites. It helps to navigate important page easily.So, your audience can find important pages.Other things is, Everyone can add navigation bar for their blogs.
But you have to add attractive menu for your blogs.It will give nice looks to your blogs and helps to attractive your audience too.In this tutorial im gonna explain how to add Css3 dark blue navigation bar for your blog.Every steps explained well to understand newbies.Just give a try to add Css3 Dark color navigation bar.

How to add Css3 Dark Blue Navigation Bar


Css3+Dark+Blue+Navigation+Bar


1. Log in to blogger account and Click drop down.
blog-post-option
2. Now select "Template" Like Below.

Select-template

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Find this tag by using Ctrl+F    ]]></b:skin>

5. Paste below code Before ]]></b:skin> tag

/* The CSS Code for the menu starts here bloggertrix.com */

#navigation1 { width:900px;height: 45px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHHXKDQgIK-t0wBT7aH2fb-EKubChFTAyGKGjKL1j48kcG5mmVybsvMpFW0hatYFElVncPdaD5HSvCkVWAzQVIfBI_6twSokDfR7drffbG1MGaMjCVqm3UnLzfzPt1MYrLppNQZI4xB7o/s1600/nav-bg.gif) repeat-x 0 0;
border:inherit 2px #000000;
-moz-border-radius-topleft: 10px;-moz-border-radius-topright:10px;-moz-border-radius-bottomleft:10px;-moz-border-radius-bottomright:10px;-webkit-border-top-left-radius:10px;-webkit-border-top-right-radius:10px;-webkit-border-bottom-left-radius:10px;-webkit-border-bottom-right-radius:10px;
border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-left-radius:10px;border-bottom-right-radius:10px; }
#navigation1 ul { list-style: none outside; padding: 8px 0 0 8px; }
#navigation1 li { float: left; display: inline; height: 29px; line-height: 29px; text-transform: uppercase; margin-right: 3px }
#navigation1 li.last { margin-right: 0; }
#navigation1 li a,
#navigation1 li a span { float: left; display: inline; height: 29px; padding-left: 10px; background-position: 0 0; color: #919191; }
#navigation1 li a span { padding-left: 0; padding-right: 10px;  background-position: right 0; }
#navigation1 ul.sf-menu li a:hover,
#navigation1 ul.sf-menu li a:hover span { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqIzOj2nwConNlTZP4IlrZbdeI_o3yzIjDuk1AREhz2mGziyKwwjIKHl40i5jA8tMOqTHk3c6zVuZ1HH8LrxZmOZ8Cff133JJWuB1PsAcdzEtGN43sFUruzgQhYL72nbeHW7WNRF8Mln8/s1600/bt_nav_hover.png); text-decoration: none; color: #fff; }
#navigation1 li a.clicked,
#navigation1 li a.clicked span { background-position: 0 bottom }
#navigation1 li a.clicked span { background-position: right bottom; }

6. Go to blogger and click Layout

7. Click Add Gadget and select 'HTML/Javascript

8. Paste below code.

<div id="navigation1">
<ul class="sf-menu sf-js-enabled sf-shadow">
<li class="cat-item cat-item-29"><a title="Home" href="#"><span>HOME</span></a></li>
<li class="cat-item cat-item-29"><a href="#" title="Graphics"><span>Graphics</span></a></li>
<li class="cat-item cat-item-31"><a href="#" title="Coding"><span>Coding</span></a></li>
<li class="cat-item cat-item-18"><a href="#" title="inspiration"><span>inspiration</span></a> </li>
<li class="cat-item cat-item-1"> <a href="#" title="Photography"><span>Photography</span></a></li>
<li class="cat-item cat-item-30"><a href="#" title="Freebies"><span>Blogger</span></a></li>
<li class="cat-item cat-item-19"><a href="#" title="Wordpress"><span>Wordpress</span></a></li>
<li class="cat-item cat-item-25"><a href="#" title="Logo"><span>Logo</span></a></li>
<li class="cat-item cat-item-22"><a href="#" title="Contact"><span>Contact</span></a>
</li></ul></div>
Replace # with your links.

9. Now save your HTML/Javascript'.

You are done. If you have any problem related to this Css3 Dark blue navigation bar. Just leave a comment.I will help to you.
Read More