Wednesday, November 28, 2012

Angry Birds Social Sharing Widget For Blogger

Social sharing widgets helps  to  get  some quality traffic for your website.You can add this to your blog easily.Im  using  CSS  and HTML for this  tutorial. Check   below link for demo. You   can  get  my  Earlier social network buttons from here

Demo

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. Now click Proceed button.

5.Find this code  by using Ctrl+F  ]]></b:skin>

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

/* Bloggertrix  */
.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}
.bubblewrap li{
display:inline;
width: 60px;
height:60px;
}
.bubblewrap li img{
width: 50px; /* width of each image.*/
height: 50px; /* height of each image.*/
border:0;
margin-right: 4px; /*spacing between each image*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}
.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}

7. Go to blogger  and click drop-down like  1st step and select Layout

8. Click Add Gadget and select 'HTML/Javascript"

9. Paste below code.

<ul class="bubblewrap">

<li><a href="http://www.plus.google.com/107955298793879607964"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDeOquMGEmdIdMw8iaL5S1Oznjcq8aKVvxghvUuY17MpEk44SMzNC8HaiL2wjCyIlFUVIN16LnHp4ipPF-nEe96EZE6AJt-uGzd3YNHm1T-ErZf1ZlDW-lr_x-OAv_A6YDs5xF1GvziZQ/s1600/bloggertrix-googleplus.png" title="Add to Facebook" /></a></li>

<li><a href="http://www.facebook.com/bloggertrix"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4kOcx4zwHoEwgtcvkHp1R6MfaWYFdUFuupVhcq_sCzlmOniyMusdfo3wtC4JaO5lxNczKyQh4bDz2sl42_hDtiGahNBrtRe6gbpWdhsTASkwJegCm90wsUl0CYKSXP3zs8bmzmk5WUXk/s1600/bloggertrix-facebook.png" title="Add to Facebook" /></a></li>

<li><a href="http://www.youtube.com/Username"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwnrej5ZbwpWJhQzcXGLRHnV78MAssSgIAoV3BxGkkbh5iauktREGAyBvZlg6oafnZA0GIHk2AIcK5oQ0zRfBB1v6J5xIbAjmv5TEUKL20djWdnVcK18kvw8cq5kGSvrQGcgd3zd_XaEs/s1600/bloggertrix-youtube.png" title="Add to Youtube" /></a></li>

<li><a href="http://www.twitter/bloggertrix"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEga8ArdsBRKxBqdSVto-IlYnbvqd-U1W8_mD0QIBqVWHtNwzGPqDKIEa13PkLjD45o-FHHayO87j6t_U4RbW8N0bUqLI_KnqW7LdWdEh1Df6OBqVWYnoyn00mwEDoiqNPjirT6SXXcC5pM/s1600/bloggertrix-twitter.png" title="Add to Twitter" /></a></li>

<li><a href="http://feeds2.feedburner.com/bloggertrix"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd-qnPGEqArIny-8nvwq9uRPG6pnEF5uJOYYGVcA6oD1FxM1-L2MyZM0D1IBFN6ycbhtghTXJ9aohqIwLIKQFVnNr9qQ2ml75eGaKALdm22lmUODCuXpfnWb6TPNFOn0P4puCZPi8mt0c/s1600/bloggertrix-Rss.png" title="Add RSS Feed" /></a></li>
</ul>
 *Replace urls as your like.

10. Now save your template. You are done.
Read More

Tuesday, November 27, 2012

Greeny CSS Drop Down Menu Bar For Blogger

In this tutorial im gonna explain how to add greeny drop down menu bar for your blogger.Its included
nice drop down menu. you can check it from below demo link.Im using CSS and HTML for this tutorial i already created lot of  menu bar tutorial you can get my all menu bar  here

Demo


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. Now click Proceed button.
   
5. Find this tag by using Ctrl+F    ]]></b:skin>

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

/* The CSS Code for the menu starts here bloggertrix.com */
#bloggertrix_menu1{
height:32px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs83B9x7AoqjW8hkkztyx7NWB9KZE2EhPvcX__AE5kB8egsjmT4Mg2tGu5uehvdqh7-N8LrpBa_TxsOCfwzRnL6JnN8DXdM0Nb6JImCVZUThx_HGget6V2AbFgEd1GTFRW5s_9Ll7p_Fc/s1600/bloggertrix.com_menubg.png);
display:block;padding:0px 0 0px 0px;
font: 10px Tahoma,Century gothic,verdana, Arial, sans-serif;
font-weight:normal;text-transform:uppercase;overflow:hidden;
width:960px;
}
#bloggertrix_menu{
margin: 0px;padding: 0px 1px;width:998px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs83B9x7AoqjW8hkkztyx7NWB9KZE2EhPvcX__AE5kB8egsjmT4Mg2tGu5uehvdqh7-N8LrpBa_TxsOCfwzRnL6JnN8DXdM0Nb6JImCVZUThx_HGget6V2AbFgEd1GTFRW5s_9Ll7p_Fc/s1600/bloggertrix.com_menubg.png) ;
height:32px;
}
#bloggertrix_menu ul {
float: left;list-style: none;margin: 0px;
padding: 0px;
}
#bloggertrix_menu li {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}
#bloggertrix_menu li a, #bloggertrix_menu li a:link, #bloggertrix_menu li a:visited {
color: #bfe195;
display: block;
margin: 0px;
padding: 10px 10px 10px 10px;
}
#bloggertrix_menu li a:hover, #bloggertrix_menu li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs83B9x7AoqjW8hkkztyx7NWB9KZE2EhPvcX__AE5kB8egsjmT4Mg2tGu5uehvdqh7-N8LrpBa_TxsOCfwzRnL6JnN8DXdM0Nb6JImCVZUThx_HGget6V2AbFgEd1GTFRW5s_9Ll7p_Fc/s1600/bloggertrix.com_menubg.png) repeat-x ;
color: #fff;
margin: 0px;
padding: 10px 10px 10px 10px;
text-decoration: none;
}
#bloggertrix_menu li li a, #bloggertrix_menu li li a:link, #bloggertrix_menu li li a:visited {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs83B9x7AoqjW8hkkztyx7NWB9KZE2EhPvcX__AE5kB8egsjmT4Mg2tGu5uehvdqh7-N8LrpBa_TxsOCfwzRnL6JnN8DXdM0Nb6JImCVZUThx_HGget6V2AbFgEd1GTFRW5s_9Ll7p_Fc/s1600/bloggertrix.com_menubg.png) ;
width: 150px;
color: #bfe195;
font-family:Tahoma,century gothic,Georgia,  sans-serif;
font-weight: normal;float: none;margin: 0px;padding: 9px 10px 9px 10px;
border-bottom: 1px solid #5E9F09;
}
#bloggertrix_menu li li a:hover, #bloggertrix_menu li li a:active {
background:#3f6d06;
color: #fff;
padding: 9px 10px 9px 10px;
}
#bloggertrix_menu li ul {
z-index: 9999;
position: absolute;
left: -999em;height: auto;width: 170px;margin: 0px;
padding: 0px;
}
#bloggertrix_menu li li {
}
#bloggertrix_menu li ul a {
width: 140px;
}
#bloggertrix_menu li ul a:hover, #bloggertrix_menu li ul a:active {
}
#bloggertrix_menu li ul ul {
margin: -31px 0 0 170px;
}
#bloggertrix_menu li:hover ul ul, #bloggertrix_menu li:hover ul ul ul,
#bloggertrix_menu li.sfhover ul ul, #bloggertrix_menu li.sfhover ul ul ul {
left: -999em;
}
#bloggertrix_menu li:hover ul, #bloggertrix_menu li li:hover ul,
#bloggertrix_menu li li li:hover ul, #bloggertrix_menu li.sfhover ul,
#bloggertrix_menu li li.sfhover ul, #bloggertrix_menu li li li.sfhover ul {
left: auto;
}
#bloggertrix_menu li:hover, #bloggertrix_menu li.sfhover {
position: static;
}

7. Go to blogger and click Layout

8. Click Add Gadget and select 'HTML/Javascript

9. Paste below code.

 <div id="bloggertrix_menu1">
<div id="bloggertrix_menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Business</a>
<ul class="children">
<li><a href="#">Internet</a></li>
<li><a href="#">Market</a></li>
<li><a href="#">Stock</a></li>
</ul>
</li>
<li><a href="http://www.bloggertrix.com/">Downloads</a>
<ul class="children">
<li><a href="#">Dvd</a></li>
<li><a href="#">Games</a></li>
<li><a href="#">Software</a>
<ul class="children">
<li><a href="#">Office</a>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="http://www.bloggertrix.com/">Parent Category</a>
<ul class="children">
<li><a href="http://www.bloggertrix.com/">Child Category 1</a>
<ul class="children">
<li><a href="#">Sub Child Category 1</a></li>
<li><a href="#">Sub Child Category 2</a></li>
<li><a href="#">Sub Child Category 3</a></li>
</ul>
</li>
<li><a href="#">Child Category 2</a></li>
<li><a href="#">Child Category 3</a></li>
<li><a href="#">Child Category 4</a></li>
</ul>
</li>
<li><a href="#">Featured</a></li>
<li><a href="#">Health</a>
<ul class="children">
<li><a href="#">Childcare</a></li>
<li><a href="#">Doctors</a></li>
</ul>
</li>
<li><a href="http://www.bloggertrix.com/">Uncategorized</a></li>
</ul>
</div>
</div>

10. Now save your HTML/Javascript'.

    You are done...
Read More

Monday, November 26, 2012

Unique Style Social Sharing Box For Blogger

In this post you can learn, how to add unique social box for your blog.Actually this social box have ncie style. you can check it from demo Im using just CSS and HTML for this tutorial
you can  get  my  earlier Social media post collection  by clicking here

Demo


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. Now click Proceed button.
   
5. Find this tag by using Ctrl+F    ]]></b:skin>

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

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

div#socialbox, div#socialbox ul, div#socialbox ul li, div#socialbox ul li p, div#socialbox ul li p img, div#socialbox ul li p span, #socialbox ul li p a{
background: none;border: none;margin: 0;padding: 0;}

div#socialbox{
color: #768a96;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
width:300px;}

div#socialbox ul{
background: url() repeat;
border: 1px solid #d8dcdf !important;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0px 2px 4px #dfe4e7;
-moz-box-shadow: 0px 2px 4px #dfe4e7;
box-shadow: 0px 2px 4px #dfe4e7;
list-style: none;
margin: 0 !important;
padding: 0;}
    
div#socialbox ul li{
background-image: none;
border-bottom: 1px solid #d8dcdf;
height: 59px;
list-style: none;}
    
div#socialbox ul li:last-child{
border-bottom: none;}
        
div#socialbox ul li p{
padding: 19px 9px 0 9px;}
        
div#socialbox ul li p img{
border: none;
margin-right: 10px;
position: relative;
top: 3px;
vertical-align: baseline;}
            
div#socialbox ul li p span{
color: #425763;
font-weight: bold;}
                
div#socialbox ul li p a.socialbox-button{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjufXaFX1TW6EhCIAa9XggqUhotUj8rCeGwor7KGu9h-Y_5g_3Q8U_5KSwvgE_w-DqkSi2I3c3pTnnm3JYs89hizNOi83mBOPFU3ufhg_2UigSFaZCsSG_ieVzZ6f0-23dVBMFvWd44svM/s1600/bloggertrix-button.png) no-repeat;
border: 1px solid #d8dcdf;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
color: #425763;
float: right;
font-size: 11px;
font-weight: bold;
line-height: 11px;
padding: 6px 10px;
position: relative;
text-decoration: none;
text-transform: uppercase;
top: -2px;}
                
div#socialbox ul li p a.socialbox-button:hover{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjufXaFX1TW6EhCIAa9XggqUhotUj8rCeGwor7KGu9h-Y_5g_3Q8U_5KSwvgE_w-DqkSi2I3c3pTnnm3JYs89hizNOi83mBOPFU3ufhg_2UigSFaZCsSG_ieVzZ6f0-23dVBMFvWd44svM/s1600/bloggertrix-button.png) 0 -27px no-repeat;}
                
div#socialbox ul li p a.socialbox-button:active{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjufXaFX1TW6EhCIAa9XggqUhotUj8rCeGwor7KGu9h-Y_5g_3Q8U_5KSwvgE_w-DqkSi2I3c3pTnnm3JYs89hizNOi83mBOPFU3ufhg_2UigSFaZCsSG_ieVzZ6f0-23dVBMFvWd44svM/s1600/bloggertrix-button.png) 0 -54px no-repeat;}

7. Go to blogger and click Layout

8. Click Add Gadget and select 'HTML/Javascript

9. Paste below code.

<br />
<div id="socialbox">
<ul>
<li><p>
<a href="http://www.facebook.com/bloggertrix" target="_blank" title="Like on Facebook"><img alt="Facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRwIkw1rWa90gJlPmvpQ9fGTxr8tAf9ISL3YTFWIWA8tl5eYc2xuNHitPOrGYd9WD9UNdtW6xzhtQKaZwK0ClI9SzrJGXM0uQBHwh3o6F5CB1c0wzUw_jraXjJ_Svi3wtdFxJpZL5JXBc/s1600/bloggertrix-facebook.png" /></a>2,482 Fans                                    
<a class="socialbox-button" href="http://www.facebook.com/bloggertrix" target="_blank" title="Like on Facebook">Like</a></p>
<br /></li>

<li><p><a href="http://twitter.com/bloggertrix" target="_blank" title="Follow on Twitter"><img alt="Twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBX2bO7cJ9q-jPathSHLSIt4yRuWqe4b_7tGmM1A4UEZOwPKW0CVfXA2nhMi9C1yER7flni5q5Lu3a5euRk2hG-QuCbbO4Ou_h8BW0Sf4o8l4sWUbOLZ7t_woq1EtL3Htboh7Mo5R6Dp0/s1600/bloggertrix-twitter.png" /></a>5,365 Followers                                    
<a class="socialbox-button" href="http://twitter.com/bloggertrix" target="_blank" title="Follow on Twitter">Follow</a>
<br /></p></li>

<li><p><a href="http://feeds.feedburner.com/bloggertrix" target="_blank" title="Subscribe to Feed"><img alt="Feedburner" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9BsHpYhTqtPBXYLZxUUTMWT_PIAdvCo9xd4c5VgpvkkM1xni4FTCRT2EZWNn2vSFtIJ8z8Wfh1G9qils3LdPpHdsNZINa-WVGcf46ZUmiqj6y1xsHo1JRPQ49OCn2WWHzTeaYxYIYMfM/s1600/bloggertrix-feedburner.png" /></a>1,094 Subscribers                                    
<a class="socialbox-button" href="http://feeds.feedburner.com/bloggertrix" target="_blank" title="Subscribe to Feed">Subscribe</a>
<br /></p></li>
</ul>
</div>

Replace bloggertrix with your usernames.


10. Now save your HTML/Javascript'.

    You are done...
Read More

Sunday, November 25, 2012

Css Dark Style Drop Down Menu Bar For Blogger

Today im  gonna explain  how to add  another  cool menu bar for  blogger. This is dark style menu  bar with drop down.This  menu bar work with all  web browsers.Im using CSS and HTML for  this menu.i added the demo like for this menu bar too. you can check   it.  you can  get  my  earlier menu  bar post collection  by clicking here
Css-dark-menu
Demo


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. Now click Proceed button.
   
5. Find this tag by using Ctrl+F    ]]></b:skin>

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

/* The CSS Code for the menu starts here bloggertrix.com */
.containerbt {margin: 0 auto;width: 610px;text-align: center;height:300px;}
ul.dark_menu {
 list-style: none;padding: 0; font-family: Arial;font-size: 14px;line-height: 14px;}
ul.dark_menu:after {content: "";clear: both;display: block;overflow: hidden;visibility: hidden;width: 0;height: 0;}
ul.dark_menu li {float: left;margin: 0 0 0 10px;position: relative;}
ul.dark_menu li:first-child {margin: 0;}
ul.dark_menu li a, ul.dark_menu li a:link {color: #FFFFFF;text-decoration: none;
display: block;padding: 10px 26px;text-shadow: 0 1px 0 #4b433e; background: #362f2c; 
background: -moz-linear-gradient(top, #362f2c 0%, #282321 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#362f2c), color-stop(100%,#282321));background: -webkit-linear-gradient(top, #362f2c 0%,#282321 100%);
background: -o-linear-gradient(top, #362f2c 0%,#282321 100%);
background: -ms-linear-gradient(top, #362f2c 0%,#282321 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#362f2c', endColorstr='#282321',GradientType=0 );
background: linear-gradient(top, #362f2c 0%,#282321 100%);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 0 #564b46,0 1px 1px #181514;
-moz-box-shadow: inset 0 1px 0 #564b46,0 1px 1px #181514;
 box-shadow: inset 0 1px 0 #564b46,0 1px 1px #181514;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;}
                   
ul.dark_menu li a:hover {
color: #73635e;
text-shadow: 0 1px 1px #000;
background: #282321; 
background: -moz-linear-gradient(top, #282321 0%, #362f2c 99%, #362f2c 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#282321), color-stop(99%,#362f2c), color-stop(100%,#362f2c)); 
background: -webkit-linear-gradient(top, #282321 0%,#362f2c 99%,#362f2c 100%); 
background: -o-linear-gradient(top, #282321 0%,#362f2c 99%,#362f2c 100%); 
background: -ms-linear-gradient(top, #282321 0%,#362f2c 99%,#362f2c 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#282321', endColorstr='#362f2c',GradientType=0 ); 
background: linear-gradient(top, #282321 0%,#362f2c 99%,#362f2c 100%); -webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;-ms-transition: all 1s ease;transition: all 1s ease;}

ul.dark_menu li a.selected, ul.dark_menu li a:active {
color: #73635e;background: #282321;
text-shadow: 0 1px 1px #000;
-webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.6),0 1px 0 #5e524f;-moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.6),0 1px 0 #5e524f;box-shadow: inset 0 2px 4px rgba(0,0,0,0.6),0 1px 0 #5e524f;
-webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;-ms-transition: all 1s ease;transition: all 1s ease;}
ul.dark_menu li ul {display: none;}
ul.dark_menu li ul:before {content: " ";position: absolute;display: block;z-index: 1500;left: 0;top: -10px;height: 10px;width: 100%;}
ul.dark_menu li:hover ul {
position: absolute;display: block;z-index: 1000;left: 0;top: 44px;padding: 5px 0;list-style: none;background: #282321;
-webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.6),0 1px 0 #5e524f;-moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.6),0 1px 0 #5e524f;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.6),0 1px 0 #5e524f;
-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;}
ul.dark_menu li ul li {
float: none;margin: 0 10px;border-bottom: 1px solid #191614;border-top: 1px solid #3a3230;}                   
ul.dark_menu li ul li:first-child {
margin: 0 10px;
border-top: 0 none;}             
ul.dark_menu li ul li:last-child {
border-bottom: 0 none;}                    
ul.dark_menu li ul li a, ul.dark_menu li ul li a:link {
color: #73635e;display: block;background: transparent none;padding: 10px 20px 10px 5px;white-space: nowrap;text-shadow: 0 1px 2px #000;-webkit-box-shadow: 0 0 0 rgba(0,0,0,0);-moz-box-shadow: 0 0 0 rgba(0,0,0,0);box-shadow: 0 0 0 rgba(0,0,0,0);
-webkit-border-radius: 0px;-moz-border-radius: 0px;border-radius: 0px;}                
ul.dark_menu li ul li a:hover {text-decoration: underline;background: #2a2523;}

7. Go to blogger and click Layout

8. Click Add Gadget and select 'HTML/Javascript

9. Paste below code.

 <div class="container">
        <!-- Dark Menu Begin -->
        <ul class="dark_menu">
            <li><a href="#" class="selected">Home</a></li>
            <li>
                <a href="#">Download</a>
                <!-- Sub Menu Begin -->
                <ul>
                   <li><a href="#">Menu Link 1</a></li>
                    <li><a href="#">Menu Link 2</a></li>
                    <li><a href="#">Menu Link 3</a></li>
                    <li><a href="#">Menu Link 4</a></li>
                </ul>
                <!-- Sub Menu End -->
            </li>
            <li>
                <a href="#">Blog</a>
                <!-- Sub Menu Begin -->
                <ul>
                    <li><a href="#">Menu Link 1</a></li>
                    <li><a href="#">Menu Link 2</a></li>
                    <li><a href="#">Menu Link 3</a></li>
                    <li><a href="#">Menu Link 4</a></li>
                </ul>
                <!-- Sub Menu End -->
            </li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
        <!-- Dark Menu End -->
    </div>

10. Now save your HTML/Javascript'.

    You are done...
Read More

Saturday, November 24, 2012

Social Sharing Buttons With Colorful Hover Effect

Im gonna explain, how to add  social  sharing widget with colorful  hover effect.Actually this widget looks great. you can  keep in on side bar. For this  post   im using   CSS  and  HTML  languages. You  can   link  your  Rss,Facebook,Twitter and Google plus.You can add it  with easy  steps.  get  my  other  social  media
widgets by clicking here

Social+Sharing+Buttons+With+Colorful+Hover+Effect
Demo

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

3. Click Add Gadget and select 'HTML/Javascript

4. Paste below one of below code.

/*--------Social Sharing Widget ------*/
<style type="text/css">
.socialsharing {
display: block;
margin: 2em auto;
width: 200px;
height:40px;
}
.socialsharing span {
float: left;
display: inline;
margin-right: 8px;
}
.socialsharing span a {
display: block;
width: 32px;
height: 32px;
text-indent: -9999px;
background-color: none;
background: transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF6ZCTXzjTeohefwrzdfTHySsDT5mwUbPN-UxBRWJANkQRFUvqRRZrBhh7ReB0OAaETg6rC3loB41gZO3XX7-iNIHpLuaJy0qQJZAMW900GOh5XE-XCXIrxf-JZzDBl7C9bRZnDmQWpPGf/s1600/social+icon.png") 0 0 no-repeat;
}
#iconTwitter {background-position: -33px -33px;}
#iconFacebook {background-position: -66px -33px;}
#iconRSS {background-position: 0 -33px;}
#iconYouTube {background-position: -99px -33px;}
#iconGooglePlus {background-position: -132px -33px;}
#iconTwitter:hover {background-position: -33px 0;}
#iconFacebook:hover{background-position:-66px 0}
#iconRSS:hover{background-position:0 0}
#iconYouTube:hover{background-position:-99px 0}
#iconGooglePlus:hover{background-position:-132px 0}
</style>

<div class="socialsharing">
<a href="http://www.twitter.com/bloggertrix" id="iconTwitter" target="_blank" title="Follow us on Twitter">Twitter</a>
<a href="http://www.facebook.com/bloggertrix" id="iconFacebook" target="_blank" title="Join us at Facebook">Facebook</a>
<a href="http://feeds.feedburner.com/bloggertrix" id="iconRSS" target="_blank" title="Subscribe our RSS Feed">RSS</a>
<a href="http://www.blogger.com/youtube.com/bloggertrix" id="iconYouTube" target="_blank" title="Follow our YouTube Channel">YouTube</a>
<a href="https://plus.google.com/107955298793879607964/posts" id="iconGooglePlus" target="_blank" title="Follow us at Google+">Google</a></div>

Replace with your URLs where i highligh with red color text.

7. Now save your HTML/Javascript'.

    You are done...
Read More

Friday, November 23, 2012

Add Wordpress Style Author Bio Box For Blogger

In   this  post, im  gonna  explain  how  to  add wordpress style author  bio  box for blogger. You  can  add  this  box every end of y our  blog  post. You  can  change  the code according to your details.i mentioned it with  highlighting the code.So, it will easy  for  you. Other  thing is,  for  this bio box.  you  can  use 80 x 80 pixel  image. you  can get my earlier author bio box from here.

Demo

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. Now click Proceed button.
   
5. Find this tag by using Ctrl+F    <div class='post-footer-line post-footer-line-1'>

6. Paste below code Before <div class='post-footer-line post-footer-line-1'> tag

/* Code for the author box starts here bloggertrix.com */
<style type="text/css">
#postauthor { background: #eef7f8; border: 1px solid #c6d9ed; padding:10px; margin: 15px 0; width:650px; height:90px; font-family:Georgia, "Times New Roman", Times, serif; }
#author-info{float:left; width:410px; padding:0 15px 0 0; border-right:1px solid #ccc; }
#author-info img {background:#fff; border: 1px solid #ddd; float: left; margin-right:10px;padding: 5px;
box-shadow: 0 0 3px #CCC; padding:3px;}#author-info h6 { color: #666; font-size: 18px; font-family:Georgia, "Times New Roman", Times, serif; font:Georgia, "Times New Roman", Times, serif }
#author-info h5 {color:#666; text-transform:none; font-size:12px; letter-spacing:0; font-family: Georgia;}
#author-info p { color: #515151; font-size: 12px; line-height:16px; font-family: Georgia;}
* { margin:0; padding:0;}#author-connect{width:21%; float:right; margin-right:8%; }
a.gplus-s{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPAIODagiVF2TKAN_Pc1Q9oCchBmvE820Lp7cDbhS4qgdLRiNU1pJobmu1SNU3K_L0ydps0L8vSl7tCLsYITPW4wn2DxiVJwsqRCwWtZ0HAybOnhzUdwwdw67mzkQzwWcnJgbxTXZK3a0O/s1600/gp-icon.png") no-repeat 0 0px; color: #666;  font-weight: bold;margin: 5px 0px; padding: 0 20px;text-decoration: none;}
</style>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.author == &quot;Author Name&quot;'>
<div id="postauthor">
<div id="author-info">
 <img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkHJ6Gr_cduD0-b3RllsIEB9qLoy_KU-yFx9Q-PpfqBk4FABEmcKXYT5sx2JbKlDyzLJrwfPId805MqahK-llUvUexOCxA8cYVfvqtwemRVOIno5KPTkU_w2q1poF6pp8QXnjwCjP9m7M/s1600/author.jpg'  height='80' width='80' /><h6 style="font:Georgia">Article by <a expr:href='data:post.authorProfileUrl' rel='author'><data:post.author/></a></h6>
<h5>AuthorName has Written Many Useful Articles.</h5>
<p>If you like This post, you can follow bloggertrix on <strong> 
<a href="http://twitter.com/bloggertrix" rel="nofollow" >Twitter  </a> </strong>. Subscribe to <strong> Bloggertrix feed via <a href="http://feeds.feedburner.com/bloggertrix" rel="nofollow" >RSS</a> or  <a href="http://feedburner.google.com/fb/a/mailverify?uri=bloggertrix&amp;loc=en_US" rel="nofollow" > EMAIL </a>  </strong>to receive instant updates.</p></div>
<div id="author-connect">
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fbloggertrix&amp;send=false&amp;layout=button_count&amp;width=120&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&amp;appId=230688610312045" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:120px; height:21px;" allowTransparency="true"></iframe>          
<a href="https://twitter.com/bloggertrix" class="twitter-follow-button" data-show-count="false" data-size="small">Follow @bloggertrix</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> 
<a href="https://plus.google.com/107955298793879607964" target="_blank" rel="nofollo" class="gplus-s" >Google</a></div></div>
</b:if></b:if>

Replace with red color link with your author image link.
Replace bloggertrix with your twitter ID
Replace bloggertrix with your  feedburner ID
Replace bloggertrix with your  facebook ID
Replace 107955298793879607964 with your  Google plus ID

7.
now click save template. you are done...

Read More

Thursday, November 22, 2012

Attractive Css3 Image Hover Effects

In this post  im  gonna  explain,  how  to  add a pure CSS3 image galley for blogger. It include nice hover effect. In this  gallery, there  have 9 images.Each images have  own style. You can check it by demo link. you can use this gallery on your sidebar.You can get my earlier images post by clicking here.
CSS3+Image+Hover+Effects
Demo

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. Now click Proceed button.
   
5. Find this tag by using Ctrl+F    ]]></b:skin>

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

/* The CSS3 image gallery bloggertrix.com */
.photos {
    width: 300px;
    height: 300px;
    margin: 100px auto;
    position:relative;}
.photos > div {
    background-color: rgba(128, 128, 128, 0.5);
    border: 2px solid #444;
    float: left;
    height: 70px;
    margin: 5px;
    overflow: hidden;
    position: relative;
    width: 70px;
    z-index: 1;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    -webkit-transform:scale(1.0);
    -moz-transform:scale(1.0);
    -ms-transform:scale(1.0);
    -o-transform:scale(1.0);
    transform:scale(1.0);
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -ms-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
}
.photos > div img{
    width: 100%;
}
.photos > div:hover{
    z-index: 10;
    -webkit-transform:scale(2.0);
    -moz-transform:scale(2.0);
    -ms-transform:scale(2.0);
    -o-transform:scale(2.0);
    transform:scale(2.0);
}
.photos > div div {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlq8n1rK8Ou8iC2paYrnQreSwJN5FQ8QNMYZKM7pPp2lbrdc5U-dxhlAZHxphhN4MFBBUExjqxc1q1f8qRu9SGBzf9BNV1CQwxoIG-raYQ264wJfFKyISTY6ojnWXhGvdHBZh1Rq4MK7I/s1600/hover.gif) repeat scroll 0 0 transparent;
    cursor: pointer;
    height: 100px;
    left: 0;
    opacity: 0.7;
    position: absolute;
    top: 0;
    width: 100px;
    z-index: 15;
    -webkit-transition-duration: 1.5s;
    -moz-transition-duration: 1.5s;
    -ms-transition-duration: 1.5s;
    -o-transition-duration: 1.5s;
    transition-duration: 1.5s;
}
.photos > div:nth-child(1):hover div {
    height: 0%;
}
.photos > div:nth-child(2):hover div {
    height: 0%;
    margin-top: 100px;
}
.photos > div:nth-child(3):hover div {
    width: 0%;
}
.photos > div:nth-child(4):hover div {
    margin-left: 100px;
    width: 0%;
}
.photos > div:nth-child(5):hover div {
    height: 0%;
    margin-left: 150px;
    margin-top: 50px;
    width: 0%;
}
.photos > div:nth-child(6):hover div {
    margin-left: 150px;
    width: 0%;
}
.photos > div:nth-child(7):hover div {
    height: 0%;
    margin-left: 150px;
    margin-top: 50px;
    width: 0%;
    -webkit-transform: rotateX(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(-360deg);
    transform: rotate(-360deg);
}
.photos > div:nth-child(8):hover div {
    height: 0%;
    margin-left: 150px;
    margin-top: 50px;
    width: 0%;
    -webkit-transform: rotateZ(600deg);
    -moz-transform: rotateZ(600deg);
    -ms-transform: rotateZ(600deg);
    -o-transform: rotateZ(600deg);
    transform: rotateZ(600deg);
}
.photos > div.pair div {
    width: 100px;
}
.photos > div.pair div:nth-child(odd) {
    margin-left: 100px;
}
.photos > div.pair:hover div {
    width: 0%;
}
.photos > div.pair:hover div:nth-child(odd) {
    margin-left: 100px;
}

7. Go to blogger and click Layout

8. Click Add Gadget and select 'HTML/Javascript

9. Paste below code.

<div class="photos">
            <div>
                <a href="URl link 1" target="blank"><img src="Image URL 1" /></a>
                <div></div></div><div>
    
                <a href="URl link 2" target="blank"><img src="Image URL 2" /></a>
                <div></div><div></div>
           
                <a href="URl link 3" target="blank"><img src="Image URL 3" /></a>
                <div></div><div></div>
            
                <a href="URl link 4" target="blank"><img src="Image URL 4" /></a>
                <div></div><div></div>
           
                <a href="URl link 5" target="blank"><img src="Image URL 5" /></a>
                <div></div><div></div>
            
                <a href="URl link 6" target="blank"><img src="Image URL 6" /></a>
                <div></div><div></div>
            
                <a href="URl link 7" target="blank"><img src="Image URL 7" /></a>
                <div></div><div></div>
            
                <a href="URl link 8" target="blank"><img src="Image URL 8" /></a>
                <div></div> </div>
           
                <div class="pair">
                <a href="URl link 9" target="blank"> <img src="Image URL 9" /></a>
                <div></div> <div></div>
            </div>
        </div>
Replace with your URL and Image URL

10. Now save your HTML/Javascript'.

    You are done...
Read More

Wednesday, November 21, 2012

Multi Color Advanced Css3 Menu Bar For Blogger

In this post, im gonna explain, how to add multi color advanced css3 menu for blogger.Im include
2 styles light color and dark color.Im using CSS3 and HTML for creating this menu bar.Its include
nice hover style too.you can check it form demo page. you can get my earlier menu bar post collection  by clicking here

Demo

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. Now click Proceed button.
   
5. Find this tag by using Ctrl+F    ]]></b:skin>

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

/* The CSS Code for the menu starts here bloggertrix.com */
.cbdb-menu li {
    display: block;
    float: left;
    line-height: 35px;
    list-style:none;
    margin: 0 5px;}
.cbdb-menu li a {
    /* This generators the gradient on top of the solid color */
    background-image: -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0, rgba(255,255,255,.5)),
        color-stop(1, rgba(0,0,0,.1))
    );
    background-image: -moz-linear-gradient(
        center top,
        rgba(255,255,255,.5) 0%,
        rgba(0,0,0,.1) 100%
    );
    color: #f4f4f4; /* IE */
    color: rgba(255, 255, 255, 0.8);
    display: block;    
    font: bold 18px "Myriad Pro","Lucida Grande",Helvetica,Arial,sans-serif;        
    outline:none;
    padding: 5px 15px;
    text-decoration: none;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.65);
    -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.65);
    -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.65);    }
    .cbdb-menu li a:active {
        background-image: -webkit-gradient(
            linear,
            left bottom,
            left top,
            color-stop(0,rgba(255,255,255,.5)),
            color-stop(.1,rgba(255,255,255,.2)),
            color-stop(.85, rgba(0,0,0,.2)),
            color-stop(100, rgba(0,0,0,.4))
        );
        background-image: -moz-linear-gradient(
            center bottom,
            rgba(255,255,255,.5) 0%,
            rgba(255,255,255,.2) 10%,
            rgba(0,0,0,.2) 85%,
            rgba(0,0,0,.4) 100%
        );
    }
/* Dark Text */
.cbdb-menu li a.dark {
    color: #333; /* IE */
    color: rgba(0, 0, 0, 0.8);
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.4);
}
/*********** COLORS *************/
/* Create your own class for your own colors */
.red {
    background: #B80202;
    border: #B80202 1px solid}
    .red:hover, .red:focus{
        background-color:#e30606
   }
.green {
    background: #46c431;
    border: #46c431 1px solid}
    .green:hover,.green:focus {
        background-color:#44e329
    }
.yellow {
    background: #D9CE1C;
    border: #D9CE1C 1px solid}
    .yellow:hover,.yellow:focus {
     background-color:#eee117}
.cyan {
    background: #23c6de;
    border: #23c6de 1px solid}
    .cyan:hover,.cyan:focus {
     background-color:#18d8f4
    }
.blue {
    background: #3271d9;
    border: #3271d9 1px solid}
    .blue:hover,.blue:focus {
     background-color:#377ef2
    }
   

7. Go to blogger and click Layout

8. Click Add Gadget and select 'HTML/Javascript

9. Paste below code.

Light menu

css3+light+menu
<ul class="cbdb-menu">

  <li><a href="#" class="red">Home</a> </li>
  <li><a href="#" class="green">Download</a></li>
  <li><a href="#" class="yellow">Design</a></li>
  <li><a href="#" class="cyan">About Us</a> </li>
  <li><a href="http://www.bloggertrix.com/" class="blue">Contact Us</a></li>

</ul>

Dark menu
css3+dark+menu
<ul class="cbdb-menu">
  <li><a href="#" class="red dark">Home</a> </li>
  <li><a href="#" class="green dark">Download</a></li>
  <li><a href="#" class="yellow dark">Design</a></li>
  <li><a href="#" class="cyan dark">About Us</a> </li>
  <li><a href="http://www.bloggertrix.com/" class="blue dark">Contact US</a></li>
  </li>
</ul>

10. Now save your HTML/Javascript'.

    You are done...
Read More

Tuesday, November 20, 2012

Business Trade Blogger Template

forex-business-blogger-template

 Template Name :  Business Trade Blogger Template
  
 Template Author :  http://www.Premiumbtemplates.com/
        
 Designer : Sohan jayasinghe

 Basic Instructions : How to install a Blogger template

 Descriptions : -Fixed, 2 column,2 Menu-bars 1 sidebar, Premium template,
                          Right sidebar,Smooth Menu-bar, wide Smooth Slideshow.3 column Footer
                          Ready for business post, Black,Grey and Blue color ,Round corners.

Read More

Monday, November 19, 2012

Beautiful Rss Feed Subscription Box For Blogger

Today I'm gonna explain how to add beautiful Rss Feed subscription box for blogger.using this widget users can add their emails and subscribe your Rss feed.This is a simple widget,So you can
add it to your blog easily.This is compatible with all browsers. Im using CSS and HTML for this feed box.You can get my earlier Rss feed Post by
clicking here


Beautiful+Rss+Feed+Subscription+Box+For+Blogger

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

3. Click Add Gadget and select 'HTML/Javascript

4. Paste below one of below code.

<style>

.bordered {
    border: solid #ff7417 2px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0 1px 1px #ccc;
    -moz-box-shadow: 0 1px 1px #ccc;
    box-shadow: 0 1px 1px #ccc;       
}
.bordered2 {
height: 25px;
    background-color: #ff7417;
    -webkit-border-top-left-radius: 6px;
    -khtml-border-radius-topleft: 6px;
    -moz-border-radius-topleft: 6px;
     border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    -khtml-border-radius-topright: 6px;
    -moz-border-radius-topright: 6px;
     border-top-right-radius: 6px;     
     text-shadow: 0 1px 0 rgba(255,255,255,.5);
     border-top: solid #ffffff 1px;
}
</style>
<div class="bordered">
<div class="bordered2">
<center>
<span style="color: #ffffff; font-size: 16px;"><b>Subscribe Now</b></span></center></div>
<a href="http://feeds2.feedburner.com/bloggertrix" rel="alternate" title="Subscribe now to avail the unthinkable" type="application/rss+xml"><img border="0" alt="" style=" padding-bottom:20px; margin: 0pt 10px 10px 0pt; float: left; width:100px; height:100px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdSPIGN5xLsndEe-Dq6YqegTgqzARvkK17tOcnsmyHM4lz6q83mG2IB0FgixCiTexT2SYbXNunS-iXPBYLKBM6gE2VuncVILXqD7Qyhcut86igdfQI4plBcjcG3BI1Gvon_QTszTs3Gds/s1600/RSS-Reader-Book-icon.png"/></a><p><a href="http://feeds2.feedburner.com/bloggertrix" rel="alternate" title="Subscribe to my feed" type="application/rss+xml">Get free email updates </a><span style="color: #ffffff; font-weight: bold;">By submitting your email address here</span></p>
<style>
input.bt {
color:#fff;
font: bold 10px Arial, sans-serif;
background:#F39100;
border:0;
padding:3px;

}
input.bthov {
color:#fff;
font: bold 10px Arial, sans-serif;
border:2px solid #F39100;
padding:3px;
}
</style>
<form action="http://feedburner.google.com/fb/a/mailverify" style="padding: 5px; " target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloggertrix', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input style=" color:#ffffff; background: #fff; border:1px solid #ff7417; width: 90px;" name="email" type="text"/>
<input value="bloggertrix" name="uri" type="hidden"/><input value="en_US" name="loc" type="hidden"/> <input onmouseover="this.className='bt bthov'" onmouseout="this.className='bt'" value="GO!" class="bt" type="submit"/></form><br/>
</div>
Replace Bloggertrix with your Feedburner ID

7. Now save your HTML/Javascript'.

    You are done...
Read More

Sunday, November 18, 2012

CSS Chocolate Style Menubar For Blogger

This post will  explain  about how  to add chocolate color  style menu bar for  your blog. This menu  bar include nice hover style  with sub menu.you can  try this menu  bar  for  your  blog. Im  using  CSS  and HTML for this tutorial. you can get my earlier menu bar post collection  by clicking here

Demo

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. Now click Proceed button.
   
5. Find this tag by using Ctrl+F    ]]></b:skin>

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

/* The CSS Code for the menu starts here bloggertrix.com */
#menu10 ul {
    list-style:none;
    font-family: Georgia, serif;
    font-size: 30px;
    letter-spacing: -3px;
    line-height: 1.2em;
    float:left;
    clear:both;
    margin:20px;
    
}
#menu10 ul li{
    float:left;
border:1px solid #5F3B2F;
}
#menu10 ul li a{
    display:block;
    text-decoration:none;
    
    background-color:#955542;
    width:170px;
    text-align:center;
}
#menu10 ul li a span{
    display:block;
}
#menu10 ul li a span.title{
    color:#fff;
    padding-bottom:5px;
}
#menu10 ul li a:hover{

}
#menu10 ul li a:hover span.title{
    font-family: Georgia, serif;
    font-size: 10px;
    font-style: normal;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 2em;
    color:#fff;
    border:1px dashed #fff;
    padding-bottom:3px;
    background-color:#AF6C57;
}
#menu10 ul li a span.text{
    padding:0px 5px;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: normal;
    line-height: 1.4em;
    color:#fff;
    background-color:#5F3B2F;
    visibility:hidden;
    border-bottom:1px groove #AF6C57;
}
#menu10 ul li a:hover span.text{
    line-height: 3.4em;
    visibility:visible;
}
   

7. Go to blogger and click Layout

8. Click Add Gadget and select 'HTML/Javascript

9. Paste below code.

<div id="menu10">
            <ul>
                <li><a href="">
                        <span class="title">Home</span>
                        <span class="text">Who we are</span>
                    </a>
                </li>
                <li><a href="">
                        <span class="title">Download</span>
                        <span class="text">What we do</span>
                    </a>
                </li>
                <li><a href="">
                        <span class="title">About</span>
                        <span class="text">What we talk about</span>
                    </a>
                </li>
                <li><a href="http://www.bloggertrix.com/">
                        <span class="title">Contact</span>
                        <span class="text">How to get in touch</span>
                    </a>
                </li>
            </ul>
        </div>

10. Now save your HTML/Javascript'.

    You are done...
Read More

Saturday, November 17, 2012

Attractive CSS Cloud Label Style For Blogger

In this post im gonna explain how to add nice label /category widget  for blogger  few weeks ago i was posted   about  Attractive  Css3  Labels /  Category  Widget For  Blogger. So,  this  is  also  same  trick. However this is also same trick with different style. Im using CSS for  this  trick  check blow image for example.Earlier i posted about same trick Change Blogger Label Links As Brick / Box Style. Follow below steps to add it to your blog.Its easy.

Attractive+cloud+label+for+blogger


1. Log in to blogger account & Go to Design >> Edit HTML

2. Find this code  by using Ctrl+F  ]]></b:skin>

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

/*-----Custom Labels Cloud widget by www.bloggertrix.com----*/
.label-size{
margin:0 2px 6px 0;
padding: 3px;
text-transform: uppercase;
border: solid 1px #C6C6C6;
border-radius: 3px;
float:left;
text-decoration:none;font-size:10px;color:#666;}

.label-size:hover {
border:1px solid #6BB5FF;
text-decoration: none;-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-ms-transform: rotate(7deg);
transform: rotate(7deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;
}
.label-size a {
text-transform: uppercase;
float:left;
text-decoration: none;
}.label-size a:hover {
text-decoration: none;
}

4. Now Click  Save Template.

    You are done...
Read More

Friday, November 16, 2012

Add Attractive Animated CSS Buttons For Blogger

Today im  gonna  explain how to add css3 stylish animated  buttons  for your blogger. you can  use
this buttons as  download   buttons, demo buttons, redirect to other page and etc.Im  using  CSS  and
H
TML for this. you can use this button code in to your blogger post too.Check my  earlier post about
Button codes here
.

Stylish+Css+buttons
Demo

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. Now click Proceed button.
   
5. Find this tag by using Ctrl+F    ]]></b:skin>

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

.button{
font:15px Calibri, Arial, sans-serif;
text-shadow:1px 1px 0 rgba(255,255,255,0.4);
text-decoration:none !important;
white-space:nowrap;
display:inline-block;
vertical-align:baseline;
position:relative;
cursor:pointer;
padding:10px 20px;
background-repeat:no-repeat;
background-position:bottom left;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG5WHZqtpOBfcpfA4iOTIhUS1UoVenD9VC6bITZCx9WVhgIoA4bc0mTgT4YTWsa9WW7kkc5Y4l9QdRn7FBOxiYnDgCu6fzqFpraZhZmCnVH0jLLPhWm9w9IqzRQeKdK2GB4O8sMufHfGeI/s144/button_bg.png');
background-position:bottom left, top right, 0 0, 0 0;
background-clip:border-box;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
-moz-box-shadow:0 0 1px #fff inset;
-webkit-box-shadow:0 0 1px #fff inset;
box-shadow:0 0 1px #fff inset;
-webkit-transition:background-position 1s;
-moz-transition:background-position 1s;
transition:background-position 1s;
}
.button:hover{
background-position:top left;
background-position:top left, bottom right, 0 0, 0 0;
}
.button:active{
bottom:-1px;
}
/* The three buttons sizes */
.button.big { font-size:30px;}
.button.medium { font-size:18px;}
.button.small { font-size:13px;}
/* BlueButton */
.blue.button{
color:#0f4b6d !important;
border:1px solid #84acc3 !important;
background-color: #48b5f2;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG5WHZqtpOBfcpfA4iOTIhUS1UoVenD9VC6bITZCx9WVhgIoA4bc0mTgT4YTWsa9WW7kkc5Y4l9QdRn7FBOxiYnDgCu6fzqFpraZhZmCnVH0jLLPhWm9w9IqzRQeKdK2GB4O8sMufHfGeI/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG5WHZqtpOBfcpfA4iOTIhUS1UoVenD9VC6bITZCx9WVhgIoA4bc0mTgT4YTWsa9WW7kkc5Y4l9QdRn7FBOxiYnDgCu6fzqFpraZhZmCnVH0jLLPhWm9w9IqzRQeKdK2GB4O8sMufHfGeI/s144/button_bg.png'),
-moz-radial-gradient( center bottom, circle,
rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),
-moz-linear-gradient(#4fbbf7, #3faeeb);
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG5WHZqtpOBfcpfA4iOTIhUS1UoVenD9VC6bITZCx9WVhgIoA4bc0mTgT4YTWsa9WW7kkc5Y4l9QdRn7FBOxiYnDgCu6fzqFpraZhZmCnVH0jLLPhWm9w9IqzRQeKdK2GB4O8sMufHfGeI/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG5WHZqtpOBfcpfA4iOTIhUS1UoVenD9VC6bITZCx9WVhgIoA4bc0mTgT4YTWsa9WW7kkc5Y4l9QdRn7FBOxiYnDgCu6fzqFpraZhZmCnVH0jLLPhWm9w9IqzRQeKdK2GB4O8sMufHfGeI/s144/button_bg.png'),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));
}
.blue.button:hover{
background-color:#63c7fe;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG5WHZqtpOBfcpfA4iOTIhUS1UoVenD9VC6bITZCx9WVhgIoA4bc0mTgT4YTWsa9WW7kkc5Y4l9QdRn7FBOxiYnDgCu6fzqFpraZhZmCnVH0jLLPhWm9w9IqzRQeKdK2GB4O8sMufHfGeI/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG5WHZqtpOBfcpfA4iOTIhUS1UoVenD9VC6bITZCx9WVhgIoA4bc0mTgT4YTWsa9WW7kkc5Y4l9QdRn7FBOxiYnDgCu6fzqFpraZhZmCnVH0jLLPhWm9w9IqzRQeKdK2GB4O8sMufHfGeI/s144/button_bg.png'),
-moz-radial-gradient( center bottom, circle,
rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),
-moz-linear-gradient(#63c7fe, #58bef7);
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG5WHZqtpOBfcpfA4iOTIhUS1UoVenD9VC6bITZCx9WVhgIoA4bc0mTgT4YTWsa9WW7kkc5Y4l9QdRn7FBOxiYnDgCu6fzqFpraZhZmCnVH0jLLPhWm9w9IqzRQeKdK2GB4O8sMufHfGeI/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG5WHZqtpOBfcpfA4iOTIhUS1UoVenD9VC6bITZCx9WVhgIoA4bc0mTgT4YTWsa9WW7kkc5Y4l9QdRn7FBOxiYnDgCu6fzqFpraZhZmCnVH0jLLPhWm9w9IqzRQeKdK2GB4O8sMufHfGeI/s144/button_bg.png'),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));
}
/* Green Button */
.green.button{
color:#345903 !important;
border:1px solid #96a37b !important;
background-color: #79be1e;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG5WHZqtpOBfcpfA4iOTIhUS1UoVenD9VC6bITZCx9WVhgIoA4bc0mTgT4YTWsa9WW7kkc5Y4l9QdRn7FBOxiYnDgCu6fzqFpraZhZmCnVH0jLLPhWm9w9IqzRQeKdK2GB4O8sMufHfGeI/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG5WHZqtpOBfcpfA4iOTIhUS1UoVenD9VC6bITZCx9WVhgIoA4bc0mTgT4YTWsa9WW7kkc5Y4l9QdRn7FBOxiYnDgCu6fzqFpraZhZmCnVH0jLLPhWm9w9IqzRQeKdK2GB4O8sMufHfGeI/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27, #74b317);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG5WHZqtpOBfcpfA4iOTIhUS1UoVenD9VC6bITZCx9WVhgIoA4bc0mTgT4YTWsa9WW7kkc5Y4l9QdRn7FBOxiYnDgCu6fzqFpraZhZmCnVH0jLLPhWm9w9IqzRQeKdK2GB4O8sMufHfGeI/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG5WHZqtpOBfcpfA4iOTIhUS1UoVenD9VC6bITZCx9WVhgIoA4bc0mTgT4YTWsa9WW7kkc5Y4l9QdRn7FBOxiYnDgCu6fzqFpraZhZmCnVH0jLLPhWm9w9IqzRQeKdK2GB4O8sMufHfGeI/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(162,211,30,1)), to(rgba(162,211,30,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#82cc27), to(#74b317));
}
.green.button:hover{
background-color:#89d228;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG5WHZqtpOBfcpfA4iOTIhUS1UoVenD9VC6bITZCx9WVhgIoA4bc0mTgT4YTWsa9WW7kkc5Y4l9QdRn7FBOxiYnDgCu6fzqFpraZhZmCnVH0jLLPhWm9w9IqzRQeKdK2GB4O8sMufHfGeI/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG5WHZqtpOBfcpfA4iOTIhUS1UoVenD9VC6bITZCx9WVhgIoA4bc0mTgT4YTWsa9WW7kkc5Y4l9QdRn7FBOxiYnDgCu6fzqFpraZhZmCnVH0jLLPhWm9w9IqzRQeKdK2GB4O8sMufHfGeI/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31, #7fc01e);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG5WHZqtpOBfcpfA4iOTIhUS1UoVenD9VC6bITZCx9WVhgIoA4bc0mTgT4YTWsa9WW7kkc5Y4l9QdRn7FBOxiYnDgCu6fzqFpraZhZmCnVH0jLLPhWm9w9IqzRQeKdK2GB4O8sMufHfGeI/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG5WHZqtpOBfcpfA4iOTIhUS1UoVenD9VC6bITZCx9WVhgIoA4bc0mTgT4YTWsa9WW7kkc5Y4l9QdRn7FBOxiYnDgCu6fzqFpraZhZmCnVH0jLLPhWm9w9IqzRQeKdK2GB4O8sMufHfGeI/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(183,229,45,1)), to(rgba(183,229,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#90de31), to(#7fc01e));
}
/* Orange Button */
.orange.button{
color:#693e0a !important;
border:1px solid #bea280 !important;
background-color: #e38d27;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG5WHZqtpOBfcpfA4iOTIhUS1UoVenD9VC6bITZCx9WVhgIoA4bc0mTgT4YTWsa9WW7kkc5Y4l9QdRn7FBOxiYnDgCu6fzqFpraZhZmCnVH0jLLPhWm9w9IqzRQeKdK2GB4O8sMufHfGeI/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG5WHZqtpOBfcpfA4iOTIhUS1UoVenD9VC6bITZCx9WVhgIoA4bc0mTgT4YTWsa9WW7kkc5Y4l9QdRn7FBOxiYnDgCu6fzqFpraZhZmCnVH0jLLPhWm9w9IqzRQeKdK2GB4O8sMufHfGeI/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f, #d4821f);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG5WHZqtpOBfcpfA4iOTIhUS1UoVenD9VC6bITZCx9WVhgIoA4bc0mTgT4YTWsa9WW7kkc5Y4l9QdRn7FBOxiYnDgCu6fzqFpraZhZmCnVH0jLLPhWm9w9IqzRQeKdK2GB4O8sMufHfGeI/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG5WHZqtpOBfcpfA4iOTIhUS1UoVenD9VC6bITZCx9WVhgIoA4bc0mTgT4YTWsa9WW7kkc5Y4l9QdRn7FBOxiYnDgCu6fzqFpraZhZmCnVH0jLLPhWm9w9IqzRQeKdK2GB4O8sMufHfGeI/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(232,189,45,1)), to(rgba(232,189,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1982f), to(#d4821f));
}
.orange.button:hover{
background-color:#ec9732;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG5WHZqtpOBfcpfA4iOTIhUS1UoVenD9VC6bITZCx9WVhgIoA4bc0mTgT4YTWsa9WW7kkc5Y4l9QdRn7FBOxiYnDgCu6fzqFpraZhZmCnVH0jLLPhWm9w9IqzRQeKdK2GB4O8sMufHfGeI/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG5WHZqtpOBfcpfA4iOTIhUS1UoVenD9VC6bITZCx9WVhgIoA4bc0mTgT4YTWsa9WW7kkc5Y4l9QdRn7FBOxiYnDgCu6fzqFpraZhZmCnVH0jLLPhWm9w9IqzRQeKdK2GB4O8sMufHfGeI/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746, #e18f2b);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG5WHZqtpOBfcpfA4iOTIhUS1UoVenD9VC6bITZCx9WVhgIoA4bc0mTgT4YTWsa9WW7kkc5Y4l9QdRn7FBOxiYnDgCu6fzqFpraZhZmCnVH0jLLPhWm9w9IqzRQeKdK2GB4O8sMufHfGeI/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG5WHZqtpOBfcpfA4iOTIhUS1UoVenD9VC6bITZCx9WVhgIoA4bc0mTgT4YTWsa9WW7kkc5Y4l9QdRn7FBOxiYnDgCu6fzqFpraZhZmCnVH0jLLPhWm9w9IqzRQeKdK2GB4O8sMufHfGeI/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(241,192,52,1)), to(rgba(241,192,52,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9a746), to(#e18f2b));
}
/* Orange Button */
.gray.button{
color:#525252 !important;
border:1px solid #a5a5a5 !important;
background-color: #a9adb1;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG5WHZqtpOBfcpfA4iOTIhUS1UoVenD9VC6bITZCx9WVhgIoA4bc0mTgT4YTWsa9WW7kkc5Y4l9QdRn7FBOxiYnDgCu6fzqFpraZhZmCnVH0jLLPhWm9w9IqzRQeKdK2GB4O8sMufHfGeI/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG5WHZqtpOBfcpfA4iOTIhUS1UoVenD9VC6bITZCx9WVhgIoA4bc0mTgT4YTWsa9WW7kkc5Y4l9QdRn7FBOxiYnDgCu6fzqFpraZhZmCnVH0jLLPhWm9w9IqzRQeKdK2GB4O8sMufHfGeI/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca, #92989c);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG5WHZqtpOBfcpfA4iOTIhUS1UoVenD9VC6bITZCx9WVhgIoA4bc0mTgT4YTWsa9WW7kkc5Y4l9QdRn7FBOxiYnDgCu6fzqFpraZhZmCnVH0jLLPhWm9w9IqzRQeKdK2GB4O8sMufHfGeI/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG5WHZqtpOBfcpfA4iOTIhUS1UoVenD9VC6bITZCx9WVhgIoA4bc0mTgT4YTWsa9WW7kkc5Y4l9QdRn7FBOxiYnDgCu6fzqFpraZhZmCnVH0jLLPhWm9w9IqzRQeKdK2GB4O8sMufHfGeI/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(197,199,202,1)), to(rgba(197,199,202,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#c5c7ca), to(#92989c));
}
.gray.button:hover{
background-color:#b6bbc0;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG5WHZqtpOBfcpfA4iOTIhUS1UoVenD9VC6bITZCx9WVhgIoA4bc0mTgT4YTWsa9WW7kkc5Y4l9QdRn7FBOxiYnDgCu6fzqFpraZhZmCnVH0jLLPhWm9w9IqzRQeKdK2GB4O8sMufHfGeI/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG5WHZqtpOBfcpfA4iOTIhUS1UoVenD9VC6bITZCx9WVhgIoA4bc0mTgT4YTWsa9WW7kkc5Y4l9QdRn7FBOxiYnDgCu6fzqFpraZhZmCnVH0jLLPhWm9w9IqzRQeKdK2GB4O8sMufHfGeI/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6, #9fa5a9);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG5WHZqtpOBfcpfA4iOTIhUS1UoVenD9VC6bITZCx9WVhgIoA4bc0mTgT4YTWsa9WW7kkc5Y4l9QdRn7FBOxiYnDgCu6fzqFpraZhZmCnVH0jLLPhWm9w9IqzRQeKdK2GB4O8sMufHfGeI/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG5WHZqtpOBfcpfA4iOTIhUS1UoVenD9VC6bITZCx9WVhgIoA4bc0mTgT4YTWsa9WW7kkc5Y4l9QdRn7FBOxiYnDgCu6fzqFpraZhZmCnVH0jLLPhWm9w9IqzRQeKdK2GB4O8sMufHfGeI/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(202,205,208,1)), to(rgba(202,205,208,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d3d6), to(#9fa5a9));
}

7. Go to blogger and click Layout

8. Click Add Gadget and select 'HTML/Javascript

9. Paste below code.

(You can use this code anywhere in your post.)
<a class="button big blue" href="Your Link" target="_blank">Live Demo</a>

<a class="button big orange" href="Your Link" target="_blank">Live Demo</a>

<a class="button big green" href="Your Link" target="_blank">Live Demo</a>

<a class="button big gray" href="Your Link" target="_blank">Live Demo</a>
Replace  with your links.

10. Now save your HTML/Javascript'.

    You are done...
Read More