TUTORIAL IT

•  
• First, Goto your template
• Click on  the gear icon for mobile settings.

How to Make Ads and Gadgets Appear on Mobile Version of Blogger

• Next, goto 'layout'.

For New Gadgets

1. Click on 'add gadget'. 
2. Select 'html/javascript', paste your code, either the ad code you generated or a blogger widget/gadget code.
3. Save the gadget.
4. Still in the layout section of your blog,  edit the gadget you just created.
5. View the address bar and note the 'html number', which is the widget ID of your new gadget/widget.
6. Next, goto your blogger 'Template', click on 'Edit html'.
7. Select 'Jump to widget' and click on the html number you noted previously (that is, if it was html12 or html8).
8. Add this line of code when the widget/gadget opens in your template mobile='yes', just after where "locked false" appears. Or, If you want the widget/gadget to appear only on the mobile version of your blog and not on the web version, then add this instead mobile='only'.
9. Save your template. 

For Existing Gadgets

• Click on  'Edit' option for the gadget you want display on the mobile version of your blog.
• View the address bar and note the 'html number', which is the widget ID of your new gadget/widget. 
• Next, goto your blogger 'Template', click on 'Edit html'.
• Select 'Jump to widget' and click on the html number you noted previously (that is, if it was html5 or html8).
• Add this line of code when the widget/gadget opens in your template mobile='yes', just after where "locked false" appears. Or, If you want the widget/gadget to appear only on the mobile version of your blog and not on the web version, then add this instead mobile='only'.
• Save your template.

• Designer Blogs

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

PLACE YOUR AD CODE HERE

</b:if>

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

    <div style='float:left; margin:10px;'>  // type this line manually, dont copy and paste

    PLACE YOUR AD CODE HERE

    </div>

    </b:if>

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

    <div align='center'> 

    PLACE YOUR AD CODE HERE

    </div>

    </b:if>

Guidelines on how to add numbered page navigation widget in blogger blogs are given in this post. With the default page navigation in blogger, one cannot jump to a specific page without going through tags like 'newer post', 'older post' etc. Since there is no numbering of pages, it makes it hard to know the exact number of pages on the blog. I'll say it's one of the best blogger widgets because including it in your blog will provide a better navigation for your readers, where they can skip multiple pages and return to them. Also, you can use it to add an extra design to your blog. Follow the steps below to add the numbered page navigation widget in your blog.

Also Read: How to Add 'Link to This Post Widget' For Blogger

How to Add Read More Attribution Links to Copied Text in Blogger 
Square Popular Posts Blogger Widget with Rotating Effect
Sliding Recent Post Widget For Blogger

How to Add Numbered Page Navigation In Blogger

There are two methods listed in this post on how to add the widget in your blogger blog.  You can use any of the methods.

Method 1

• From your blogger dashboard,
•  Goto 'Layout'.
• Click on 'Add a gadget'.
• Select 'Html/Javascript'.
• Copy the code below and paste inside the text field. (Don't name the gadget)

Style 1

 

<style type='text/css'>
#blog-pager{height: 28px;
    padding: 10px 0 0;
overflow:hidden;
text-align:center;
}
.showpageArea a {text-decoration:underline;
font-size: 16px;
       text-align: center;}
.showpageNum a {font-size:16px;text-decoration:none;border: 1px solid #cccccc;margin:0 5px;padding:5px;}
.showpageNum a:hover {border: 1px solid #cccccc;background-color:#cccccc;}

.showpagePoint {font-size:16px;text-decoration:none;border: 1px solid #cccccc;background: #216FD9;margin:0 5px;padding:5px;color:#ffffff;}

.showpageOf {text-decoration:none;padding:5px;margin: 0 5px;}
.showpage a {text-decoration:none;border: 1px solid #cccccc;padding:5px;}
.showpage a:hover {text-decoration:none;background: #cccccc;}
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#333333;}</style>
<script style='text/javascript'>var pageCount=6; 
var displayPageNum=5;var upPageWord="Previous";var downPageWord="Next";</script><a href="http://informationtutorial15.blogspot.com" style="font-size:0pt">Blogger Widgets</a>
<script style='text/javascript' src='http://netoopscodes.googlecode.com/svn/netoops-page-nav-v2.js'></script> 

<style type="text/css">#blog-pager{font-size:normal}.showpageArea{font-family:verdana,arial,helvetica;color:#000;font-size:11px;margin:10px}.showpageArea a{color:#000;text-shadow:0 1px 2px #fff;font-weight:normal}.showpageNum a{padding:3px 8px;margin:0 4px;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;background:#b1a7c3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjePefNyWUFsyX-PRDPcvlytf1chfzxdu3-Omm9bEu2E9iE5cuTZ6kuRWsVxkpz0mI0VE2pu891rsSkgkKXMWlo3QdO5EhAAIqhcvWgCeTG6zXAwW4D5VVDRZW36USZDwYRmfZp3k_ngYDr/s1600/w2b_pagenav2.png) 0 -60px repeat-x}.showpageNum a:hover{border:1px solid #888;background:#f7b36a url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjePefNyWUFsyX-PRDPcvlytf1chfzxdu3-Omm9bEu2E9iE5cuTZ6kuRWsVxkpz0mI0VE2pu891rsSkgkKXMWlo3QdO5EhAAIqhcvWgCeTG6zXAwW4D5VVDRZW36USZDwYRmfZp3k_ngYDr/s1600/w2b_pagenav2.png) 0 -30px repeat-x}.showpageOf{margin:0 4px 0 0}.showpagePoint{color:#444;text-shadow:0 1px 2px #333;padding:3px 8px;margin:2px;font-weight:700;-webkit-border-radius:3px;-moz-border-radius:3px;border:1px solid #999;background:#f7d5b0 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjePefNyWUFsyX-PRDPcvlytf1chfzxdu3-Omm9bEu2E9iE5cuTZ6kuRWsVxkpz0mI0VE2pu891rsSkgkKXMWlo3QdO5EhAAIqhcvWgCeTG6zXAwW4D5VVDRZW36USZDwYRmfZp3k_ngYDr/s1600/w2b_pagenav2.png) 0 0 repeat-x;text-decoration:none} </style> <a href="http://informationtutorial15.blogspot.com/" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://informationtutorial15.blogspot.com/" target="_blank" title="Latest Tips And Tricks"><img src="https://bitly.com/24workpng1" alt="Latest Tips And Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://informationtutorial15.blogspot.com/" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script style='text/javascript'>
var postperpage=5;
var numshowpage=6;
var upPageWord="Prev";
var downPageWord="Next";
var home_page="/";
var urlactivepage=location.href;
</script>
<script style='text/javascript' src='http://24work-new.googlecode.com/svn/trunk/24work-blogspot/page-navigation/new-code/0-test-p-n-01_00-ycode.js'></script>

• Save the gadget.
• Move the gadget you just created below 'Blog posts'. (Refer to image below)
• Click on 'save arrangement'.

Note: You can edit the number of post to be displayed on each page by changing pageCount=6 to your desired number. The numbered page navigation has been added to your blog. Below are other styles of the page navigation widget that you might fancy (If you used this method in adding the widget to your blog, Ensure you remove/delete the code above in your blog's layout if you'll rather use any of the ones below).

Also Read: jQuery Background Slideshow Plugin For Blogger
                   Recommended Post Slide Out Widget For Blogger
                   Add Different Background Image In Specific Blogger Page

Method 2

• Goto your blogger template
• Click on 'Edit Html'.
• Use Ctrl+F keys,Search for this tag ]]></b:skin>
• Copy the codes for any of your preferred styles below.
• Paste it 'above' ]]></b:skin>

Style 1 

#blog-pager{clear:both;margin:30px auto; padding: 7px; text-align:center;font-size: 11px;background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #000000),color-stop(1, #292929));background-image: -o-linear-gradient(top, #000000 0%, #292929 100%);background-image: -moz-linear-gradient(top, #000000 0%, #292929 100%);background-image: -webkit-linear-gradient(top, #000000 0%, #292929 100%);background-image: -ms-linear-gradient(top, #000000 0%, #292929 100%);background-image: linear-gradient(to top, #000000 0%, #292929 100%); padding: 6px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 3px 10px;margin-right:5px; color: #fff;}
.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #59A2CF),color-stop(1, #D9EAFF));background-image: -o-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -moz-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -webkit-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -ms-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: linear-gradient(to top, #59A2CF 0%, #D9EAFF 100%);text-decoration: none;color: #000;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.showpageOf{display:none!important}.blog-pager-older-link, .home-link, .blog-pager-newer-link {background: transparent;}
a.blog-pager-older-link, a.home-link, a.blog-pager-newer-link {color: #fff;}
#blog-pager .pages{border:none;background: none;}

Style 2

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #3E5801; background-color:#E0EDC1;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#FEF6DF;text-decoration:none;color: #E16800;}
#blog-pager .pagecurrent{font-weight:bold;color: #D25E71;background:#FFDEDF;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;}

Style 3

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #AD0B00; background-color:#FAB001;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#DB4920;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;}

Style 4

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 14px;padding: 5px 12px;margin-right:5px; color: #666; background-color:#eee;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#359BED;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#359BED;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;}

• After adding the code for your preferred style, search for </body> inside your template.
• Copy the code below and paste 'above' </body>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
  /*<![CDATA[*/
    var perPage=7;
    var numPages=6;
    var firstText ='First';
    var lastText ='Last';
    var prevText ='« Previous';
    var nextText ='Next »';
    var urlactivepage=location.href;
    var home_page="/";
  /*]]>*/
</script>
  <script src="http://helplogger.googlecode.com/svn/trunk/page-navigation2.js"/>
</b:if>
</b:if>

• Search for  expr:href='data:label.url'  in your template.

• Replace it with expr:href='data:label.url + "?&amp;max-results=7"'
• Save your template.

<!----Start copy here---->
<style type="text/css" media="screen">
#PopularPosts1 {
overflow:hidden;
margin-top:5px;
width:100%;
padding:0px 0px;
height:310px;
}
#PopularPosts1 ul {
width:310px; 
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:10px 0px 0px 10px;
}
#PopularPosts1 li {
 width:290px; 
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:80px;
overflow: hidden;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXU2nO9Nw7A_q_D73z7ijQtcOPzrY-t2qV1MpFBLqhlzsdhycQCgVPiN8Qlr78YDEJyejiJ6UBVZGyHvtE4Q0EBXxmutttYtmR_26JQs73ItxV4PCIH-kCzaX812qLLHCjzhgjL_k7BnE/s400/popular+posts.jpg) repeat-x;
border:1px solid #ddd;
}
#PopularPosts1 li .item-title {
 
    font-size:1em;
    margin-bottom:0.5em;
}
#PopularPosts1 li .item-title a {
text-decoration:none;
color:#7CA2C4;
font:bold 12px verdana; 
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#PopularPosts1 li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:2px solid #7CA2C4; 
}
#PopularPosts1 li .item-snippet {
  overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#289728;
padding:0px 0px;
margin:0px 0px;
}
#PopularPosts1 .item-snippet a,
#PopularPosts1 .item-snippet a:visited {
    color:#3E4548;
    text-decoration: none;
}
#PopularPosts1 .spyWrapper {
    height: 100%;
    overflow: hidden;
    position: relative;
}
#PopularPosts1 {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
.tags span,
.tags a {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
}
a img {
    border: 0;
}
-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
    $('.popular-posts ul').simpleSpy();
});
</script>
<script src="http://accordion-for-blogger.googlecode.com/svn/trunk/simplespy.js" type="text/javascript"></script><div style="float:   left;">
<a href="http://informationtutorial15.blogspot.com/2015/11/scrolling-popular-post-gadget-for.html" target="_blank"><sup> GrabThis!! </sup></a></div>
<!----Stop copy here---->