Stylish Number Page Navigation for your Blog

In blogger by default has Older and Newer post but not any Number Page navigation. That's why those site containing many post visitors can't visit the all post  from first to last. So in this circumstances page navigation plays a significant role to visit more page. Visitors also feel comfortable to surf the blog site.

So I am introducing Java Script based stylish Number page navigation. This is round style with Hover effect that will help to spice up your blog. To Install this Number page navigation follow the following steps.

Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Now click on -> Template -> Edit HTML

Step 3 Now Find this code ]]></b:skin> by pressing Ctrl+F

Step 4 Paste the below code  Before/above ]]></b:skin>

<!--  Stylish Pagination By http://bloggerinformation772.blogspot.com BEGIN -->.blog-pager,#blog-pager{font-family:"Times New Roman", Times, serif;font-weight:normal;font-size:12px;width:700px;padding:17px;} .showpageNum a,.showpage a {background:black; color:#FFF; margin-right:.6em;text-decoration:none;font-size:15px;font-style:italic;line-height:0;text-align:center;padding:12px 18px 12px;-moz-border-radius:36px;-webkit-border-radius:36px;border-radius:36px;} .showpageNum a:hover,.showpage a:hover {background:orange; color:#FFF; margin-right:.6em;text-decoration:none;font-size:15px;font-style:italic;line-height:0;text-align:center;padding:12px 18px 12px;-moz-border-radius:36px;-webkit-border-radius:36px;border-radius:36px;}.showpageOf{margin:0 8px 0 0;font-family:'Coming Soon', cursive;text-decoration:none;font-size:100%;}.showpagePoint {background:black; color:#FFF; margin-right:.6em;text-decoration:none;font-size:15px;font-style:italic;line-height:0;text-align:center;padding:12px 18px 12px;-moz-border-radius:36px;-webkit-border-radius:36px;border-radius:36px;}<!--  Stylish Pagination By http://bloggerinformation772.blogspot.com END -->

Step 5 Now Find this code  by using Ctrl+F </body>

Step 6 And Paste the below code Before/Above </body> 

<script type='text/javascript'>;var home_page=&#39;/&#39;;var urlactivepage=location.href;var postperpage=2;var numshowpage=4;var upPageWord =&#39;Prev&#39;;var downPageWord =&#39;Next&#39;;</script><script src='http://bloggerspiceproject.googlecode.com/files/pagenaviii.js' type='text/javascript'/> 

Customization

Find var postperpage=2; and change the 2 to show post number per page.

and Find   var numshowpage=4;   to show how many page navigation you will show per page. Change according to your desire.

Step 7 Now save your template and check your blog for beautiful Number Page Navigation.

Read More

Related Posts Widget for Blogger with Thumbnails 2014

Displaying the links to related posts along with a thumbnail of the corresponding post will help you increase the page views/user .Users will be tempted to go for the related posts when they are presented attractively with thumbnails.

This is another first release from me.This one also uses the media thumbnails generated by blogger for each post.

For displaying the thumbnails,this widget will use the images uploaded for the post using the blogger image uploader(from the post editor) [Update - Now supports external images also.]

Related Posts Widget with Thumbnails for Blogger

Here are the detailed steps to install the related posts widget for blogger with thumbnails

1.First of all Login to your blogger dashboard and navigate to Layout > Edit HTML and check the "Expand Widget Templates" check box

2.Now look for

</head>

and replace it with

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts  a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJMWw_1NkwIZRAEhAhXTIXki5T9qquCb3prf2ccx-GYM4Vc4adNuEEGHSNOld0pxX5t0dFYv7Jedksd9RyaBnlxDfc1oA1z6G81yRYKCXONQkFMPZOKJTw7ZAxx0JSHpXBdmlER1sm2aU/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>

3.Now Find

<div class='post-footer-line post-footer-line-1'>

If you cant find it then try finding this one

<p class='post-footer-line post-footer-line-1'>

Now immediately after any of these lines(whichever you could find) place this code snippet

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/summary/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if> 
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

4.You can adjust the maximum number of related posts being displayed by editing this line in the code.

var maxresults=5;

you will also have to edit the posts per label(it should ideally be one more that maxresults)

max-results=6

5.To edit the title of the widget you can change this line of code

var relatedpoststitle="Related Posts";

6.To change the default thumbnail, you can edit this line of code

var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJMWw_1NkwIZRAEhAhXTIXki5T9qquCb3prf2ccx-GYM4Vc4adNuEEGHSNOld0pxX5t0dFYv7Jedksd9RyaBnlxDfc1oA1z6G81yRYKCXONQkFMPZOKJTw7ZAxx0JSHpXBdmlER1sm2aU/s400/noimage.png";

7.To Change the Colour of the Splitter Line , edit

var splittercolor="#d4eaf2";

To change the other colours and all you will have to modify the CSS

If you fall into troubles implementing this,don't panic.. :) .just leave me a comment here and i will help you out. If you like to give me any suggestions on how to improve this widget,then it would be really great.

How to display the related posts on every page and not only on the post pages?

Just remove the two lines starting with <!-- remove --> from both step 3 and step 2.

that is lines

<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'> 

and

<!-- remove --></b:if>

Update 29/03/2012 : If the script is not working for you then please change http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js to http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js

Sorry for the trouble :-)

Read More

You might heard about feedburner sitemap. That help you to generate and update sitemap for your blog and also help you to create newsletter for you readers. The sitemap also help you to submit it to webmaster tools so that your every post can crawl by search engines. This also bring traffic if your post crawl to search engine. This increase your organic traffic. Ultimately you know what sitemap can do for you. Sitemap is also show the link list of your each and every post. Visitor can easily locate the location of the topic they are searching for.

So lets start to learn how you can create custom sitemap on your blogger blog.

Add Custom Sitemap to Blogger Blog

1. Login to Blogger blog.
2. Go to Page and click on create new page.

1. Now add the title "Sitemap" or whatever you want to write.
2. Click on "HTML" and copy paste below code.
3. Change "bloggingtuition.org" with your blog domain name.

<style>

 

#toc{

width:99%;

margin:5px auto;

border:1px solid #2D96DF;

-webkit-box-shadow:4px 4px 8px 2px rgbaundefined0,0,0, 0.2);

-moz-box-shadow:4px 4px 8px 2px rgbaundefined0,0,0, 0.2);

box-shadow:4px 4px 8px 2px rgbaundefined0,0,0, 0.2);

}

.labl{

color:#FF5F00;

font-weight:bold;

margin:0 -5px;

padding:1px 0 2px 11px;

background:-moz-linear-gradientundefinedright,#C2EAFE 0%,#055A85 40%);

background:-webkit-gradientundefinedlinear,left 10,right 80,color-stopundefined0.20,#055A85),color-stopundefined1,#C2EAFE));

border:1px solid #2D96DF;

border-radius:4px;-moz-border-radius:4px;

-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;

-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;

}

.labl a{

color:#fff;

}

.labl:first-letter{t

ext-transform:uppercase;

}

.new{

color:#FF5F00;

font-weight:bold;

font-style:italic;

}

.postname{

font-weight:normal;

background:-moz-linear-gradientundefinedright,#C2EAFE 0%,#fff 40%);

background:-webkit-gradientundefinedlinear,left 80,right 10,color-stopundefined0.60,#fff),color-stopundefined1,#C2EAFE));

}

.postname li{

border-bottom: #ddd 1px dotted;

margin-right:5px

}

#sidebar-wrapper, #midsidebar-wrapper, .gapad2, .blog-pager, .post-header-line-1, .post-footer , #rsidebar-wrapper ,.rolapa,.post h2{ display:none !important;} #main-wrapper { width:98%!important;} .post { width:98%!important; }

 

</style>

 

 

<div id="toc">

<script src="http://bloggerprofessionals.googlecode.com/files/MyTOC.js" type="text/javascript"></script>

<script src="http://bloggerinformation772.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">

</script></div>

 

</div></p>

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

</div>

<div class='rolapa'></div>

 

• Replace this code  http://bloggerinformation772.blogspot.com  And put you are website

   

  • Any probem Comment me

Read More

It s good to have CSS drop down menu rather than using Jquery menu on your blog. Jquery menu slow down your blog loading time. So today I am sharing pure CSS and HTML drop down menu for your blogger blog. So now you do not have to run after scripts like jquery when you have CSS and HTML with many more customization. Many blogger use this kind drop down menu and a drop down menu also consumes less space on your menu bar. So lets start to add horizontal drop down menu on your blog.

XZGT3MH5DX4U

How to Drop Down Menu?

Go to blogger dashboard.

Click on "Template" >> "Edit HTML" >> backup your template.

Now find ]]></b:skin> and paste the following code just above it.

/* CSS3 Drop Down Menu By BloggingTuition.org */

#nav {

 float: left;

 font: bold 12px Arial, Helvetica, Sans-serif;

 border: 1px solid #121314;

 border-top: 1px solid #2b2e30;

 overflow: hidden;

 width: 100%;

 background: #3C4042;

 background: -webkit-gradientundefined linear, left bottom, left top, color-stopundefined0.09, rgbundefined59,63,65)), color-stopundefined0.55, rgbundefined72,76,77)), color-stopundefined0.78, rgbundefined75,77,77)) );

 background: -moz-linear-gradientundefined center bottom, rgbundefined59,63,65) 9%, rgbundefined72,76,77) 55%, rgbundefined75,77,77) 78% );

 background: -o-linear-gradientundefined center bottom, rgbundefined59,63,65) 9%, rgbundefined72,76,77) 55%, rgbundefined75,77,77) 78% );

 box-shadow: 0 1px 0 rgbaundefined255, 255, 255, 0.1) inset, 0 0 5px rgbaundefined0, 0, 0, 0.1) inset;

}

#nav ul {

 margin: 0;

 padding: 0;

 list-style: none;

}

#nav ul li {

 float: left;

}

#nav ul li a {

 float: left;

 color: #d4d4d4;

 padding: 10px 20px;

 text-decoration: none;

 background: #3C4042;

 background: -webkit-gradientundefined linear, left bottom, left top, color-stopundefined0.09, rgbundefined59,63,65)), color-stopundefined0.55, rgbundefined72,76,77)), color-stopundefined0.78, rgbundefined75,77,77)) );

 background: -moz-linear-gradientundefined center bottom, rgbundefined59,63,65) 9%, rgbundefined72,76,77) 55%, rgbundefined75,77,77) 78% );

 background: -o-linear-gradientundefined center bottom, rgbundefined59,63,65) 9%, rgbundefined72,76,77) 55%, rgbundefined75,77,77) 78% );

 box-shadow: 0 1px 0 rgbaundefined255, 255, 255, 0.1) inset, 0 0 5px rgbaundefined0, 0, 0, 0.1) inset;

 border-left: 1px solid rgbaundefined255, 255, 255, 0.05);

 border-right: 1px solid rgbaundefined0,0,0,0.2);

 text-shadow: 0 -1px 1px rgbaundefined0, 0, 0, 0.6);

}

#nav ul li a:hover,

#nav ul li:hover > a {

 color: #252525;

 background: #3C4042;

 background: -webkit-gradientundefined linear, left bottom, left top, color-stopundefined0.09, rgbundefined77,79,79)), color-stopundefined0.55, rgbundefined67,70,71)), color-stopundefined0.78, rgbundefined69,70,71)) );

 background: -moz-linear-gradientundefined center bottom, rgbundefined77,79,79) 9%, rgbundefined67,70,71) 55%, rgbundefined69,70,71) 78% );

 background: -o-linear-gradientundefined center bottom, rgbundefined77,79,79) 9%, rgbundefined67,70,71) 55%, rgbundefined69,70,71) 78% );

 text-shadow: 0 1px 0 rgbaundefined255, 255, 255, 0.2), 0 -1px #000;

}

#nav li ul a:hover,

#nav ul li li:hover > a {

 color: #2c2c2c;

 background: #5C9ACD;

 background: -webkit-gradientundefined linear, left bottom, left top, color-stopundefined0.17, rgbundefined61,111,177)), color-stopundefined0.51, rgbundefined80,136,199)), color-stopundefined1, rgbundefined92,154,205)) );

 background: -moz-linear-gradientundefined center bottom, rgbundefined61,111,177) 17%, rgbundefined80,136,199) 51%, rgbundefined92,154,205) 100% );

 background: -o-linear-gradientundefined center bottom, rgbundefined61,111,177) 17%, rgbundefined80,136,199) 51%, rgbundefined92,154,205) 100% );

 border-bottom: 1px solid rgbaundefined0,0,0,0.6);

 border-top: 1px solid #7BAED9;

 text-shadow: 0 1px rgbaundefined255, 255, 255, 0.3);

}

#nav li ul {

 background: #3C4042;

 background-image: -webkit-gradientundefined linear, left bottom, left top, color-stopundefined0.09, rgbundefined77,79,79)), color-stopundefined0.55, rgbundefined67,70,71)), color-stopundefined0.78, rgbundefined69,70,71)) );

 background-image: -moz-linear-gradientundefined center bottom, rgbundefined77,79,79) 9%, rgbundefined67,70,71) 55%, rgbundefined69,70,71) 78% );

 background-image: -o-linear-gradientundefined center bottom, rgbundefined77,79,79) 9%, rgbundefined67,70,71) 55%, rgbundefined69,70,71) 78% );

 left: -999em;

 margin: 35px 0 0;

 position: absolute;

 width: 160px;

 z-index: 9999;

 box-shadow: 0 0 15px rgbaundefined0, 0, 0, 0.4) inset;

 -moz-box-shadow: 0 0 15px rgbaundefined0, 0, 0, 0.4) inset;

 -webkit-box-shadow: 0 0 15px rgbaundefined0, 0, 0, 0.4) inset;

 border: 1px solid rgbaundefined0, 0, 0, 0.5);

}

#nav li:hover ul {

 left: auto;

}

#nav li ul a {

 background: none;

 border: 0 none;

 margin-right: 0;

 width: 120px;

 box-shadow: none;

 -moz-box-shadow: none;

 -webkit-box-shadow: none;

 border-bottom: 1px solid transparent;

 border-top: 1px solid transparent;

}

.nav ul li ul {

    position: absolute;

    left: 0;

    display: none;

    visibility: hidden;

}

.nav ul li ul li {

    display: list-item;

    float: none;

}

.nav ul li ul li ul {

    top: 0;

}

.nav ul li ul li a {

    font: normal 13px Verdana;

    width: 160px;

    padding: 5px;

    margin: 0;

    border-top-width: 0;

    border-bottom: 1px solid gray;

}

#nav li li ul {

 margin: -1px 0 0 160px;

 visibility: hidden;

}

#nav li li:hover ul {

 visibility: visible;

}

/* CSS3 Drop Down Menu By BloggingTuition.org */<span style="font-family: Times New Roman;"><span style="white-space: normal;">

</span></span>

Now click on "Save"



After adding CSS part on your blog now move to HTML part to add in your blog.

Click on "Layout" >> "Add a Gadget".

Now choose "HTML/Javascript" and paste following code in content box, do not write anything in title.

<div id="nav">

 <ul>

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

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

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

  <li><a href="#">Tutorials</a></li>

  <li><a href="#">Sitemap</a></li>

  <li><a href="#">Services</a>

  <ul>

   <li><a href="#">Sub Page #1</a></li>

   <li><a href="#">Sub Page #2</a></li>

   <li><a href="#">Sub Page #3</a></li>

   <li><a href="#">Sub Page #4</a></li>

   <li><a href="#">Sub Page #5</a></li>

  </ul>

  </li>

  <li><a href="#">Create This</a></li>

 </ul>

</div><span style="font-family: Times New Roman;"><span style="white-space: normal;">

</span></span>

 After adding both part now replace # with your menu URL and replace menu names with your menu titles.

Read More