In this guide I will look at the pros and cons of each service, which I hope will help you make and informed decision about which platform to use.

Blogger

Blogger was founded in 1999 by Pyra Labs, a company which was co-founded by Twitter creator Evan Williams. It was later acquired by Google in 2003.

One of the pioneers of the blogging medium, Blogger has long been the choice of blogging newbies. It’s incredibly easy to setup yet offers a lot of freedom and flexibility that other hosted services do not.

All blogger blogs have a small banner at the top of the page which is about 30 pixels high. This banner lets search the blog you are on, flag the blog for a violation, visit the next blogger blog and sign in. Unfortunately, this banner can not be removed however the rest of the page is not changed in any way by Google.

Pros:

• Full Control over your blogs template design.
• Advertisements and affiliate banners are permitted.
• Can use your own domain name for free.

Cons:

• Beginners may find customising the blogger design very difficult.
• Need to use a 3rd party script for a contact form (which is why many ‘Blogger users display their email instead).
• Limited number of plugins and widgets available.

I have also hear many people claim that because Blogger is owned by Google, Blogger blogs appear much higher in the search engines that blogs using other platforms. I have yet to see concrete evidence of this myself and advise you to take any such claim with a pinch of salt.

You can find out more at Blogger.com

WordPress

The WordPress hosted service (not to be confused with their popular self hosting blogging script) is a simple yet elegant blogging service which is favoured by many authors and professionals.

Unlike Blogger, you cannot edit CSS code of your blogs design. However, there are thousands of free themes to choose from, many of which let you choose the colour of your blog design. You can also easily customise your sidebar and footer using widgets (plugins which offer more features and customisation). You can also choose a wordpress free feature upgrade to modify your css code for $14.97 a year.

WordPress also offer a VIP Hosting for blogs with a lot of traffic. This is used by many top blogs likeTop Gear and the NFL.

Pros:

• Lets you easily create static pages.
• Very easy to add a contact form to your blog.
• Has a built in trackback system/
• A better comment system than Blogger.
• A huge number of themes and widgets available to bloggers.

Cons:

• Cannot modify blogs CSS stylesheet.
• Cannot add 3rd party tracking scripts like Google Analytics. However, WordPress does provide it’s own stats and they are more than sufficient for most people.
• No advertisements are allowed on WordPress.com blogs.
• WordPress occasionally show small text advertisements in order to cover server costs. This can be removed with a premium upgrade.
• It costs $9.97 a year to use an existing domain name you own or $14.97 to register your domain with them.

source from: bloggingtips

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/><script type='text/javascript'>$(document).ready(function(){

$(&quot;ul.subnav&quot;).parent().append(&quot;<span/>&quot;); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav

$(&quot;ul.topnav li span&quot;).click(function() { //When trigger is clicked...

//Following events are applied to the subnav itself (moving subnav up and down)$(this).parent().find(&quot;ul.subnav&quot;).slideDown('fast').show(); //Drop down the subnav on click

$(this).parent().hover(function() {}, function(){$(this).parent().find(&quot;ul.subnav&quot;).slideUp('slow'); //When the mouse hovers out of the subnav, move it back up});

//Following events are applied to the trigger (Hover events for the trigger)}).hover(function() {$(this).addClass(&quot;subhover&quot;); //On hover over, add class &quot;subhover&quot;}, function(){ //On Hover Out$(this).removeClass(&quot;subhover&quot;); //On hover out, remove class &quot;subhover&quot;});

});</script><style type='text/css'>ul.topnav {list-style: none;padding: 0 20px;margin: 0;float: left;width: 100%;background: #222;font-size: 1.2em;background: url(http://1.bp.blogspot.com/_4HKUHirY_2U/SuvG9uqdygI/AAAAAAAAAGg/RGkds76x-Ks/topnav_bg.gif) repeat-x;}ul.topnav li {float: left;margin: 0;padding: 0 15px 0 0;position: relative; /*--Declare X and Y axis base--*/}ul.topnav li a{padding: 10px 5px;color: #fff;display: block;text-decoration: none;float: left;}ul.topnav li a:hover{background: url(http://2.bp.blogspot.com/_4HKUHirY_2U/SuvHEn2GZ9I/AAAAAAAAAGo/s4ncczdnOd0/topnav_ho ver.gif) no-repeat center top;}ul.topnav li span { /*--Drop down trigger styles--*/width: 17px;height: 35px;float: left;background: url(http://2.bp.blogspot.com/_4HKUHirY_2U/SuvHKqBeOXI/AAAAAAAAAGw/qGYlY4ckLWc/subnav_btn.gif) no-repeat center top;}ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/ul.topnav li ul.subnav {list-style: none;position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/left: 0; top: 35px;background: #333;margin: 0; padding: 0;display: none;float: left;width: 170px;-moz-border-radius-bottomleft: 5px;-moz-border-radius-bottomright: 5px;-webkit-border-bottom-left-radius: 5px;-webkit-border-bottom-right-radius: 5px;border: 1px solid #111;}ul.topnav li ul.subnav li{margin: 0; padding: 0;border-top: 1px solid #252525; /*--Create bevel effect--*/border-bottom: 1px solid #444; /*--Create bevel effect--*/clear: both;width: 170px;}html ul.topnav li ul.subnav li a {float: left;width: 145px;background: #333 url(http://3.bp.blogspot.com/_4HKUHirY_2U/SuvHPYoc82I/AAAAAAAAAG4/3DDzBwklYpw/dropdown_linkbg.gif) no-repeat 10px center;padding-left: 20px;}html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/background: #222 url(http://3.bp.blogspot.com/_4HKUHirY_2U/SuvHPYoc82I/AAAAAAAAAG4/3DDzBwklYpw/dropdown_linkbg.gif) no-repeat 10px center;}#header img {margin: 20px 0 10px;}</style>

Please host image here for free.

You can change width,height,color,… as your choice.

4.Now go to Layout–>Page Element and click on "Add a gadget".

5.Select "html/java script" and add the code given below and click save.

<ul class="topnav">

<li><a href="#">Home</a></li><li><a href="#">Tutorials</a><ul class="subnav">  <li><a href="#">HTML Tutorials</a></li>  <li><a href="#">CSS Tutorials</a></li>  <li><a href="#">PHP Tutorials</a></li>  <li><a href="#">SQL Tutorials</a></li>  <li><a href="#">jQuery Tutorials</a></li> </ul></li><li><a href="#">Templates</a> <ul class="subnav">   <li><a href="#">1 Column</a></li>   <li><a href="#">2 Column</a></li>   <li><a href="#">3 Column</a></li>   <li><a href="#">4 Column</a></li>   <li><a href="#">Premium</a></li>   <li><a href="#">Buy Now</a></li>  </ul></li><li><a href="#">About Us</a></li><li><a href="#">Advertise</a></li><li><a href="#">Subscribe</a></li><li><a href="#">Contact Us</a></li>

</ul>

I hope you like this. Happy blogging……

<script type='text/javascript'>window.onload = function() { var paras = document.getElementById('content').getElementsByTagName('p'); if(paras.length) {  paras[0].className = paras[0].className + ' intro'; }};</script> <style type='text/css'> #hover-me  { padding:50px 100px; border:2px solid #fc0; background:#d3ea74; }</style><script src='http://ajax.googleapis.com/ajax/libs/mootools/1.2.3/mootools.js' type='text/javascript'/><script type='text/javascript'>

 /* usage */ window.addEvent('domready',function() {

  /* hover! */  Element.implement({   'hover': function(fn1,fn2) {    this.addEvents({     'mouseenter': function(e) {      fn1.attempt(e,this);     },     'mouseleave': function(e) {      fn2.attempt(e,this);     }    })   }  });

  $('hover-me').hover(function(e) {   this.fade('out');  }, function(e) {   this.fade('in');  }); });

</script>

4.Whenever you have to write some codes or text,write it between the following tags :

<div id="hover-me">

Your Text/Code

</div>

<style type='text/css'>

ul#topnav {margin: 0; padding: 0;float: left;width: 100%;list-style: none;position: relative;font-size: 1.2em;background: #383838;}ul#topnav li {float: left;margin: 0; padding: 0;border-right: 1px solid #fff;}ul#topnav li a {padding: 10px 15px;display: block;color: #f0f0f0;text-decoration: none;}ul#topnav li:hover { background: #1376c9 url() repeat-x; }ul#topnav li span {float: left;padding: 15px 0;position: absolute;left: 0; top:35px;display: none;width: 100%;background: #1376c9;color: #fff;-moz-border-radius-bottomright: 5px;-khtml-border-radius-bottomright: 5px;-webkit-border-bottom-right-radius: 5px;-moz-border-radius-bottomleft: 5px;-khtml-border-radius-bottomleft: 5px;-webkit-border-bottom-left-radius: 5px;}ul#topnav li:hover span { display: block; }ul#topnav li span a { display: inline; }ul#topnav li span a:hover {text-decoration: underline;}</style><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/><script type='text/javascript'>$(document).ready(function() {

$(&quot;ul#topnav li&quot;).hover(function() { //Hover over event on list item$(this).css({ 'background' : '#1376c9 url() repeat-x'}); //Add background color + image on hovered list item$(this).find(&quot;span&quot;).show(); //Show the subnav} , function() { //on hover out...$(this).css({ 'background' : 'none'}); //Ditch the background$(this).find(&quot;span&quot;).hide(); //Hide the subnav});

});</script>

You can change width,height,color,… as your choice.

4.Now go to Layout–>Page Element and click on "Add a gadget".

5.Select "html/java script" and add one of code below and click save.

<ul id="topnav">

<li><a href="#">Home</a></li><li><a href="#">Blogger</a><span><a href="#">Widgets</a> |<a href="#">Tip And Tricks</a> |<a href="#">Basic</a></span></li><li><a href="#">Tutorials</a><span><a href="#">HTML</a> |<a href="#">Java Script</a> |<a href="#">CSS</a><a href="#">jQuery</a><a href="#">MooTools</a></span></li><li><a href="#">Templates</a><span><a href="#">1 Column</a> |<a href="#">2 Column</a> |<a href="#">3 Column</a> |<a href="#">4 Column</a> |<a href="#">Premium</a></span></li><li><a href="#">Subscribe</a></li><li><a href="#">Advertise</a></li><li><a href="#">Contact</a></li>

</ul>

<style type='text/css'>ul#topnav {margin: 10px 0 20px;padding: 0;list-style: none;font-size: 1.1em;clear: both;float: left;width: 99%;}ul#topnav li{margin: 0;padding: 0;overflow: hidden;float: left;height:40px;}ul#topnav a, ul#topnav span {padding: 10px 20px;float: left;text-decoration: none;color: #fff;text-transform: uppercase;clear: both;height: 20px;line-height: 20px;background: #1d1d1d;}ul#topnav a { color: #7bc441; }ul#topnav span {display: none;}

ul#topnav.v2 span{background: url(http://4.bp.blogspot.com/_ar9PeTUrwMY/SurvAv9Rh3I/AAAAAAAAAzg/6yumbEnfpmA/a_bg.gif) repeat-x left top;}ul#topnav.v2 a{color: #555;background: url(http://4.bp.blogspot.com/_ar9PeTUrwMY/SurvAv9Rh3I/AAAAAAAAAzg/6yumbEnfpmA/a_bg.gif) repeat-x left bottom;}</style><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/><script type='text/javascript'>

$(document).ready(function() {

$(&quot;#topnav li&quot;).prepend(&quot;<span/>&quot;); //Throws an empty span tag right before the a tag

$(&quot;#topnav li&quot;).each(function() { //For each list item...var linkText = $(this).find(&quot;a&quot;).html(); //Find the text inside of the a tag$(this).find(&quot;span&quot;).show().html(linkText); //Add the text in the span tag});

$(&quot;#topnav li&quot;).hover(function() { //On hover...$(this).find(&quot;span&quot;).stop().animate({marginTop: &quot;-40&quot; //Find the span tag and move it up 40 pixels}, 250);} , function() { //On hover out...$(this).find(&quot;span&quot;).stop().animate({marginTop: &quot;0&quot; //Move the span back to its original state (0px)}, 250);});

});</script>

Please host image yourself.

You can change width,height,color,… as your choice.

4.Now go to Layout–>Page Element and click on "Add a gadget".

5.Select "html/java script" and add one of code below and click save.

Code 1:

<div class="container">

<ul id="topnav" class="v2">

<li><a href="http://bloggertipandtrick.blogspot.com">Home</a></li><li><a href="http://bloggertipandtrick.blogspot.com/search?max-results=999">TOC</a></li><li><a href="http://www.bloggertipandtrick.blogspot.com/search/label/widget?max-results=1000">Widgets</a></li><li><a href="http://bloggertipandtrick.blogspot.com/search/label/Templates?max-results=1000">Templates</a></li><li><a href="http://bloggertipandtrick.blogspot.com/search/label/jQuery?max-results=1000">jQuery</a></li><li><a href="http://bloggertipandtrick.blogspot.com/2009/01/blogger-tips-and-tricks-ads-details.html">Advertise</a></li><li><a href="http://bloggertipandtrick.blogspot.com/2009/01/contact-me.html">Contact</a></li>

</ul>

</div>

Result:

Code 2:

<div class="container">

<ul id="topnav">

<li><a href="http://bloggertipandtrick.blogspot.com">Home</a></li><li><a href="http://bloggertipandtrick.blogspot.com/search?max-results=999">TOC</a></li><li><a href="http://www.bloggertipandtrick.blogspot.com/search/label/widget?max-results=1000">Widgets</a></li><li><a href="http://bloggertipandtrick.blogspot.com/search/label/Templates?max-results=1000">Templates</a></li><li><a href="http://bloggertipandtrick.blogspot.com/search/label/jQuery?max-results=1000">jQuery</a></li><li><a href="http://bloggertipandtrick.blogspot.com/2009/01/blogger-tips-and-tricks-ads-details.html">Advertise</a></li><li><a href="http://bloggertipandtrick.blogspot.com/2009/01/contact-me.html">Contact</a></li>

</ul>

</div>

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

<script type='text/javascript'>

//<![CDATA[

/*Author: mg12Update: 2008/05/05Author URI: http://www.neoease.com/*/(function() {

function $(id) {return document.getElementById(id);}

function setStyleDisplay(id, status) {$(id).style.display = status;}

function goTop(a, t) {a = a || 0.1;t = t || 16;

var x1 = 0;var y1 = 0;var x2 = 0;var y2 = 0;var x3 = 0;var y3 = 0;

if (document.documentElement) { x1 = document.documentElement.scrollLeft || 0; y1 = document.documentElement.scrollTop || 0;}if (document.body) { x2 = document.body.scrollLeft || 0; y2 = document.body.scrollTop || 0;}var x3 = window.scrollX || 0;var y3 = window.scrollY || 0;

var x = Math.max(x1, Math.max(x2, x3));var y = Math.max(y1, Math.max(y2, y3));

var speed = 1 + a;window.scrollTo(Math.floor(x / speed), Math.floor(y / speed));if(x > 0 || y > 0) { var f = "MGJS.goTop(" + a + ", " + t + ")"; window.setTimeout(f, t);}}

function switchTab(showPanels, hidePanels, activeTab, activeClass, fadeTab, fadeClass) {$(activeTab).className = activeClass;$(fadeTab).className = fadeClass;

var panel, panelList;panelList = showPanels.split(',');for (var i = 0; i < panelList.length; i++) { var panel = panelList[i]; if ($(panel)) {  setStyleDisplay(panel, 'block'); }}panelList = hidePanels.split(',');for (var i = 0; i < panelList.length; i++) { panel = panelList[i]; if ($(panel)) {  setStyleDisplay(panel, 'none'); }}}

function loadCommentShortcut() {$('comment').onkeydown = function (moz_ev) { var ev = null; if (window.event){  ev = window.event; } else {  ev = moz_ev; } if (ev != null && ev.ctrlKey && ev.keyCode == 13) {  $('submit').click(); }}$('submit').value += ' (Ctrl+Enter)';}

function getElementsByClassName(className, tag, parent) {parent = parent || document;

var allTags = (tag == '*' && parent.all) ? parent.all : parent.getElementsByTagName(tag);var matchingElements = new Array();

className = className.replace(/\-/g, '\\-');var regex = new RegExp('(^|\\s)' + className + '(\\s|$)');

var element;for (var i = 0; i < allTags.length; i++) { element = allTags[i]; if (regex.test(element.className)) {  matchingElements.push(element); }}

return matchingElements;}

window['MGJS'] = {};window['MGJS']['$'] = $;window['MGJS']['setStyleDisplay'] = setStyleDisplay;window['MGJS']['goTop'] = goTop;window['MGJS']['switchTab'] = switchTab;window['MGJS']['loadCommentShortcut'] = loadCommentShortcut;window['MGJS']['getElementsByClassName'] = getElementsByClassName;

})();

//]]>

</script>

4.Now scroll down where you see </body> tag.

5.Copy below code and paste it just before the </body> tag.

<a href='#' onclick='MGJS.goTop();return false;'><b>Go To Top</b></a>

6.Click on save template and you are done. I hope you have enjoyed it.

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

<script type='text/javascript'>//<![CDATA[

$(function(){

$('a[href*=#top]').click(function() {

if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')&& location.hostname == this.hostname) {

var $target = $(this.hash);

$target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');

if ($target.length) {

var targetOffset = $target.offset().top;

$('html,body').animate({scrollTop: targetOffset}, 1000);

return false;

}

}

});

});//]]></script><!-- end scrolltop -->

4.Now scroll down where you see <body> tag .

5.Replace <body> tag with <body id=’top’> .

6.Now again scroll down where you see </body> tag .

7.Copy below code and paste it just before </body> tag:

<div id='goingtop'><a href='#top' title='Go Top'><img src='http://1.bp.blogspot.com/_4HKUHirY_2U/Sujr21YfikI/AAAAAAAAAGM/mPXYFXAepV4/top.png' style='right:20px; bottom:20px; position: fixed;'/></a></div>

Now you can change your background image replacing above red colored code with your image URL. For getting image URL you can host free image here

8.Click on save template and you are done.

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

<script type='text/javascript'>//<![CDATA[$(function(){

// ***// Scrolling background// ***

// height of background image in pixelsvar backgroundheight = 4000;

// get the current minute/hour of the dayvar now = new Date();var hour = now.getHours();var minute = now.getMinutes();

// work out how far through the day we are as a percentage - e.g. 6pm = 75%var hourpercent = hour / 24 * 100;var minutepercent = minute / 30 / 24 * 100;var percentofday = Math.round(hourpercent + minutepercent);

// calculate which pixel row to start graphic from based on how far through the day we arevar offset = backgroundheight / 100 * percentofday;

// graphic starts at approx 6am, so adjust offset by 1/4var offset = offset - (backgroundheight / 1);

function scrollbackground() {// decrease the offset by 1, or if its less than 1 increase it by the background height minus 1offset = (offset < 1) ? offset + (backgroundheight - 1) : offset - 1;// apply the background position$('body').css("background-position", "50% " + offset + "px");// call self to continue animationsetTimeout(function() {scrollbackground();}, 70);}

// Start the animationscrollbackground();});//]]></script>

4.Now scroll down to where you see like this code:

body {background:$bgcolor;margin:0;color:$textcolor;font:x-small Georgia Serif;font-size/* */:/**/small;font-size: /**/small;text-align: center;}

5.Replace above code with below code:

body {background:url(http://1.bp.blogspot.com/_4HKUHirY_2U/Suj7uR3ZKfI/AAAAAAAAAGU/R8pnF8urjTk/bgscroll.jpg);color:$textcolor;font:x-small Georgia Serif;font-size/* */:/**/small;font-size: /**/small;text-align: center;}

Now you can change your background image replacing above red colored code with your image URL. For getting image URL you can host free image here.Have a nice blogging……

• simple Tab View
• 3d Tab View Widget
• Beautiful MultiTab Gadget

Choose any one style you prefer than apply to blog. Please feel free to Contact Me for any suggestion.
1.Login to your blogger dashboard–> layout- -> Edit HTML
2.Scroll down to where you see]]></b:skin> tag .
3.Copy below code and paste it just after the ]]></b:skin> tag.

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

<script type='text/javascript'>//<![CDATA[

eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('(3(C){C.8={3o:{19:3(E,F,H){6 G=C.8[E].1h;21(6 D 3p H){G.1I[D]=G.1I[D]||[];G.1I[D].28([F,H[D]])}},2P:3(D,F,E){6 H=D.1I[F];5(!H){7}21(6 G=0;G<H.k;G++){5(D.b[H[G][0]]){H[G][1].1H(D.c,E)}}}},1l:{},n:3(D){5(C.8.1l[D]){7 C.8.1l[D]}6 E=C(\'<2a 3s="8-3r">\').j(D).n({3q:"3i",2g:"-2A",3g:"-2A",1r:"1w"}).22("2C");C.8.1l[D]=!!((!(/3I|3P/).12(E.n("3z"))||(/^[1-9]/).12(E.n("2T"))||(/^[1-9]/).12(E.n("2E"))||!(/2v/).12(E.n("3w"))||!(/3S|3C\\(0, 0, 0, 0\\)/).12(E.n("3D"))));3E{C("2C").2w(0).3B(E.2w(0))}3x(F){}7 C.8.1l[D]},3y:3(D){C(D).v("1p","2I").n("2q","2v")},3H:3(D){C(D).v("1p","3O").n("2q","")},3Q:3(G,E){6 D=/2g/.12(E||"2g")?"3N":"3M",F=e;5(G[D]>0){7 t}G[D]=1;F=G[D]>0?t:e;G[D]=0;7 F}};6 B=C.2e.W;C.2e.W=3(){C("*",2).19(2).z("W");7 B.1H(2,2M)};3 A(E,F,G){6 D=C[E][F].35||[];D=(1F D=="1E"?D.2h(/,?\\s+/):D);7(C.1j(G,D)!=-1)}C.1i=3(E,D){6 F=E.2h(".")[0];E=E.2h(".")[1];C.2e[E]=3(J){6 H=(1F J=="1E"),I=2D.1h.3J.2P(2M,1);5(H&&A(F,E,J)){6 G=C.i(2[0],E);7(G?G[J].1H(G,I):1n)}7 2.14(3(){6 K=C.i(2,E);5(H&&K&&C.3v(K[J])){K[J].1H(K,I)}o{5(!H){C.i(2,E,3e C[F][E](2,J))}}})};C[F][E]=3(I,H){6 G=2;2.15=E;2.2H=F+"-"+E;2.b=C.1A({},C.1i.1k,C[F][E].1k,H);2.c=C(I).u("1e."+E,3(L,J,K){7 G.1e(J,K)}).u("2j."+E,3(K,J){7 G.2j(J)}).u("W",3(){7 G.1b()});2.23()};C[F][E].1h=C.1A({},C.1i.1h,D)};C.1i.1h={23:3(){},1b:3(){2.c.1q(2.15)},2j:3(D){7 2.b[D]},1e:3(D,E){2.b[D]=E;5(D=="f"){2.c[E?"j":"r"](2.2H+"-f")}},1X:3(){2.1e("f",e)},1P:3(){2.1e("f",t)}};C.1i.1k={f:e};C.8.2J={3h:3(){6 D=2;2.c.u("3d."+2.15,3(E){7 D.2G(E)});5(C.x.13){2.2K=2.c.v("1p");2.c.v("1p","2I")}2.3c=e},38:3(){2.c.16("."+2.15);(C.x.13&&2.c.v("1p",2.2K))},2G:3(F){(2.V&&2.1o(F));2.1C=F;6 E=2,G=(F.39==1),D=(1F 2.b.25=="1E"?C(F.2f).2x().19(F.2f).y(2.b.25).k:e);5(!G||D||!2.2S(F)){7 t}2.1D=!2.b.26;5(!2.1D){2.3a=1x(3(){E.1D=t},2.b.26)}5(2.2m(F)&&2.1T(F)){2.V=(2.1U(F)!==e);5(!2.V){F.3b();7 t}}2.2n=3(H){7 E.2r(H)};2.2l=3(H){7 E.1o(H)};C(2N).u("2O."+2.15,2.2n).u("2t."+2.15,2.2l);7 e},2r:3(D){5(C.x.13&&!D.3j){7 2.1o(D)}5(2.V){2.1V(D);7 e}5(2.2m(D)&&2.1T(D)){2.V=(2.1U(2.1C,D)!==e);(2.V?2.1V(D):2.1o(D))}7!2.V},1o:3(D){C(2N).16("2O."+2.15,2.2n).16("2t."+2.15,2.2l);5(2.V){2.V=e;2.2u(D)}7 e},2m:3(D){7(29.3m(29.2z(2.1C.2L-D.2L),29.2z(2.1C.2s-D.2s))>=2.b.2F)},1T:3(D){7 2.1D},1U:3(D){},1V:3(D){},2u:3(D){},2S:3(D){7 t}};C.8.2J.1k={25:U,2F:1,26:0}})(27);(3(A){A.1i("8.4",{23:3(){2.b.Z+=".4";2.1m(t)},1e:3(B,C){5((/^d/).12(B)){2.1v(C)}o{2.b[B]=C;2.1m()}},k:3(){7 2.$4.k},1Q:3(B){7 B.2R&&B.2R.1g(/\\s/g,"2Q").1g(/[^A-4o-4x-9\\-2Q:\\.]/g,"")||2.b.2X+A.i(B)},8:3(C,B){7{b:2.b,4u:C,30:B,11:2.$4.11(C)}},1m:3(O){2.$l=A("1O:4p(a[p])",2.c);2.$4=2.$l.1G(3(){7 A("a",2)[0]});2.$h=A([]);6 P=2,D=2.b;2.$4.14(3(R,Q){5(Q.X&&Q.X.1g("#","")){P.$h=P.$h.19(Q.X)}o{5(A(Q).v("p")!="#"){A.i(Q,"p.4",Q.p);A.i(Q,"q.4",Q.p);6 T=P.1Q(Q);Q.p="#"+T;6 S=A("#"+T);5(!S.k){S=A(D.2d).v("1s",T).j(D.1u).4l(P.$h[R-1]||P.c);S.i("1b.4",t)}P.$h=P.$h.19(S)}o{D.f.28(R+1)}}});5(O){2.c.j(D.2b);2.$h.14(3(){6 Q=A(2);Q.j(D.1u)});5(D.d===1n){5(20.X){2.$4.14(3(S,Q){5(Q.X==20.X){D.d=S;5(A.x.13||A.x.43){6 R=A(20.X),T=R.v("1s");R.v("1s","");1x(3(){R.v("1s",T)},44)}4m(0,0);7 e}})}o{5(D.1c){6 J=46(A.1c("8-4"+A.i(P.c)),10);5(J&&P.$4[J]){D.d=J}}o{5(P.$l.y("."+D.m).k){D.d=P.$l.11(P.$l.y("."+D.m)[0])}}}}D.d=D.d===U||D.d!==1n?D.d:0;D.f=A.41(D.f.40(A.1G(2.$l.y("."+D.1a),3(R,Q){7 P.$l.11(R)}))).31();5(A.1j(D.d,D.f)!=-1){D.f.3V(A.1j(D.d,D.f),1)}2.$h.j(D.18);2.$l.r(D.m);5(D.d!==U){2.$h.w(D.d).1S().r(D.18);2.$l.w(D.d).j(D.m);6 K=3(){A(P.c).z("1K",[P.Y("1K"),P.8(P.$4[D.d],P.$h[D.d])],D.1S)};5(A.i(2.$4[D.d],"q.4")){2.q(D.d,K)}o{K()}}A(3U).u("3W",3(){P.$4.16(".4");P.$l=P.$4=P.$h=U})}21(6 G=0,N;N=2.$l[G];G++){A(N)[A.1j(G,D.f)!=-1&&!A(N).1f(D.m)?"j":"r"](D.1a)}5(D.17===e){2.$4.1q("17.4")}6 C,I,B={"3X-2E":0,1R:1},E="3Z";5(D.1d&&D.1d.3Y==2D){C=D.1d[0]||B,I=D.1d[1]||B}o{C=I=D.1d||B}6 H={1r:"",47:"",2T:""};5(!A.x.13){H.1W=""}3 M(R,Q,S){Q.2p(C,C.1R||E,3(){Q.j(D.18).n(H);5(A.x.13&&C.1W){Q[0].2B.y=""}5(S){L(R,S,Q)}})}3 L(R,S,Q){5(I===B){S.n("1r","1w")}S.2p(I,I.1R||E,3(){S.r(D.18).n(H);5(A.x.13&&I.1W){S[0].2B.y=""}A(P.c).z("1K",[P.Y("1K"),P.8(R,S[0])],D.1S)})}3 F(R,T,Q,S){T.j(D.m).4k().r(D.m);M(R,Q,S)}2.$4.16(".4").u(D.Z,3(){6 T=A(2).2x("1O:w(0)"),Q=P.$h.y(":4e"),S=A(2.X);5((T.1f(D.m)&&!D.1z)||T.1f(D.1a)||A(2).1f(D.1t)||A(P.c).z("2y",[P.Y("2y"),P.8(2,S[0])],D.1v)===e){2.1M();7 e}P.b.d=P.$4.11(2);5(D.1z){5(T.1f(D.m)){P.b.d=U;T.r(D.m);P.$h.1Y();M(2,Q);2.1M();7 e}o{5(!Q.k){P.$h.1Y();6 R=2;P.q(P.$4.11(2),3(){T.j(D.m).j(D.2c);L(R,S)});2.1M();7 e}}}5(D.1c){A.1c("8-4"+A.i(P.c),P.b.d,D.1c)}P.$h.1Y();5(S.k){6 R=2;P.q(P.$4.11(2),Q.k?3(){F(R,T,Q,S)}:3(){T.j(D.m);L(R,S)})}o{4b"27 4c 4d: 3n 49 4a."}5(A.x.13){2.1M()}7 e});5(!(/^24/).12(D.Z)){2.$4.u("24.4",3(){7 e})}},19:3(E,D,C){5(C==1n){C=2.$4.k}6 G=2.b;6 I=A(G.37.1g(/#\\{p\\}/g,E).1g(/#\\{1L\\}/g,D));I.i("1b.4",t);6 H=E.4i("#")==0?E.1g("#",""):2.1Q(A("a:4g-4h",I)[0]);6 F=A("#"+H);5(!F.k){F=A(G.2d).v("1s",H).j(G.18).i("1b.4",t)}F.j(G.1u);5(C>=2.$l.k){I.22(2.c);F.22(2.c[0].48)}o{I.36(2.$l[C]);F.36(2.$h[C])}G.f=A.1G(G.f,3(K,J){7 K>=C?++K:K});2.1m();5(2.$4.k==1){I.j(G.m);F.r(G.18);6 B=A.i(2.$4[0],"q.4");5(B){2.q(C,B)}}2.c.z("2Y",[2.Y("2Y"),2.8(2.$4[C],2.$h[C])],G.19)},W:3(B){6 D=2.b,E=2.$l.w(B).W(),C=2.$h.w(B).W();5(E.1f(D.m)&&2.$4.k>1){2.1v(B+(B+1<2.$4.k?1:-1))}D.f=A.1G(A.34(D.f,3(G,F){7 G!=B}),3(G,F){7 G>=B?--G:G});2.1m();2.c.z("2V",[2.Y("2V"),2.8(E.2k("a")[0],C[0])],D.W)},1X:3(B){6 C=2.b;5(A.1j(B,C.f)==-1){7}6 D=2.$l.w(B).r(C.1a);5(A.x.4n){D.n("1r","4t-1w");1x(3(){D.n("1r","1w")},0)}C.f=A.34(C.f,3(F,E){7 F!=B});2.c.z("33",[2.Y("33"),2.8(2.$4[B],2.$h[B])],C.1X)},1P:3(C){6 B=2,D=2.b;5(C!=D.d){2.$l.w(C).j(D.1a);D.f.28(C);D.f.31();2.c.z("32",[2.Y("32"),2.8(2.$4[C],2.$h[C])],D.1P)}},1v:3(B){5(1F B=="1E"){B=2.$4.11(2.$4.y("[p$="+B+"]")[0])}2.$4.w(B).4q(2.b.Z)},q:3(G,K){6 L=2,D=2.b,E=2.$4.w(G),J=E[0],H=K==1n||K===e,B=E.i("q.4");K=K||3(){};5(!B||!H&&A.i(J,"17.4")){K();7}6 M=3(N){6 O=A(N),P=O.2k("*:4s");7 P.k&&P.4v(":45(3R)")&&P||O};6 C=3(){L.$4.y("."+D.1t).r(D.1t).14(3(){5(D.1N){M(2).3l().1B(M(2).i("1L.4"))}});L.1y=U};5(D.1N){6 I=M(J).1B();M(J).3k("<2o></2o>").2k("2o").i("1L.4",I).1B(D.1N)}6 F=A.1A({},D.1J,{2U:B,2i:3(O,N){A(J.X).1B(O);C();5(D.17){A.i(J,"17.4",t)}A(L.c).z("2Z",[L.Y("2Z"),L.8(L.$4[G],L.$h[G])],D.q);D.1J.2i&&D.1J.2i(O,N);K()}});5(2.1y){2.1y.3f();C()}E.j(D.1t);1x(3(){L.1y=A.3u(F)},0)},2U:3(C,B){2.$4.w(C).1q("17.4").i("q.4",B)},1b:3(){6 B=2.b;2.c.16(".4").r(B.2b).1q("4");2.$4.14(3(){6 C=A.i(2,"p.4");5(C){2.p=C}6 D=A(2).16(".4");A.14(["p","q","17"],3(E,F){D.1q(F+".4")})});2.$l.19(2.$h).14(3(){5(A.i(2,"1b.4")){A(2).W()}o{A(2).r([B.m,B.2c,B.1a,B.1u,B.18].3G(" "))}})},Y:3(B){7 A.Z.3L({3t:B,2f:2.c[0]})}});A.8.4.1k={1z:e,Z:"24",f:[],1c:U,1N:"3F&#3A;",17:e,2X:"8-4-",1J:{},1d:U,37:\'<1O><a p="#{p}"><2W>#{1L}</2W></a></1O>\',2d:"<2a></2a>",2b:"8-4-3K",m:"8-4-d",2c:"8-4-1z",1a:"8-4-f",1u:"8-4-30",18:"8-4-3T",1t:"8-4-4w"};A.8.4.35="k";A.1A(A.8.4.1h,{1Z:U,4r:3(C,F){F=F||e;6 B=2,E=2.b.d;3 G(){B.1Z=42(3(){E=++E<B.$4.k?E:0;B.1v(E)},C)}3 D(H){5(!H||H.4j){4f(B.1Z)}}5(C){G();5(!F){2.$4.u(2.b.Z,D)}o{2.$4.u(2.b.Z,3(){D();E=B.b.d;G()})}}o{D();2.$4.16(2.b.Z,D)}}})})(27);',62,282,'||this|function|tabs|if|var|return|ui|||options|element|selected|false|disabled||panels|data|addClass|length|lis|selectedClass|css|else|href|load|removeClass||true|bind|attr|eq|browser|filter|triggerHandler|||||||||||||||||||||null|_mouseStarted|remove|hash|fakeEvent|event||index|test|msie|each|widgetName|unbind|cache|hideClass|add|disabledClass|destroy|cookie|fx|setData|hasClass|replace|prototype|widget|inArray|defaults|cssCache|tabify|undefined|mouseUp|unselectable|removeData|display|id|loadingClass|panelClass|select|block|setTimeout|xhr|unselect|extend|html|_mouseDownEvent|_mouseDelayMet|string|typeof|map|apply|plugins|ajaxOptions|tabsshow|label|blur|spinner|li|disable|tabId|duration|show|mouseDelayMet|mouseStart|mouseDrag|opacity|enable|stop|rotation|location|for|appendTo|init|click|cancel|delay|jQuery|push|Math|div|navClass|unselectClass|panelTemplate|fn|target|top|split|success|getData|find|_mouseUpDelegate|mouseDistanceMet|_mouseMoveDelegate|em|animate|MozUserSelect|mouseMove|pageY|mouseup|mouseStop|none|get|parents|tabsselect|abs|5000px|style|body|Array|width|distance|mouseDown|widgetBaseClass|on|mouse|_mouseUnselectable|pageX|arguments|document|mousemove|call|_|title|mouseCapture|height|url|tabsremove|span|idPrefix|tabsadd|tabsload|panel|sort|tabsdisable|tabsenable|grep|getter|insertBefore|tabTemplate|mouseDestroy|which|_mouseDelayTimer|preventDefault|started|mousedown|new|abort|left|mouseInit|absolute|button|wrapInner|parent|max|Mismatching|plugin|in|position|gen|class|type|ajax|isFunction|backgroundImage|catch|disableSelection|cursor|8230|removeChild|rgba|backgroundColor|try|Loading|join|enableSelection|auto|slice|nav|fix|scrollLeft|scrollTop|off|default|hasScroll|img|transparent|hide|window|splice|unload|min|constructor|normal|concat|unique|setInterval|opera|500|not|parseInt|overflow|parentNode|fragment|identifier|throw|UI|Tabs|visible|clearInterval|first|child|indexOf|clientX|siblings|insertAfter|scrollTo|safari|Za|has|trigger|rotate|last|inline|tab|is|loading|z0'.split('|'),0,{}))

//]]></script>

<script type='text/javascript'>//<![CDATA[

$(document).ready(function() {$('#tabzine> ul').tabs({ fx: { height: 'toggle', opacity: 'toggle' } });

});

//]]></script>

<style type='text/css'>

ul.tabnav{padding:4px 0px 4px 0px;height:30px;margin:0px 0px;background:#e7e0bb;border:1px solid #fff;}

.tabnav li {display: inline;list-style: none;float:left;text-align:center;margin-right:2px;margin-left:9px;}

.tabnav li a {text-decoration: none;text-transform: uppercase;font-weight: normal;padding: 6px 8px;width:80px;font-weight:normal;font: 12px tahoma, helvetica,arial,sans-serif;color: #2C2F32;text-decoration: none;display:block;background:#c7bd88;}

.tabnav li a:hover, .tabnav li a:active, .tabnav li.ui-tabs-selected a {text-decoration:none;background: #948e6f;color: #E7E0BB;}

.tabdiv {padding: 5px 5px 5px 5px;font-family:Tahoma,Century gothic, Arial, sans-serif;background:#fff;}.tabdiv a:link,.tabdiv  a:visited {color:#333;}.tabdiv a:hover{color: #2676A1;}.tabdiv ul{list-style-type:none;margin:0px 0px;padding:0px 0px;}

.tabdiv ul li{height:100%;line-height:28px;padding: 0px 0px 0px 0px;color:#333;}.tabdiv li a:link,.tabdiv li a:visited{background:#F3F3F3;display:block;margin-left:5px;overflow:hidden;line-height:24px;padding:2px 2px ;margin:2px 0px;color:#6F6B53;font-size:13px;}

.tabdiv li a:hover {background:#EFE3A4;color: #7d6d13;text-decoration:none;}.ui-tabs-hide {display: none;}

</style>

4.Now again scroll down where you see below code:

<div id='sidebar-wrapper'>

5.Now copy below code and paste it just after <div id=’sidebar-wrapper’> .

<div class='widgets' id='tabzine'><ul class='tabnav'><li class='pop'><a href='#video'>Video</a></li><li class='fea'><a href='#recent'>Recent</a></li><li class='rec'><a href='#popular'>Popular</a></li></ul>

<!-- tab1 --><div class='tabdiv' id='video'><b:section class='sidebar5' id='sidebar5' preferred='yes'><b:widget id='HTML224' locked='false' title='' type='HTML'/></b:section></div><!--/tab1-->

<!-- tab2 --><div class='tabdiv' id='recent'><b:section class='sidebar4' id='sidebar4' preferred='yes'><b:widget id='HTML357' locked='false' title='' type='HTML'/></b:section></div><!-- tab2 -->

<!-- tab3 --><div class='tabdiv' id='popular'><b:section class='sidebar3' id='sidebar3' preferred='yes'><b:widget id='HTML446' locked='false' title='' type='HTML'/></b:section></div><!-- /tab3 -->

</div>

6.Now save your template.

7.Go to Layout–>Page Elements.You can see your tab widget as the picture below.

8.Now you can add contents to your tab widget.Your final result will look like this:

Keep blogging and enjoy it……..

<!-- Import jQuery and SimpleModal source files --><script src='http://h1.ripway.com/bns/lightbox-comment/jquery.js' type='text/javascript'></script><script src='http://h1.ripway.com/bns/lightbox-comment/jquery.simplemodal.js' type='text/javascript'></script>

<!-- Contact Form JS and CSS files --><script src='http://h1.ripway.com/bns/lightbox-comment/basic.js' type='text/javascript'></script><link type='text/css' href='http://h1.ripway.com/bns/lightbox-comment/basic.css' rel='stylesheet' media='screen' />

<!-- IE 6 hacks --><!--[if lt IE 7]><link type='text/css' href='http://h1.ripway.com/bns/lightbox-comment/basic_ie.css' rel='stylesheet' media='screen' /><![endif]-->

9.Now again scroll down to where you see </body> tag .

10.Copy below code and paste it just before the </body> tag and save your template.

<div id="basicModalContent" style='display:none'>

ENTER XHTML FORM CODE HERE(in step 5)

</div>

Now replace "ENTER XHTML FORM CODE HERE" with your XHTML Code.

11.Now Add below code Anywhere in your blog to bring contact us form.

<div id='basicModal'><a href='#' class='basic'>Contact US</a></div>

Now you are done. I hope you are enjoying it now. Let me know about your experience. Happy blogging..