DEMO :Iframe in HTML.

An HTML element is an individual component of an HTML document. HTML documents are composed of a tree of HTML elements and other nodes

 

 

Read More

Search Bar Form for Blogger

This searches all the posts on your blog, and displays them by latest posts first. Inside the search bar you will find the text "Search this Site", this can easily be changed to any text you desire. Such as "Search my Site", "Search", "Type andHit Enter", etc. Just simply replace the code. You can also change the text "Go" on the button to something like "Search", "Find", etc.

<form id="searchThis" action="/search" style="display: inline;" method="get"><input onfocus="if(this.value==this.defaultValue)this.value='';" value="Search this Site" type="text" id="searchBox" onblur="if(this.value=='')this.value=this.defaultValue;" style="width: 150px;color:#636363;" vinput="" name="q"> <input id="searchButton" value="Go" type="submit"></form>

Read More

CSS3 Menu Bar With Mega Drop Down

Hi!
In This Tutorial I am going to explain  how  to add menu-bar with large drop down. Actually, Drop down is really important when we need to link sub categories.So, In this post i am already added largest drop down links. Person who have a lot of sub categories in your blog or website, they can use this menu bar.


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

2. Now select "Template" Like Below.

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

4. Now click Proceed button.
    
5. Find this tag by using Ctrl+F    ]]></b:skin>

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

/* The CSS Code for the menu starts here bloggertrix.com */
ul.dropdown li a {
 display: block;
 padding: 3px 8px;
}
ul.dropdown li {
 padding: 0;
}

ul.dropdown li.dir {
 padding: 7px 20px 7px 12px;
}
ul.dropdown ul li.dir {
 padding-right: 15px;
}
ul.dropdown ul a {
 padding: 4px 5px 4px 12px;
}
ul.dropdown ul a:hover {
 padding: 3px 5px 3px 11px;
 border: solid 1px #ddd;
 background-color: #eee;
 font-weight: bold;
}
ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
 list-style: none;
 margin: 0;
 padding: 0;
}
ul.dropdown {
 position: relative;
 z-index: 597;
 float: left;
}
ul.dropdown li {
 float: left;
 min-height: 1px;
 line-height: 1.3em;
 vertical-align: middle;
}
ul.dropdown li.hover,
ul.dropdown li:hover {
 position: relative;
 z-index: 599;
 cursor: default;
}
ul.dropdown ul {
 visibility: hidden;
 position: absolute;
 top: 100%;
 left: 0;
 z-index: 598;
 width: 100%;
}
ul.dropdown ul li {
 float: none;
}
ul.dropdown ul ul {
 top: 1px;
 left: 99%;
}
ul.dropdown li:hover > ul {
 visibility: visible;
}
ul.dropdown {
 font: bold 12px Arial, Helvetica, sans-serif;
}
    ul.dropdown li {
     padding: 3px 12px;
     background-color: #000;
     color: #fff;
    }

    ul.dropdown li.hover,
    ul.dropdown li:hover {
     background-color: #222;
    }
    ul.dropdown a:link,
    ul.dropdown a:visited { color: #fff; text-decoration: none; }
    ul.dropdown a:hover { color: #fff; text-decoration: underline; }
    ul.dropdown a:active { color: #fff; }

    /* -- level mark -- */

    ul.dropdown ul {
     margin-left: -6px;
     width: 170px;
     padding-bottom: 9px;
     background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt8RjT5Im4MwnXdfjur5I1osLwTXcl3RZDG6ilzV7AasTO8nWWkrwJUBMJYXyKWXPFVkp0FG_fWdrm1GPqTv2mNT09dB2sE98Rr3lUq9N4pz9Xnv0HOpob5lHHmfy_yKjhuffMN52VLtA/s1600/dropdown_pane.png) 0 100% no-repeat;
     color: #000;
     font-size: 11px;
     font-weight: normal;
    }

        ul.dropdown ul li {
         background-color: transparent;
         color: #000;
        }

        ul.dropdown ul li.hover,
        ul.dropdown ul li:hover {
         background-color: transparent;
        }

        ul.dropdown ul li.empty {
         padding: 12px 12px 7px !important;
         font-weight: bold;
        }

        ul.dropdown ul a:link,
        ul.dropdown ul a:visited { color: #000; }
        ul.dropdown ul a:hover { color: #000; text-decoration: none; }
        ul.dropdown ul a:active { color: #000; }

        /* -- level mark -- */

        ul.dropdown ul ul {
         display: none;
        }
/* -- Supporting class `dir` -- */
ul.dropdown *.dir {
 padding-right: 12px;
 background-image: none;
 background-position: 100% 50%;
 background-repeat: no-repeat;
}

7. Go to blogger and click Layout 

8. Click Add Gadget and select 'HTML/Javascript

9. Paste below code.

<ul class="dropdown dropdown-horizontal" id="nav">
<li><a href="Your Link URL">Home</a></li>
<li><a class="dir" href="Your Link URL">Solutions</a>
        <ul>
<li class="empty">Industries</li>
<li><a href="Your Link URL">Broadcast and media</a></li>
<li><a href="Your Link URL">Education</a></li>
<li><a href="Your Link URL">Financial services</a></li>
<li><a href="Your Link URL">Government</a></li>
<li><a href="Your Link URL">Life sciences</a></li>
<li><a href="Your Link URL">Manufacturing</a></li>
<li class="empty">Solutions</li>
<li><a href="Your Link URL">Consumer photo</a></li>
<li><a href="Your Link URL">Mobile</a></li>
<li><a href="Your Link URL">Print publishing</a></li>
<li><a href="Your Link URL">Pro photography</a></li>
<li><a href="Your Link URL">Professional video</a></li>
<li><a href="Your Link URL">Applications</a></li>
<li><a href="Your Link URL">Communication</a></li>
<li><a href="Your Link URL">Learning</a></li>
<li><a href="Your Link URL">Web conferencing</a></li>
<li><a href="Your Link URL">Web publishing</a></li>
<li><a href="Your Link URL">All solutions ›</a></li>
</ul>
</li>
<li><a class="dir" href="http://xtremetipsntricks.blogspot.com/">Products</a>
        <ul>
<li><a href="Your Link URL">Acrobat Connect Pro</a></li>
<li><a href="Your Link URL">Acrobat family</a></li>
<li><a href="Your Link URL">Adobe AIR</a></li>
<li><a href="Your Link URL">After Effects</a></li>
<li><a href="Your Link URL">ColdFusion</a></li>
<li><a href="Your Link URL">Creative Suite family</a></li>
<li><a href="Your Link URL">Dreamweaver</a></li>
<li><a href="Your Link URL">Flash</a></li>
<li><a href="Your Link URL">Flex</a></li>
<li><a href="Your Link URL">Illustrator</a></li>
<li><a href="Your Link URL">InDesign</a></li>
<li><a href="Your Link URL">Enterprise Suite</a></li>
<li><a href="Your Link URL">Mobile products</a></li>
<li><a href="Your Link URL">Photoshop family</a></li>
<li><a href="Your Link URL">Adobe Premiere Pro</a></li>
<li><a href="Your Link URL">Scene7 OnDemand</a></li>
<li><a href="Your Link URL">All products ›</a></li>
</ul>
</li>
<li><a class="dir" href="http://xtremetipsntricks.blogspot.com/">Support</a>
        <ul>
<li><a href="Your Link URL">Support home</a></li>
<li><a href="Your Link URL">Customer Service</a></li>
<li><a href="Your Link URL">Knowledgebase</a></li>
<li><a href="Your Link URL">Books</a></li>
<li><a href="Your Link URL">Training</a></li>
<li><a href="Your Link URL">Support programs</a></li>
<li><a href="Your Link URL">Forums</a></li>
<li><a href="Your Link URL">Documentation</a></li>
<li><a href="Your Link URL">Updates</a></li>
<li><a href="Your Link URL">More ›</a></li>
</ul>
</li>
<li><a class="dir" href="http://xtremetipsntricks.blogspot.com/">Communities</a>
        <ul>
<li class="empty">By user</li>
<li><a href="Your Link URL">Designers</a></li>
<li><a href="Your Link URL">Developers</a></li>
<li><a href="Your Link URL">Educators</a></li>
<li><a href="Your Link URL">Partners</a></li>
<li class="empty">By resource</li>
<li><a href="Your Link URL">Adobe Labs</a></li>
<li><a href="Your Link URL">Adobe TV</a></li>
<li><a href="Your Link URL">Forums</a></li>
<li><a href="Your Link URL">Exchange</a></li>
<li><a href="Your Link URL">Blogs</a></li>
<li><a href="Your Link URL">Experience Design</a></li>
</ul>
</li>
<li><a class="dir" href="http://xtremetipsntricks.blogspot.com/">Company</a>
        <ul>
<li><a href="Your Link URL">About Adobe</a></li>
<li><a href="Your Link URL">Press</a></li>
<li><a href="Your Link URL">Investor Relations</a></li>
<li><a href="Your Link URL">Corporate Affairs</a></li>
<li><a href="Your Link URL">Careers</a></li>
<li><a href="Your Link URL">Showcase</a></li>
<li><a href="Your Link URL">Events</a></li>
<li><a href="Your Link URL">Contact Adobe</a></li>
<li><a href="Your Link URL">Become an affiliate</a></li>
<li><a href="Your Link URL">More ›</a></li>
</ul>
</li>
<li><a class="dir" href="http://xtremetipsntricks.blogspot.com/">Downloads</a>
        <ul>
<li><a href="Your Link URL">Downloads home</a></li>
<li><a href="Your Link URL">Trial downloads</a></li>
<li><a href="Your Link URL">Updates</a></li>
<li><a href="Your Link URL">Exchange</a></li>
<li class="empty">Readers and Players</li>
<li><a href="Your Link URL">Get Adobe Reader</a></li>
<li><a href="Your Link URL">Get Flash Player</a></li>
<li><a href="Your Link URL">Get Adobe AIR</a></li>
<li><a href="Your Link URL">Get Shockwave Player</a></li>
<li><a href="Your Link URL">Get Media Player</a></li>
<li><a href="Your Link URL">More ›</a></li>
</ul>
</li>
<li><a class="dir" href="http://xtremetipsntricks.blogspot.com/">Store</a>
        <ul>
<li><a href="Your Link URL">Store home</a></li>
<li><a href="Your Link URL">Software</a></li>
<li><a href="Your Link URL">Fonts</a></li>
<li><a href="Your Link URL">Books</a></li>
<li><a href="Your Link URL">Support programs</a></li>
<li><a href="Your Link URL">Your account</a></li>
<li><a href="Your Link URL">Volume licensing</a></li>
<li><a href="Your Link URL">Store offers</a></li>
<li><a href="Your Link URL">Other ways to buy ›</a></li>
</ul>
</li>
</ul>

Replace Your Link URL with your URLs

10. Now save your HTML/Javascript'.
    You are done...

Read More

Add a meta tag in ur html

1. Open Blogger Dashboard in blogger >> Next click your blog Design option >>click Edit HTML.

2.  Find <head/> tag 

3.  Paste Meta Tag just below it.

<meta name="description" content="Description of your blog"/>

<meta name="keywords" content="Keywords related to your blog"/>

 Click SaveTemplate.

Read More

An iframe and its demo.

What is IFrame in HTML?

An iframe is used to display a web page within a web page.

*********************************************************

 DEMO:-

code  for adding an iframe:

<iframe src="URL"></iframe>

The URL points to the location of the separate page.

Iframe - Set Height and Width

The height and width attributes are used to specify the height and width of the iframe.

The attribute values are specified in pixels by default, but they can also be in percent (like "80%").

<iframe src="demo_iframe.htm" width="200" height="200"></iframe>

Iframe - Remove the Border

The frameborder attribute specifies whether or not to display a border around the iframe.

Set the attribute value to "0" to remove the border:

<iframe src="demo_iframe.htm" frameborder="0"></iframe>

**********************************************************************************

Read More

The Round Hover Effect Css Menubar For Blogger

Simple css menu bar for blogger.Its include nice  hover style.You can add this to simple blogs and can link with main pages.menu bars, you ca do with easy steps. Follow these steps to add it 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

/*menubar by http://xtremetipsntricks.blogspot.in/ */

#bloggertrixmenu{

display:block;

width:100%;

overflow:hidden;

background:url("") repeat-x scroll 0 -357px #E3E3E3;

border-bottom:1px solid #FFFFFF;

border-top:1px solid #FFFFFF;

height:35px;

position:relative;

}

#btrixmenu1{

margin: 0px 10px;

padding: 0px;

width:940px;

height:88px;

}

#btrixmenu1 ul {

float: left;

list-style: none;

margin: 0px;

padding: 0px;

}

#btrixmenu1 li {

float: left;

list-style: none;

margin: 5px 0px;

padding: 0px 5px;

line-height:20px;

border-left:1px solid #FFFFFF;

border-right:1px solid #CCCCCC;

}

#btrixmenu1 li a, #btrixmenu1 li a:link, #btrixmenu1 li a:visited {

color:#FFFFFF;

display:block;

display: block;

margin: 0px;

padding: 0px 10px ;

color:#4E4E4E;

font:bold 120%/20px 'Segoe UI',Calibri,'Myriad Pro',Myriad,'Trebuchet MS',Helvetica,Arial,sans-serif;

text-align:center;

text-decoration:none;

text-shadow:1px 1px 1px #FFFFFF;height:23px;

}

#btrixmenu1 li a:hover {

background:#282828;

color: #fff;

margin: 0px;

padding: 0px 10px ;

text-decoration: none;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

text-shadow: none;

}

#btrixmenu1 li.current_page_item a{

background:#7a8c12;

color: #fff;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

text-shadow: 1px 1px 1px #535F0C;

}

/*menubar by http://xtremetipsntricks.blogspot.in/ */

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

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

<div class='clear'></div>

<div id='xtremetipsntricksmenu'>

<div class='btrixmenu1' id='btrixmenu1'><ul>

<li><a class='home' href='YOUR BLOG ADDRESS HERE'>Home</a></li>

<li><a href='URL'>TITLE 1</a></li>

<li><a href='URL'>TITLE 2</a></li>

<li><a href='URL'>TITLE 3</a></li>

<li><a href='URL'>TITLE 4</a></li>

<li><a href='URL'>TITLE 5</a></li>

<li><a href='http://xtremetipsntricks.blogspot.in/'>Add This</a></li>

</ul></div></div>

*Replace Url With your URL
*Replace Title with as your like.

7. Now save your template
 you are done.

Read More

Transparent Blogger Menubar With Subscription And Fan Page

Actually menubar is important to blogger.This is newest menubar that helps you to increase your Feed subscribers and Facebook fans.And its transparent bar.It  will show bottom of your page.This is also
good ways to increase subscribers and fans.Follow these simple steps to add it to your blog.

1. Log in to blogger  Design > Edit HTML


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

3. Paste below code Before </body> tag

<style type='text/css'>

#ut-sticky

{

background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr7THq1fbAzPp28hbiLgHp8RPaElpA4FZ1jVCXw77fNlBi-5EwscZ-2w92lyXPahE6xT_n4bT0kwSckbHqgbzvlueq3tb6xCbCX5F3ue-KEndW2kP9KyQmBag95vScmdkeNOYhiKy9HRGN/s1600/ut-bg.png&#39;) repeat;

color:#fff;

text-align: center;

margin:0 auto;

border-top: 1px solid #fff;

height:28px;

font-size:13px;

position:fixed;

bottom:0;

z-index:999;

width:95%;

border-top-left-radius:15px;

border-top-right-radius:15px;

display:block;

font-weight: bold;

font-family: arial,&quot;Helvetica&quot;;

font-color:#fff;

}

#ut-sticky:hover

{background:#333;}

#ut-sticky p{line-height:5px; font-size:13px; text-align:center; width:95%; float:left;}

#ut-sticky p a{ text-decoration:underline; color:#FFFF33;}

.ut-cross{display:block; position:relative; right:15px; float:right;}

.ut-cross a{font-size:18px; font-weight:bold; font-family:&quot;Arial&quot;; color:#FF0000; line-height:30px;}

</style>



<div id='ut-sticky'>





<p>Get Latest Updates: <a href="http://feedburner.google.com/fb/a/mailverify?uri=bloggertrix" target="_blank">Subscribe Now</a> | <a href="http://www.facebook.com/xtremetipsntricks" target="_blank">Like Us Facebook</a></p>



<div class='ut-cross'><a href='javascript:hide_cross();'>X</a></div>



</div>



<script language='JavaScript'>





function hide_cross() {



crosstbox = document.getElementById(&quot;ut-sticky&quot;);



crosstbox.style.visibility = &#39;hidden&#39;;



}



</script>

4. Now save your Template

Read More

Social Network Sidebar Gadget For Blogger

Social Bookmark site helps to get more traffic to your blog.There fore we need some more followers for our social profile. By using this gadget you can link your profile with this gadget. Your users can follow you from your site. It include Facebook fan,Twitter followers, and Rss subscribers. you can do with easy steps. Follow these steps to add it your blog.

1. Log in to 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

#col2 {

float: left;

width: 320px;

}

.subcol {

width: 150px;

}

.subcol h2 {

font-size: 14px;

padding: 0 0 10px;

color: #999999;

}

#subscribe { background:#none; width:308px;  font-size:8px; }

.subscribe_icons { width:286px; margin:0px auto; }

.subscribe_icons li { display:inline; float:left; margin:0px 2px 5px 2px; width:52px; text-align:center; font-size:11px; }

.subscribe_icons a { display:block; padding:40px 0px 2px; -webkit-transition:all .2s ease-out; -moz-transition:all .2s ease-out; color:#444 !important; }

.subscribe_icons a:hover { color:#26b !important; text-decoration:none; -moz-box-shadow:0px 2px 4px hsla(0,0%,0%,.35); -webkit-box-shadow:0px 2px 4px hsla(0,0%,0%,.35); }

.subscribe_icons .subscribe_buzz a { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3LUMpv1o-_uHPyshWmWVY1enQDv6V1pHqWyuYbq0yDrGCBPBpcjHkVAsp7M8Q-xgO_cbbtLPYvSfAUAX5mdwcmcQtjdhjK84GC8q-BX8VP3DzwMwKbwop5jMsLg-qfT9A6JeIv8zfoyo/s1600/buzz.png) center top no-repeat; }

.subscribe_icons .subscribe_twitter a { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-zSu0XJBW90SgtH6U3mEQq3-DeNKUaPUCT7QHXNNqJTU-BIEs8v3eOUww68hAd8_wd3cdp1gTV7ch_1M9bf9Rk77QUHPSIpFXHR313EQVyT23Ntb49YCq3b-qRDDrDoK3XURieY7uYLU/s1600/twitter1.png) center top no-repeat; }

.subscribe_icons .subscribe_facebook a { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg2M-6Ec0GuKLWrF9FtamLEn7-Ky7M7lXQzBYLg89ubJecIUIXIDutmqUOvVctxCn8TIaZ5zRqM5fWypJP99i50LQDWHqTjSVdDgtpN9PdtDoVxEG5aIlMy7N2YUHvtsPWuHuZwrDUCnY/s1600/facebook1.png) center top no-repeat; }

.subscribe_icons .subscribe_rss a { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOWGad5bdD2YZvgqrvSrLFF0qm0Ln-GemTLjOBPqWyi8WwXp0Clu7Den7A0sJkOmwDdEtTqEHLgDHzA8SqnFhy9zPKUgrgQIWssazDBTMmtsT-E251gCjlD8dPeTW5BxVoI1jP6ZcwcGM/s1600/rss1.png) center top no-repeat; }

.subscribe_icons .subscribe_email a { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF81cIYdOQ0Y-HOc8seCFlQIgA66roheGQbNtRIbn8l32qp_7J0HJ4xp7-QBZRbKWgOWTNIUh1wbelYvoctvJfUKM8wnOHYjb7mgHI3L6PD5bAYzhc46Gvs3dBaWptqfPg6cF6ReRy2bc/s1600/email.png) center top no-repeat; 

4. Now Go to Design >> Page Element

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

6. Paste  below code.

<!-- www.bloggertrix.com -->

<div id='col2'>

<div id='subscribe'>

<ul class='subscribe_icons'>

<li class='subscribe_buzz'><a href='ADD HERE YOUR GOOGLE PROFILE URL' rel='nofollow' target='_blank'>Buzz</a></li>

<li class='subscribe_twitter'><a href='ADD HERE YOUR TWITTER URL' rel='nofollow' target='_blank'>Twitter</a></li>

<li class='subscribe_facebook'><a href='ADD HERE YOUR FACEBOOK URL' rel='nofollow' target='_blank'>Facebook</a></li>



<li class='subscribe_rss'><a href='ADD HERE YOUR FEEDBURNER URL' rel='nofollow' target='_blank'>RSS</a></li>

<li class='subscribe_email'><a href='ADD HERE YOUR FEEDBURNER EMAIL URL' rel='nofollow' target='_blank'>Email</a></li>

</ul>

<!-- End -->

Replace highlighted word with your URLs

7. Now save 'HTML/Javascript'
 you are done.

Read More

Add Cool Css Sprites Menu For Blogger

This is cool sprite menu style. It work with Firefox 3.5, IE 7, Chrome 3.0 & Opera 9.02 Its look very attractive.I include 4 style menu. You can make attractive your blog. Its easy to add it to your blog.Follow below simple steps.Earlier i created more horizontal menubars.

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

2. Put checked marked in Expand Widget Templates

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

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

<div class="bloggertrix-navi1">

  <ul>

    <li class="sm1"><a href="#"></a></li>

    <li class="sm2"><a href="#"></a></li>

    <li class="sm3"><a href="#"></a></li>

    <li class="sm4"><a href="#"></a></li>

    <li class="sm5"><a href="http://xtremetipsntricks.blogspot.in/"></a></li>

  </ul>

</div>

*Replace # With your URL

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

6. Paste below one of code Before ]]></b:skin> tag (choose a style as your like.)

Style 1

• 
  
• 
  
• 
  
• 
  
• 
  

/*menubar by http://xtremetipsntricks.blogspot.in */

.bloggertrix-navi1 {

    display:block;

    height:72px;

    margin:30px auto;

    position:relative;

    width:525px; }

.bloggertrix-navi1 ul {

    float:none;

    list-style-image:none;

    list-style-type:none;

    margin:3px 0; }

.bloggertrix-navi1 ul li {

    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8955CgBbvOcFwZcTESf7s0jIlrsWXvBiRVJXknB90c_BfGtmI5P9R0YxluF_V7v3c-umBDlG4a4q0XCI0eOs4YIbebzR4f5eGQUtVj9Msy_hqo_ypFm2EIHAPjKgwCQvC8F5QX8phq2g/s1600/bloggertrix.com-tab-1.png);

    background-repeat:no-repeat;

    float:left;

    height:72px;

    margin:0px;

    padding-top:5px;

    position:absolute; }

.bloggertrix-navi1 ul li a {

    display:block;

    height:100%;

    width:100%; }

.bloggertrix-navi1 ul li.sm1 {

    background-position:0 0;

    left:0px;

    width:125px; }

.bloggertrix-navi1 ul li.sm2 {

    background-position:-125px 0;

    left:100px;

    width:124px; }

.bloggertrix-navi1 ul li.sm3 {

    background-position:-249px 0;

    left:200px;

    width:124px; }

.bloggertrix-navi1 ul li.sm4 {

    background-position:-373px 0;

    left:300px;

    width:125px; }

.bloggertrix-navi1 ul li.sm5 {

    background-position:-498px 0;

    left:400px;

    width:126px; }

.bloggertrix-navi1 ul li:hover {

    z-index:1000; }

.bloggertrix-navi1 ul li.sm1:hover {

    background-position:0 -75px; }

.bloggertrix-navi1 ul li.sm2:hover {

    background-position:-125px -75px; }

.bloggertrix-navi1 ul li.sm3:hover {

    background-position:-249px -75px; }

.bloggertrix-navi1 ul li.sm4:hover {

    background-position:-373px -75px; }

.bloggertrix-navi1 ul li.sm5:hover {

    background-position:-498px -75px; }

/*menubar by http://xtremetipsntricks.blogspot.in */

Style 2

• 
  
• 
  
• 
  
• 
  
• 
  

/*menubar by http://xtremetipsntricks.blogspot.in */

bloggertrix-navi2 {

    display:block;

    height:72px;

    margin:30px auto;

    position:relative;

    width:525px; }

bloggertrix-navi2 ul {

    float:none;

    list-style-image:none;

    list-style-type:none;

    margin:3px 0; }

bloggertrix-navi2 ul li {

    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB_N3-BzsduHMS2XNdK_vy4xoiG-SJjcJxjlbRJUOYPQZ6v1zZYTUoUrqWg3h2Yo3Xtvcw02Jm_kc08Z-OqImmMVPQHw1fU458cq1nKoAd3kiuRonUsp9-YYECjKbQM-JcYLOJfAYyrjY/s1600/bloggertrix.com-tab-2.png);

    background-repeat:no-repeat;

    float:left;

    height:72px;

    margin:0px;

    padding-top:5px;

    position:absolute; }

bloggertrix-navi2 ul li a {

    display:block;

    height:100%;

    width:100%; }

bloggertrix-navi2 ul li.sm1 {

    background-position:0 0;

    left:0px;

    width:125px; }

bloggertrix-navi2 ul li.sm2 {

    background-position:-125px 0;

    left:100px;

    width:124px; }

bloggertrix-navi2 ul li.sm3 {

    background-position:-249px 0;

    left:200px;

    width:124px; }

bloggertrix-navi2 ul li.sm4 {

    background-position:-373px 0;

    left:300px;

    width:125px; }

bloggertrix-navi2 ul li.sm5 {

    background-position:-498px 0;

    left:400px;

    width:126px; }

bloggertrix-navi2 ul li:hover {

    z-index:1000; }

bloggertrix-navi2 ul li.sm1:hover {

    background-position:0 -75px; }

bloggertrix-navi2 ul li.sm2:hover {

    background-position:-125px -75px; }

bloggertrix-navi2 ul li.sm3:hover {

    background-position:-249px -75px; }

bloggertrix-navi2 ul li.sm4:hover {

    background-position:-373px -75px; }

bloggertrix-navi2 ul li.sm5:hover {

    background-position:-498px -75px; }

/*menubar by http://xtremetipsntricks.blogspot.in */

7. Now save your template
     you are done.

Read More