How to Add Multi Tabbed Section to Blogger

To add a nice multi tab section to your blog follow the steps given below.

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

2.Scroll down to where you see tag .

3.Copy below code and paste it just before the tag .

Note : Host bullet.gif image yourself.



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.

Recent Post


ENTER-TAB-1-CONTENT





Recent Comments



ENTER-TAB-2-CONTENT





Archives


ENTER-TAB-3-CONTENT

Note:

Replace ENTER-TAB-1-CONTENT , ENTER-TAB-2-CONTENT , ENTER-TAB-3-CONTENT with your content.

And also you can change Tabs Names.(Red coloured text)

You are done.

How To Add Featured Post Content Slider to Blogger

This is very smart featured post content slider for your blogger blog or any other site.You can easily add or remove slides to this widget.And also very easy to configure.To add it to your site follow the steps given below.You can see the demo of this widget HERE.

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

2.Scroll down to where you see tag .

3.Copy below code and paste it just before the tag .

Note : Host prev.png and nxt.png images yourself.





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.

URL-of-Post-1" title="#">Title-of-Post-1
Slide 1 Description [...]

Slide-1-Image-Address" alt=""  />






URL-of-Post-2" title="#">Title-of-Post-2
Slide 2 Description [...]

Slide-2-Image-Address" alt=""  />






URL-of-Post-3" title="#">Title-of-Post-3
Slide 3 Description [...]

Slide-3-Image-Address" alt=""  />






URL-of-Post-4" title="#">Title-of-Post-4
Slide 4 Description [...]

Slide-4-Image-Address" alt=""  />






URL-of-Post-5" title="#">Title-of-Post-5
Slide 5 Description [...]

Slide-5-Image-Address" alt=""  />

Note : Replace URL-of-Post-X , Title-of-Post-X , Slide X Description [...] , Slide-X-Image-Address with your content.

Use width=270px and height=170px images for your slides.

And also you can add many more slide to this widget.

For example look at the code below:

Avatar (2009 film)
James Cameron's epic motion picture, Avatar - in cinemas December 18th worldwide. In the epic action adventure AVATAR, James Cameron, the director of "Titanic," takes us to a spectacular new world beyond our imagination. On the distant moon Pandora, a reluctant hero embarks on a journey of redemption and discovery as he leads a heroic battle to save a civilization. [...]








2012 Movie
The film briefly references Mayanism, the Mesoamerican Long Count calendar, and the 2012 phenomenon in its portrayal of cataclysmic events unfolding in the year 2012. Because of solar flare bombardment the Earth's core begins heating up at an unprecedented rate, eventually causing crustal displacement. This results in an onslaught of Doomsday event scenarios plunging [...]








I am Legend Movie
The film briefly references Mayanism, the Mesoamerican Long Count calendar, and the 2012 phenomenon in its portrayal of cataclysmic events unfolding in the year 2012. Because of solar flare bombardment the Earth's core begins heating up at an unprecedented rate, eventually causing crustal displacement. This results in an onslaught of Doomsday event scenarios plungingThe novel's main character is Robert Neville, apparently the sole survivor of a pandemic the symptoms of which resemble vampirism. The author details Neville's [...]








Transformer Movie
Transformers is a 2007 live-action-thriller film adaptation of the Transformers franchise, directed by Michael Bay and written by John Rogers, Roberto Orci and Alex Kurtzman. It stars Shia LaBeouf as Sam Witwicky, a teenager involved in a war between the heroic Autobots and the evil Decepticons, two factions of alien robots who can disguise themselves by transforming into everyday machinery. The Decepticons desire control of the All Spark, the object that created their robotic race, with the intention of using it to build [...]








Max Payne Game
Max Payne is a BAFTA award winning[1] third-person shooter video game developed by Finnish Remedy Entertainment, produced by 3D Realms and published by Gathering of Developers in July 2001 for Windows. Ports later in the year for the Xbox, PlayStation 2 and the GameBoy Advance were published by Rockstar Games. A Macintosh port was published in July 2002 by MacSoft in[...]

Now you are done.

Look at the Demo of This Widget.

JQuery Multitab Widget For Blogger/Websites

This is another good multi tab view widget for your blog/website.Follow the steps given below to add it to your site.

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

2.Scroll down to where you see tag .

3.Copy below code and paste it just before the tag .

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.

 Recent 
 Popular 
 Comments  




Tab 1 Content






Tab 2 Content






Tab 3 Content

Note : Replace Tab 1 Content,Tab 2 Content,Tab 3 Content with your contents.

This is a free Post Rating widget for your blogger blog.It is given by http://js-kit.com/.To add this beautiful Rating widget to your blogspot blog,follow the steps given below.

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

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this:

4.Copy one of the code below and paste it immediately after the line .

Note : This will add rating widget under your blog post.If you want to add the rating widget under post title, add below code just after

.

Code 1:

expr:path="data:post.url"
expr:permalink="data:post.url"
expr:title="data:post.title">

Result:


Code 2:

expr:path="data:post.url"
expr:permalink="data:post.url"
expr:title="data:post.title" view="score">

Result:


5.Now again scroll down to where you see the tag.

6.Add below code just before the tag.

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

In this tutorial I explain how to add "AddThis" Social Bookmarking & Sharing buttons to your blogger posts.After adding this social bookmark buttons, your visitors can easily bookmark your blog post to over 100 social bookmarking services.So if you like add this buttons to your blog 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 below code:

4.Now Copy your "AddThis" bookmarking buttons code and paste it just below the above code.

NOTE: If you can't find

in your template paste your "AddThis" bookmarking buttons code just before .

Code 1:

Result:




Code 2:

Result:




Code 3:

Result:




Code 4:

Result:




Code 5:

Result:




Code 6:

|
More

Result:




Code 7:

Share
|

Result:




Code 8:

Share
|

Result:




Code 9:

Share

Result:



Code 10:

Result:

Featured Images Slideshow+Slider to Blogger/Websites

This article explains how to add very beautiful featured images slideshow+slider to your blogger blog or any other website.This is easy to setup and no need to host any external javascript files.You can see a demo for this widget here.

Now if you want to add this beautiful widget to your site follow the steps below:



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

2.Scroll down to till you see tag.

3.Now copy and paste below code just before the tag.

Note : You can change width,height,... as you like.

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.

IMAGE-1-LINK') center left no-repeat" class="contentdiv">


IMAGE-2-LINK') center left no-repeat" class="contentdiv">


IMAGE-3-LINK') center left no-repeat" class="contentdiv">


IMAGE-4-LINK') center left no-repeat" class="contentdiv">


IMAGE-5-LINK') center left no-repeat" class="contentdiv">






IMAGE-1-THUMBNAIL-LINK"/>

IMAGE-2-THUMBNAIL-LINK"/>

IMAGE-3-THUMBNAIL-LINK"/>

IMAGE-4-THUMBNAIL-LINK"/>

IMAGE-5-THUMBNAIL-LINK"/>

Note : Replace IMAGE-X-LINKs and IMAGE-X-THUMBNAIL-LINKs with your image links.

Now you are done.Look at the,

DEMO of Featured Images Slideshow+Slider