How to Show/Add Related Posts at Bottom of Blogger/BlogSpot

How to Show Related Posts On Blogger/BlogSpot Blogs

Related post suggestions under your blog posts are very useful for both your blog and your blog's visitors in several ways. Where your visitors will find other related and useful content for them, at the same time, Related Posts will boost your search engine ranking also by decreasing bounce rate on your blog and by increasing deep linking. On WordPress blogs, you will find many plugins which will allow you to show related posts under your blog post easily but with Blogger Blogs, the task is little bit difficult. You need to add different codes to yourBlogger Blog template to display related posts under your posts. This type of code editing will not work with all Blogger templates, so I am suggesting you a very easy-to-setup online service which will add related posts under yourBlogger Blog posts in less than three minutes. The service is LinkWithin which adds beautifully laid-out related posts with thumbnails under each post on yourBlogger blog. Many bloggers don't like this service to use on their blogs due to the addition of LinkWithin attribution link which the service puts with the post suggestions to promote itself. I will provide you a piece of CSS code which will remove LinkWithin Attribution Link.

How to Setup LinkWithin to Show Related Posts on Your Blogger Blog

1. First of all visit http://linkwithin.com and provide your blog URL and other details to fill out the form, select Blogger as your platform and click on Get Widget! to proceed to the second and final step

 

 2. In this step, click on Install Widget link. You must logged into your Blogger blog dashboard during this step. If you aren't, provide your login credentials after clicking the Install Widget link. Once you reach your Blogger blog dashboard, select your desired blog, to which you want to add related posts and then click on "Add Widget". In the next page, Save Arrangement of your blog's layout. You are all done!!!

Now visit any post on your blog. You will see related posts suggestion with thumbnails at the bottom of your posts. Now next step is to remove LinkWithin Attribution Link. If you feel comfortable with the link, then you might decide to leave this link as it is. It will credit the developers. But if you don't want to keep this attribution, below is the CSS code and procedure which will removeLinkWithin Attribution Link.

How to Remove LinkWithin Attribution Link from Related Posts on Your Blogger Blog

1. To remove the LinkWithin attribution link, login to your Blogger blog dashboard, select your blog and then select Template from the sidebar list. After that, click on Customize

 

2. In the next window, click on Advance, then on Add CSS and paste the below provided CSS code in the box. After pasting the code, click on  Apply to Blogbutton on right top corner. You have now successfully removed the LinkWithin attribution link from related posts on your Blogger blog.

CSS Code for Removing LinkWithin Attribution Link

.linkwithin_outer div[id^='linkwithin_logo']
{display:none;}

Posted By Unknown03:17

2

Continue Reading

Change The Date of Your Published Posts in Blogger

Posts time-to-time gets outdated and requires a comprehensive edit.  To provide up-to-date information to your users, it is necessary for you to make timely changes in your published posts.  After comprehensively making an edit in your posts, you would want it to show up as a new post with a new date. This would not only make your content current, but would also help you to dig up your old articles by displaying them on your homepage. In this article, we will teach you How to Edit the Date of your Published Posts in Blogger?

Why to Edit your Old Posts?

Things are enjoyable when they are up-to-date. You would not like to write everything again in a form of a new article just because your old article was out-of-date. Replicating same content with minor changes might end up in traffic downfall because not only users, but search engine hates duplicate content. Updating your existing posts is the ideal way to keep your content fresh. People always admire that website which always decorates their content with most accurate and trustworthy information. 

How to Change Date of Posts?

The first thing you need to do is to Login into your Blogger account. After logging in go to Your Site >> Posts. Now it would display a list of the titles of the articles which are published on your blog. You can search for the article through the Search bar by typing the title of your article.  Upon finding the article, hover over its Title and you will be able to see “Edit Post” button, just press it and head to the next step.

It would take you to the Post editor. Now make all the necessary changes in your content. Once you finish editing your article, it’s time to update the publish date of your post. Now go to Post Setting >> Published on >> Set date and time (You will find it on the right side of your screen).

Now you will be able to see a small calendar type gadget. At this point, you can change the date and time of your post to the most current one. Press the done button to save the changes that you have made to your date and time.

After doing all the changes, press the update button present the top of your screen. That’s all, now you your article have a new date and time. Furthermore, if you have chosen the current date then, it would appear at the top of your homepage.

We hope this article would help you guys in keeping your content fresh and recent. We would like to ask you a question, how often do you edit your articles, how often you make changes in the publish date? Let us know by commenting below.

Precautions:

By changing the Date of your article, you are also renaming the URLs of your old articles. So make sure you redirect your old post URL to the new one. This will transfer your all PageRank juice to a new destination. 

Posted By Unknown11:00

2

Continue Reading

How to display or show comment-author's profile image in BlogSpot blogs

Here's another useful tip for those bloggers, who are continuously trying to transform their free BlogSpot blogs into a pro-blog.
Through this hack, within 10 minutes you can start showing the images of commentators/comment-authors in your blog.


See the image below; how it will look after tweaking the HTML default code

To do so, first of all log in to Blogger
Now go to Layout, then click on Edit HTML tab.
Now Download the present template as a back up
Then click on "Expand widget templates"

Now search (CTRL+F) this

</head>

Immediately BEFORE IT, paste this:

<!--COMMENT-AUTHOR-PICTURE-STARTS--><script src='http://dsai.588.googlepages.com/blogger_comment_author_photos.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
addLoadEvent(function(){showCommentPhotos('commentphoto','comment-author', 1);});
//]]>
</script><!--COMMENT-AUTHOR-PICTURE-STOPS-->

NOW see this code below:

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>

<div class='commentphoto' style='float:right;'/>

<a expr:name='"comment-" + data:comment.id'/>

<b:if cond='data:comment.authorUrl'>

<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>

<div style='clear:both;'/>

</b:loop>

</dl>

In the code above YOU HAVE TO INSERT code lines shown in BLUE and BOLDED
And the red ones, are those which you can use as markers, BEFORE whom you have to paste the blue code lines.

You can change the position of pictures or images from Right to Light, by changing it in the first blue line in the code above...
Now whenever, people use their gmail or openid account to comment, then their pictures will be displayed alongside the comments !<>

Posted By Unknown01:57

6

Continue Reading

How to Remove / Hide / Delete "Powered By Blogger" Attribution Link

How to Remove "Powered by Blogger" Link

Please keep this in mind that this tutorial has been written to help you design a better blog. Sometimes Blogger attribution appears in unwanted areas like in header section or above posts on your template when you use a third party template for your blog. So it needs to be removed from that area to give your blog a beautiful look. Once you remove it from the unwanted area, make it sure that you add an attribution link to Blogger in any suited section. Both ethic and copyright demand it.

Well I hope that you have read the above message. So if "Powered By Blogger" attribution link is appearing on any unwanted section of your Blogger blog's template, this extremely simple tutorial will help you in removing, hiding or deleting it. To delete the "Powered By Blogger" attribution link, follow below steps:

1. Sign in to Blogger dashboard and select your blog

2. In blog's dashboard, go to template section and edit HTML of your template (View screenshot here)

3. Check the box saying Expand Widget Templates at left top corner of HTML editor as shown in above screenshot

4. Press Ctrl+F and find below piece of code

<b:widget id='Attribution1' locked='true' title='' type='Attribution'>

5. Replace the value "true" with "false" and save your template

6. Now go to Layout section of your template (view screenshot here). You will find attribution gadget there

7. Edit attribution gadget and remove it

8. Save arrangement

You are all done!! But please make it sure that you add  an attribution link in a suited place on your template as you see it on footer of this blog. We hope that you will credit Blogger for its great service. Thank you for your understanding.

Posted By Unknown12:40

5

Continue Reading

Add Floating Social Media Sharing Buttons To Blogger

The Floating Social Media Sharing is a very popular widget on all the top blogs, being a very good way to increase the number of times your posts get shared on Twitter, Facebook and other social networks. It has some of the following functions: Facebook Like, StumbleUpon, Twitter Share, Digg This, Google+ and RSS Feed Icon and each of them comes with a live counter. You can add more sharing buttons or social bookmarking icons later if you wish.

How to add the scrolling social bookmarking bar

1. Go to Layout
2. Click on Add A Gadget link
3. From the pop-up window, scroll down and select HTML/Javascript
4. Copy the code below and paste it inside the empty box.
5. Save the gadget.

The code to copy-paste (updated!):

<!-- floating share bar Start helplogger.blogspot.com--> <style type="text/css"> #pageshare {position:fixed; bottom:5%; margin-left:-721px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;} #pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;} .fb_share_count_top {width:48px !important;} .fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;} .FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;} .FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;} </style> <div id='pageshare' title="Get this from Helpblogger.com">
<div style="margin-left:8px;"><div class='sbutton' id='like' style='margin: 5px 0 0 5px;'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'></script><fb:like layout='box_count' show_faces='false'></fb:like> </div></div>
<br /><div class='sbutton'><a class='twitter-share-button' data-count='vertical' data-via='Helplogger' expr:data-counturl='data:blog.url' href='http://twitter.com/share' rel='nofollow'>Tweet</a><script src='http://platform.twitter.com/widgets.js'; type='text/javascript'></script>
<br /><div class='sbutton' id='su'> <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script> </div> <div class='sbutton' id='digg' style='margin-left:3px;width:48px'> <script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script> <a class="DiggThisButton DiggMedium"></a> </div> <div class='sbutton' id='gplusone'> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <g:plusone size="tall"></g:plusone></div><br/><a href='http://feeds.feedburner.com/helplogger' rel='nofollow' target='_blank' title='Subscribe To Our Rss Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUyHz8IptO08xbjDtJmmpNgpkL4ZFg569yPtYOur6Pk7_PjhnsubktcZd935OVoNGGru6MnqxLuYx1seqb6OsKdUu6-naMBzPJXkonwFVaeQJ98zbvLUYXErysf9Yq6VKu3XAk2owoRayz/s1600/icon_rss_reader.png'/></a><div style="clear: both;font-size: 9px;text-align:center;">Get <a style="color: #3399BB;" href="http://helplogger.blogspot.com/">widget</a></div><!-- Do not remove this link --> </div> <!-- floating share bar End --></div>

Customization:

• Vertical alignment - Change the value of bottom in code line 3. The code positions the button relative to the bottom of your browser window. To fix the distance even when window is resized, specify the value in px (pixels) instead of %.
• Horizontal alignment - Change the value in red of margin-left. Negative value pushes the button to the left of the main blog column, positive value pushes it to the right. Increase or decrease the value based on your needs.
• Twitter setting - Replace Helplogger with your Twitter username
• Replacing and removing buttons - You can replace existing buttons with your own. Each button is represented by this code: <div class='sbutton'> BUTTON CODE HERE </div>
• RSS Feed - Change the text in blue with the url address of your RSS feed.

Enjoy :)

Posted By Unknown09:47

2

Continue Reading

Expandable Recent Comments Widget For Blogger/Blogspot

This Expandable Recent Comments is a very accessible widget that can be collapsed or expanded through user interaction, so that now, we don't have to click on the commenter or post title link in order to see the content of a comment.

The expanding content can be shown or hidden by clicking on the plus/minus icon or by pressing the "Show all" or "Hide all" button at run time. 

How To Add The Expandable Recent Comments Widget to Blogger

Step 1. Log in to your Blogger dashboard and go to Layout > Click on "Add a Gadget" link

Step 2. From the pop-up window, scroll down and click on the HTML/JavaScript widget

Step 3. Copy and paste this code inside the empty box:

<style type="text/css" media="screen">
.row-aa {        background: #f2f2f3; }
.row-bb {        background: #F8F5F1; }
.row-div { 
  margin:0px;
  padding:5px;
}
.comment-header {
  font-size:0.9em;
//  border:1px solid #E0E0E0;
//  background-color:#F3F3F3;
  padding:4px;
  margin-top:10px;
  margin-bottom:5px;
}
.comment-box {
  margin:0px;
  padding:0px;
  font-size:0.9em;
  height:500px;
  overflow:auto;
}
.comments1  { 
//  background: #F3F3F3;
  padding:3px;
  border-left:1px dashed #A6A6A6;
  color: #888888;
  font-style: italic;
  padding-top:4px;
  margin-bottom:5px;
}
.comment-footer {
  text-align:center;
  font-size:0.9em;
  padding:4px;
  margin-top:5px; 
}
</style>

<div style="text-align: center" class="comment-header"><input class="comment-button" id="commshowall" type="button" onclick="if (this.value == &#39;Show all&#39;) { unfold_all(this); this.value=&#39;Hide all&#39;; } else { fold_all(this); this.value=&#39;Show all&#39;; }" style="width:8em;font-size:1em;font-family:Verdana,sans" value="Show all" /></div>

<div class="comment-box">
<script type="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/expandable-recent-comments.js"></script>
<script type="text/javascript"  src="http://helplogger.blogspot.com/feeds/posts/default?start-index=1&max-results=999999&alt=json-in-script&callback=showrecentposts">
</script>
<script type="text/javascript"  src="http://helplogger.blogspot.com/feeds/comments/default?start-index=1&max-results=999999&alt=json-in-script&callback=showrecentcomments">
</script>

</div>

Note: Replace http://helplogger.blogspot.com with your blog/site address.

Step 4. Save your widget and you're done!

Enjoy :)

Posted By Unknown09:43

3

Continue Reading

Blogger Auto Video Template

Rate this template:

 

 

 

 

 

 

30 Votes

Demo: Click here for Demo 

Source And Designer: Author page

Click here to Download



Features:

• Automatic thumbnail creation for Youtube videos.
• A picture similar to the articles.
• Custom fields gadget.
• Simplified design.
• Dailymotion, metacafe, vimeo, LiveLeak, YouTube, to automatically embed videos

Usage:

• For videos from, Dailymotion, metacafe, vimeo, LiveLeak, add the endofvid tag to the end of the link. 
• For the video description: place the [starttext] and [endtext] code to the beginning and end of description.

Example:
http://www.dailymotion.com/video/xmpjro_yntikamyn-bedeli-seeking-justice-vizyonda_shortfilmsendofvid
[starttext]
this is description
[endtext]

The thumbnails for these video services are not available. You'll have to add pictures manually.

Youtube videos: When you add the iframe code, it automatically creates a thumbnail.Instructions:When creating a post, switch to Edit HTML tab and paste the embed code of youtube video in the HTML box. 
You don't need to add any pictures.


Other: If thumbnails don't appear, find and delete the ?rel=0 code at the end of youtube URL.

Posted By Unknown09:36

3

Continue Reading

How To Add A Tabbed Navigation Widget To Blogger

The tabviews are elements that allow us to group in a single container various gadgets and these can be selected via tabs.
Its main function is to save space on the blog to avoid scattered gadgets in the same category so you can group multiple gadgets into one. There are several methods for creating tabviews, some require jQuery, other MooTools, or any other script.

To add this widget to your blog, just follow the steps below:

Step 1. From your Blogger Dashboard, go to Template and click on the Edit HTML button

Step 2. Expand the style of the template, by clicking on the sideways arrow before <b:skin> ... </b:skin>

Step 3. Search using CTRL + F for the following tag:

]]></b:skin>

Step 4. Just above it, add the following code:

/* Tabview for Blogger
----------------------------------------------- */
.tabviewcont{
margin:15px 0;
padding:0;
clear:both;
}

.tabviewnav {
margin: 0 0 0 14px;
padding:3px 0; /* If you are using a Blogger Template change 0 with 15px */
font-size:12px; /* Font size of text inside tabs */
font-weight:bold;
}
.tabviewnav li {
list-style:none;
margin:0;
display:inline;
}
.tabviewnav li a {
padding:3px 6px;
margin-right:1px;
background:#F6F6F6; /* The background color of the tabs */
border-radius:5px 5px 0 0;
-moz-border-radius:5px 5px 0 0;
-webkit-border-radius:5px 5px 0 0;
text-decoration:none;
color:#222222;
}
.tabviewnav li a:hover {
color:#222222;
background:#EBEBEB; /* Background color of the tab on mouseover */
text-decoration:none;
}
.tabviewnav li.tabviewactive a,
.tabviewnav li.tabviewactive a:hover {
background:#EBEBEB; /* Background color of the active tab */
color:#222222;
}
.tabviewcont .tabviewtab {
padding:5px;
border:1px solid #EEEEEE; /* Border around the container */
background:#fff; /* The background color of the gadget */
}
.tabviewcont .tabviewtab h2,
.tabviewcont .tabviewtabhide {
display:none;
}
.tabviewtab .widget-content ul{
list-style:none;
margin:0 0 10px 0;
padding:0;
}
.tabviewtab .widget-content li {
border-bottom:1px solid #ccc;
margin:0 5px;
padding:2px 0 5px 0;
}

Step 5. Find the </head> tag and just above it, paste this script:

<script type='text/javascript'>
// Tabview for grouping gadgets

//<![CDATA[
document.write('<style type="text/css">.tabview{display:none;}<\/style>');function tabviewObj(argsObj){var arg;this.div=null;this.classMain="tabview";this.classMainLive="tabviewcont";this.classTab="tabviewtab";this.classTabDefault="tabviewtabdefault";this.classNav="tabviewnav";this.classTabHide="tabviewtabhide";this.classNavActive="tabviewactive";this.titleElements=['h2','h3','h4','h5','h6'];this.titleElementsStripHTML=true;this.removeTitle=true;this.addLinkId=false;this.linkIdFormat='<tabviewid>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}}tabviewObj.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.tabview=this;DOM_a.tabviewIndex=i;if(this.addLinkId&&this.linkIdFormat){aId=this.linkIdFormat;aId=aId.replace(/<tabviewid>/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({tabview:this})}return this};tabviewObj.prototype.navClick=function(event){var rVal,a,self,tabviewIndex,onClickArgs;a=this;if(!a.tabview){return false}self=a.tabview;tabviewIndex=a.tabviewIndex;a.blur();if(typeof self.onClick=='function'){onClickArgs={'tabview':self,'index':tabviewIndex,'event':event};if(!event){onClickArgs.event=window.event}rVal=self.onClick(onClickArgs);if(rVal===false){return false}}self.tabShow(tabviewIndex);return false};tabviewObj.prototype.tabHideAll=function(){var i;for(i=0;i<this.tabs.length;i++){this.tabHide(i)}};tabviewObj.prototype.tabHide=function(tabviewIndex){var div;if(!this.tabs[tabviewIndex]){return false}div=this.tabs[tabviewIndex].div;if(!div.className.match(this.REclassTabHide)){div.className+=' '+this.classTabHide}this.navClearActive(tabviewIndex);return this};tabviewObj.prototype.tabShow=function(tabviewIndex){var div;if(!this.tabs[tabviewIndex]){return false}this.tabHideAll();div=this.tabs[tabviewIndex].div;div.className=div.className.replace(this.REclassTabHide,'');this.navSetActive(tabviewIndex);if(typeof this.onTabDisplay=='function'){this.onTabDisplay({'tabview':this,'index':tabviewIndex})}return this};tabviewObj.prototype.navSetActive=function(tabviewIndex){this.tabs[tabviewIndex].li.className=this.classNavActive;return this};tabviewObj.prototype.navClearActive=function(tabviewIndex){this.tabs[tabviewIndex].li.className='';return this};function tabviewAutomatic(tabviewArgs){var tempObj,divs,i;if(!tabviewArgs){tabviewArgs={}}tempObj=new tabviewObj(tabviewArgs);divs=document.getElementsByTagName("div");for(i=0;i<divs.length;i++){if(divs[i].className&&divs[i].className.match(tempObj.REclassMain)){tabviewArgs.div=divs[i];divs[i].tabview=new tabviewObj(tabviewArgs)}}return this}function tabviewAutomaticOnLoad(tabviewArgs){var oldOnLoad;if(!tabviewArgs){tabviewArgs={}}oldOnLoad=window.onload;if(typeof window.onload!='function'){window.onload=function(){tabviewAutomatic(tabviewArgs)}}else{window.onload=function(){oldOnLoad();tabviewAutomatic(tabviewArgs)}}}if(typeof tabviewOptions=='undefined'){tabviewAutomaticOnLoad()}else{if(!tabviewOptions['manualStartup']){tabviewAutomaticOnLoad(tabviewOptions)}}
//]]>
</script>

Step 6. Finally, look for this line:

<div class='column-right-inner'>

Or if you use an old template of Blogger, search this line:

<div id='sidebar-wrapper'>

Step 7. Paste below one of these two lines, this code:

<div class='tabview'>
<b:section class='tabviewtab' id='Tab1' maxwidgets='1'/>
<b:section class='tabviewtab' id='Tab2' maxwidgets='1'/>
<b:section class='tabviewtab' id='Tab3' maxwidgets='1'/>
</div>

Step 8. Save changes, and go to Layout and there you will see the new areas to add gadgets.

You just have to click on Add a Gadget to add the gadget to the tab that corresponds, or drag a gadget you already have to that section.

If you want to add more tabs, then just add before the last </div> a line like this:

<b:section class='tabviewtab' id='Tab4' maxwidgets='1'/>

Note that each line you add should have a different ID, for example Tab5, Tab6, etc..

You can add multiple tabs, just repeat the last step and likewise remember to change the name of the IDs.

Remember that if your sidebar is too narrow, then you should not put a lot of tabs, or tab titles that are very long.

You should also note that this gadget does not speed up the loading speed of the blog, is only to group gadgets into one, even, depending on the blog-may take a while to load the tabview.

Posted By Unknown09:33

3

Continue Reading