How To Add Topsy Retweet Counter Buttons For Blogger

This tutorial explains to you how to add Topsy Retweet Counter Buttons in below header of your every blog post.There are 2 sizes of this Topsy Retweet Counter Button.You can add any button you like.Follow the steps below to do it:



1.Log in to your dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this:

<div class='post-header-line-1'/>

4.Now copy below code and paste it just after the above line.

For Large Button:

<div style='padding: 4px; float: right;'>
<script src='http://button.topsy.com/widget/retweet-big?nick=TWITTER-USERNAME&amp;url=' type='text/javascript'/>
</div>

For Small Button:

<div style='padding: 4px; float: right;'>
<script src='http://button.topsy.com/widget/retweet-small?nick=TWITTER-USERNAME&amp;url=' type='text/javascript'/>
</div>

Important : Replace TWITTER-USERNAME with your Twitter username.

5.Now save your template and you are done.

READ MORE - How To Add Topsy Retweet Counter Buttons For Blogger

Charm CSS Horizontal Menu For Blogger/Websites

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag.

<style type='text/css'>

#menu {text-align:left;height:36px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidYqpL6hEg1iBDBVDybCth8NjcgceLjwUe4yNDuXqoBBjlvgs2NR2d8mYvYVnrJWfd6B4ZD2bQzAtfvh1tVmwqUmGSD3hStoCLubmuuUbyoWqZPuMN9LO4RE2EJOVWOeMvPN49CkZvucKI/) repeat-x top;padding:0px 10px 0px 10px;vertical-align: top;margin:0px 4px 0px 4px;}

#menu ul {height:36px; width:100%;overflow:hidden;}

#menu li {  font: 15px Arial, Helvetica, sans-serif; display: inline;  margin-right: 10px; padding:5px 0px 5px 0px; font-weight:bold; line-height:36px;height:36px;}

#menu li a {  color: #494949;  text-decoration: none;}

#menu li a:hover {color: #333;text-decoration: underline;}

</style>

Note : You can change height,width,... as you like.Host menu.gif yourself.

4.Now save your template.

5.Go to Layout-->Page Elements and click on "Add a gadget".

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

<div id="menu">

<ul>
 
<li><a href="#" title="#">Home</a></li>

<li><a href="#" title="#">Blogging Tips</a></li>

<li><a href="#" title="#">HTML</a></li>

<li><a href="#" title="#">CSS</a></li>

<li><a href="#" title="#">JQuery</a></li>

<li><a href="#" title="#">About</a></li>

<li><a href="#" title="#">Support</a></li>

<li><a href="#" title="#">Contact</a></li>

</ul>

</div>

You are done.

Demo

READ MORE - Charm CSS Horizontal Menu For Blogger/Websites

How To Redirect/Forward Naked Domains to Blogger

I think this will be a very valuable article for bloggers,who get custom domains to their blogspot blogs.This article explains step by step how to redirect your naked domain (mysite.com) to non-Naked Domain (www.mysite.com).To know more about naked and non-naked domain read here.For example,my

Naked domain : http://bloggertipandtrick.net/

non-Naked domain : http://www.bloggertipandtrick.net/

When someone enter my naked domain into his browser he will be automatically redirect to my non-naked domain.The purpose of this article is how to configure your GoDaddy domain name such as my domain name.

1.Login to your GoDaddy account and click on domain tab.Click on the "Advanced details" link of the domain you want to configure.



2.Now Click on "Manage" from Nameservers Section.



You can see a screen like this:



3.Enter NS17.DOMAINCONTROL.COM and NS18.DOMAINCONTROL.COM as nameservers instead of your current name servers and click "OK".



Result:



4.Now again Click on "Manage" from Nameservers Section.Now Select "I want to park my domains" and click "OK".Look at below.



5.Click on "Manage" from Forwarding Section.



A new window will appear.Enter your domain name exactly as the example below and click "OK".



Result:



6.Now click on "Total DNS Control" from Total DNS section.



7.In Total DNS Control page,Click on pencil icon from A(Host) Section.



8.Enter this detail in next window and click "OK".

Host Name : @

Points To Ip Address : 64.202.189.170



9.Now you have finished your work in GoDaddy.Login to your blogger dashboard-->settings-->Publishing.Configure your settings as below and click "save settings".



10.You are done !!! Then wait a few hours(maximum 24 hours), and your naked domain will work as your non-naked domain.

If you have any question leave a comment.

READ MORE - How To Redirect/Forward Naked Domains to Blogger

How To Become Blogger Blogroll Nofollow

This is very important if you consider about your site SEO.Adding the nofollow attribute to your blogroll, would nullify any link juice with Google.If you like to add Nofollow attribute to your blogspot blogroll simply follow the steps below:

1.Login to your dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to till you see your Blogroll widget code :

(Note : You may also can find it by searching <b:widget id='BlogList )

Your Blogroll widget code will look like this:

<b:widget id='BlogList1' locked='false' title='Blogroll' type='BlogList'>
<b:includable id='main'>
 <!-- only display title if it's non-empty -->
 <b:if cond='data:title != &quot;&quot;'>
   <div id='blog-list-title'>
     <h2 class='title'><data:title/></h2>
   </div>
 </b:if>

 <div class='widget-content'>
   <div class='blog-list-container' expr:id='data:widget.instanceId + &quot;_container&quot;'>
     <ul expr:id='data:widget.instanceId + &quot;_blogs&quot;'>
       <b:loop values='data:items' var='item'>
         <li expr:style='data:item.displayStyle'>
           <div class='blog-icon'>
             <b:if cond='data:showIcon == &quot;true&quot;'>
               <input expr:value='data:item.blogIconUrl' type='hidden'/>
             </b:if>
           </div>
           <div class='blog-content'>
             <div class='blog-title'>
               <a expr:href='data:item.blogUrl' target='_blank'>
                 <data:item.blogTitle/></a>
             </div>
             <div class='item-content'>
               <b:if cond='data:showItemThumbnail == &quot;true&quot;'>
                 <b:if cond='data:item.itemThumbnail'>
                   <div class='item-thumbnail'>
                     <a expr:href='data:item.blogUrl' target='_blank'>
                       <img alt='' border='0' expr:height='data:item.itemThumbnail.height' expr:src='data:item.itemThumbnail.url' expr:width='data:item.itemThumbnail.width'/>
                     </a>
                   </div>
                 </b:if>
               </b:if>
               <b:if cond='data:showItemTitle == &quot;true&quot;'>
                 <span class='item-title'>
                   <b:if cond='data:item.itemUrl != &quot;&quot;'>
                     <a expr:href='data:item.itemUrl' target='_blank'>
                       <data:item.itemTitle/></a>
                   <b:else/>
                     <data:item.itemTitle/>
                   </b:if>
                 </span>
               </b:if>
               <b:if cond='data:showItemSnippet == &quot;true&quot;'>
                 <b:if cond='data:showItemTitle == &quot;true&quot;'>
                   -
                 </b:if>
                 <span class='item-snippet'>
                   <data:item.itemSnippet/>
                 </span>
               </b:if>
               <b:if cond='data:showTimePeriodSinceLastUpdate == &quot;true&quot;'>
                 <div class='item-time'>
                   <data:item.timePeriodSinceLastUpdate/>
                 </div>
               </b:if>
             </div>
           </div>
           <div style='clear: both;'/>
         </li>
       </b:loop>
     </ul>

     <b:if cond='data:numItemsToShow != 0'>
       <b:if cond='data:totalItems &gt; data:numItemsToShow'>
         <div class='show-option'>
           <span expr:id='data:widget.instanceId + &quot;_show-n&quot;' style='display: none;'>
             <a href='javascript:void(0)' onclick='return false;'><data:showNText/></a>
           </span>
           <span expr:id='data:widget.instanceId + &quot;_show-all&quot;' style='margin-left: 5px;'>
             <a href='javascript:void(0)' onclick='return false;'><data:showAllText/></a>
           </span>
         </div>
       </b:if>
     </b:if>

     <b:include name='quickedit'/>
   </div>
 </div>
</b:includable>
</b:widget>

4.Now add rel='nofollow' to your blogroll widget code as the example below:

<b:widget id='BlogList1' locked='false' title='Blogroll' type='BlogList'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
  <div id='blog-list-title'>
    <h2 class='title'><data:title/></h2>
  </div>
</b:if>

<div class='widget-content'>
  <div class='blog-list-container' expr:id='data:widget.instanceId + &quot;_container&quot;'>
    <ul expr:id='data:widget.instanceId + &quot;_blogs&quot;'>
      <b:loop values='data:items' var='item'>
        <li expr:style='data:item.displayStyle'>
          <div class='blog-icon'>
            <b:if cond='data:showIcon == &quot;true&quot;'>
              <input expr:value='data:item.blogIconUrl' type='hidden'/>
            </b:if>
          </div>
          <div class='blog-content'>
            <div class='blog-title'>
              <a expr:href='data:item.blogUrl' rel='nofollow' target='_blank'>
                <data:item.blogTitle/></a>
            </div>
            <div class='item-content'>
              <b:if cond='data:showItemThumbnail == &quot;true&quot;'>
                <b:if cond='data:item.itemThumbnail'>
                  <div class='item-thumbnail'>
                    <a expr:href='data:item.blogUrl' rel='nofollow' target='_blank'>
                      <img alt='' border='0' expr:height='data:item.itemThumbnail.height' expr:src='data:item.itemThumbnail.url' expr:width='data:item.itemThumbnail.width'/>
                    </a>
                  </div>
                </b:if>
              </b:if>
              <b:if cond='data:showItemTitle == &quot;true&quot;'>
                <span class='item-title'>
                  <b:if cond='data:item.itemUrl != &quot;&quot;'>
                    <a expr:href='data:item.itemUrl' rel='nofollow' target='_blank'>
                      <data:item.itemTitle/></a>
                  <b:else/>
                    <data:item.itemTitle/>
                  </b:if>
                </span>
              </b:if>
              <b:if cond='data:showItemSnippet == &quot;true&quot;'>
                <b:if cond='data:showItemTitle == &quot;true&quot;'>
                  -
                </b:if>
                <span class='item-snippet'>
                  <data:item.itemSnippet/>
                </span>
              </b:if>
              <b:if cond='data:showTimePeriodSinceLastUpdate == &quot;true&quot;'>
                <div class='item-time'>
                  <data:item.timePeriodSinceLastUpdate/>
                </div>
              </b:if>
            </div>
          </div>
          <div style='clear: both;'/>
        </li>
      </b:loop>
    </ul>

    <b:if cond='data:numItemsToShow != 0'>
      <b:if cond='data:totalItems &gt; data:numItemsToShow'>
        <div class='show-option'>
          <span expr:id='data:widget.instanceId + &quot;_show-n&quot;' style='display: none;'>
            <a href='javascript:void(0)' onclick='return false;'><data:showNText/></a>
          </span>
          <span expr:id='data:widget.instanceId + &quot;_show-all&quot;' style='margin-left: 5px;'>
            <a href='javascript:void(0)' onclick='return false;'><data:showAllText/></a>
          </span>
        </div>
      </b:if>
    </b:if>

    <b:include name='quickedit'/>
  </div>
</div>
</b:includable>
</b:widget>

5.Now save your template and you are done.

READ MORE - How To Become Blogger Blogroll Nofollow

How To Remove Post Count From Blog Archive

When you add a blog archive to your blogger blog it shows the number of post for time periods.But if you don't like it, you can remove this post count feature from your blog archive easily.To do it,follow the steps below:



1.Log in to your dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see your blog archive code:

Note : Your blog archive code will look like this:

<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
<b:if cond='data:style == &quot;HIERARCHY&quot;'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == &quot;FLAT&quot;'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == &quot;MENU&quot;'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
<b:includable id='flat' var='data'>
<ul>
<b:loop values='data:data' var='i'>
<li class='archivedate'>
<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
</li>
</b:loop>
</ul>
</b:includable>
<b:includable id='menu' var='data'>
<select expr:id='data:widget.instanceId + &quot;_ArchiveMenu&quot;'>
<option value=''><data:title/></option>
<b:loop values='data:data' var='i'>
<option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
</b:loop>
</select>
</b:includable>
<b:includable id='interval' var='intervalData'>
<b:loop values='data:intervalData' var='i'>
<ul>
<li expr:class='&quot;archivedate &quot; + data:i.expclass'>
<b:include data='i' name='toggle'/>
<a class='post-count-link' expr:href='data:i.url'><data:i.name/></a>
<span class='post-count' dir='ltr'>(<data:i.post-count/>)</span>
<b:if cond='data:i.data'>
<b:include data='i.data' name='interval'/>
</b:if>
<b:if cond='data:i.posts'>
<b:include data='i.posts' name='posts'/>
</b:if>
</li>
</ul>
</b:loop>
</b:includable>
<b:includable id='toggle' var='interval'>
<b:if cond='data:interval.toggleId'>
<b:if cond='data:interval.expclass == &quot;expanded&quot;'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy toggle-open'>&#9660;&#160;</span>
</a>
<b:else/>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy'>
<b:if cond='data:blog.languageDirection == &quot;rtl&quot;'>
&#9668;&#160;
<b:else/>
&#9658;&#160;
</b:if>
</span>
</a>
</b:if>
</b:if>
</b:includable>
<b:includable id='posts' var='posts'>
<ul class='posts'>
<b:loop values='data:posts' var='i'>
<li><a expr:href='data:i.url'><data:i.title/></a></li>
</b:loop>
</ul>
</b:includable>
</b:widget>

4.Now Remove below code from your blog archive code:

(<data:i.post-count/>)

Note : You can find it 3 times.

5.Now save your template and you are done.Look at the picture below:

READ MORE - How To Remove Post Count From Blog Archive

How To Add Comment Feeds For Individual Blogger Posts

This is very useful for your visitors to Subscribe to comments for the special blog posts of your blogger blog.

1.Log in to your dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this:

<data:post.body/>

4.Copy below code and paste it immediately after the line <data:post.body/>.

<p style='background-color:#ffffc6;'><a expr:href='"http://YOURBLOG.blogspot.com/feeds/" + data:post.id + "/comments/default?alt=rss"'>Comments Feed For This Post</a></p>

Note:Replace YOURBLOG with your blog url name.

5.Now save your template and you are done.

READ MORE - How To Add Comment Feeds For Individual Blogger Posts

How To Show Post Title Only on HomePage in Blogger

Do you like to show only your blogger post title on your home page?Then follow the steps below:

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag .

<style type='text/css'>

<b:if cond='data:blog.pageType != "item"'></b:if>

.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 Save your template.

5.Go to Layout-->Page Elements.Click on "Edit" link of Blog Posts Section.

6.Enter the value for "Number of posts on main page:" as your choice and click on save.



You are done.

READ MORE - How To Show Post Title Only on HomePage in Blogger

Awesome Multi-Tabbed Widget For Bloggers/Websites

This is a very good multi-tabbed widget for your blogger blog or any other website.You can add or remove tabs to this widget easily as your choice.To add this tab view widget to your website simply follow the steps below.

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag.

<script type='text/javascript'>
//<![CDATA[
document.write('<style type="text/css">.tabber{display:none;}<\/style>');
function tabberObj(argsObj)
{
var arg;
this.div = null;
this.classMain = "tabber";
this.classMainLive = "tabberlive";
this.classTab = "tabbertab";
this.classTabDefault = "tabbertabdefault";
this.classNav = "tabbernav";
this.classTabHide = "tabbertabhide";
this.classNavActive = "tabberactive";
this.titleElements = ['h2','h3','h4','h5','h6'];
this.titleElementsStripHTML = true;
this.removeTitle = true;
this.addLinkId = false;
this.linkIdFormat = '<tabberid>nav<tabnumberone>';
for (arg in argsObj) { this[arg] = argsObj[arg]; }
this.REclassMain = new RegExp('\\b' + this.classMain + '\\b', 'gi');
this.REclassMainLive = new RegExp('\\b' + this.classMainLive + '\\b', 'gi');
this.REclassTab = new RegExp('\\b' + this.classTab + '\\b', 'gi');
this.REclassTabDefault = new RegExp('\\b' + this.classTabDefault + '\\b', 'gi');
this.REclassTabHide = new RegExp('\\b' + this.classTabHide + '\\b', 'gi');
this.tabs = new Array();
if (this.div) {
this.init(this.div);
this.div = null;
}
}

tabberObj.prototype.init = function(e)
{

var
childNodes,
i, i2,
t,
defaultTab=0,
DOM_ul,
DOM_li,
DOM_a,
aId,
headingElement;
if (!document.getElementsByTagName) { return false; }
if (e.id) {
this.id = e.id;
}
this.tabs.length = 0;
childNodes = e.childNodes;
for(i=0; i < childNodes.length; i++) {
if(childNodes[i].className &&
childNodes[i].className.match(this.REclassTab)) {
t = new Object();
t.div = childNodes[i];
this.tabs[this.tabs.length] = t;


if (childNodes[i].className.match(this.REclassTabDefault)) {
defaultTab = this.tabs.length-1;
}
}
}
DOM_ul = document.createElement("ul");
DOM_ul.className = this.classNav;

for (i=0; i < this.tabs.length; i++) {

t = this.tabs[i];


t.headingText = t.div.title;

if (this.removeTitle) { t.div.title = ''; }

if (!t.headingText) {


for (i2=0; i2<this.titleElements.length; i2++) {
headingElement = t.div.getElementsByTagName(this.titleElements[i2])[0];
if (headingElement) {
 t.headingText = headingElement.innerHTML;
 if (this.titleElementsStripHTML) {
   t.headingText.replace(/<br>/gi," ");
   t.headingText = t.headingText.replace(/<[^>]+>/g,"");
 }
 break;
}
}
}

if (!t.headingText) {

t.headingText = i + 1;
}


DOM_li = document.createElement("li");


t.li = DOM_li;


DOM_a = document.createElement("a");
DOM_a.appendChild(document.createTextNode(t.headingText));
DOM_a.href = "javascript:void(null);";
DOM_a.title = t.headingText;
DOM_a.onclick = this.navClick;


DOM_a.tabber = this;
DOM_a.tabberIndex = i;


if (this.addLinkId && this.linkIdFormat) {


aId = this.linkIdFormat;
aId = aId.replace(/<tabberid>/gi, this.id);
aId = aId.replace(/<tabnumberzero>/gi, i);
aId = aId.replace(/<tabnumberone>/gi, i+1);
aId = aId.replace(/<tabtitle>/gi, t.headingText.replace(/[^a-zA-Z0-9\-]/gi, ''));

DOM_a.id = aId;
}


DOM_li.appendChild(DOM_a);


DOM_ul.appendChild(DOM_li);
}


e.insertBefore(DOM_ul, e.firstChild);


e.className = e.className.replace(this.REclassMain, this.classMainLive);


this.tabShow(defaultTab);


if (typeof this.onLoad == 'function') {
this.onLoad({tabber:this});
}

return this;
};


tabberObj.prototype.navClick = function(event)
{


var
rVal,
a,
self,
tabberIndex,
onClickArgs;

a = this;
if (!a.tabber) { return false; }

self = a.tabber;
tabberIndex = a.tabberIndex;


a.blur();


if (typeof self.onClick == 'function') {

onClickArgs = {'tabber':self, 'index':tabberIndex, 'event':event};

/* IE uses a different way to access the event object */
if (!event) { onClickArgs.event = window.event; }

rVal = self.onClick(onClickArgs);
if (rVal === false) { return false; }
}

self.tabShow(tabberIndex);

return false;
};


tabberObj.prototype.tabHideAll = function()
{
var i;


for (i = 0; i < this.tabs.length; i++) {
this.tabHide(i);
}
};


tabberObj.prototype.tabHide = function(tabberIndex)
{
var div;

if (!this.tabs[tabberIndex]) { return false; }


div = this.tabs[tabberIndex].div;


if (!div.className.match(this.REclassTabHide)) {
div.className += ' ' + this.classTabHide;
}
this.navClearActive(tabberIndex);

return this;
};


tabberObj.prototype.tabShow = function(tabberIndex)
{


var div;

if (!this.tabs[tabberIndex]) { return false; }


this.tabHideAll();


div = this.tabs[tabberIndex].div;


div.className = div.className.replace(this.REclassTabHide, '');


this.navSetActive(tabberIndex);


if (typeof this.onTabDisplay == 'function') {
this.onTabDisplay({'tabber':this, 'index':tabberIndex});
}

return this;
};

tabberObj.prototype.navSetActive = function(tabberIndex)
{



this.tabs[tabberIndex].li.className = this.classNavActive;

return this;
};


tabberObj.prototype.navClearActive = function(tabberIndex)
{



this.tabs[tabberIndex].li.className = '';

return this;
};


function tabberAutomatic(tabberArgs)
{

var
tempObj,
divs,
i;

if (!tabberArgs) { tabberArgs = {}; }


tempObj = new tabberObj(tabberArgs);




divs = document.getElementsByTagName("div");
for (i=0; i < divs.length; i++) {


if (divs[i].className &&
divs[i].className.match(tempObj.REclassMain)) {


tabberArgs.div = divs[i];
divs[i].tabber = new tabberObj(tabberArgs);
}
}

return this;
}
function tabberAutomaticOnLoad(tabberArgs)
{

var oldOnLoad;

if (!tabberArgs) { tabberArgs = {}; }

oldOnLoad = window.onload;
if (typeof window.onload != 'function') {
window.onload = function() {
tabberAutomatic(tabberArgs);
};
} else {
window.onload = function() {
oldOnLoad();
tabberAutomatic(tabberArgs);
};
}
}


/* Run tabberAutomaticOnload() unless the "manualStartup" option was specified */

if (typeof tabberOptions == 'undefined') {

tabberAutomaticOnLoad();

} else {

if (!tabberOptions['manualStartup']) {
tabberAutomaticOnLoad(tabberOptions);
}

}

//]]>
</script>

<style type='text/css'>
.tabberlive{
margin:0;
padding:5px;
clear:both;
background:#f8f8f8;
border:1px solid #DDD;
}
.tabbernav {
margin:0;
padding: 3px 0;
border-bottom: 1px solid #ddd;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;
}
.tabbernav li {
list-style:none;
margin:0;
display:inline;
}
.tabbernav li a {
padding:3px 0.5em;
margin-right:1px;
border:1px solid #DDD;
border-bottom:none;
background:#6c6c6c;
text-decoration:none;
color:#ffffff;
}
.tabbernav li a:hover {
color:#6c6c6c;
background:#ffffff;
border:1px solid #DDD;
text-decoration:none;
}
.tabbernav li.tabberactive a,
.tabbernav li.tabberactive a:hover {
background:#ffffff;
color:#6c6c6c;
border-bottom: 1px solid #ffffff;
}
.tabberlive .tabbertab {
padding:5px;
border:1px solid #DDD;
border-top:0;
background:#ffffff;
}
.tabberlive .tabbertab h2,
.tabberlive .tabbertabhide {
display:none;
}
.tabbertab .widget-content ul{
list-style:none;
margin:0 0 10px 0;
padding:0;
}
.tabbertab .widget-content li {
border-bottom:1px solid #ddd;
margin:0 5px;
padding:2px 0 5px 0;
}
</style>

4.Now save your template.

5.Go to Layout-->Page Elements and click on "Add a gadget".

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

<div class='tabber'>


<div class='tabbertab section' id='tab1'>
<h2>Recent</h2>

ENTER-TAB1-CONTENT-HERE

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

<div class='tabbertab section' id='tab2'>
<h2 class='title'>Popular Posts</h2>

ENTER-TAB2-CONTENT-HERE

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


<div class='tabbertab section' id='tab3'>
<h2>Comments</h2>

ENTER-TAB3-CONTENT-HERE

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


<div class='tabbertab section' id='tab4'>
<h2 class='title'>About me</h2>

ENTER-TAB4-CONTENT-HERE

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


<div class='tabbertab section' id='tab5'>
<h2 class='title'>Contact</h2>

ENTER-TAB5-CONTENT-HERE

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


<div class='tabbertab section' id='tab6'>
<h2 class='title'>Support</h2>

ENTER-TAB6-CONTENT-HERE

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

</div>

Note:Replace ENTER-TABX-CONTENT-HERE with your contents.

If you want to add a another tab or remove a tab simply add or remove this:

<div class='tabbertab section' id='tabX'>
<h2 class='title'>YOUR-TAB-NAME</h2>

<!--ENTER-TABX-CONTENT-HERE-->

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

You are done.

Demo

READ MORE - Awesome Multi-Tabbed Widget For Bloggers/Websites

Beautiful Comment Form to Blogger using CSS

This simple article explains to you how to become your blogger comment form beautiful, using CSS.If you like to change your blogger comment form appearance,simply follow the steps below.

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 before the ]]></b:skin> tag .

#comment-form iframe{
background:#7f9db9 url() no-repeat bottom right;
border:7px solid #eeeeee;
padding:5px;
font:normal 12pt "ms sans serif", Arial;
color:#000000;
width:95%;
height:250px;
}
#comment-form iframe:hover{
background:#7f9db9 url() no-repeat bottom right;
border:7px solid #bababa;
}
#comment-form a{
color:#ffffff;
}

Note:You can colors,width,height,.... as your choice and also can add background images for your comment form.

Now save your template.You are done.

READ MORE - Beautiful Comment Form to Blogger using CSS

How To Change "Post a Comment" Text of Blogger Blog

You can see "Post a Comment" text above your comment form in blogger.If you like to replace this "Post a Comment" text with your own creative text follow the steps below.

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates".

3.Scroll down to where you see this:

<data:postCommentMsg/>

Note : You can find above code in 2 places.

4.Now replace above codes with your own text.For example I replace it with "Give Your's Feedbacks".



5.Now save your template and you are done.Refresh your site to see result.It will look like above image.

READ MORE - How To Change "Post a Comment" Text of Blogger Blog

How To Redirect a Blogger Post to Another URL

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see <head> tag .

3.Copy below code and paste it just after the <head> tag.

<b:if cond='data:blog.url == "YOUR-BLOG-POST-URL"'>
<meta http-equiv="refresh" content="5; url=REDIRECT-URL" />
</b:if>

4.Replace YOUR-BLOG-POST-URL and REDIRECT-URL as your need.Look at the example below.

<b:if cond='data:blog.url == "http://www.bloggertipandtrick.net/2009/01/contact-me.html"'>
<meta http-equiv="refresh" content="5; url=http://www.bloggertipandtrick.net" />
</b:if>

If I add above code to my template,When someone go to my contact us page/post he will be redirected to my home page after 5 seconds.To redirect without waiting replace 5 with 0.

5.Now save your template and you are done.

READ MORE - How To Redirect a Blogger Post to Another URL

How To Save Flash Files of Websites using Mozilla Firefox

This article explains how to save flash files from a website using mozilla firefox.

1.Right click on web page and select "view page info" or click on tools and select "page info".



2.Now click the Media Tab on the Page Info Window.



3.The Media Tab will have complete list of Images, CSS Files and Shockwave Flash files of the web page.

4.Scroll down the list and locate your .swf(flash) file.



5.Click on "Save As" button. Choose some location on your hard drive and save the file.

you are done.

READ MORE - How To Save Flash Files of Websites using Mozilla Firefox

How To Add Show/Hide NavBar Link to Blogger

If you want to let your visitors to show and hide your blogger navbar,then foolow the easy steps below.



1.Log in to your dashboard--> layout- ->Page Elements

2.Click on 'Add a Gadget'.

3.Select 'HTML/Javascript' and add the code given below and click save.

<script type="text/javascript">
var showHeader=false;
function ShowHideNav()
{
showHeader=!showHeader;
var nav=document.getElementById("navbar-iframe");
if (showHeader)
{
nav.style.visibility="visible";
nav.style.display="block";
}
else
{
nav.style.visibility="hidden";
nav.style.display="none";
}
}
</script>
<style type="text/css">
#navbar-iframe {
visibility: hidden;
display: none;
}
</style>


<span style="cursor:pointer; font-weight:normal; " onclick="ShowHideNav();">
Show/Hide Blogger NavBar
<a style="visibility:hidden;" href="#"></a>
</span>

You are done.Look at the demo.

Demo

READ MORE - How To Add Show/Hide NavBar Link to Blogger

How To Host JavaScript Files on Google Code+Unlimited Bandwidth

Do you want to host your external java script files in unlimited bandwidth?If you host your files in google code you can do it for free .It helps your page load faster than other free webhosting services.

1.First login to your google account and go to Google Code Hosting.

You can see screen look like this.



2.Click on "Create a new project".Next screen will look like this:



3.Fill above form with your information and click on "Create project".Next screen will look like this:



4.Click on "Downloads" tab.Now click on "New download" tab.



6.Fill up the needed information. Browse for your JavaScript(.js) file and attach it. Now click on "Submit file".



7.Now your java script file will upload to google.After that you can see the screen like this:



8.If you want to get direct link of your java script file,click on file name and select "Copy link address".



9.Now you can use it as external java script file.Look at the example below:

<script src='http://pbtemplates.googlecode.com/files/jquery.min.js' type='text/javascript'/>

READ MORE - How To Host JavaScript Files on Google Code+Unlimited Bandwidth

How To Show Date,Month,Year on Blogger

1.Log in to your dashboard--> layout- ->Page Elements

2.Click on 'Add a Gadget'.

3.Select 'HTML/Javascript' and add the code given below and click save.

<script type='text/javascript'>

var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December")
document.write("<p>"+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+"</p>")

</script>

You are done.Now you can see it as picture below.

READ MORE - How To Show Date,Month,Year on Blogger

Numbered Page Navigation Hack For Bloggers

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 before the ]]></b:skin> tag.

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
border:1px solid #CCCCCC;
margin:0 3px;
padding:3px 7px;
text-decoration:none;
}
.showpageNum a:hover {
background-color:#CCCCCC;
border:1px solid #CCCCCC;
}
.showpagePoint {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#CCCCCC none repeat scroll 0 0;
border:1px solid #CCCCCC;
color:#333333;
margin:0 3px;
padding:3px 7px;
text-decoration:none;
}
.showpageOf {
margin:0 3px 0 0;
padding:3px 7px;
text-decoration:none;
}
.showpage a {
border:1px solid #CCCCCC;
padding:3px 7px;
text-decoration:none;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link, .showpage a:link {
color:#333333;
text-decoration:none;
}

4.Now save your template.

5.Go to Layout-->Page Elements and click on "Add a gadget".

6.Select "html/java script" and add the code given below and click save.Now drag your new gadget under "Blog Posts" Section.

<script type='text/javascript'>

var home_page_url = location.href;


var pageCount=1;
var displayPageNum=3;
var upPageWord ='Previous';
var downPageWord ='Next';


function showpageCount(json) {
var thisUrl = home_page_url;
var htmlMap = new Array();
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';





for(var i=0, post; post = json.feed.entry[i]; i++) {

var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);


var title = post.title.$t;

if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
 if(thisUrl.indexOf(timestamp)!=-1 ){
   thisNum = postNum;
 }

 if(title!='') postNum++;
 htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'&max-results='+pageCount;
}
}
itemCount++;

}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
 if(thisNum==2){
  upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
 }else{
  upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
 }

 fFlag++;
}

if(p==(thisNum-1)){
 html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
 if(p==0){
   html += '<span class="showpageNum"><a href="/">1</a></span>';

 }else{
  html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
 }
}

if(eFlag ==0 && p == thisNum){
 downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
 eFlag++;
}
}
}

if(thisNum>1){
html = ''+upPageHtml+' '+html +' ';
}

html = '<div class="showpageArea"><span  class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
}

if(postNum==1) postNum++;
html += '</div>';


var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}


}


function showpageCount2(json) {

var thisUrl = home_page_url;
var htmlMap = new Array();
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';



var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
var thisUrl = home_page_url;


for(var i=0, post; post = json.feed.entry[i]; i++) {

var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);



var title = post.title.$t;

if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
 if(thisUrl.indexOf(timestamp)!=-1 ){
  thisNum = postNum;
 }

 if(title!='') postNum++;
 htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount;

}
}
itemCount++;
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
 if(thisNum==2){
  upPageHtml = labelHtml + upPageWord +'</a></span>';
 }else{
  upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
 }

 fFlag++;
}

if(p==(thisNum-1)){
 html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
 if(p==0){
  html = labelHtml+'1</a></span>';
 }else{
  html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
 }
}

if(eFlag ==0 && p == thisNum){
 downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
 eFlag++;
}
}
}

if(thisNum>1){
if(!isLablePage){
html = ''+upPageHtml+' '+html +' ';
}else{
html = ''+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span  class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
}

if(postNum==1) postNum++;
html += '</div>';

var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}


}


</script>
<script type='text/javascript'>

var thisUrl = home_page_url;
if (thisUrl.indexOf("/search/label/")!=-1){
if (thisUrl.indexOf("?updated-max")!=-1){
 var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"));
}else{
 var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"));
}
}

var home_page = "/";
if (thisUrl.indexOf("?q=")==-1){
if (thisUrl.indexOf("/search/label/")==-1){
 document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')
}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')
}
}
</script>

Note:
Change values of pageCount,displayPageNum,upPageWord,downPageWord if you like.

You are done.

READ MORE - Numbered Page Navigation Hack For Bloggers

Advanced Top Commentators Widget to Blogger

This widget will decide the top commentators from the latest 5000 comments to your blog.But your blog hasn't such as more comments you can add that Top Commentators Widget instead of this one.It will decide the top commentators from the latest 500 comments.

However your blog have more than 500 comments add this widget:

1.Log in to your dashboard--> layout- ->Page Elements

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the code given below and click save.

<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ol>');
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
if(obj.value.items[i].link == "")
var item ="<li>" + obj.value.items[i].title + "</li>";
else
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ol>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=26191599715c07fbeaa491a5729e478b&url=http%3A%2F%2Fyourblog.blogspot.com&num=10&filter=" type="text/javascript"></script>

Note : Remember to replace yourblog with your blog name.Do not include http://

You are done.

READ MORE - Advanced Top Commentators Widget to Blogger

How To Add "Follow This Blog" Link to Blogger

This will help other bloggers to follow your blogspot blog easily.To add it under your blog post, follow the steps below.

1.Log in to your dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this:

<data:post.body/>

4.Copy below code and paste it just after the line <data:post.body/> .

<p><a href="http://www.blogger.com/follow-blog.g?blogID=YOUR-BLOG-ID" target="_blank">Follow This Blog !!!</a></p>

NOTE:Replace YOUR-BLOG-ID with your real blogger blog ID.



Look at the example below.

<p><a href="http://www.blogger.com/follow-blog.g?blogID=1297984091471718670" target="_blank">Follow This Blog !!!</a></p>

Your final result will look like this:

Follow This Blog !!!

5.Click on "Save Templates" and now you are done.

READ MORE - How To Add "Follow This Blog" Link to Blogger

Pure 4 Tab View Widget to Blogger/Websites

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag.

<script type='text/javascript'>
/*
DOMtab Version 3.1415927
Updated March the First 2006
written by Christian Heilmann
check blog for updates: http://www.wait-till-i.com
free to use, not free to resell
*/

domtab={
tabClass:&#39;domtab&#39;, // class to trigger tabbing
listClass:&#39;domtabs&#39;, // class of the menus
activeClass:&#39;active&#39;, // class of current link
contentElements:&#39;div&#39;, // elements to loop through
printID:&#39;domtabprintview&#39;, // id of the print all link
showAllLinkText:&#39;show all content&#39;, // text for the print all link
prevNextIndicator:&#39;doprevnext&#39;, // class to trigger prev and next links
prevNextClass:&#39;prevnext&#39;, // class of the prev and next list
prevLabel:&#39;previous&#39;, // HTML content of the prev link
nextLabel:&#39;next&#39;, // HTML content of the next link
prevClass:&#39;prev&#39;, // class for the prev link
nextClass:&#39;next&#39;, // class for the next link
init:function(){
 var temp;
 if(!document.getElementById || !document.createTextNode){return;}
 var tempelm=document.getElementsByTagName(&#39;div&#39;); 
 for(var i=0;i&lt;tempelm.length;i++){
  if(!domtab.cssjs(&#39;check&#39;,tempelm[i],domtab.tabClass)){continue;}
  domtab.initTabMenu(tempelm[i]);
  domtab.removeBackLinks(tempelm[i]);
  if(domtab.cssjs(&#39;check&#39;,tempelm[i],domtab.prevNextIndicator)){
   domtab.addPrevNext(tempelm[i]);
  }
  domtab.checkURL();
 }
 if(document.getElementById(domtab.printID)
    &amp;&amp; !document.getElementById(domtab.printID).getElementsByTagName(&#39;a&#39;)[0]){
  var newlink=document.createElement(&#39;a&#39;);
  newlink.setAttribute(&#39;href&#39;,&#39;#&#39;);
  domtab.addEvent(newlink,&#39;click&#39;,domtab.showAll,false);
  newlink.onclick=function(){return false;} // safari hack
  newlink.appendChild(document.createTextNode(domtab.showAllLinkText));
  document.getElementById(domtab.printID).appendChild(newlink);
 }
},
checkURL:function(){
 var id;
 var loc=window.location.toString();
 loc=/#/.test(loc)?loc.match(/#(\w.+)/)[1]:&#39;&#39;;
 if(loc==&#39;&#39;){return;}
 var elm=document.getElementById(loc);
 if(!elm){return;}
 var parentMenu=elm.parentNode.parentNode.parentNode;
 parentMenu.currentSection=loc;
 parentMenu.getElementsByTagName(domtab.contentElements)[0].style.display=&#39;none&#39;;
 domtab.cssjs(&#39;remove&#39;,parentMenu.getElementsByTagName(&#39;a&#39;)[0].parentNode,domtab.activeClass);
 var links=parentMenu.getElementsByTagName(&#39;a&#39;);
 for(i=0;i&lt;links.length;i++){
  if(!links[i].getAttribute(&#39;href&#39;)){continue;}
  if(!/#/.test(links[i].getAttribute(&#39;href&#39;).toString())){continue;}
  id=links[i].href.match(/#(\w.+)/)[1];
  if(id==loc){
   var cur=links[i].parentNode.parentNode;
   domtab.cssjs(&#39;add&#39;,links[i].parentNode,domtab.activeClass);
   break;
  }
 }
 domtab.changeTab(elm,1);
 elm.focus();
 cur.currentLink=links[i];
 cur.currentSection=loc;
},
showAll:function(e){
 document.getElementById(domtab.printID).parentNode.removeChild(document.getElementById(domtab.printID));
 var tempelm=document.getElementsByTagName(&#39;div&#39;); 
 for(var i=0;i&lt;tempelm.length;i++){
  if(!domtab.cssjs(&#39;check&#39;,tempelm[i],domtab.tabClass)){continue;}
  var sec=tempelm[i].getElementsByTagName(domtab.contentElements);
  for(var j=0;j&lt;sec.length;j++){
   sec[j].style.display=&#39;block&#39;;
  }
 }
 var tempelm=document.getElementsByTagName(&#39;ul&#39;); 
 for(i=0;i&lt;tempelm.length;i++){
  if(!domtab.cssjs(&#39;check&#39;,tempelm[i],domtab.prevNextClass)){continue;}
  tempelm[i].parentNode.removeChild(tempelm[i]);
  i--;
 }
 domtab.cancelClick(e);
},
addPrevNext:function(menu){
 var temp;
 var sections=menu.getElementsByTagName(domtab.contentElements);
 for(var i=0;i&lt;sections.length;i++){
  temp=domtab.createPrevNext();
  if(i==0){
   temp.removeChild(temp.getElementsByTagName(&#39;li&#39;)[0]);
  }
  if(i==sections.length-1){
   temp.removeChild(temp.getElementsByTagName(&#39;li&#39;)[1]);
  }
  temp.i=i; // h4xx0r!
  temp.menu=menu;
  sections[i].appendChild(temp);
 }
},
removeBackLinks:function(menu){
 var links=menu.getElementsByTagName(&#39;a&#39;);
 for(var i=0;i&lt;links.length;i++){
  if(!domtab.backToLinks.test(links[i].href)){continue;}
  links[i].parentNode.removeChild(links[i]);
  i--;
 }
},
initTabMenu:function(menu){
 var id;
 var lists=menu.getElementsByTagName(&#39;ul&#39;);
 for(var i=0;i&lt;lists.length;i++){
  if(domtab.cssjs(&#39;check&#39;,lists[i],domtab.listClass)){
   var thismenu=lists[i];
   break;
  }
 }
 if(!thismenu){return;}
 thismenu.currentSection=&#39;&#39;;
 thismenu.currentLink=&#39;&#39;;
 var links=thismenu.getElementsByTagName(&#39;a&#39;);
 for(i=0;i&lt;links.length;i++){
  if(!/#/.test(links[i].getAttribute(&#39;href&#39;).toString())){continue;}
  id=links[i].href.match(/#(\w.+)/)[1];
  if(document.getElementById(id)){
   domtab.addEvent(links[i],&#39;click&#39;,domtab.showTab,false);
   links[i].onclick=function(){return false;} // safari hack
   domtab.changeTab(document.getElementById(id),0);
  }
 }
 id=links[0].href.match(/#(\w.+)/)[1];
 if(document.getElementById(id)){
  domtab.changeTab(document.getElementById(id),1);
  thismenu.currentSection=id;
  thismenu.currentLink=links[0];
  domtab.cssjs(&#39;add&#39;,links[0].parentNode,domtab.activeClass);
 }
},
createPrevNext:function(){
 // this would be so much easier with innerHTML, darn you standards fetish!
 var temp=document.createElement(&#39;ul&#39;);
 temp.className=domtab.prevNextClass;
 temp.appendChild(document.createElement(&#39;li&#39;));
 temp.getElementsByTagName(&#39;li&#39;)[0].appendChild(document.createElement(&#39;a&#39;));
 temp.getElementsByTagName(&#39;a&#39;)[0].setAttribute(&#39;href&#39;,&#39;#&#39;);
 temp.getElementsByTagName(&#39;a&#39;)[0].innerHTML=domtab.prevLabel;
 temp.getElementsByTagName(&#39;li&#39;)[0].className=domtab.prevClass;
 temp.appendChild(document.createElement(&#39;li&#39;));
 temp.getElementsByTagName(&#39;li&#39;)[1].appendChild(document.createElement(&#39;a&#39;));
 temp.getElementsByTagName(&#39;a&#39;)[1].setAttribute(&#39;href&#39;,&#39;#&#39;);
 temp.getElementsByTagName(&#39;a&#39;)[1].innerHTML=domtab.nextLabel;
 temp.getElementsByTagName(&#39;li&#39;)[1].className=domtab.nextClass;
 domtab.addEvent(temp.getElementsByTagName(&#39;a&#39;)[0],&#39;click&#39;,domtab.navTabs,false);
 domtab.addEvent(temp.getElementsByTagName(&#39;a&#39;)[1],&#39;click&#39;,domtab.navTabs,false);
 // safari fix
 temp.getElementsByTagName(&#39;a&#39;)[0].onclick=function(){return false;}
 temp.getElementsByTagName(&#39;a&#39;)[1].onclick=function(){return false;}
 return temp;
},
navTabs:function(e){
 var li=domtab.getTarget(e);
 var menu=li.parentNode.parentNode.menu;
 var count=li.parentNode.parentNode.i;
 var section=menu.getElementsByTagName(domtab.contentElements);
 var links=menu.getElementsByTagName(&#39;a&#39;);
 var othercount=(li.parentNode.className==domtab.prevClass)?count-1:count+1;
 section[count].style.display=&#39;none&#39;;
 domtab.cssjs(&#39;remove&#39;,links[count].parentNode,domtab.activeClass);
 section[othercount].style.display=&#39;block&#39;;
 domtab.cssjs(&#39;add&#39;,links[othercount].parentNode,domtab.activeClass);
 var parent=links[count].parentNode.parentNode;
 parent.currentLink=links[othercount];
 parent.currentSection=links[othercount].href.match(/#(\w.+)/)[1];
 domtab.cancelClick(e);
},
changeTab:function(elm,state){
 do{
  elm=elm.parentNode;
 } while(elm.nodeName.toLowerCase()!=domtab.contentElements)
 elm.style.display=state==0?&#39;none&#39;:&#39;block&#39;;
},
showTab:function(e){
 var o=domtab.getTarget(e);
 if(o.parentNode.parentNode.currentSection!=&#39;&#39;){
  domtab.changeTab(document.getElementById(o.parentNode.parentNode.currentSection),0);
  domtab.cssjs(&#39;remove&#39;,o.parentNode.parentNode.currentLink.parentNode,domtab.activeClass);
 }
 var id=o.href.match(/#(\w.+)/)[1];
 o.parentNode.parentNode.currentSection=id;
 o.parentNode.parentNode.currentLink=o;
 domtab.cssjs(&#39;add&#39;,o.parentNode,domtab.activeClass);
 domtab.changeTab(document.getElementById(id),1);
 document.getElementById(id).focus();
 domtab.cancelClick(e);
},
/* helper methods */
getTarget:function(e){
 var target = window.event ? window.event.srcElement : e ? e.target : null;
 if (!target){return false;}
 if (target.nodeName.toLowerCase() != &#39;a&#39;){target = target.parentNode;}
 return target;
},
cancelClick:function(e){
 if (window.event){
  window.event.cancelBubble = true;
  window.event.returnValue = false;
  return;
 }
 if (e){
  e.stopPropagation();
  e.preventDefault();
 }
},
addEvent: function(elm, evType, fn, useCapture){
 if (elm.addEventListener)
 {
  elm.addEventListener(evType, fn, useCapture);
  return true;
 } else if (elm.attachEvent) {
  var r = elm.attachEvent(&#39;on&#39; + evType, fn);
  return r;
 } else {
  elm[&#39;on&#39; + evType] = fn;
 }
},
cssjs:function(a,o,c1,c2){
 switch (a){
  case &#39;swap&#39;:
   o.className=!domtab.cssjs(&#39;check&#39;,o,c1)?o.className.replace(c2,c1):o.className.replace(c1,c2);
  break;
  case &#39;add&#39;:
   if(!domtab.cssjs(&#39;check&#39;,o,c1)){o.className+=o.className?&#39; &#39;+c1:c1;}
  break;
  case &#39;remove&#39;:
   var rep=o.className.match(&#39; &#39;+c1)?&#39; &#39;+c1:c1;
   o.className=o.className.replace(rep,&#39;&#39;);
  break;
  case &#39;check&#39;:
   var found=false;
   var temparray=o.className.split(&#39; &#39;);
   for(var i=0;i&lt;temparray.length;i++){
    if(temparray[i]==c1){found=true;}
   }
   return found;
  break;
 }
}
}
domtab.addEvent(window, &#39;load&#39;, domtab.init, false);
</script>

<style type='text/css'>

/* --(tabs)-- */
.domtab {
margin: 0px;
padding: 0px;
float: left;
width: 370px;
font-size: 1em;
}
.domtab li {
overflow: hidden;
}
.domtabs {
margin: 0px;
padding: 0px;
float: left;
width: 370px;
list-style-type: none;
}
.domtab h2 {
margin: 0px;
padding: 0px;
float: left;
width: 330px;
display: none;
}
.domtab .widget h2 {
display:none;
visibility:hidden;
herght:0px;
}
.domtabs li.active a:link, .domtabs li.active a:visited, .domtabs li.active a:active, .domtabs li.active a:hover {
color: #000000;
text-decoration: none;
display: block;
float: left;
padding-right: 15px;
padding-left: 15px;
text-align: center;
margin: 0px;
height: 33px;
padding-top: 0px;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
border-bottom: 1px solid #EEEEEE;
border-left: 1px solid #CCCCCC;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMdxrDGXDqHN7NuOUA7cKdxwHjbNKcSf5TtBPjozkPXuWIF2WZuKkDmxyzEndB0iid3dPgP4591GmPH9wAIsxIadh3ZipQkMFVDjmPMyPgfCPbGmON72-YVmJotEff3JsFEE-iZB7s7pXV/) repeat-x bottom;
}
.domtabs a:link, .domtabs a:visited, .domtabs a:active, .domtabs a:hover {
text-decoration: none;
display: block;
float: left;
margin: 0px;
padding-right: 15px;
padding-left: 15px;
text-align: center;
height: 33px;
background: #f9f9f9;
border-top: 1px solid #eeeeee;
border-right: 1px solid #eeeeee;
border-left: 1px solid #eeeeee;
color: #000000;
padding-top: 0px;
border-bottom: 1px solid #E9E9E9;
}
.domtabs li {
font-size:11px;
font-family: arial, sans-serif;
display: inline;
float: left;
line-height: 30px;
height: 34px;
font-weight: bold;
padding: 0px;
margin: 0px;
}
#tabs-wrap {
float: left;
width: 370px;
}
#tabs-wrap object {
margin: 0px;
padding: 0px;
float: left;
height: 200px;
width: 348px;
border-width: 0px;
}
#tabs-wrap embed {
margin: 0px;
padding: 0px;
float: left;
width: 348px;
border-width: 0px;
height: 200px;
}
#tabs-wrap .widget {
margin: 0px;
padding: 5px 10px 10px;
float: left;
width: 348px;
list-style-type: none;
}
#tabs-wrap .widget ul {
margin: 0px;
padding: 0px;
float: left;
width: 348px;
}
#tabs-wrap .widget li {
margin: 0px 0px 5px;
padding: 0px;
float: left;
width: 348px;
line-height: 16px;
color: #666666;
}
#tabs-wrap .widget ul li {
margin: 5px 0px 0px;
padding: 0px;
float: left;
width: 348px;
color: #666666;
}
#tabs-wrap .widget li a {
color: #000000;
text-decoration: none;
margin: 0px;
padding: 0px 0px 0px 20px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7zWCozJiPdc0QDAh0YHcS8ljdGEtcFbhW8-2HBCygoacyoAzrGSe3mXgL4vZH7DmCe-qA3JtdVGTbP9jblDzfcO-m8wx2ZCFMIENiVojabXV29tgqOJUKGXwTz1-7gaOw1XYXSjNUTwTX/) no-repeat 4px 2px;
float: left;
}
#tabs-wrap .widget li a:hover {
color: #990000;
text-decoration: underline;
margin: 0px;
padding: 0px 0px 0px 20px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7zWCozJiPdc0QDAh0YHcS8ljdGEtcFbhW8-2HBCygoacyoAzrGSe3mXgL4vZH7DmCe-qA3JtdVGTbP9jblDzfcO-m8wx2ZCFMIENiVojabXV29tgqOJUKGXwTz1-7gaOw1XYXSjNUTwTX/) no-repeat 4px 2px;
float: left;
}
#tabs-wrap .nolist {
margin: 0px;
padding: 10px;
float: left;
width: 348px;
list-style-type: none;
font-size: 1em;
line-height: 18px;
}
.nolist a {
color: #CC0000;
text-decoration: none;
}
#tabs-wrap .nolist ul {
margin: 0px;
padding: 0px;
float: left;
width: 348px;
}
#tabs-wrap .nolist li {
margin: 0px 0px 5px;
padding: 0px;
float: left;
width: 348px;
line-height: 24px;
color: #000000;
}
#tabs-wrap .nolist ul li {
margin: 5px 0px 0px;
padding: 0px;
float: left;
width: 348px;
color: #000000;
}
#tabs-wrap .nolist li a {
color: #000000;
text-decoration: none;
margin: 0px;
padding: 0px;
float: left;
}
#tabs-wrap .nolist li a:hover {
color: #990000;
text-decoration: none;
margin: 0px;
padding: 0px;
float: left;
}
#tab_one {
}
#tab_two {
}
#tab_three {
}
#tab_four {
}

.tab_one {
float: left;
width: 368px;
padding: 5px 0px 10px;
background: #E9E9E9;
border-right: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
}
.tab_two {
float: left;
width: 368px;
padding: 10px 0px 0px;
background: #E9E9E9;
border-right: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
}
.tab_three {
float: left;
width: 368px;
padding: 10px 0px 0px;
background: #E9E9E9;
border-right: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
}
.tab_four {
float: left;
width: 368px;
padding: 10px 0px 0px;
background: #E9E9E9;
border-right: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
}

</style>

Note:Host dom.gif and radio.gif images yourself.

4.Now save your template.

5.Go to Layout-->Page Elements and click on "Add a gadget".

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

<!-- (TABS) -->
<div class='domtab'>

<!-- Tabs titles -->
<ul class='domtabs'>
<li><a href='#tabone'>Popular</a></li>
<li><a href='#tabtwo'>Recent</a></li>
<li><a href='#tabthree'>Tutorials</a></li>
<li><a href='#tabfour'>Comments</a></li>
</ul>

<!-- Tabs content -->
<div id='tabs-wrap'>


<div class='tab_one'>
<h2><a id='tabone' name='tabone'/></h2>
<ul>

<!-- TABS 1 CONTENT HERE -->

</ul>
</div>


<div class='tab_two'>
<h2><a id='tabtwo' name='tabtwo'/></h2>
<ul>

<!-- TABS 2 CONTENT HERE -->

</ul>
</div>


<div class='tab_three'>
<h2><a id='tabthree' name='tabthree'/></h2>
<ul>

<!-- TABS 3 CONTENT HERE -->

</ul>
</div>


<div class='tab_four'>
<h2><a id='tabfour' name='tabfour'/></h2>
<ul>

<!-- TABS 4 CONTENT HERE -->

</ul>
</div>


</div>
</div>

Note:Replace TABS X CONTENT HERE with your contents and change tab names as your choice.

You are done.

Demo

READ MORE - Pure 4 Tab View Widget to Blogger/Websites