How To Add Cool Css Menubar For Blogger

This is a attractive menu bar to your blog,
This tutorial will helps you to add it to your blog.

DEMO

1. Log in to blogger account and Go to Design >> Edit HTML
    (make sure backup your template first)

2. Put checked marked in Expand Widget Templates

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

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

#btrixbar {width:100%;margin-left:-40px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOJPmgwmJvf4jeJV_s-TXXEAHG_cdeUc9SNtd3swXcDWriv1ZDeRp-mxghNEglKQkJKlujtz-4DIeT7Ze0z6nprJZPXrQvYq9CgpuZ6_Kx2TVnVJfzmTYsyH21UqTIv4vJMRzAeXR2p8TM/s1600/btrixmain.jpg) repeat-x;}
#btrixbar li {float: left;display: block;}
#btrixbar li a {float: left;display: block;padding: 12px 18px 12px 18px;text-transform: uppercase;text-decoration:none;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4c4IK6NAKVlPYktg4ruaA4ELizJY90mTCIjSejZFOkpvGlo4NJO7qUxFeyXGiNp07ZSgaXACd2yX09FbRDU1RT7hnimdKWCcu8t0JFjOIGKRLzwHHdSBCkHJYrJH83NfMTUXyqo-Fo-3x/s1600/brix-bg.jpg) no-repeat top right;color:#ffffff;}
#btrixbar li a:hover {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4c4IK6NAKVlPYktg4ruaA4ELizJY90mTCIjSejZFOkpvGlo4NJO7qUxFeyXGiNp07ZSgaXACd2yX09FbRDU1RT7hnimdKWCcu8t0JFjOIGKRLzwHHdSBCkHJYrJH83NfMTUXyqo-Fo-3x/s1600/brix-bg.jpg) no-repeat right -40px;color:#ffffff;text-decoration:none;}
ul#btrixbar li.current_page_item a, ul#nav li.current-cat a {color: #fff;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4c4IK6NAKVlPYktg4ruaA4ELizJY90mTCIjSejZFOkpvGlo4NJO7qUxFeyXGiNp07ZSgaXACd2yX09FbRDU1RT7hnimdKWCcu8t0JFjOIGKRLzwHHdSBCkHJYrJH83NfMTUXyqo-Fo-3x/s1600/brix-bg.jpg) no-repeat right -80px;}
#btrixbar li ul {display: none;}

5. Now Find this code  by using Ctrl+F <div id='content-wrapper'>

6.  Paste below code Before <div id='content-wrapper'> code

<ul id="btrixbar">
<li class="current_page_item"><a href="#">Home</a></li>
<li><a href="#" title="#">Blogger</a></li>
<li><a href="#" title="#">Comments</a></li>
<li><a href="#" title="#">Themes</a></li>
<li><a href="#" title="#">Forum</a></li>
<li><a href="#" title="#">Download</a></li>
<li><a href="#" title="#">Contact Us</a></li>
</ul>
<div class="clear"></div>

*Replace # With your URL
*Replace Name with your any menu name.

7. Now save your template
 you are done.

Continue reading →

Animated gif image: How to change size

This in response to a question in Uploading animated .gif image to Blogger post which asked: "please tell me how to change height and width of that image?"

The answer is very simple if you just know a little of HTML. To display a picture on the web, an image tag <img> is used. Thus:

<img src="image URL" />
(just concentrate on img leaving aside src if you are not familiar with HTML)

To change the size, just add the attributes width="some number" and height="some number" (Note: the picture will be distorted {aspect ration changed) unless you keep the ratio constant. The task will be made easier if you just add the width attribute only leaving out the height and the height will be adjusted accordingly.

For example, in the HTML to display the animated gif image in Testing uploading animated gif image (image replicated below),



the following code is used:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm2KZ2cJ4qLyyUXs-lhKNKABK2Vk-sg0__wXuLDM0z1MiOMU5bk_TfyQI6tcwx2YkNYHbBR3m9NCg3jzN_sfAg2Mt_od_gqNX8fW1JgLXBdLJJUYS2XvpduJQ01Y_Xjt5TVzRWWPb3knA/s1600-h/starandbird.gif"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm2KZ2cJ4qLyyUXs-lhKNKABK2Vk-sg0__wXuLDM0z1MiOMU5bk_TfyQI6tcwx2YkNYHbBR3m9NCg3jzN_sfAg2Mt_od_gqNX8fW1JgLXBdLJJUYS2XvpduJQ01Y_Xjt5TVzRWWPb3knA/s400/starandbird.gif" border="0" alt="gif image uploaded direct from Blogger post editor"id="BLOGGER_PHOTO_ID_5108675258397126626" /></a>

Now when I add width="350" to the img tag as shown below (note: just concentrate on img and ignore the rest):

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm2KZ2cJ4qLyyUXs-lhKNKABK2Vk-sg0__wXuLDM0z1MiOMU5bk_TfyQI6tcwx2YkNYHbBR3m9NCg3jzN_sfAg2Mt_od_gqNX8fW1JgLXBdLJJUYS2XvpduJQ01Y_Xjt5TVzRWWPb3knA/s1600-h/starandbird.gif"><img width="350" style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm2KZ2cJ4qLyyUXs-lhKNKABK2Vk-sg0__wXuLDM0z1MiOMU5bk_TfyQI6tcwx2YkNYHbBR3m9NCg3jzN_sfAg2Mt_od_gqNX8fW1JgLXBdLJJUYS2XvpduJQ01Y_Xjt5TVzRWWPb3knA/s400/starandbird.gif" border="0" alt="gif image uploaded direct from Blogger post editor"id="BLOGGER_PHOTO_ID_5108675258397126626" /></a>

the image is enlarged as in the image below:

Update: Tip: Always specify both the height and width attributes for images. If height and width are set, the space required for the image is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the image, and cannot reserve the appropriate space to it. The effect will be that the page layout will change during loading (while the images load).

Tip: Downsizing a large image with the height and width attributes forces a user to download the large image (even if it looks small on the page). To avoid this, rescale the image with a program before using it on a page.

Source: W3schools: HTML width Attribute.

Now to make it smaller, the attribute width="50" is added instead as in

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm2KZ2cJ4qLyyUXs-lhKNKABK2Vk-sg0__wXuLDM0z1MiOMU5bk_TfyQI6tcwx2YkNYHbBR3m9NCg3jzN_sfAg2Mt_od_gqNX8fW1JgLXBdLJJUYS2XvpduJQ01Y_Xjt5TVzRWWPb3knA/s1600-h/starandbird.gif"><img width="50" style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm2KZ2cJ4qLyyUXs-lhKNKABK2Vk-sg0__wXuLDM0z1MiOMU5bk_TfyQI6tcwx2YkNYHbBR3m9NCg3jzN_sfAg2Mt_od_gqNX8fW1JgLXBdLJJUYS2XvpduJQ01Y_Xjt5TVzRWWPb3knA/s400/starandbird.gif" border="0" alt="gif image uploaded direct from Blogger post editor"id="BLOGGER_PHOTO_ID_5108675258397126626" width="50"/></a>

and as expected, the animated picture is now smaller:

Continue reading →

How To Add Reply Option To blogger Comment

This is cool option for your blogger. You can add reply button
to your every blogger comment. so it will help you to reply
to questions easily.

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

2. Make sure you put check mark to “Expand Widget Templates”

3. Find this tag by using Ctrl+F  <data:commentPostedByMsg/> 

4. Paste  below code After  <data:commentPostedByMsg/> code

<span><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=YOUR-BLOG-ID&amp;postID=&quot; + data:post.id + &quot;&amp;
isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;'
 onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450&quot;); return false;'>
<img alt='Reply To This Comment' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiinqMg78D28JLa9x2hgEYHoyvpqLeXIktdipAEwhLHwNwuwO6Rh7NUZmKuHiPdzrxPjOAOewmaG__8BbYGlVE6Jqd42ZYyfHw3bGwn-lvSpNSdKG6L0ouatEsdDbfujN3rgROybSIvP0r1/s1600/reply.png'/></a></span>

You can replace YOUR-BLOG-ID with your ID

Go to dashboard and click design, then you can get your blog ID on Address bar.
It looks like below.

You can replace Pink color URL with other image URL if you want.

5. After you did it, you can click Save Template
   You are done.

Continue reading →

How To Add Jquery Multi Tab View Widget For Blogger

1. Log in to your blogger  and Go to Design >> Edit HTML

2.  put check mark to “Expand Widget Templates”

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

4. Paste  below code Before  </head> tag

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js">
</script>
<script>
    $(document).ready(function() {
        $("#tabs").tabs();
    });
</script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/blitzer/jquery-ui.css" type="text/css" />

5. Now Go to Design >> Page Element

6. Click Add Gadget and select 'HTML/Javascript'

7. Paste below one of below code.

<div id="tabs">
<ul><li>
<a href="#tabs-1">Tab-1</a></li><li>
<a href="#tabs-2">Tab-2</a></li><li>
<a href="#tabs-3">Tab-3</a></li></ul>
<div id="tabs-1">Script or Text Here</div>
<div id="tabs-2">Script or Text Here</div>
<div id="tabs-3">Script or Text Here</div>

You can replace Script or Text Here  with text or any script you want.

8.  After save HTML/Javascript 
you are done.

Continue reading →

13 Basic tips for SEO

SEO, things you should know:

1. Be sure your website can be tracked using XML maps and robots.txt files.
2. Use follow links in your web
3. Make a solid content by the use of keywords
4. Avoid the use of the main contains of your site in rich media (flash, silverlight)
5. Write a quality meta tag with an unique content (between 160-180 characters "25-30 words"
6. Use of the "ALT " and "TITLE" tags (make them easy and usefull)
7. Insert RSS feed
8. Is working fine your HTML and CSS? check it and find errors and broken links
9. Make social your web adding the "share" buttons from the most popular social networks
10. Don't use links farms
11. Don't duplicate content
12. Non abusive use of the linkback promotion "anchor text linkback" (keywords, don't abuse you can be flag)
13. Have a personal favicon gives value to your site

Those tips are not new for the SEO professionals, but always is good to have reminder about the best practices.

Continue reading →

How to Add Floating Rss Subscribe Box For Blogger

How to Add Floating Rss Subscribe Box For Blogger

This is cool tricks for blogger, You can add Floating Rss
Subscribe Box For  to your blogger, It will show on your
every page, SO you can get more Subscribers, Follow
below steps to add it.

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

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

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

.element { position:fixed; bottom:1%; right:1%; padding:10px;  border:1px solid #2FBAF6; }

5. Now Go to Design >>page Element

6.Click Add gadget  and Select HTML/JavaScript 

7. Now paste paste below code

<div class="element">  
<div class="rss_box">Sign up to receive latest Update free</div>
                <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open
('http://feedburner.google.com/fb/a/mailverify?uri=YOUR FEED BURNER ID', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" id="rss_form">
                    <input type="text" name="email" id="email_rss" value="Enter your email!" onblur="if (this.value == '') {this.value = 'Enter your email!';}"  onfocus="if (this.value == 'Enter your email!') {this.value = '';}" />
                    <input type="submit" name="subscribe_email_btn" id="subscribe_email_btn" value="" />
                    <input type="hidden" value="technology/tricks" name="uri"/>

                    <input type="hidden" name="loc" value="en_US"/>
                </form>
<style>
.rss_box { /*in content */
    display: block;
    background-image:url(http://www.technologytricks.com/themes/techified/wp-content/themes/techified/images/rss_icon.jpg);
    background-repeat:no-repeat;
    padding-left: 40px;
    height: 40px;
    border: 0;
}
#sidebar #rss_form { /*in content */
}
#rss_form #email_rss {
    background: none;
    border: 1px solid #CCCCCC;
    margin: 0px 0px 0px 7px;
    padding: 2px 3px 0px 30px;
    width: 182px;
    height: 18px;
    outline: 0;
    color:#666666;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    font-size:12px;
    background-image:url(http://www.technologytricks.com/themes/techified/wp-content/themes/techified/images/email.png);
    background-repeat:no-repeat;
    background-position: 5px 3px;
}
#rss_form #subscribe_email_btn {
    width:50px;
    height:21px;
    border:none;
    background:url(http://www.technologytricks.com/themes/techified/wp-content/themes/techified/images/go.png) no-repeat;
    cursor:pointer;
    margin-left: 7px;
}

</style>
</div>

*Replace YOUR FEED BURNER ID with your Feed URL

8.  Now save  HTML/JavaScript.  you are done.

Continue reading →

How To Add Flag Social Share Bookmark For Blogger

1.  Log in to blogger account  Design  >> Edit HTML.
    
2. Make sure "Expand Widget Templates" checked.  

3.  Find these tag  by using Ctrl+F   <data:post.body/>

4. After <data:post.body/> tag  paste below code

<span style='font-style: italic; font-size: 30px; font-variant: small-caps; font-family: century gothic;'>Do you Like this Article?</span>
<tr>
<td align='right'>
<a href='your feedburner url here' title='suscribe to rss feed'><img src='http://santabanta.mywapblog.com/files/rss9.png'/></a>
<a href='&quot;http://twitter.com/share?text=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url' target='_blank' title='follow me on twitter'><img src='http://santabanta.mywapblog.com/files/twitter9.png'/></a>


<a href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' target='_blank' title='share on facebook !'>
<img src='http://santabanta.mywapblog.com/files/facebook9.png'/></a>

<a href='http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img src='http://santabanta.mywapblog.com/files/stumbled9.png'/></a>

</td></tr>

Replace your feedburner url here with your Feed URl
5. Now save your Template.
You are done,

Continue reading →

How To Add Welcome Message For Blogger

Using this post , you can add welcome message to your blog.

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

2. Put checked marked in Expand Widget Templates

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

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

.element { position:fixed; bottom:1%; right:1%; padding:10px; font-family:Arial;
 background:#98DBF7; border:1px solid #2FBAF6; }

5. Now Go to Design >>page Element

6.Click Add gadget  and Select HTML/JavaScript 

7. Now paste paste below code

<div class="element">... Message Here ...</div>

Replace Blue color sentence with your own message

8.  Now save  HTML/JavaScript.  you are done.

Continue reading →

How To Add Cool Horizontal CSS Menu Bar For Blogger

This is nice menu bar to your blog,add it to your blog.

Demo here

1. Log in to your blogger account and Go to Design >>page Element

2.Click Add gadget and Select 'HTML/JavaScript' 

3. Now paste paste below code

<style>
#nav1 {
 margin: 0;
 padding: 6px 7px 0;
 height:37px;
 background: #7d7d7d url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtC-UKVVMVUur2rYQ4U3yKP3ZcbK-zfF29H2-g1EaELupD58fVX2wb0oDEWM8GAurLgHBykldHJ0uQ3Cqsr2JarjZPziyifzCdeuueNzhGHP7Fx9fCQTmmU-NpOcVnrwgAIkf7KLYJ477p/s320/image1.png) repeat-x 0 -110px;
 line-height: 100%;

 border-radius: 3em;
 -webkit-border-radius: 3em;
 -moz-border-radius: 3em;

 -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
 -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
}
#nav1 li {
 margin: 0 5px;
 padding: 0 0 8px;
 float: left;
 position: relative;
 list-style: none;
}


/* main level link */
#nav1 a {
 font-weight: bold;
 color: #000000;
 text-decoration: none;
 display: block;
 padding:  8px 20px;
 margin: 0;

 -webkit-border-radius: 1.6em;
 -moz-border-radius: 1.6em;

 text-shadow: 0 1px 1px rgba(0,0,0, .3);
}
#nav1 a:hover {
 background: #000;
 color: #fff;
}

/* main level link hover */
#nav1 .current a, #nav1 li:hover > a {
 background: #666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgek4ME8dGxH8DxCor2t0bWxBX_bx6Rxc51XEK9IulXQXEGfVctGVG_TPP5EscOr-U8DwOywJIYkMrD1MrZ-VbeRReGA7xyka9bE_UXjVGTZB89DsDQ3rbEJGnfcFwhq5YBtZ25nhFF_2nz/s320/image1.png) repeat-x 0 -40px;
 color: #444;
 border-top: solid 1px #f8f8f8;

 -webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);
 -moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);
 box-shadow: 0 1px 1px rgba(0,0,0, .2);

 text-shadow: 0 1px 0 rgba(255,255,255, 1);
}

/* sub levels link hover */
#nav1 ul li:hover a, #nav li:hover li a {
 background: none;
 border: none;
 color: #666;

 -webkit-box-shadow: none;
 -moz-box-shadow: none;
}
#nav1 ul a:hover {
 background: #0078ff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgek4ME8dGxH8DxCor2t0bWxBX_bx6Rxc51XEK9IulXQXEGfVctGVG_TPP5EscOr-U8DwOywJIYkMrD1MrZ-VbeRReGA7xyka9bE_UXjVGTZB89DsDQ3rbEJGnfcFwhq5YBtZ25nhFF_2nz/s320/image1.png) repeat-x 0 -100px !important;
 color: #fff !important;

 -webkit-border-radius: 0;
 -moz-border-radius: 0;

 text-shadow: 0 1px 1px rgba(0,0,0, .1);
}

/* dropdown */
#nav1 li:hover > ul {
 display: block;
}

/* level 2 list */
#nav1 ul {
 display: none;

 margin: 0;
 padding: 0;
 width: 185px;
 position: absolute;
 top: 35px;
 left: 0;
 background: #ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtC-UKVVMVUur2rYQ4U3yKP3ZcbK-zfF29H2-g1EaELupD58fVX2wb0oDEWM8GAurLgHBykldHJ0uQ3Cqsr2JarjZPziyifzCdeuueNzhGHP7Fx9fCQTmmU-NpOcVnrwgAIkf7KLYJ477p/s320/image1.png) repeat-x 0 0;
 border: solid 1px #b4b4b4;

 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 border-radius: 10px;

 -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
 -moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
 box-shadow: 0 1px 3px rgba(0,0,0, .3);
}
#nav1 ul li {
 float: none;
 margin: 0;
 padding: 0;
}

#nav1 ul a {
 font-weight: normal;
 text-shadow: 0 1px 0 #fff;
 font-weight: bold;
 color: #000000;
}

/* level 3+ list */
#nav1 ul ul {
 left: 181px;
 top: -3px;
}

/* rounded corners of first and last link */
#nav1 ul li:first-child > a {
 -webkit-border-top-left-radius: 9px;
 -moz-border-radius-topleft: 9px;

 -webkit-border-top-right-radius: 9px;
 -moz-border-radius-topright: 9px;
}
#nav1 ul li:last-child > a {
 -webkit-border-bottom-left-radius: 9px;
 -moz-border-radius-bottomleft: 9px;

 -webkit-border-bottom-right-radius: 9px;
 -moz-border-radius-bottomright: 9px;
}

/* clearfix */
#nav1:after {
 content: ".";
 display: block;
 clear: both;
 visibility: hidden;
 line-height: 0;
 height: 0;
}
#nav1 {
 display: inline-block;
}
</style>
<ul id="nav1">
<li class="current"><a href="/">Home</a></li>
<li><a href="3">level1</a>

<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</li>
<li><a href="#">Multi-Levels</a>

<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>

* Replace with # your links.
* Replace with  link  your names.

4. Now save 'HTML/JavaScript'.  you are done.

Continue reading →

How to add floating social subscribe buttons for blogger

This is a cool unique subscribe gadget with nice buttons.
Add to your blog and make it attractive.

1. Log in to blogger and Go to  Design >> Page Element.

2. Click Add Gadget and select 'HTML/Javascript'

3.Paste below code.

<div style='position: fixed; bottom: 1%; right: 1%;'>
<table border="0"><tr><td>
<a href='facebook profile url' target="_blank"><img alt="Find Us On Facebook" border="0"style='background:transparent;border:none;' title='like us on facebook' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX36TSc783zyp0Z5Ez93kYlPUh7RIzCsvEZ6osRtDEAa_EbZ1sD2itKyL0jo55vwQS_QvUCMuBH_llg-558LB8u6F2FrSwI0SWGZdsZ6nbB6sMvVcunCtIMeyZbbXUFrmB6VERnuFweIg/s1600/facebook-icon.png" /></a>
<a href='http://twitter.com/your twitter username' target="_blank"><img alt="Follow Us On Twitter" border="0"style='background:transparent;border:none;' title='follow us on twitter' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5i9i-KXDSingBqmAPrgeA1ZJ1PDPosjlb0LRCg5I7tlAEmdPAwh1UK2lf9Hr6iXXgBVLIv9ItII_2cFvQc3l2O91j9_rxtSqI8nOgpyKRlk_GqCOYlK1T3-1UvDe1j-_SfI3JerRzrhc/s1600/twitter-icon.png" /></a>
<a href="http://feeds.feedburner.com/YOURFEEDNAME" target="_blank"><img alt="Rss Feed Options" border="0"style='background:transparent;border:none;' title='subscribe us' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYbN-rCFOWFM6Yn9r-r1I_f1uSDHkLaA6AWCeqALIessTSOS58YsVlU23OyDzb9H6xmDg1Lts4w-QJIcLGXIKXhqq5T_EcVEp2D-jEypwzz6wjOZpDUJm2EZiAo32g5R0R4-b5UdKME2k/s1600/rss-icon.png" /></a>
<a href='http://feedburner.google.com/fb/a/mailverify?uri=yourfeedname&loc=en_us' target="_blank"><img alt="Subscribe Via Email Rss" border="0" style='background:transparent;border:none;' title=' email subscribe'src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIpmHR3Ac1pEhPfJT1y-5Ft4EJfVnSkhqvdfn4ljsbdAcF3dtzhOSH4FMMonXvfMvB_abcFCiu4hfmEXYUYCk13yUqSs01CP0Rg4KQ_LA8vLYFP_nofI1QCpECKs3gBIvhjaCvF8F5yx8/s1600/rss-mail.png" /></a>
</td><td>
</td></tr></table>
<div style="clear: both;font-size: 8px;text-align:center;margin-top:-10px;"><a href="http://ehowportal.blogspot.com/2011/05/how-to-add-floating-social-media.html"><p>Get this</p></a></div>

</div>

* Repalce  facebook profile url with your URL
* Repalce  your twitter username with your URL
* Replace YOURFEEDNAME  with your feed name
* Replace yourfeedname  with your feed name

4. Now save your HTML/Javascript'.

you are done.

Continue reading →

How To Show Post Title Only On Home page

This trick will help you to show post title only on your
home page.Some blogger like less page height on home
 page.so you can use this trick and  reduce your home
page height size and keep more post on there. hope
this help to you. thanks you.

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

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

3. Paste below code before </head> tag

<style type='text/css'>

<b:if cond='data:blog.pageType != "item"'>
.post {
margin:.5em 0 1.5em;
border-bottom:0px dotted $bordercolor;
padding-bottom:1.0em;
height:50px;
}
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:20px;
font-family:Tahoma,Georgia,Century gothic,Arial,sans-serif;
font-weight:normal;
line-height:1.4em;
color:#cc6600;
}

.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:#cc6600;
font-weight:normal;
}

.post h3 strong, .post h3 a:hover {color:#333333;}

.post-body {display:none;}
.post-footer {display:none;}
.comment-link {display:none;}
.post img {display:none;}
.post blockquote {display:none;}
.post blockquote p {display:none;}
h2.date-header {display:none;}
.post-labels {display:none;}
.post-rating {display:none;}

</b:if>

</style>

4. Now click save template.

5. If you want to change post amount on home page,

6. Go to Design >> Page Element  and  find post body and click Edit as below image.

7. Now change Number of posts on main page:   as your like.

8. Now click save. you are done..........

Continue reading →

Cool Drop Down Menu For Blogger

 This is cool drop down menu for your blogger.

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

2. Put checked marked in Expand Widget Templates

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

4. Paste below code after ]]></b:skin> tag

.wrapper1{
color: #44433f;
font: 14px "Futura Medium", "Myriad Pro", "Gill Sans", Helvetica, Verdana, Arial, sans-serif;
margin: 0;
padding: 4px 0 0;
}
.wrapper1 a{
color: #E5F2FB;

text-decoration: none;

}

.wrapper1 a:hover {

color: #09548B;

}

.wrapper1 p {

margin: 0 0 17px;

padding: 0;

line-height: 18px;

}

.wrapper {

/*width: 710px;*/

margin: 20px auto;

}

.nav {

background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiw-_yoHujnWWMeQwfBy4UYOUX2OhbcH9oK_V8PeiWipMxkaUj7g_0hyL1sMVmErcdX0OZfaeGgatHncB2qQaAVneNaZa7rnJxuQgi3jyfovbXYQpHgRS2AdM-Xv-4oK9nhiVjK-QP-Z_T/s1600/nav_bg.png) repeat-x;

float: left;

}

.nev-wrapper {

clear: both;

float: left;

}

.nav-left {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY7Nnh05LLXRWmO-641N5nKAHFI_pjKYCA32cDSwl5YB0I7HSdWpgBV0CP-yo5kZFgdUy-MtXV4CIKpwYzj-xxMdx17EygzqKsxGHU0YvMxOqdywGHallGdc4XBvZ8SdoMx-kEVkKFZ8MG/s1600/nav_left.png) no-repeat top left;

float: left;

width: 11px;

height: 41px;

}

.nav-right {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4YNARuQ6nwETPIetcpo2TpAczjqt1LwUASr0OBfmZP9yS8j44hvvsAJKlUKQlf-O5HujHv2F2UWWc1tAQ0jsbKu9X0G2qAeUzBFtSqxN2g-ionxEdndq3BecvgH6fhiIhUB2tmFrumt-W/s1600/nav_right.png) no-repeat top right;

float: left;

width: 11px;

height: 41px;

}

.nav ul {

/*width: 648px;*/

height: 38px;

float: left;

margin: 0;

padding-top: 3px;

list-style: none;

font-size: 15px;

}

.nav li {

float: left;

padding: 0 7px;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUtEQ8un1xVmQw6w_X1eX7ZrLljbHH-sbiDjLZQl_G3PCGaC8gZWUxge703VjKBxfBvuyw8ZuM5HM0W1i_SMTY2oL6oobXeYHP3iAT8PyJNkUs4PtMSfSJdi_cjLz5CzvV_zlxzf1wG-CO/s1600/split.png) no-repeat right center;

position: relative;

z-index: 1;

}

.nav li.last {

background:none;

}

.nav li:hover {

z-index:2;

}

.nav li a {

display: block;

line-height: 38px;

overflow: hidden;

float: left;

}

a .menu-left {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdxG53kZkzu70oVxQvLvNWDSwKJ63GzmiLkwxtoLgorbJF3GWbEvpgHAYS5fRF0d7yZWHh10qbWNkssBEYYqHCOhCB6mYCmkXOKtqPWJriSDtDgVdr9bzpQELyk0eX8-PtNhTQKG-e7OHv/s1600/menu_left.gif) no-repeat left top;

width: 8px;

height: 32px;

line-height: 35px;

display: block;

float: left;

}

a .menu-mid {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHE_ui_Mswy2b0zVixa4-T2NoPNz4-hgLptZ7Jyxh17HA5QaEfcRNAqmLvo9ytFc5umTRxpeogOgNUcpEfYDPfODJO_5M1rCB1XS6iAi5HqiVLKgEZtuwQY7OmtoNbjyQA-gKO3GiiN-lD/s1600/menu_mid.gif) repeat-x top left;

height: 32px;

line-height: 35px;

display: block;

float: left;

}

a .menu-right {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHK8j7L2BFhF9orxmGSU3qo4eBFqOhS0I2MGFCxbZTUGBjFw08DQ7xG6PHPIgAQinivMC6v-trG3JcrO30tAvSRqb8KjUyXMFxruJsjUBu2ElYYrdhwMXi5armyFszb2P1tpzk7aAwR9tg/s1600/menu_right.gif) no-repeat top left;

width: 8px;

height: 32px;

line-height: 35px;

display: block;

float: left;

}

.nav li a:hover .menu-left,

.nav li.active a .menu-left,

.nav li:hover a .menu-left,

.nav li a:hover .menu-mid,

.nav li.active a .menu-mid,

.nav li:hover a .menu-mid,

.nav li a:hover .menu-right,

.nav li.active a .menu-right,

.nav li:hover a .menu-right {

background-position: 0 -37px;

line-height: 35px;

}

.nav li a:hover,

.nav li.active a,

.nav li.hover a,

.nav li:hover a {

color: #09548B;

}

.nav li:hover .sub,

.nav li.hover .sub {

display:block;

}

.nav li .sub {

display: none;

position: absolute;

top: 27px;

left: 6px;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqHmgYYIOi1yWdWZfBdCs3s3693ozznfitEEgwQ3tRndS0h80w46t05S3DbWlO5gNo8Q-UcEVsTQWrt8MrJGNDlaaKGStcGWFSIFMhxrwvI3UmYodjvuEBnzpWMngQ8PVIWXgH27T9dcm2/s1600/submenu_top.png) no-repeat;

width: 186px;

padding-top: 9px;

}

.nav li ul {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimwFfkulbo_TKP6oTHiwwcjuMEFMpATKJmp80kSP8o3dNtvyKNv0JiceF-wpHIKa2849c18vCqBI-usO-6Rpgeda_MO4hug3D1Uemayc8diQVHJ2MrwceihEyv6tYXi3KLsHOdH-fdhx00/s1600/submenu_bg.png) repeat-y;

width: 162px;

height: auto;

margin: 0;

padding: 0 12px 10px;

list-style: none;

font-size: 14px;

}



.nav li:hover li,

.nav li.active li {

width: 100%;

padding: 1px 0 2px;

border-bottom: 1px #C1D9F0 dashed;

background: none !important;

}

.nav li:hover li a,

.nav li.active li a {

color: #09548B;

background: none !important;

line-height: normal;

width: 156px;

padding: 8px 3px 3px;

text-indent: 1px;

}

.nav li:hover li a:hover,

.nav li.active li a:hover {

color: #fff;

background: #165B9F !important;

text-decoration: none;

line-height: normal;

}

/*IE*/

.nav li li a:hover,

.nav li li a:hover {

color: #fff;

background: #165B9F !important;

text-decoration: none;

line-height: normal;

}

/**/

.nav .btm-bg {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaCjijN13MD2zOQ2pMok19cKYmFLCf4oNaAgqSmAvE5X11WdYb67Wnr5nDJW19DiRfcQmEJ1BKzE__YCXnBXZylxqmBkWywSAUwYuHA_1rxe1EZopNbqs019nNF9FphW2OKXnRiwuVbw_p/s1600/submenu_bottom.png) no-repeat;

width: 205px;

height: 9px;

overflow: hidden;

clear: both;

}

.content {

width: 670px;

background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBX2cM7kU0P7Ux7eAXkPzWshylnZHQGCQi2yEJ_x3nWfU67fFho9WhURupiOTNy6l3ZDfj9wD-YgNvKwfWEU5Zw_8MQcFzSKd-YSpCcQYtvINKJhv_zdoaCdfKhrQYQOTj2qEhPru9oMyd/s1600/content_bg.png) repeat-y;

float: left;

padding: 10px 20px;

}

.content h1 {

color: #333;

font-weight: 400;

text-transform: uppercase;

font-size: 18px;

border-bottom: 1px dashed #C1D9F0;

}

.content h2 {

font-weight: 400;

text-transform: uppercase;

font-size: 14px;

padding-left: 10px;

margin-bottom: -5px;

}

.content p {

padding: 0 15px;

text-align: justify;

}

.content-bottom {

width: 710px;

background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAi0JQRc2YZwcBdHtGpSGS2GYvzeDhEZOt-nGWCKUsZZjcYblmoStuI44ZIWYYCloAFMQFiXS8AIMPoetr-DnJ8CnRVQbEgqW3uhmaAE-l_LTfuTDzhQntFyIJc5gBJAgZxGWvUiTsM2-x/s1600/content_bottom.png) no-repeat;

height: 13px;

float: left;

}

5. Now Go to Design >>page Element

6.Click Add gadget (under your header)  and Select HTML/JavaScript 

7. Now paste paste below code

<div class="wrapper1"><div class="wrapper">

<div class="nav-wrapper">

<div class="nav-left"></div>

<div class="nav">

<ul id="navigation">

<li class="active">

<a href="#">

<span class="menu-left"></span>

<span class="menu-mid">Home</span>

<span class="menu-right"></span>

</a>

</li>

<li class="">

<a href="#">

<span class="menu-left"></span>

<span class="menu-mid">Blog</span>

<span class="menu-right"></span>

</a>

<div class="sub">

<ul>

<li>

<a href="#">Archives</a>

</li>

<li>

<a href="#">Categories</a>

</li>

<li>

<a href="#">Top-rated Posts</a>

</li>

<li>

<a href="#">Most-viewed Entries</a>

</li>

</ul>

<div class="btm-bg"></div>

</div>

</li>

<li class="">

<a href="#">

<span class="menu-left"></span>

<span class="menu-mid">Development</span>

<span class="menu-right"></span>

</a>

<div class="sub">

<ul>

<li>

<a href="#">Wordpress Themes</a>

</li>

<li>

<a href="#">Wordpress Plugins</a>

</li>

<li>

<a href="#">Mac OS X</a>

</li>

</ul>

<div class="btm-bg"></div>

</div>

</li>

<li class="">

<a href="#">

<span class="menu-left"></span>

<span class="menu-mid">Tutorials</span>

<span class="menu-right"></span>

</a>

<div class="sub">

<ul>

<li>

<a href="#">Photoshop</a>

</li>

<li>

<a href="#">Illustrator</a>

</li>

<li>

<a href="#">Css, Html</a>

</li>

<li>

<a href="#">Post Your Tutorial!</a>

</li>

</ul>

<div class="btm-bg"></div>

</div>

</li>

<li class="">

<a href="#">

<span class="menu-left"></span>

<span class="menu-mid">Gallery</span>

<span class="menu-right"></span>

</a>

<div class="sub">

<ul>

<li>

<a href="#">Personal Photos</a>

</li>

<li>

<a href="#">My Friends</a>

</li>

<li>

<a href="#">Tech</a>

</li>

</ul>

<div class="btm-bg"></div>

</div>

</li>

<li class="">

<a href="#">

<span class="menu-left"></span>

<span class="menu-mid">Portfolio</span>

<span class="menu-right"></span>

</a>

<div class="sub">

<ul>

<li>

<a href="#">My Works</a>

</li>
</ul>

<div class="btm-bg"></div>

</div>

</li>

<li class="last">

<a href="">

<span class="menu-left"></span>

<span class="menu-mid">Contact</span>

<span class="menu-right"></span>

</a>

</li>

</ul>

</div>

<div class="nav-right"></div>

</div>

<div class="content">

<p>&nbsp;</p>

<p>&nbsp;</p>



</div>

<div class="content-bottom"></div>

</div>

</div>

Replace # your URL
Replace Blue color words with any names like.
There have many link and name you can change.

8. Now save  HTML/JavaScript  
You are done.

Continue reading →

Cool Sunrise gloss drop down menu for blogger

 This is cool drop down menu for your blogger.

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

2. Put checked marked in Expand Widget Templates

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

4. Paste below code after ]]></b:skin> tag

@charset "utf-8";

/* CSS Document */
body{
padding: 25px;
}

/*^'^ Navigation Structure ^'^*/

.nav-container-outer{

background: #990000;

padding: 0px;

height: 74px;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmz1JmxuhmRV8aanxGtTj7QzrSmhSEFl4_DOwvqX9xwL-gbJ0rD2F8xFj9OvR9m4-bQ-cNsRIsklynL1inuFpDFwMtwpJ2x5vuXt27spTGDyAZhZRWAKyuvcylPIoWw1Y47nT4GRhf9vbA/s1600/nav-bg.jpg);

}

.float-left{

float: left;

}

.float-right{

float: right;

}

.nav-container .divider{

display:block;

font-size:1px;

border-width:0px;

border-style:solid;

}

.nav-container .divider-vert{

float:left;

width:0px;

display: none;

}

.nav-container .item-secondary-title{

display:block;

cursor:default;

white-space:nowrap;

}

.clear{

font-size:1px;

height:0px;

width:0px;

clear:left;

line-height:0px;

display:block;

float:none;

}

.nav-container{

position:relative;

zoom:1;

margin: 0 auto;

}

.nav-container a, .nav-container li{

float:left;

display:block;

white-space:nowrap;

}

.nav-container div a, .nav-container ul a, .nav-container ul li{

float:none;

}

.nav-container ul{

left:-10000px;

position:absolute;

}

.nav-container, .nav-container ul{

list-style:none;

padding:0px;

margin:0px;

}

.nav-container li a{

float:none

}

.nav-container li{

position:relative;

}

.nav-container ul{

z-index:10;

}

.nav-container ul ul{

z-index:20;

}

.nav-container ul ul ul{

z-index:30;

}

.nav-container ul ul ul ul{

z-index:40;

}

.nav-container ul ul ul ul ul{

z-index:50;

}

li:hover>ul{

left:auto;

}

#nav-container ul {

top:100%;

}

#nav-container ul li:hover>ul{

top:0px;

left:100%;

}



/*^'^ Primary Items ^'^*/

#nav-container a{

padding:7px 17px 7px 18px;

margin: 10px 0px 0px 0px;

color: #FFFFFF;

font-family: Trebuchet MS, Arial, sans-serif, Helvetica;

font-size:14px;

text-decoration:none;

font-weight: bold;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXQFC7YMz1QUDReQMOZnJI-hI27ihy26yW63WcchrJjthHg0FQ292Z9DqPEtT3iAtxoxi5v0wt4etbbF6fjrFOmLD6XSYBM_u-hJmU_50Zh2XtThWvCkn1s1RKGTaWxp0o_BlYsYev6AR3/s1600/item-primary-bg.gif);

background-repeat: no-repeat;

background-position: top;

}



#nav-container a:hover{

color: #6C3600;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXQFC7YMz1QUDReQMOZnJI-hI27ihy26yW63WcchrJjthHg0FQ292Z9DqPEtT3iAtxoxi5v0wt4etbbF6fjrFOmLD6XSYBM_u-hJmU_50Zh2XtThWvCkn1s1RKGTaWxp0o_BlYsYev6AR3/s1600/item-primary-bg.gif);

background-repeat: no-repeat;

background-position: center;

}



/*^'^ Secondary Items Container ^'^*/

#nav-container div, #nav-container ul{

padding:10px 4px 10px 4px;

margin:0px 0px 0px 0px;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAQsJozBIYmYC40x1ttDh9Cywg729nOIoBBhU0I8gfrv1f1EK3eMnEZJdKRorftw73kOlpHeWNL5D06dL9wR-opWjT7sprTg1O-0dzhGkxM8BTS4L25I6ZNw7p1rC7Ab9GxSDcGMYn6wBu/s1600/item-secondary-container-bg.jpg);

background-repeat: repeat-x;

background-color: #FF9900;

border-bottom: 1px solid #CA6500;

}



/*^'^ Secondary Items ^'^*/

#nav-container div a, #nav-container ul a{

padding:3px 10px 3px 6px;

background-color: #FFFFFF;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxpJ2gIYOxY-H14hNNw6of5CBYSdx_LtQYbEMeOvv5kvzC55QkgRhzP5TingCu53mkv5MZj-ugPofDrEsuk9ZtRnZnDVIwf4nPxJd_BeHshyphenhyphenlnMMcZhZ2X1LFQae0vAdP0Grm-AuC0YNJf/s1600/item-secondary-bg.jpg);

background-repeat: no-repeat;

background-position: 0px 22px;

font-size:11px;

border-width:0px;

border-style:none;

margin: 0px 0px 0px 0px;

width: 149px;

}



/*^'^ Secondary Items Hover State ^'^*/

#nav-container div a:hover, #nav-container ul a:hover{

background-color: #FFFFFF;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxpJ2gIYOxY-H14hNNw6of5CBYSdx_LtQYbEMeOvv5kvzC55QkgRhzP5TingCu53mkv5MZj-ugPofDrEsuk9ZtRnZnDVIwf4nPxJd_BeHshyphenhyphenlnMMcZhZ2X1LFQae0vAdP0Grm-AuC0YNJf/s1600/item-secondary-bg.jpg);

background-repeat: no-repeat;

color:#CC0000;

}



/*^'^ Secondary Item Titles ^'^*/

#nav-container .item-secondary-title{

cursor:default;

padding:4px 0px 3px 7px;

color: #6C3600;

font-family: Arial, Trebuchet MS, Arial, sans-serif, Helvetica;

font-size:11px;

/* background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNeGhOWLJHKQGYI3OjMa6nMAHajcRMJgiVqQr47-h3fcwbi1xFWl257tR3_R4H6kDA-6gMH7UMKgd90xUEoybfRx6BVpBAjRAV8q_Nwx1G8qeVFhk7LLmBpi_nFXfKVWDaREbfSNgm5jtT/s1600/item-secondary-title-bg.jpg); */

background-repeat: no-repeat;

font-weight:bold;

}



/*^'^ Horizontal Dividers ^'^*/

#nav-container .divider-horiz{

border-top-width:1px;

margin:5px 5px;

border-color: #C16100;

}



/*^'^ Vertical Dividers ^'^*/

#nav-container .divider-vert{

border-left-width:1px;

height:15px;

margin:4px 2px 0px 2px;

border-color:#AAAAAA;

}

5. Now Go to Design >>page Element

6.Click Add gadget and Select HTML/JavaScript 

7. Now paste paste below code

<div class="nav-container-outer">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGH5_reJMnTJxx-yAHLBNh8T0a7Zo-IzJ5Lo6QAeH0TjMRqPGhTLyuMEgGRYxDEYq2Gci-YfNtW21L3iPRsw0fRhTiA3jQG862Wlnqea0mDxYMC_sFtBGhPbH90nM-VGewjhEA5ke2Hcm_/s1600/nav-bg-l.jpg" alt="" class="float-left" />

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8A0E4ojCMQeybZqZQvmt7JT9iGmhe9St4IVcRQ51DQ-m-Fwsaq_22z4hIx8-hV0IAaEH5B0ofrQmUqQG2GGhu630EDdxjktp91hd7qqBgj2k_TPSxF5iVITOOyhEdSBFL-Mb7xYYV9mgV/s1600/nav-bg-r.jpg" alt="" class="float-right" />

<ul id="nav-container" class="nav-container">

<li><a class="item-primary" href="#">HOME</a>

</li>



<li><span class="divider divider-vert" ></span></li>

<li><a class="item-primary" href="#">Products</a>



<ul style="width:150px;">

<li><a href="#">SoftwarePlus</a></li>

<li><a href="#">MagicDriver</a></li>

<li><a href="#">GreatFX</a></li>

<li><a href="#">SampleSoft</a></li>

<li><a href="#">UnDoIt</a></li>

<li><a href="#">100% CSS Menu</a></li>

<li><a href="#;">With Cross-Browser</a></li>

<li><a href="#;">Dropdowns</a></li>

<li><a href="#;">Absolutely NO Javascript</a></li>

<li><a href="#;">Being Used On</a></li>

<li><a href="#;">These Menus</a></li>

<li><span class="divider divider-horiz" ></span></li>

<li><a href="#;">Example Of a Divider</a></li>

<li><a href="#;">With No Title</a></li>

</ul></li>



<li><span class="divider divider-vert" ></span></li>

<li><a class="item-primary" href="#">Quality</a>



<ul style="width:150px;">

<li><a href="#">SoftwarePlus</a></li>

<li><a href="#">MagicDriver</a></li>

<li><a href="#">GreatFX</a></li>

<li><a href="#">SampleSoft</a></li>

<li><a href="#">UnDoIt</a></li>

<li><a href="#">100% CSS Menu</a></li>

<li><a href="#;">With Cross-Browser</a></li>

<li><a href="#;">Dropdowns</a></li>

<li><a href="#;">Absolutely NO Javascript</a></li>

<li><a href="#;">Being Used On</a></li>

<li><a href="#;">These Menus</a></li>

<li><span class="divider divider-horiz" ></span></li>

<li><a href="#;">Example Of a Divider</a></li>

<li><a href="#;">With No Title</a></li>

</ul></li>



<li><span class="divider divider-vert" ></span></li>

<li><a class="item-primary" href="#">Services</a>



<ul style="width:150px;">

<li><span class="item-secondary-title" >Title For Links</span></li>

<li><a href="#">These Links Still Appear</a></li>

<li><a href="#">Just Like The Others</a></li>

<li><a href="#">Even When Under A Title</a></li>

<li><span class="divider divider-horiz" ></span></li>

<li><span class="item-secondary-title" >Title After Divider</span></li>

<li><a href="#">Once Again...</a></li>

<li><a href="#">These Links Still Appear</a></li>

<li><a href="#">Just Like The Others</a></li>

<li><a href="#">Even When Under A Title</a></li>

</ul></li>



<li><span class="divider divider-vert" ></span></li>

<li><a class="item-primary" href="#;">Very Long Item</a>



<ul style="width:150px;">

<li><span class="item-secondary-title" >Title For Links</span></li>

<li><a href="#">These Links Still Appear</a></li>

<li><a href="#">Just Like The Others</a></li>

<li><a href="#">Even When Under A Title</a></li>

<li><span class="divider divider-horiz" ></span></li>

<li><span class="item-secondary-title" >Title After Divider</span></li>

<li><a href="#">Once Again...</a></li>

<li><a href="#">These Links Still Appear</a></li>

<li><a href="#">Just Like The Others</a></li>

<li><a href="#">Even When Under A Title</a></li>

</ul></li>



<li><span class="divider divider-vert" ></span></li>

<li><a class="item-primary" href="#;">Fully Flexible</a>



<ul style="width:150px;">

<li><span class="item-secondary-title" >Title For Links</span></li>

<li><a href="#">These Links Still Appear</a></li>

<li><a href="#">Just Like The Others</a></li>

<li><a href="#">Even When Under A Title</a></li>

<li><span class="divider divider-horiz" ></span></li>

<li><span class="item-secondary-title" >Title After Divider</span></li>

<li><a href="#">Once Again...</a></li>

<li><a href="#">These Links Still Appear</a></li>

<li><a href="#">Just Like The Others</a></li>

<li><a href="#">Even When Under A Title</a></li>

</ul></li>

<li class="clear">&nbsp;</li></ul>

</div>

Replace # your URL
Replace Home with any names like.
There have many link and name you can change.


8. Now save  HTML/JavaScript  


You are done.

Continue reading →

How to add weather widget to your blog

How to add weather widget to your blog

This is cool widget to your blog.its nice look.users can 
know their city weather,this is easy and fastest way.
try it.

1. First go to this site get widget

2. Select your style and Input your city

3. Now click Get code.

4. After log in to your blogger account and Go  Design >> Page Element

5.Click add gadget and select 'HTML/Java Script'

6. Now paste code that you generated.

7.Click save 'HTML/Java Script'. you are done.

Continue reading →

How to add "Print this" option to your blogger

This gadget will help visitors to print your post,(some articles)
easy.so you can add this gadget to your blogger.follow below steps.

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

2. Put checked marked in Expand Widget Templates

3. Find this tag by using Ctrl+F 

4. Paste below code before </head> tag

<style type="text/css" media="print">
 #noprint {display: none;} 
       
 body {background:fff; color:000;} 
       a {text-decoration: underline; color:00f;} 
       }
</style> 

/*URL: http:www.bloggertrix.com */

5.After paste it find this code <data:post.body/>..

6. If you want to add print this above your post, paste below code before, <data:post.body/>tag

7. If you want to add print this below your post paste below code after <data:post.body/>   tag

<a href="javascript:window.print()">Print Page</a>

8 .Click preview and check its safe to save the template.If it ok click save template.

you are done.

Continue reading →

Add page element Gadget above your blogger header

Add page element Gadget above your blogger header

This is very useful to when when trying to put banner ads before your header.some template not including this. so you have to add this gadget.Follow this steps, you can add it to your blogger.



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

2. Put checked marked in Expand Widget Templates

3. Find this tag by using Ctrl+F 

4. Paste below code before ]]></b:skin> tag

#gadget_header{
margin:10px 0;
padding:1%;
width:100%;} 

5. Now find this tag again <div id='header-wrapper'> 

6. Paste below code before above tag

<div id="gadget_header">
<b:section class='header' id='gadgetheader' preferred='yes'/>
</div>  

7.  Now you can add any gadget to before your header.


Good luck.

Continue reading →

Add stumbleupon share button with counter for blogger

Add stumbleupon share button with counter for blogger

This gadget help to share your post with stumbleupon.there have few design button.add to your blog.

 Button 1:

<script src="http://www.stumbleupon.com/hostedbadge.php?s=1"></script>

Button 2:

<script src="http://www.stumbleupon.com/hostedbadge.php?s=2"></script>

Button 3:

<script src="http://www.stumbleupon.com/hostedbadge.php?s=3"></script>

Button 4:

<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>

Button 5:

<script src="http://www.stumbleupon.com/hostedbadge.php?s=6"></script>

Button 6:

<script src="http://www.stumbleupon.com/hostedbadge.php?s=4"></script>

Note:
 for example  i took 4th design.you can change

<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>

this code with your design.you can see above designs


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

2. Put checked marked in Expand Widget Templates

3. Find this tag by using Ctrl+F  <data:post.body/>

4. If you want to add this button above your post, paste below code before, <data:post.body/>tag

5. If you want to add this button below your post paste below code after <data:post.body/>   tag

<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>

6. If you want to add it to home page only.delete <data:post.body/> code and paste below code

<b:if cond='data:blog.url ==

data:blog.homepageUrl'>

<data:post.body/>

<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</b:if>

7. Now click  preview and click save template button.
   (when you edit template first check it with clicking preview.
  because it help to check is there have error before saving)

8. Good luck . you are done.

Continue reading →

How to add CSS animated hover to blogger

How to add CSS animated hover to blogger

Earlier i made post about How to make image hover
(mouse over button)  i used 2 image for that. But this
is totally different. i used CSS and use 1 image for it.
special thing is you can add description for this.
you can see below image for demo. move your mouse
 to there.lets  see how to make it.

Your text here

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

2. Put checked marked in Expand Widget Templates

3. Find this tag by using Ctrl+F 


4. Paste below code before ]]></b:skin> tag

<!--Start animated hover-->
#image-hover {
}
#figure {
position:relative;
float:left;
margin:10px;
overflow:hidden;
padding: 1px;
}

#figure:hover {
-moz-box-shadow:0 0 20px rgba(0,0,0,0.75);
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.75);
box-shadow:0 0 20px rgba(0,0,0,0.75);
}

#figure .caption {
position:absolute;
bottom:0;
left:0;
opacity: 0.75;
margin-bottom:-115px;
-webkit-transition: margin-bottom;
-webkit-transition-duration: 400ms;
-webkit-transition-timing-function: ease-out;
-moz-transition-property: margin-bottom;
-moz-transition-duration: 400ms;
-moz-transition-timing-function: ease-out;
-o-transition-property: margin-bottom;
-o-transition-duration: 400ms;
transition: margin-bottom;
transition-duration: 400ms;
transition-timing-function: ease-out;
}

#figure:hover .caption {
margin-bottom:0px;
}

#image-hover .caption {
width:100%;
height:90px;
padding:10px;
background:#B1D7F0;
color:#B1D7F0;
font-family: Arial, Helvetica, sans-serif;
}

#image-hover .caption b {
text-shadow: 0px 2px 0px #B1D7F0;
}
#image-hover .caption {
color: #000000;
line-height: 24px;
font-size: 14px;
text-shadow: 0px 2px 0px #000;
}
<!--End animated hover-->

Now you can add this zoom hover for your image for anywhere your blog. ill give a example to do this

5. Click on "Posting" >> "New Post" and  go to Edit HTML

6. Paste below code where you want

<div id="image-hover">
<div id='figure'>
<a href="http://www.bloggertrix.com" target="_blank">
<img src="Image URL"></a>
<span class='caption'>
Your Text here
</span></div></div>

* Replace Image URL with your image URL
* Replace Your Text Here with your text
* Replace http://www.bloggertrix.com your URL
you are done.Good luck.

Continue reading →

Hex color Generator for Blogger

When Blogging,color is important part,because when we starting
 blogging we have to select the template.
When we choosing template, actually sometime we cant find what
 we want (some color problem). So we have to choose right color
 for our template.when we changing color,when  change it we have
 enter hex color code.(#000000) so we have to find color code.So
 i have color code generate for you.Its easy,You can select your
color first, after you can Get code.If you want to change brightness
,saturation Hue it also include.







I think this will helpful to you. Good luck.

Continue reading →

How to make dynamic floating social bookmark

How to make dynamic floating social bookmark 

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

2. Put checked marked in Expand Widget Templates

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

4. Paste below code after </head> tag

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> 

<script language='javascript'> 

var name = &quot;#floatMenu&quot;;

var menuYloc = null;

$(document).ready(function(){

menuYloc = 

parseInt($(name).css(&quot;top&quot;).substring(0,$(name).css 
(&quot;top&quot;).indexOf(&quot;px&quot;)))

$(window).scroll(function () { 

offset = menuYloc+$(document).scrollTop()+&quot;px&quot;;

$(name).animate({top:offset},{duration:1000,queue:false});

});

}); 

</script>

5. After Find this tagby using Ctrl+F    ]]></b:skin>

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

#floatMenu {

position:absolute;

top:150px;

float:left;

width:45px;}

#floatMenu ul {

list-style: none;}

#floatMenu ul li a {

-webkit-transform:scale(0.6);

-moz-transform:scale(0.6);

-o-transform:scale(0.6);

-webkit-transition-duration: 0.5s;

-moz-transition-duration: 0.5s;

-o-transition-duration: 0.5s;

opacity: 0.8;}

#floatMenu ul li a:hover {

-webkit-transform:scale(1);

-moz-transform:scale(1);

-o-transform:scale(1);

opacity: 1;}

5. After Find this tagby using Ctrl+F    </body>

6. Paste below code before  </body>  tag

<div id='floatMenu'>

<ul>

<li><a href='http://www.facebook.com/pages/Blogger-Trix/110888928990749'
 rel='nofollow' target='_blank'><img border='0' 
src='http://lh3.ggpht.com/_-kiN_mt1trA/TRGYfxUq9LI/AAAAAAAAACs/tzNEyscBX_I/btn_f.png'
 style='margin-bottom: 3px;' title='Follow Me On 
Facebook'/></a></li>

<li><a href='http://twitter.com/bloggertrix'
 rel='nofollow' target='_blank'><img border='0' 
src='http://lh5.ggpht.com/_-kiN_mt1trA/TRGYf-CYBHI/AAAAAAAAACw/tuuYnz20Lx0/btn_t.png'
 style='margin-bottom: 3px;' title='Follow Me On 
Twitter'/></a></li>

</ul>

</div>

Note: Replace http://twitter.com/bloggertrix with your Twitter profile link
          Replace http://www.facebook.com/pages/Blogger-Trix/110888928990749
          with facebook fan page link.

7.Your are done.

Continue reading →