Tags: Blogging Tips

How to Add Alexa Ranking Widget to Blogger

- 7 Comments

Alexa is a Web Information Company. Just like Google page rank, Alexa rank is also an important factor that shows the popularity of a blog. Advertisers for displaying their ads also check your page rank and then alexa rank. It means if you want to get your blog approved by ads selling networks/advertisers then alexa rank is also important. Alexa offers a widget that you can implement to your blog to show your alexa rank to your users and it'll also improve your alexa rank. So, in this post we are going to share that How to Add Alexa Ranking Widget to Blogger.

How to Add Alexa Ranking Widget to Blogger

Step 1. Go to Alexa Traffic Widget Page
Step 2. Choose a widget type i.e Stats button, Rank button or Alexa Traffic Graph, and enter your Blog's URL in the box.

Step 3. Click on Build Widget button.
Step 4. You'll see 3 different types of codes with their previews, copy the one you like

Step 5. Now Go to your Blogger Dashboard >> Layout >> Add a Gadget and select HTML/JavaScript gadget from the list of gadgets
Step 6. Paste that code in the HTML/Javascript box and click on Save Button
That's it...

From Editors Desk

We hope this article helped you in learning How to Add Alexa Ranking Widget to Blogger. Share this article with your friends and don't forget to subscribe us!

Tags: Blog Design / Blogging Tips

Add Spinning/Rotating Effect to Images in Blogger

- 2 Comments

Recently we've shared Add Round Hover Effect to Images of your Blogger Blog Posts , Add Hover Effect to Images of your Blogger Blog Posts , Add Zoom Effect to Images on Mouse Hover in Blogger and today we've another image effect for you. This effect rotates the image to 360 degree when you move your mouse cursor on the image. To see how this hover effect works move your mouse cursor on the image below.

How to Add Spinning/Rotating Effect to Images

Step 1. Log in to your Blogger Dashboard

Step 2. Go to Template >> Edit HTML and Search for the following tag

]]></b:skin>

Step 3. Copy the below code and Paste it just above/before it

.spineffect img {
/* Spinning/Rotating Effect for Images By www.blogolect.blogspot.com */
    -moz-transition: all 0.8s ease-in-out;
    -webkit-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    -ms-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
}

.spineffect img:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}

You can change the degree at which you want to rotate image by changing degree value 360

Step 4. Hit the Save Template button

How to Use this Effect on Images

To use this effect in you posts then in the post editor after uploading your image switch to HTML look for the image class. The default image class is <div class="seperator". Now replace seperator to spineffect in the post editor and you're done.
If you want to use effect in other part of your blog then use the following tag and replace IMAGE-URL with the image URL.

<a class="spineffect" href="IMAGE-URL" target="_blank"><img src="IMAGE-URL" /></a>

From Editors Desk

I hope this tutorial helped you in learning How to Add Spinning/Rotating Effect to Images in Blogger. Share this article with your friends and don't forget to subscribe us!

Add Zoom Effect to Images on Mouse Hover in Blogger

- 14 Comments

Recently, we've shared Add Round Hover Effect to Images of your Blogger Blog Posts , Add Hover Effect to Images of your Blogger Blog Posts and today we are going to share another effect for your blog images. This hover effect zooms the image on mouse hover. To see how this image hover effect works, move you mouse cursor on the image below.

How to Add Zoom Effect to Images

Step 1. Log in to your Blogger Dashboard
Step 2. Go to Template >> Click on Edit HTML and search (Ctrl + F) for the Following Tag

]]></b:skin>

Step 3. Copy the Below code and Paste it just above/before the ]]></b:skin> tag

.zoomeffect img{
-webkit-transform:scale(0.9);
-moz-transform:scale(0.9);
-o-transform:scale(0.9);
-webkit-transition-duration: 1.0s;
-moz-transition-duration: 1.0s;
-o-transition-duration: 1.0s;
opacity: 0.8;
margin: 0 10px 5px 0;
}

.zoomeffect img:hover{
-webkit-transform:scale(1.0);
-moz-transform:scale(1.0);
-o-transform:scale(1.0);
opacity: 1;
}

Step 4. Click on Save Template button

How to Use this Effect on Images

To use this effect in you posts then in the post editor after uploading your image switch to HTML look for the image class. The default image class is <div class="seperator". Now replace seperator to zoomeffect in the post editor and you're done.
If you want to use effect in other part of your blog then use the following tag and replace IMAGE-URL with the image URL.

<a class="zoomeffect" href="IMAGE-URL" target="_blank"><img src="IMAGE-URL" /></a>

From Editors Desk

I hope that you will like this image hover effect, Give us your Feedback and Enjoy Blogging !Feel Free to Ask. Your Feedback is always highly appreciated - See more at: http://blogolect.blogspot.com/b/post-preview?token=_xfJSUMBAAA._QudqCLLg7WGzaDyI8xMBQ.Kx0AKv8MK84qcLnfGHzLMQ&postId=3783301090408238732&type=POST#sthash.PIEvAy4V.dpuf

I hope that you will like this image hover effect zoom effect, Give us your Feedback and Enjoy Blogging !
Feel Free to Ask. Your Feedback is always highly appreciated.

Tags: Beginner's Guide / Blogging Tips

Basics for Newbie Bloggers - Part I

- 3 Comments

Today we are going to share a complete series of Basics for Newbie Bloggers that we've published on this blog. This series will help you to find easily that you are looking for and you don't have tp search for articles one by one because this series includes all the important information required for starting a new blog. This series is divided in 6 stages >> Reasons and Basics >> Learning Stage >> SEO Tips >> Icons and Images >> Widgets >> Blog Design

Tags: Blog Design / Blogging Tips

Customized Flat UI Labels Cloud widget for Blogger

- 5 Comments

Blogger default labels cloud widget is simple and not so much attractive. Consider that your website has stylish and beautiful look but labels cloud widget is simple, so its a bad impression on your readers/visitors. But don't worry, you can customize blogger simple labels cloud widget to a stylish one using simple techniques. So, today in this articles we are going to learn that how you can customize Blogger default labels cloud widget to a Flat UI Style Labels Cloud widget. Ok, let's come to the point :
Recommended For You:
Customized Colorful Flat UI Labels cloud widget for Blogger
Customize Labels Cloud Widget in Blogger

How to Customize Labels Cloud widget

Step 1. Add the Default Blogger Label Cloud widget and Configure it like the image below :

Step 2. Hit the Save Button

Step 3. Go to Template and click on Edit HTML Button

Step 4. Search ( Ctrl +F ) for the following tag :

]]></b:skin>

Step 5. Now copy the below code and paste it just above/before it ( ]]></b:skin> ).

.sidebar .label-size {
position:relative;
text-transform: uppercase;
text-decoration:none;
font-size:13px;
font-family:Open Sans;
color:#fff!important;
}

.sidebar .label-size a {
color:#fff!important;
font-weight:bold;
padding:8px 10px;
margin:0 6px 6px 0;
float:left;
display:block;
-moz-transition: all 0.4s ;
-o-transition: all 0.4s;
-webkit-transition: all 0.4s ;
-ms-transition: all 0.4s ;
transition: all 0.4s ;
}

.sidebar .label-size a {background:#2aa4cf;border-bottom:3px solid #000000;}
.sidebar .label-size a:hover {background:#000000;border-bottom:3px solid #2aa4cf;}

Customization:

To change label color replace 2aa4cf with your HTML Color code
To change bottom border color replace 000000 with your HTML Color code
To change label color on hover replace 000000 with your HTML Color code
To change border color on hover replace 2aa4cf with your HTML Color code

Note : You can use our HTML Color Code Generator for HTML Color codes
Step 6. Hit the Save Template button
And you're done !

Tags: Blog Design / Blogging Tips

Customized Flat UI Labels cloud widget for Blogger

- 1 Comment

Blogger default Labels cloud widget is simple, not so much attractive and users are getting bored with ugly and unclean labels cloud widget. Consider that your website has clean, stylish and beautiful look but labels cloud widget is simple and unclean, so its a bad impression on your readers/visitors. Default blogger labels cloud widget is not so much attractive, so today we are going to share a simple technique for customizing blogger labels cloud widget. Here's a colorful Flat UI labels cloud widget for your blog. Let's learn how to customize labels cloud widget.

How to Customize Labels Cloud widget

Step 1. Add the Default Blogger Label Cloud widget and Configure it like the image below :

Step 2. Hit the Save Button

Step 3. Go to Template and click on Edit HTML Button

Step 4. Search ( Ctrl +F ) for the following tag :

]]></b:skin>

Step 5. Now copy the below code and paste it just above/before it ( ]]></b:skin> ).

.sidebar .label-size {
position:relative;
text-transform: uppercase;
text-decoration:none;
font-size:12px;
font-family:Open Sans;
color:#fff!important;
}

.sidebar .label-size a {
color:#fff!important;
font-weight:bold;
padding:8px 10px;
margin:0 6px 6px 0;
float:left;
display:block;
-moz-transition: all 0.4s ;
-o-transition: all 0.4s;
-webkit-transition: all 0.4s ;
-ms-transition: all 0.4s ;
transition: all 0.4s ;
}

.sidebar .label-size-1 a {background:#1abc9c;border:3px solid #127F69;}
.sidebar .label-size-1 a:hover {background:#127F69;border:3px solid #1abc9c;}
.sidebar .label-size-2 a {background:#3498db;border:3px solid #226693;}
.sidebar .label-size-2 a:hover {background:#226693;border:3px solid #3498db;}
.sidebar .label-size-3 a {background:#2ecc71;border:3px solid #1F8C4C;}
.sidebar .label-size-3 a:hover {background:#1F8C4C;border:3px solid #2ecc71;}
.sidebar .label-size-4 a {background:#9b59b6;border:3px solid #74398E;}
.sidebar .label-size-4 a:hover {background:#74398E;border:3px solid #9b59b6;}
.sidebar .label-size-5 a {background:#e74c3c;border:3px solid #922C20;}
.sidebar .label-size-5 a:hover {background:#922C20;border:3px solid #e74c3c;}

Step 6. Hit the Save template Button
Congratulations : You've successfully customized your Labels Cloud widget.

Tags: Blogging Tips / Widgets

7 Websites for Adding Contact forms to your Blog

- 1 Comment

Having a contact form in your blog is the best way get in touch with your visitors. Your visitors can ask you questions, queries and can give you suggestions. Blogger also provides its official contact form that you can add in your blog's sidebar, but by using the websites we are going to share with you today you can add contact forms to blogger static pages. All you have to do is to Create a Contact Form >> Customize it >> Copy the code and paste it in your static page. Below we've shared 7 Websites for Adding Contact forms to your Blog.

1- Emailmeform

2- Kontactr

3- Freecontactform

4- Foxyform

5- Rushforms

6- 123contactform

7- FormLogix

From Editors Desk

Now add a contact form to your blog and get in touch with your blog visitors :)

Tags: Blog Design / Blogging Tips / Templates

How to Create a Magazine Style with Post Summaries and Thumbnails in Blogger

- 20 Comments

Today, we've another interesting blogger trick and using this trick you can change your blog's simple posts view to a magazine style view. This trick will change your blog posts simple appearance i.e. List style to a beautiful magazine style. There are several ways for creating a magazine style and today we are going to learn one of them. How a magazine style looks like ? Here's a preview of magazine style template. -->

Creating a Magazine Style with Post Summaries and Thumbnails

Step 1. Log in to your Blogger Dashboard
Step 2. Select a Blog >> Go to Template and Backup your template
Step 3. After the Backup click on Edit HTML Button
Step 4. Search (CTRL + F) for the following Tag

<data:post.body/>

Note : You'll find the above tag many times but you've stop at the second one
Step 5. And Replace the above code ( <data:post.body/> ) with the following one (Remove <data:post.body/> and paste the following code instead of it)

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<span class='post-comment-link'><b:if cond='data:blog.pageType != "item"'><b:if cond='data:post.allowComments'><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a></b:if></b:if></span>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='readmorebutton' style='float:right'><a expr:href='data:post.url'>Continue Reading »</a></span></b:if></b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>

Note: You can replace the text Continue Reading with another you like
Step 6. Now search (CTRL + F) for the following tag

<b:include data='post' name='post'/>

Step 7. And replace it with the following code

<b:if cond='data:post.isFirstPost'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<div id='first'>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
<div class='first-body'>

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"summary1" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb1("summary1<data:post.id/>");</script>
<span class='post-comment-link'><b:if cond='data:blog.pageType != "item"'><b:if cond='data:post.allowComments'><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a></b:if></b:if></span>
<span class='readmorebutton' style='float:right'><a expr:href='data:post.url'>Continue Reading »</a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>

</div>
</div>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Note: You can replace the text Continue Reading with another you like
Step 8. After that search (CTRL + F) for </head> tag
Step 9. And paste the following code just before/above it

<script type='text/javascript'>
posts_no_thumb_sum = 290;
posts_thumb_sum = 240;
img_thumb_height = 80;
img_thumb_width = 80;
first_no_thumb_sum = 600;
first_thumb_sum = 540;
img_thumb_height1 = 145;
img_thumb_width1 = 165;
</script>

<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = posts_thumb_sum;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}

function createSummaryAndThumb1(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = first_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="first-post-thumb" style="float:left;"><img src="'+img[0].src+'" width="'+img_thumb_width1+'px" height="'+img_thumb_height1+'px"/></span>';
summ = first_thumb_sum;
}

var summary1 = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary1;
}

//]]>
</script>

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>
.first-post-thumb {
margin-right: 10px;
border: 1px solid #fff;
-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img {
background: none;
border: none;
box-shadow: none;
padding: 0;
}
#first { /* styles for first post container */
width: auto;
height: 250px;
float: left;
margin-bottom:10px;
background-color: #F4F4F4; /* background color for the first post */
border: 1px solid #E5E5E5; /* color and size of first post border */
}
.first-body { /* first post summary styles */
color: #545454;
font-size: 13px;
text-align: justify;
padding: 5px 10px;
line-height:1.5em;
}
#first h3 a, #first h3 a:visited { /* First Post title styles*/
border-bottom: 2px solid #DFDFDF;
color: #515151;
font-size: 20px;
display:block;
margin: 10px auto;
width: 95%;
font-size: 20px;
padding: 0px 0px 4px 0px;
font-weight: bold;
text-align:left;
line-height: 1.4em;
background: none;
}
#first h3 a:hover { /* mouseover color for the First Post title */
color: #1061A1;
}
.post { /* small posts container styles */
float:left;
margin-right: 10px;
width: 290px;
height: 210px;
padding: 0px 5px 5px 5px;
background: #FCFCFC; /* background color for the small posts */
border: 1px solid #E5E5E5; /* color and size for small posts border */
overflow: hidden;
}
.posts-thumb { /* small posts thumbnails styles */
margin-right: 5px;
background: #ddd;
padding: 3px 3px 0px;
border: 1px solid #C4C4C4;
border-radius: 4px;
}
h3.post-title a{ /* small posts titles styles */
font-size: 14px;
color: #747474;
background-color: #F4F4F4; /* background color for the small posts titles */
width: 95%;
font-weight: bold;
font-family: 'Arial Narrow', sans-serif;
padding: 5px;
}
h3.post-title a:hover { /* mouseover color for the Small Posts Ttitle */
color: #005B77;
}
h2.date-header { /* Post date */
display:none;
}
.post-footer { display: none;}
h3.post-title {margin: 0px;}
.readmorebutton { margin-top: 5px;}

.readmorebutton a { /* Read More link styles */
color: #767676;
border: 1px solid #E1E1E1;
background: #EAEAEA; /* Background color for the Read More link */
text-decoration:none;
padding: 3px 5px;
font-weight: bold;
font-size: 11px;
}
.post-comment-link {
float: right;
display: inline;
margin: -35px 0px;
border: 1px solid #E1E1E1; /* border for the comment bubble */
background: #EAEAEA; /* background color for comment bubble */
font-size: 11px;
position: relative;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
}
#first .post-comment-link { /* style for the comment bubble of first post */
margin: -200px 10px;
}
.post-comment-link a{
padding: 10px;
color: #6A6A6A;
text-decoration:none;
font-weight: bold;
}
#blog-pager {clear:both;}
</style>
</b:if>
</b:if>

Customization :

In posts_no_thumb_sum = 290; Replace 290 with the number of characters you want to show for the small posts when there is no image available in the post
In posts_thumb_sum = 240; Replace 240 with the number of characters you want to show for the small posts when the image is available in the post
In img_thumb_height = 80; Replace 80 with the height of small posts thumbnails
In img_thumb_width = 80; Replace 80 with the width of small posts thumbnails
In first_no_thumb_sum = 600; Replace 600 with the number of characters you want to show for the first post when there is no image available in the post
In first_thumb_sum = 540; Replace 540 with the number of characters you want to show for the first post when the image is available in the post
In img_thumb_height1 = 145; Replace 145 with the height of first post thumbnail
and At last in img_thumb_width1 = 165; Replace 165 with the width of first post thumbnail

To change the height and width for the first post container edit the below codes

width: auto;
height: 250px;

To change the width and height for the small posts container edit the below codes

width: 290px;
height: 210px;

Step 10. Hit the Save Template button
Now take a deep breath and check your blog

Tags: Beginner's Guide / Blogging Tips

How to Backup your Blogger Template

- 2 Comments

Are you planning to modify your blogger template? But make sure that you have a Backup of your blogger template. Because sometimes while editing your blogger template something unexpected happens and it effects your blog's appearance. Then, if you have a backup of your blogger template then you can easily restore your blog back to its previous condition.So, today we are going to share an article on How to Backup your Blogger Template.
Recommended for You :
How to Restore your Blogger Template from Backup

How to Backup your Blogger Template

Step 1. Log in to your Blogger Dashboard
Step 2. Select a Blog and Select Template option from the menu in Left Side

Step 3. And hit the Backup / Restore button which is in the top right corner of that page
Step 4. A popup will open and Click on the Download full Template button from that popup

Step 5. Save the Template.
Now you have a backup of your blogger template and if anything goes wrong with your live template (template that is on your blog) you can restore it easily that we are going to discuss about it in our next post.

From Editors Desk

Always create a Backup of your Blogger template. Because while making changes to your Blogger template if anything goes wrong. Then you can easily Restore your Blog only if you have a Backup.

Tags: Beginner's Guide / Blogging Tips

Why You Should Choose Blogger ?

- 6 Comments

There are many free Blogging platforms. But people like the one which provides most of its features for free. And one of them is Blogger. Creating a Blog on Blogger takes only 15 minutes and your blog is ready. It provides its .blogspot.com domain for free but you can also choose your own domain and connect it with your blogger account. It's is very easy to maintain and to setup your account. So, today we are going to discuss some of the features of Blogger Platform.

Blogger Free to Use

Blogger is a free platform. You can create your blog for free of cost. You can customize your blog to your own taste for free. You don't have to pay a penny to blogger for creating your blog. So to start a blog on blogger all you need is an internet connection and a computer :) Beginner's Guide and Blogging Tips for Newbies.

Template Customization

Editing your template in blogger is more easy than you think. Blogger provides its own templates and you can customize them to your own taste. You don't need any skills to start your blog on Blogger. All you have to do is to create an account, Name your Blog, Select a theme/template and your blog is ready.

Thousands of Free Professional Templates

There are Thousands of free blogger templates on the web that you can choose for your blog. As we know that blogger also provides its own templates but if you are looking to have a professional template for your blog then there are tons of templates you can find for your blog. If you still don't find a template then there are also premium templates and you can choose one of them.

Blogger Widgets

Blogger provides its thousands of widgets for free that you can add to your footer or sidebar. Blogger provides its own widgets but there are many developers who keeps on developing thousands of free blogger widgets. Its mean blogger also provides a wide range of blogger widgets that you can add to your blog. Check our Widgets Inventory.

Make Money

You can make money with blogger by one of its own service Adsense. You can make money with adsense by displaying ads on your blog. All you have to do is to signup for Adsense >> Display ads to your blog where you want and make money.

Custom Domain

As blogger provides its free domain (Yourblog.Blogspot.com) but it also allows you to choose your own domain (.com, .net etc.). All you need is to choose your own Domain, pay the money and connect it to your Blogger Account.

Tags: Blogging Tips / Widgets

Customize the Scroll Bar with JScrollPane in Blogger

- 1 Comment

JScrollPane is a jQuery plugin which allows you to customize your Blog's scrollbar or your Browser's scrollbar. You can easily change your scrollbar using jQuery and it will be visible in all browsers. JScrollPane coverts the default scrollbar's into HTML and you can easily customize it using CSS and today we are going to share that How you can Customize your Blog's Scroll Bar with JScrollPane in Blogger.

How to Customize the Scroll Bar with JScrollPane

Step 1. Log in to your Blogger Dashboard
Step 2. Go to Template >> Click on Edit HTML and search (Ctrl + F) for the Following Tag

</head>

Step 3. Copy and Paste the Below code just above/before it

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

<style>
.jspContainer {overflow: hidden;position: relative;}.jspPane {position: absolute;}
.jspVerticalBar {position: absolute;top: 0;right: 0;width: 16px;height: 100%;background: #ccc;}
.jspHorizontalBar {position: absolute;bottom: 0;left: 0;width: 100%;height: 16px;background: #ccc;}
.jspVerticalBar *,.jspHorizontalBar * {margin: 0;padding: 0;}
.jspCap {display: none;}.jspHorizontalBar .jspCap {float: left;}

.jspTrack {
background: #fff; /* Background Color of the Scrollbar */
position: relative;
}
.jspDrag {
background: #CC0000; /* Color of the Scrollbar */
position: relative;
top: 0;
left: 0;
cursor: pointer;
}
.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag {
float: left;
height: 100%;
}
.jspArrow {
background: #888;
text-indent: -20000px;
display: block;
cursor: pointer;
}
.jspArrow.jspDisabled {
cursor: default;
background: #333;
}
.jspVerticalBar .jspArrow {
height: 16px;
}
.jspHorizontalBar .jspArrow {
width: 16px;
float: left;
height: 100%;
}
.jspVerticalBar .jspArrow:focus {outline: none;}.jspCorner {background: #eeeef4;float: left;height: 100%;}* html .jspCorner {margin: 0 -3px 0 0;}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#blog-container {
height: 100%;
margin: 0;
padding: 0;
overflow: auto;
}
</style>
<script>
//<![CDATA[
/*! Copyright (c) 2013 Brandon Aaron (http://brandonaaron.net)
* Licensed under the MIT License (LICENSE.txt).
* Version: 3.1.3
*/

(function (factory) {
if ( typeof define === 'function' && define.amd ) {
define(['jquery'], factory);
} else if (typeof exports === 'object') {
module.exports = factory;
} else {
// Browser globals
factory(jQuery);
}
}(function ($) {

var toFix = ['wheel', 'mousewheel', 'DOMMouseScroll', 'MozMousePixelScroll'];
var toBind = 'onwheel' in document || document.documentMode >= 9 ? ['wheel'] : ['mousewheel', 'DomMouseScroll', 'MozMousePixelScroll'];
var lowestDelta, lowestDeltaXY;

if ( $.event.fixHooks ) {
for ( var i = toFix.length; i; ) {
$.event.fixHooks[ toFix[--i] ] = $.event.mouseHooks;
}
}

$.event.special.mousewheel = {
setup: function() {
if ( this.addEventListener ) {
for ( var i = toBind.length; i; ) {
this.addEventListener( toBind[--i], handler, false );
}
} else {
this.onmousewheel = handler;
}
},

teardown: function() {
if ( this.removeEventListener ) {
for ( var i = toBind.length; i; ) {
this.removeEventListener( toBind[--i], handler, false );
}
} else {
this.onmousewheel = null;
}
}
};

$.fn.extend({
mousewheel: function(fn) {
return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
},

unmousewheel: function(fn) {
return this.unbind("mousewheel", fn);
}
});

function handler(event) {
var orgEvent = event || window.event,
args = [].slice.call(arguments, 1),
delta = 0,
deltaX = 0,
deltaY = 0,
absDelta = 0,
absDeltaXY = 0,
fn;
event = $.event.fix(orgEvent);
event.type = "mousewheel";
if ( orgEvent.wheelDelta ) { delta = orgEvent.wheelDelta; }
if ( orgEvent.detail ) { delta = orgEvent.detail * -1; }
if ( orgEvent.deltaY ) {
deltaY = orgEvent.deltaY * -1;
delta = deltaY;
}
if ( orgEvent.deltaX ) {
deltaX = orgEvent.deltaX;
delta = deltaX * -1;
}
if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY; }
if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = orgEvent.wheelDeltaX * -1; }
absDelta = Math.abs(delta);
if ( !lowestDelta || absDelta < lowestDelta ) { lowestDelta = absDelta; }
absDeltaXY = Math.max(Math.abs(deltaY), Math.abs(deltaX));
if ( !lowestDeltaXY || absDeltaXY < lowestDeltaXY ) { lowestDeltaXY = absDeltaXY; }
fn = delta > 0 ? 'floor' : 'ceil';
delta = Math[fn](delta / lowestDelta);
deltaX = Math[fn](deltaX / lowestDeltaXY);
deltaY = Math[fn](deltaY / lowestDeltaXY);
args.unshift(event, delta, deltaX, deltaY);
return ($.event.dispatch || $.event.handle).apply(this, args);
}
}));

/*
* jScrollPane - v2.0.0beta5 - 2010-09-18
* http://jscrollpane.kelvinluck.com/
* Copyright (c) 2010 Kelvin Luck
* Dual licensed under the MIT and GPL licenses.
*/
(function(b,a,c){b.fn.jScrollPane=function(f){function d(C,L){var au,N=this,V,ah,v,aj,Q,W,y,q,av,aB,ap,i,H,h,j,X,R,al,U,t,A,am,ac,ak,F,l,ao,at,x,aq,aE,g,aA,ag=true,M=true,aD=false,k=false,Z=b.fn.mwheelIntent?"mwheelIntent.jsp":"mousewheel.jsp";aE=C.css("paddingTop")+" "+C.css("paddingRight")+" "+C.css("paddingBottom")+" "+C.css("paddingLeft");g=(parseInt(C.css("paddingLeft"))||0)+(parseInt(C.css("paddingRight"))||0);an(L);function an(aH){var aL,aK,aJ,aG,aF,aI;au=aH;if(V==c){C.css({overflow:"hidden",padding:0});ah=C.innerWidth()+g;v=C.innerHeight();C.width(ah);V=b('<div class="jspPane" />').wrap(b('<div class="jspContainer" />').css({width:ah+"px",height:v+"px"}));C.wrapInner(V.parent());aj=C.find(">.jspContainer");V=aj.find(">.jspPane");V.css("padding",aE)}else{C.css("width",null);aI=C.outerWidth()+g!=ah||C.outerHeight()!=v;if(aI){ah=C.innerWidth()+g;v=C.innerHeight();aj.css({width:ah+"px",height:v+"px"})}aA=V.innerWidth();if(!aI&&V.outerWidth()==Q&&V.outerHeight()==W){if(aB||av){V.css("width",aA+"px");C.css("width",(aA+g)+"px")}return}V.css("width",null);C.css("width",(ah)+"px");aj.find(">.jspVerticalBar,>.jspHorizontalBar").remove().end()}aL=V.clone().css("position","absolute");aK=b('<div style="width:1px; position: relative;" />').append(aL);b("body").append(aK);Q=Math.max(V.outerWidth(),aL.outerWidth());aK.remove();W=V.outerHeight();y=Q/ah;q=W/v;av=q>1;aB=y>1;if(!(aB||av)){C.removeClass("jspScrollable");V.css({top:0,width:aj.width()-g});n();D();O();w();af()}else{C.addClass("jspScrollable");aJ=au.maintainPosition&&(H||X);if(aJ){aG=ay();aF=aw()}aC();z();E();if(aJ){K(aG);J(aF)}I();ad();if(au.enableKeyboardNavigation){P()}if(au.clickOnTrack){p()}B();if(au.hijackInternalLinks){m()}}if(au.autoReinitialise&&!aq){aq=setInterval(function(){an(au)},au.autoReinitialiseDelay)}else{if(!au.autoReinitialise&&aq){clearInterval(aq)}}C.trigger("jsp-initialised",[aB||av])}function aC(){if(av){aj.append(b('<div class="jspVerticalBar" />').append(b('<div class="jspCap jspCapTop" />'),b('<div class="jspTrack" />').append(b('<div class="jspDrag" />').append(b('<div class="jspDragTop" />'),b('<div class="jspDragBottom" />'))),b('<div class="jspCap jspCapBottom" />')));R=aj.find(">.jspVerticalBar");al=R.find(">.jspTrack");ap=al.find(">.jspDrag");if(au.showArrows){am=b('<a class="jspArrow jspArrowUp" />').bind("mousedown.jsp",az(0,-1)).bind("click.jsp",ax);ac=b('<a class="jspArrow jspArrowDown" />').bind("mousedown.jsp",az(0,1)).bind("click.jsp",ax);if(au.arrowScrollOnHover){am.bind("mouseover.jsp",az(0,-1,am));ac.bind("mouseover.jsp",az(0,1,ac))}ai(al,au.verticalArrowPositions,am,ac)}t=v;aj.find(">.jspVerticalBar>.jspCap:visible,>.jspVerticalBar>.jspArrow").each(function(){t-=b(this).outerHeight()});ap.hover(function(){ap.addClass("jspHover")},function(){ap.removeClass("jspHover")}).bind("mousedown.jsp",function(aF){b("html").bind("dragstart.jsp selectstart.jsp",function(){return false});ap.addClass("jspActive");var s=aF.pageY-ap.position().top;b("html").bind("mousemove.jsp",function(aG){S(aG.pageY-s,false)}).bind("mouseup.jsp mouseleave.jsp",ar);return false});o()}}function o(){al.height(t+"px");H=0;U=au.verticalGutter+al.outerWidth();V.width(ah-U-g);if(R.position().left==0){V.css("margin-left",U+"px")}}function z(){if(aB){aj.append(b('<div class="jspHorizontalBar" />').append(b('<div class="jspCap jspCapLeft" />'),b('<div class="jspTrack" />').append(b('<div class="jspDrag" />').append(b('<div class="jspDragLeft" />'),b('<div class="jspDragRight" />'))),b('<div class="jspCap jspCapRight" />')));ak=aj.find(">.jspHorizontalBar");F=ak.find(">.jspTrack");h=F.find(">.jspDrag");if(au.showArrows){at=b('<a class="jspArrow jspArrowLeft" />').bind("mousedown.jsp",az(-1,0)).bind("click.jsp",ax);x=b('<a class="jspArrow jspArrowRight" />').bind("mousedown.jsp",az(1,0)).bind("click.jsp",ax);
if(au.arrowScrollOnHover){at.bind("mouseover.jsp",az(-1,0,at));x.bind("mouseover.jsp",az(1,0,x))}ai(F,au.horizontalArrowPositions,at,x)}h.hover(function(){h.addClass("jspHover")},function(){h.removeClass("jspHover")}).bind("mousedown.jsp",function(aF){b("html").bind("dragstart.jsp selectstart.jsp",function(){return false});h.addClass("jspActive");var s=aF.pageX-h.position().left;b("html").bind("mousemove.jsp",function(aG){T(aG.pageX-s,false)}).bind("mouseup.jsp mouseleave.jsp",ar);return false});l=aj.innerWidth();ae()}else{}}function ae(){aj.find(">.jspHorizontalBar>.jspCap:visible,>.jspHorizontalBar>.jspArrow").each(function(){l-=b(this).outerWidth()});F.width(l+"px");X=0}function E(){if(aB&&av){var aF=F.outerHeight(),s=al.outerWidth();t-=aF;b(ak).find(">.jspCap:visible,>.jspArrow").each(function(){l+=b(this).outerWidth()});l-=s;v-=s;ah-=aF;F.parent().append(b('<div class="jspCorner" />').css("width",aF+"px"));o();ae()}if(aB){V.width((aj.outerWidth()-g)+"px")}W=V.outerHeight();q=W/v;if(aB){ao=1/y*l;if(ao>au.horizontalDragMaxWidth){ao=au.horizontalDragMaxWidth}else{if(ao<au.horizontalDragMinWidth){ao=au.horizontalDragMinWidth}}h.width(ao+"px");j=l-ao;ab(X)}if(av){A=1/q*t;if(A>au.verticalDragMaxHeight){A=au.verticalDragMaxHeight}else{if(A<au.verticalDragMinHeight){A=au.verticalDragMinHeight}}ap.height(A+"px");i=t-A;aa(H)}}function ai(aG,aI,aF,s){var aK="before",aH="after",aJ;if(aI=="os"){aI=/Mac/.test(navigator.platform)?"after":"split"}if(aI==aK){aH=aI}else{if(aI==aH){aK=aI;aJ=aF;aF=s;s=aJ}}aG[aK](aF)[aH](s)}function az(aF,s,aG){return function(){G(aF,s,this,aG);this.blur();return false}}function G(aH,aF,aK,aJ){aK=b(aK).addClass("jspActive");var aI,s=function(){if(aH!=0){T(X+aH*au.arrowButtonSpeed,false)}if(aF!=0){S(H+aF*au.arrowButtonSpeed,false)}},aG=setInterval(s,au.arrowRepeatFreq);s();aI=aJ==c?"mouseup.jsp":"mouseout.jsp";aJ=aJ||b("html");aJ.bind(aI,function(){aK.removeClass("jspActive");clearInterval(aG);aJ.unbind(aI)})}function p(){w();if(av){al.bind("mousedown.jsp",function(aH){if(aH.originalTarget==c||aH.originalTarget==aH.currentTarget){var aG=b(this),s=setInterval(function(){var aI=aG.offset(),aJ=aH.pageY-aI.top;if(H+A<aJ){S(H+au.trackClickSpeed)}else{if(aJ<H){S(H-au.trackClickSpeed)}else{aF()}}},au.trackClickRepeatFreq),aF=function(){s&&clearInterval(s);s=null;b(document).unbind("mouseup.jsp",aF)};b(document).bind("mouseup.jsp",aF);return false}})}if(aB){F.bind("mousedown.jsp",function(aH){if(aH.originalTarget==c||aH.originalTarget==aH.currentTarget){var aG=b(this),s=setInterval(function(){var aI=aG.offset(),aJ=aH.pageX-aI.left;if(X+ao<aJ){T(X+au.trackClickSpeed)}else{if(aJ<X){T(X-au.trackClickSpeed)}else{aF()}}},au.trackClickRepeatFreq),aF=function(){s&&clearInterval(s);s=null;b(document).unbind("mouseup.jsp",aF)};b(document).bind("mouseup.jsp",aF);return false}})}}function w(){F&&F.unbind("mousedown.jsp");al&&al.unbind("mousedown.jsp")}function ar(){b("html").unbind("dragstart.jsp selectstart.jsp mousemove.jsp mouseup.jsp mouseleave.jsp");ap&&ap.removeClass("jspActive");h&&h.removeClass("jspActive")}function S(s,aF){if(!av){return}if(s<0){s=0}else{if(s>i){s=i}}if(aF==c){aF=au.animateScroll}if(aF){N.animate(ap,"top",s,aa)}else{ap.css("top",s);aa(s)}}function aa(aF){if(aF==c){aF=ap.position().top}aj.scrollTop(0);H=aF;var aI=H==0,aG=H==i,aH=aF/i,s=-aH*(W-v);if(ag!=aI||aD!=aG){ag=aI;aD=aG;C.trigger("jsp-arrow-change",[ag,aD,M,k])}u(aI,aG);V.css("top",s);C.trigger("jsp-scroll-y",[-s,aI,aG])}function T(aF,s){if(!aB){return}if(aF<0){aF=0}else{if(aF>j){aF=j}}if(s==c){s=au.animateScroll}if(s){N.animate(h,"left",aF,ab)}else{h.css("left",aF);ab(aF)}}function ab(aF){if(aF==c){aF=h.position().left}aj.scrollTop(0);X=aF;var aI=X==0,aH=X==j,aG=aF/j,s=-aG*(Q-ah);if(M!=aI||k!=aH){M=aI;k=aH;C.trigger("jsp-arrow-change",[ag,aD,M,k])}r(aI,aH);V.css("left",s);C.trigger("jsp-scroll-x",[-s,aI,aH])}function u(aF,s){if(au.showArrows){am[aF?"addClass":"removeClass"]("jspDisabled");ac[s?"addClass":"removeClass"]("jspDisabled")}}function r(aF,s){if(au.showArrows){at[aF?"addClass":"removeClass"]("jspDisabled");
x[s?"addClass":"removeClass"]("jspDisabled")}}function J(s,aF){var aG=s/(W-v);S(aG*i,aF)}function K(aF,s){var aG=aF/(Q-ah);T(aG*j,s)}function Y(aN,aL,aF){var aJ,aH,s=0,aG,aK,aM;try{aJ=b(aN)}catch(aI){return}aH=aJ.outerHeight();aj.scrollTop(0);while(!aJ.is(".jspPane")){s+=aJ.position().top;aJ=aJ.offsetParent();if(/^body|html$/i.test(aJ[0].nodeName)){return}}aG=aw();aK=aG+v;if(s<aG||aL){aM=s-au.verticalGutter}else{if(s+aH>aK){aM=s-v+aH+au.verticalGutter}}if(aM){J(aM,aF)}}function ay(){return -V.position().left}function aw(){return -V.position().top}function ad(){aj.unbind(Z).bind(Z,function(aI,aJ,aH,aF){var aG=X,s=H;T(X+aH*au.mouseWheelSpeed,false);S(H-aF*au.mouseWheelSpeed,false);return aG==X&&s==H})}function n(){aj.unbind(Z)}function ax(){return false}function I(){V.unbind("focusin.jsp").bind("focusin.jsp",function(s){if(s.target===V[0]){return}Y(s.target,false)})}function D(){V.unbind("focusin.jsp")}function P(){var aF,s;C.attr("tabindex",0).unbind("keydown.jsp").bind("keydown.jsp",function(aJ){if(aJ.target!==C[0]){return}var aH=X,aG=H,aI=aF?2:16;switch(aJ.keyCode){case 40:S(H+aI,false);break;case 38:S(H-aI,false);break;case 34:case 32:J(aw()+Math.max(32,v)-16);break;case 33:J(aw()-v+16);break;case 35:J(W-v);break;case 36:J(0);break;case 39:T(X+aI,false);break;case 37:T(X-aI,false);break}if(!(aH==X&&aG==H)){aF=true;clearTimeout(s);s=setTimeout(function(){aF=false},260);return false}});if(au.hideFocus){C.css("outline","none");if("hideFocus" in aj[0]){C.attr("hideFocus",true)}}else{C.css("outline","");if("hideFocus" in aj[0]){C.attr("hideFocus",false)}}}function O(){C.attr("tabindex","-1").removeAttr("tabindex").unbind("keydown.jsp")}function B(){if(location.hash&&location.hash.length>1){var aG,aF;try{aG=b(location.hash)}catch(s){return}if(aG.length&&V.find(aG)){if(aj.scrollTop()==0){aF=setInterval(function(){if(aj.scrollTop()>0){Y(location.hash,true);b(document).scrollTop(aj.position().top);clearInterval(aF)}},50)}else{Y(location.hash,true);b(document).scrollTop(aj.position().top)}}}}function af(){b("a.jspHijack").unbind("click.jsp-hijack").removeClass("jspHijack")}function m(){af();b("a[href^=#]").addClass("jspHijack").bind("click.jsp-hijack",function(){var s=this.href.split("#"),aF;if(s.length>1){aF=s[1];if(aF.length>0&&V.find("#"+aF).length>0){Y("#"+aF,true);return false}}})}b.extend(N,{reinitialise:function(aF){aF=b.extend({},aF,au);an(aF)},scrollToElement:function(aG,aF,s){Y(aG,aF,s)},scrollTo:function(aG,s,aF){K(aG,aF);J(s,aF)},scrollToX:function(aF,s){K(aF,s)},scrollToY:function(s,aF){J(s,aF)},scrollBy:function(aF,s,aG){N.scrollByX(aF,aG);N.scrollByY(s,aG)},scrollByX:function(s,aG){var aF=ay()+s,aH=aF/(Q-ah);T(aH*j,aG)},scrollByY:function(s,aG){var aF=aw()+s,aH=aF/(W-v);S(aH*i,aG)},animate:function(aF,aI,s,aH){var aG={};aG[aI]=s;aF.animate(aG,{duration:au.animateDuration,ease:au.animateEase,queue:false,step:aH})},getContentPositionX:function(){return ay()},getContentPositionY:function(){return aw()},getIsScrollableH:function(){return aB},getIsScrollableV:function(){return av},getContentPane:function(){return V},scrollToBottom:function(s){S(i,s)},hijackInternalLinks:function(){m()}})}f=b.extend({},b.fn.jScrollPane.defaults,f);var e;this.each(function(){var g=b(this),h=g.data("jsp");if(h){h.reinitialise(f)}else{h=new d(g,f);g.data("jsp",h)}e=e?e.add(g):g});return e};b.fn.jScrollPane.defaults={showArrows:false,maintainPosition:true,clickOnTrack:true,autoReinitialise:false,autoReinitialiseDelay:500,verticalDragMinHeight:0,verticalDragMaxHeight:99999,horizontalDragMinWidth:0,horizontalDragMaxWidth:99999,animateScroll:false,animateDuration:300,animateEase:"linear",hijackInternalLinks:false,verticalGutter:4,horizontalGutter:4,mouseWheelSpeed:10,arrowButtonSpeed:10,arrowRepeatFreq:100,arrowScrollOnHover:false,trackClickSpeed:30,trackClickRepeatFreq:100,verticalArrowPositions:"split",horizontalArrowPositions:"split",enableKeyboardNavigation:true,hideFocus:false}})(jQuery,this);
//]]>
</script>

<script>
$(document).ready(function() {
$('.scroll-pane').jScrollPane({showArrows: true});
});
</script>

Step 4. Now search for the following Tag

<body>

Step 5. Paste the Below code just below/after it

<div class='scroll-pane' id='blog-container'>

Step 6. Now search for </body> and above it paste the following code

</div>

Step 7. Hit the Save Template Button
That's it...

Tags: Beginner's Guide / Blogging Tips

How to Restore your Blogger Template from Backup

- 2 Comments

In our previous posts we discussed about How to Backup your Blogger Template and now if something unexpected happened and it effected your blog's appearance so, you don't have to worry about it because you already have a Backup of your Blogger Template. All you have to do now is just to restore your Blog to its previous condition by uploading your backup file. So, today we are going to share an article on How to Restore your Blogger Template from Backup.
Recommended for You :
How to Backup your Blogger Template

How to Restore your Blogger Template

Step 1. Log in to your Blogger Dashboard
Step 2. Select a Blog and Select Template option from the menu in Left Side

Step 3. And hit the Backup / Restore button which is in the top right corner of that page
Step 4. A popup will open and Click on the Browse button from that popup

Step 5. Select the Backup file and Hit the Upload button
Note : The file should be in XML format.
And Done !!

From Editors Desk

Now you can freely modify your template. If something goes wrong, just restore your template and Problem solved :)

Tags: Blogging Tips / Widgets

How to create a Sitemap/Table of Contents in Blogger

- 15 Comments

Table of Contents/Sitemap is a page that shows all the posts that are published on your blog in a separate page. As we know, that blog archive shows all the required data but not in a single page. This Table of Contents will make it easier for your readers to find that they are looking for. The gadget we are going to share with you today will help you to add a Table of Contents in a single page. This table of contents shows post titles with separated labels and a New! text with recently published posts.
A live demo of this gadget can be seen by Clicking Here

How to create a Sitemap/Table of Contents in Blogger

Step 1. Log in to your Blogger Dashboard
Step 2. Go to Pages >> New Page and select Blank Page from the List

Step 3. Click on HTML and Paste the following code in the HTML Box

<style>
p.labels a{color: #242424; text-transform: uppercase;font-size: 15px;}
a.post-titles {color: #0000FF;}
ol li{list-style-type:decimal;line-height:25px;}
</style>
<script>
//<![CDATA[
var postTitle=new Array();var postUrl=new Array();var postPublished=new Array();var postDate=new Array();var postLabels=new Array();var postRecent=new Array();var sortBy="titleasc";var tocLoaded=false;var numChars=250;var postFilter="";var numberfeed=0;function bloggersitemap(a){function b(){if("entry" in a.feed){var d=a.feed.entry.length;numberfeed=d;ii=0;for(var h=0;h<d;h++){var n=a.feed.entry[h];var e=n.title.$t;var m=n.published.$t.substring(0,10);var j;for(var g=0;g<n.link.length;g++){if(n.link[g].rel=="alternate"){j=n.link[g].href;break}}var o="";for(var g=0;g<n.link.length;g++){if(n.link[g].rel=="enclosure"){o=n.link[g].href;break}}var c="";if("category" in n){for(var g=0;g<n.category.length;g++){c=n.category[g].term;var f=c.lastIndexOf(";");if(f!=-1){c=c.substring(0,f)}postLabels[ii]=c;postTitle[ii]=e;postDate[ii]=m;postUrl[ii]=j;postPublished[ii]=o;if(h<10){postRecent[ii]=true}else{postRecent[ii]=false}ii=ii+1}}}}}b();sortBy="titleasc";sortPosts(sortBy);sortlabel();tocLoaded=true;displayToc2();document.write('</br><div class="sitemap-link"><a href="http://blogolect.blogspot.com/2014/01/create-sitemap-table-of-contents-in-blogger.html" style="font-size: 10px; text-decoration:none; color: #5146CD;">Grab This Widget</a></div>')}function filterPosts(a){scroll(0,0);postFilter=a;displayToc(postFilter)}function allPosts(){sortlabel();postFilter="";displayToc(postFilter)}function sortPosts(d){function c(e,g){var f=postTitle[e];postTitle[e]=postTitle[g];postTitle[g]=f;var f=postDate[e];postDate[e]=postDate[g];postDate[g]=f;var f=postUrl[e];postUrl[e]=postUrl[g];postUrl[g]=f;var f=postLabels[e];postLabels[e]=postLabels[g];postLabels[g]=f;var f=postPublished[e];postPublished[e]=postPublished[g];postPublished[g]=f;var f=postRecent[e];postRecent[e]=postRecent[g];postRecent[g]=f}for(var b=0;b<postTitle.length-1;b++){for(var a=b+1;a<postTitle.length;a++){if(d=="titleasc"){if(postTitle[b]>postTitle[a]){c(b,a)}}if(d=="titledesc"){if(postTitle[b]<postTitle[a]){c(b,a)}}if(d=="dateoldest"){if(postDate[b]>postDate[a]){c(b,a)}}if(d=="datenewest"){if(postDate[b]<postDate[a]){c(b,a)}}if(d=="orderlabel"){if(postLabels[b]>postLabels[a]){c(b,a)}}}}}function sortlabel(){sortBy="orderlabel";sortPosts(sortBy);var a=0;var b=0;while(b<postTitle.length){temp1=postLabels[b];firsti=a;do{a=a+1}while(postLabels[a]==temp1);b=a;sortPosts2(firsti,a);if(b>postTitle.length){break}}}function sortPosts2(d,c){function e(f,h){var g=postTitle[f];postTitle[f]=postTitle[h];postTitle[h]=g;var g=postDate[f];postDate[f]=postDate[h];postDate[h]=g;var g=postUrl[f];postUrl[f]=postUrl[h];postUrl[h]=g;var g=postLabels[f];postLabels[f]=postLabels[h];postLabels[h]=g;var g=postPublished[f];postPublished[f]=postPublished[h];postPublished[h]=g;var g=postRecent[f];postRecent[f]=postRecent[h];postRecent[h]=g}for(var b=d;b<c-1;b++){for(var a=b+1;a<c;a++){if(postTitle[b]>postTitle[a]){e(b,a)}}}}function displayToc(a){var l=0;var h="";var e="Post Title";var m="Click to sort by title";var d="Date";var k="Click to sort by date";var c="Category";var j="";if(sortBy=="titleasc"){m+=" (descending)";k+=" (newest first)"}if(sortBy=="titledesc"){m+=" (ascending)";k+=" (newest first)"}if(sortBy=="dateoldest"){m+=" (ascending)";k+=" (newest first)"}if(sortBy=="datenewest"){m+=" (ascending)";k+=" (oldest first)"}if(postFilter!=""){j="Click to view all"}h+="<table>";h+="<tr>";h+='<td class="header1">';h+='<a href="javascript:toggleTitleSort();" title="'+m+'">'+e+"</a>";h+="</td>";h+='<td class="header2">';h+='<a href="javascript:toggleDateSort();" title="'+k+'">'+d+"</a>";h+="</td>";h+='<td class="header3">';h+='<a href="javascript:allPosts();" title="'+j+'">'+c+"</a>";h+="</td>";h+='<td class="header4">';h+="Read all";h+="</td>";h+="</tr>";for(var g=0;g<postTitle.length;g++){if(a==""){h+='<tr><td class="entry1"><a href="'+postUrl[g]+'">'+postTitle[g]+'</a></td><td class="entry2">'+postDate[g]+'</td><td class="entry3">'+postLabels[g]+'</td><td class="entry4"><a href="'+postPublished[g]+'">Read</a></td></tr>';l++}else{z=postLabels[g].lastIndexOf(a);if(z!=-1){h+='<tr><td class="entry1"><a href="'+postUrl[g]+'">'+postTitle[g]+'</a></td><td class="entry2">'+postDate[g]+'</td><td class="entry3">'+postLabels[g]+'</td><td class="entry4"><a href="'+postPublished[g]+'">Read</a></td></tr>';l++}}}h+="</table>";if(l==postTitle.length){var f='<span class="toc-note">Show All '+postTitle.length+" Posts<br/></span>"}else{var f='<span class="toc-note">Show '+l+" posts by category '";f+=postFilter+"' the "+postTitle.length+" Total Posts<br/></span>"}var b=document.getElementById("toc");b.innerHTML=f+h}function displayToc2(){var a=0;var b=0;while(b<postTitle.length){temp1=postLabels[b];document.write("<p/>");document.write('<p class="labels"><a href="/search/label/'+temp1+'">'+temp1+"</a></p><ol>");firsti=a;do{document.write("<li>");document.write('<a class="post-titles" href="'+postUrl[a]+'">'+postTitle[a]+"</a>");if(postRecent[a]==true){document.write(' - <strong><span style="color: rgb(255, 0, 0);">New!</span></strong>')}document.write("</li>");a=a+1}while(postLabels[a]==temp1);b=a;document.write("</ol>");sortPosts2(firsti,a);if(b>postTitle.length){break}}}function toggleTitleSort(){if(sortBy=="titleasc"){sortBy="titledesc"}else{sortBy="titleasc"}sortPosts(sortBy);displayToc(postFilter)}function toggleDateSort(){if(sortBy=="datenewest"){sortBy="dateoldest"}else{sortBy="datenewest"}sortPosts(sortBy);displayToc(postFilter)}function showToc(){if(tocLoaded){displayToc(postFilter);var a=document.getElementById("toclink")}else{alert("Just wait... TOC is loading")}}function hideToc(){var a=document.getElementById("toc");a.innerHTML="";var b=document.getElementById("toclink");b.innerHTML='<a href="#" onclick="scroll(0,0); showToc(); Effect.toggle(\'toc-result\',\'blind\');">?? Display Table of Contents</a> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ4zAr2YbaBsVIMrvq4n_LHhChpyW-8DcoPVwXTj7sKK8xLb0dRHVl0n6sVomueVUtuxlKn7NCydo8WJe1iZIEaA_dlh6W38kW14dWSXUQ0TOFHerPKc15wOI6TC0AZ0jpZQn9NM-vmpo6/s1600/new_icon.gif"/>'}function looptemp2(){for(var a=0;a<numberfeed;a++){document.write("<br>");document.write('Post Link : <a href="'+postUrl[a]+'">'+postTitle[a]+"</a><br>");document.write('Read all : <a href="'+postPublished[a]+'">'+postTitle[a]+"</a><br>");document.write("<br>")}};
//]]>
</script>
<script src="http://blogolect.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=bloggersitemap"></script>

Replace blogolect.blogspot.com with your Blog/website URL address
Replace #242424 and 15px to change the font size and color of labels

Step 4. Hit the Publish Button
And you're done
Feel Free to Ask.
For any questions or suggestions, leave a comment.

Subscribe to: Posts ( Atom )

Don't Miss

How to Add Alexa Ranking Widget to Blogger

From Editors Desk

How to Add Spinning/Rotating Effect to Images

How to Use this Effect on Images

From Editors Desk

How to Add Zoom Effect to Images

How to Use this Effect on Images

From Editors Desk

Reasons and Basics

Learning Stage

SEO Tips

Icons and Images

Widgets

Blog Design

How to Customize Labels Cloud widget

How to Customize Labels Cloud widget

1- Emailmeform

2- Kontactr

3- Freecontactform

4- Foxyform

5- Rushforms

6- 123contactform

7- FormLogix

From Editors Desk

Creating a Magazine Style with Post Summaries and Thumbnails

How to Backup your Blogger Template

From Editors Desk

Blogger Free to Use

Template Customization

Thousands of Free Professional Templates

Blogger Widgets

Make Money

Custom Domain

How to Customize the Scroll Bar with JScrollPane

How to Restore your Blogger Template

From Editors Desk

How to create a Sitemap/Table of Contents in Blogger