17 Mei 2013

Menu Bar With jQuery For Blogger

In this tutorial im gonna explain how to add Bouncing with jQuery.It have nice hover effect. Every menu are
different with colors. Im using jQuery and HTML, Just check out demo.Its easy to add to blogger. get my all menu bar here

1. Log in to blogger account and Click drop down.

2. Now select "Template" Like Below.

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

4. Now click Proceed button.

5. Find this tag by using Ctrl+F </head>

6. Paste below code Before </head> tag

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js?ver=3.2.1' type='text/javascript'/>
<script src='http://bloggertrixcode.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/>
<script src='http://bloggertrixcode.googlecode.com/files/animated-menu.js' type='text/javascript'/>

7. Go to blogger and click Layout

8. Click Add Gadget and select 'HTML/Javascript

9. Paste below code.

ul{
 margin:0;
 padding:0;
}
a:link {
color: #F8F8F8;
text-decoration: none;
font-weight: bold;}
li{
 width:100px;
 height:50px;
 float:left;
 color:#191919;
 text-align:center;
 overflow:hidden;
}
a{
 color:#FFFFFF;
font-size:15px;
 text-decoration:none;
}
p{
 padding:0px 5px;
}
 .subtext{
  padding-top:15px;
 }
/*Menu Color Classes*/
.green{background:#6AA63B url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdop8wl6Sf6nroUEY9s5F4nqWy9rd4i8tnVq7uo_LQ1p0DlxVbjlZUGNsxSPUjny_FWT37nylPDzXfVUsWAql50CbxxNL3fI3Lg5dZ7FhU2VGtGwz2aEkO_ssWZ1PK-hvQKI5CiyXZwXw/s1600/btrix_green-item-bg.jpg') top left no-repeat;}
.yellow{background:#FBC700 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzkOjp54Cs0VH7JuT9arQYRzNJWGRBrmNCT98FwT8Yix0-iduxrwiYDGkzZz9UVhY1rFaKq3Kvd-9V2HXunYtoMoIcVVvJRuDBT1rTuhBM66nj1v_CAYuxH89UHw_wDoA2WTKq7lkJz1c/s1600/btrix_purple-item-bg.jpg') top left no-repeat;}
.red{background:#D52100 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHvmFOUXydw91ye_wXn8IFteKzq7VfC72q3K_gz-U5c6J8kiY-G6Ordi_W3qlbpFnm6p-zfwQWX_dRivpX-91Sawc0UBaoToI_mi3f2wvBZl4SRHsjtXiQc57xHjKpJmpltAFWhZ4ymqg/s1600/btrix_red-item-bg.jpg') top left no-repeat;}
.purple{background:#5122B4 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSHqx1zkRkgJd6gSQCK2O4g8rmpRe9XQl_8GABmAfxmC78ARoGQhM6yCcFspM7UyqELn-zFAAGfB2u9tY_EPWx6U60u5NFDu-MWL0hW4mdWHVEcCXG60fH5CKM3AYyM0yw9DmPyAQXFuw/s1600/btrix_blue-item-bg.jpg') top left no-repeat;}
.blue{background:#0292C0 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUtRjuADHVJO5YLKJvzxFvD3ctvMHOr3sNpzQ3_5cH1NJ4xuQeriP0cwJgGx0GpCqxplDPadZ6Gw8zYvdI8IvMXnhU3Jym1x0BiXT4RIBqBVH2fQzWzI8Ctjmg5S-csiRj_7Tn1vwUDoY/s1600/btrix_yellow-item-bg.jpg') top left no-repeat;}
</style>
<ul>
  <li style="overflow: hidden; height: 50px; display: block;" class="green">
   <p><a href="#">Home</a></p>
   <p class="subtext">The front page</p>
  </li>
  <li style="overflow: hidden; height: 48px; display: block;" class="yellow">
   <p><a href="#">About</a></p>
   <p class="subtext">More info</p>
  </li>
  <li style="overflow: hidden; height: 50px; display: block;" class="red">
   <p><a href="#">Contact</a></p>
   <p class="subtext">Get in touch</p>
  </li>
  <li style="overflow: hidden; height: 50px; display: block;" class="blue">
   <p><a href="#">Submit</a></p>
   <p class="subtext">Send us your stuff!</p>
  </li>
  <li style="overflow: hidden; height: 50px; display: block;" class="purple">
   <p><a href="#">Terms</a></p>
   <p class="subtext">Legal things</p>
  </li>
 </ul>
 <script type="text/javascript">
 var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
 document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
 </script>
 <script type="text/javascript">
 try {
 var pageTracker = _gat._getTracker("UA-6444047-1");
 pageTracker._trackPageview();
 } catch(err) {}</script>

Replace # with your links.

10. Now save your HTML/Javascript'.

16 April 2013

4/16/2013 08:51:00 AM

Cool Breadcrumbs Navigation

A breadcrumb navigation allow users to know where they are in a hierarchical structure and navigate back to higher-level pages in the hierarchy. Also, the breadcrumbs can reduce the number of actions a user need to perform in order to navigate back.

So, to keep it simple, if you have a website with lot of pages and sub-levels, in order to increase usability, you need to use breadcrumbs. Having said that, today you’ll learn how to create your own cool CSS3 breadcrumbs.

The HTML

Tha markup is simple and minimal, based on an unordered list.

<ul id="breadcrumbs-one">
    <li><a href="">Lorem ipsum</a></li>
    <li><a href="">Vivamus nisi eros</a></li>
    <li><a href="">Nulla sed lorem risus</a></li>
    <li><a href="">Nam iaculis commodo</a></li>
    <li><a href="" class="current">Current crumb</a></li>
</ul>

The CSS

First, let’s add a mini CSS reset for our unordered lists:

ul{
  margin: 0;
  padding: 0;
  list-style: none;
}

Secondly, I’d like to add that all the breadcrumbs I made for this tutorial are using CSS pseudo-elements. I bet there’s no need to specify what pseudo-elements are and how cool they are.

First example

Here I used a similar technique to the one I used for creating these CSS3 tooltips. Basically, to create a right-bordered triangle effect, the triangles created with pseudo-elements are placed one above another. The darker triangle will be shifted a bit in order to achieve the border.

#breadcrumbs-one{
  background: #eee;
  border-width: 1px;
  border-style: solid;
  border-color: #f5f5f5 #e5e5e5 #ccc;
  border-radius: 5px;
  box-shadow: 0 0 2px rgba(0,0,0,.2);
  overflow: hidden;
  width: 100%;
}

#breadcrumbs-one li{
  float: left;
}

#breadcrumbs-one a{
  padding: .7em 1em .7em 2em;
  float: left;
  text-decoration: none;
  color: #444;
  position: relative;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
  background-color: #ddd;
  background-image: linear-gradient(to right, #f5f5f5, #ddd);  
}

#breadcrumbs-one li:first-child a{
  padding-left: 1em;
  border-radius: 5px 0 0 5px;
}

#breadcrumbs-one a:hover{
  background: #fff;
}

#breadcrumbs-one a::after,
#breadcrumbs-one a::before{
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -1.5em;   
  border-top: 1.5em solid transparent;
  border-bottom: 1.5em solid transparent;
  border-left: 1em solid;
  right: -1em;
}

#breadcrumbs-one a::after{ 
  z-index: 2;
  border-left-color: #ddd;  
}

#breadcrumbs-one a::before{
  border-left-color: #ccc;  
  right: -1.1em;
  z-index: 1; 
}

#breadcrumbs-one a:hover::after{
  border-left-color: #fff;
}

#breadcrumbs-one .current,
#breadcrumbs-one .current:hover{
  font-weight: bold;
  background: none;
}

#breadcrumbs-one .current::after,
#breadcrumbs-one .current::before{
  content: normal;  
}

Second example

The CSS shapes built with the pseudo-elements are placed before, respectively after.

#breadcrumbs-two{
  overflow: hidden;
  width: 100%;
}

#breadcrumbs-two li{
  float: left;
  margin: 0 .5em 0 1em;
}

#breadcrumbs-two a{
  background: #ddd;
  padding: .7em 1em;
  float: left;
  text-decoration: none;
  color: #444;
  text-shadow: 0 1px 0 rgba(255,255,255,.5); 
  position: relative;
}

#breadcrumbs-two a:hover{
  background: #99db76;
}

#breadcrumbs-two a::before{
  content: "";
  position: absolute;
  top: 50%; 
  margin-top: -1.5em;   
  border-width: 1.5em 0 1.5em 1em;
  border-style: solid;
  border-color: #ddd #ddd #ddd transparent;
  left: -1em;
}

#breadcrumbs-two a:hover::before{
  border-color: #99db76 #99db76 #99db76 transparent;
}

#breadcrumbs-two a::after{
  content: "";
  position: absolute;
  top: 50%; 
  margin-top: -1.5em;   
  border-top: 1.5em solid transparent;
  border-bottom: 1.5em solid transparent;
  border-left: 1em solid #ddd;
  right: -1em;
}

#breadcrumbs-two a:hover::after{
  border-left-color: #99db76;
}

#breadcrumbs-two .current,
#breadcrumbs-two .current:hover{
  font-weight: bold;
  background: none;
}

#breadcrumbs-two .current::after,
#breadcrumbs-two .current::before{
  content: normal;
}

Third example

Using border-radius we will round the corners for our rectangle and square shapes. The square will be rotated, in order to achieve a rounded diamond.

#breadcrumbs-three{
  overflow: hidden;
  width: 100%;
}

#breadcrumbs-three li{
  float: left;
  margin: 0 2em 0 0;
}

#breadcrumbs-three a{
  padding: .7em 1em .7em 2em;
  float: left;
  text-decoration: none;
  color: #444;
  background: #ddd;  
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
  border-radius: .4em 0 0 .4em;  
}

#breadcrumbs-three a:hover{
  background: #abe0ef;
}

#breadcrumbs-three a::after{
  background: #ddd;
  content: "";
  height: 2.5em;
  margin-top: -1.25em;
  position: absolute;
  right: -1em;
  top: 50%;
  width: 2.5em;
  z-index: -1; 
  transform: rotate(45deg);
  border-radius: .4em;
}

#breadcrumbs-three a:hover::after{
  background: #abe0ef;
}

#breadcrumbs-three .current,
#breadcrumbs-three .current:hover{
  font-weight: bold;
  background: none;
}

#breadcrumbs-three .current::after{
  content: normal;
}

Fourth example

Again, with the pseudo-elements you’ll add two rectangles before and after the element. Then you’ll round the outer sides for each one. The rest is nothing but poetry. :)

#breadcrumbs-four{
  overflow: hidden;
  width: 100%;
}

#breadcrumbs-four li{
  float: left;
  margin: 0 .5em 0 1em;
}

#breadcrumbs-four a{
  background: #ddd;
  padding: .7em 1em;
  float: left;
  text-decoration: none;
  color: #444;
  text-shadow: 0 1px 0 rgba(255,255,255,.5); 
  position: relative;
}

#breadcrumbs-four a:hover{
  background: #efc9ab;
}

#breadcrumbs-four a::before,
#breadcrumbs-four a::after{
  content:'';
  position:absolute;
  top: 0;
  bottom: 0;
  width: 1em;
  background: #ddd;
  transform: skew(-10deg);  
}

#breadcrumbs-four a::before{

  left: -.5em;
  border-radius: 5px 0 0 5px;
}

#breadcrumbs-four a:hover::before{
  background: #efc9ab;
}

#breadcrumbs-four a::after{
  right: -.5em;   
  border-radius: 0 5px 5px 0;
}

#breadcrumbs-four a:hover::after{
  background: #efc9ab;
}

#breadcrumbs-four .current,
#breadcrumbs-four .current:hover{
  font-weight: bold;
  background: none;
}

#breadcrumbs-four .current::after,
#breadcrumbs-four .current::before{
  content: normal;
}

CSS3 breadcrumbs advantages

No images, so it’s easy to update and maintain.
Everything is scalable, em based.
Contains fallbacks for older browsers.

Final words

I didn’t merged the common styles for the above breadcrumbs with a purpose. I thought that if you need a certain breadcrumbs style, just copy&paste that, without other CSS inheritances issues.

Template Html5 Css Blogger

CSS Blogger Templates