How to Change The Old Posts Into a Number

 CSS : paste above </b:skin> 

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
/* Page Navigation widget by http://www.bloggerspice.com */
#blog-pager{background:#fff;clear:both;width:auto;padding:22px;line-height:normal;position:relative;display:block;text-align:left;overflow:visible;margin:20px 0 5px 0}
.showpage a,.showpageNum a,.showpagePoint,.showpageOf{position:relative;background:#fff;display:inline-block;font-family:'Arial', Helvetica,font-size:15px;color:rgba(0,0,0,.8);padding:5px 8px;margin:0 4px 0 0;border: 1px solid #F1F1F1;transition:all .3s}
.showpageOf{float:right;background:#FB9543;color:#fff;}
.showpageNum a:before{content:' ';position:absolute;top:0;bottom:0;left:0;right:0;box-shadow:inset 0 -2px 2px rgba(0,0,0,0.02);transition:box-shadow 0.5s}
.showpage a:hover,.showpageNum a:hover,.showpagePoint:hover{background:#FB9543;color:#FFFFFF;position:relative; border: 1px solid #FB9543;}
.showpagePoint{background:#FB9543;color:#fff;}
@media screen and (max-width:640px) {
#blog-pager {padding:12px;}
.showpage a,.showpageNum a,.showpagePoint,.showpageOf{margin:0 2px 2px 0;box-shadow:0 1px 2px 1px rgba(0,0,0,0.1);}}
@media screen and (max-width:320px) {
.showpage a,.showpageNum a,.showpagePoint,.showpageOf{padding:3px 6px}}
</style>
</b:if>
</b:if>






 JAVASCRIPT : paste above </body>

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<script type='text/javascript'>
/*<![CDATA[*/
var postperpage=6;
var numshowpage=3;
var upPageWord ='< Prev';
var downPageWord ='Next >';
var bspagenavi=location.href;
var home_page="/";
/*]]>*/
</script>
<script type='text/javascript'>
//<![CDATA[
function looppagenavi(a){var e=" ";numberleft=parseInt(numshowpage/2),numberleft==numshowpage-numberleft&&(numshowpage=2*numberleft+1),start=pagenumber-numberleft,start<1&&(start=1),maximum=parseInt(a/postperpage)+1,maximum-1==a/postperpage&&(maximum-=1),end=start+numshowpage-1,end>maximum&&(end=maximum),e+="<span class='showpageOf'>Page "+pagenumber+" of "+maximum+"</span>";var s=parseInt(pagenumber)-1;pagenumber>1&&(e+=2==pagenumber?"page"==type?'<span class="showpage"><a href="'+home_page+'">'+upPageWord+"</a></span>":'<span class="showpageNum"><a href="/search/label/'+lblname1+"?&max-results="+postperpage+'">'+upPageWord+"</a></span>":"page"==type?'<span class="showpageNum"><a href="#" onclick="redirectpage('+s+');return false">'+upPageWord+"</a></span>":'<span class="showpageNum"><a href="#" onclick="redirectlabel('+s+');return false">'+upPageWord+"</a></span>"),start>1&&(e+="page"==type?'<span class="showpageNum"><a href="'+home_page+'">1</a></span>':'<span class="showpageNum"><a href="/search/label/'+lblname1+"?&max-results="+postperpage+'">1</a></span>'),start>2&&(e+="...");for(var r=start;r<=end;r++)e+=pagenumber==r?'<span class="showpagePoint">'+r+"</span>":1==r?"page"==type?'<span class="showpageNum"><a href="'+home_page+'">1</a></span>':'<span class="showpageNum"><a href="/search/label/'+lblname1+"?&max-results="+postperpage+'">1</a></span>':"page"==type?'<span class="showpageNum"><a href="#" onclick="redirectpage('+r+');return false">'+r+"</a></span>":'<span class="showpageNum"><a href="#" onclick="redirectlabel('+r+');return false">'+r+"</a></span>";end<maximum-1&&(e+=""),end<maximum&&(e+="page"==type?'<span class="showpageNum"><a href="#" onclick="redirectpage('+maximum+');return false">'+maximum+"</a></span>":'<span class="showpageNum"><a href="#" onclick="redirectlabel('+maximum+');return false">'+maximum+"</a></span>");var n=parseInt(pagenumber)+1;pagenumber<maximum&&(e+="page"==type?'<span class="showpageNum"><a href="#" onclick="redirectpage('+n+');return false">'+downPageWord+"</a></span>":'<span class="showpageNum"><a href="#" onclick="redirectlabel('+n+');return false">'+downPageWord+"</a></span>");for(var t=document.getElementsByName("pageArea"),l=document.getElementById("blog-pager"),p=0;p<t.length;p++)t[p].innerHTML=e;t&&t.length>0&&(e=""),l&&(l.innerHTML=e)}function arithmetictotaldata(a){var e=a.feed,s=parseInt(e.openSearch$totalResults.$t,10);looppagenavi(s)}function pagenaviblogger(){var a=bspagenavi;-1!=a.indexOf("/search/label/")&&(lblname1=-1!=a.indexOf("?updated-max")?a.substring(a.indexOf("/search/label/")+14,a.indexOf("?updated-max")):a.substring(a.indexOf("/search/label/")+14,a.indexOf("?&max"))),-1==a.indexOf("?q=")&&-1==a.indexOf(".html")&&(-1==a.indexOf("/search/label/")?(type="page",pagenumber=-1!=bspagenavi.indexOf("#PageNo=")?bspagenavi.substring(bspagenavi.indexOf("#PageNo=")+8,bspagenavi.length):1,document.write('<script src="'+home_page+'feeds/posts/summary?max-results=1&alt=json-in-script&callback=arithmetictotaldata">')):(type="label",-1==a.indexOf("&max-results=")&&(postperpage=20),pagenumber=-1!=bspagenavi.indexOf("#PageNo=")?bspagenavi.substring(bspagenavi.indexOf("#PageNo=")+8,bspagenavi.length):1,document.write('<script src="'+home_page+"feeds/posts/summary/-/"+lblname1+'?alt=json-in-script&callback=arithmetictotaldata&max-results=1" >')))}function redirectpage(a){jsonstart=(a-1)*postperpage,nopage=a;var e=document.getElementsByTagName("head")[0],s=document.createElement("script");s.type="text/javascript",s.setAttribute("src",home_page+"feeds/posts/summary?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost"),e.appendChild(s)}function redirectlabel(a){jsonstart=(a-1)*postperpage,nopage=a;var e=document.getElementsByTagName("head")[0],s=document.createElement("script");s.type="text/javascript",s.setAttribute("src",home_page+"feeds/posts/summary/-/"+lblname1+"?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost"),e.appendChild(s)}function finddatepost(a){post=a.feed.entry[0];var e=post.published.$t.substring(0,19)+post.published.$t.substring(23,29),s=encodeURIComponent(e);if("page"==type)var r="/search?updated-max="+s+"&max-results="+postperpage+"#PageNo="+nopage;else var r="/search/label/"+lblname1+"?updated-max="+s+"&max-results="+postperpage+"#PageNo="+nopage;location.href=r}var nopage,type,pagenumber,lblname1;pagenaviblogger();
//]]>
</script>
</b:if>




looking for code like this

<!-- navigation --> <b:include name='nextprev'/>






and replace with code

<!-- navigation -->
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<b:include name='nextprev'/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<b:include name='nextprev'/>
<b:else/>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<!-- navigation -->
<b:include name='nextprev'/>
</b:if>
</b:if>
</b:if>



 DEMO : 
demo look at the front page

Sticky All SideBar

Paste the CSS code below before ]]></b:skin>

.column-right-inner { position: fixed; }



Paste this script before </body>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script> <script type="text/javascript"> $(function() { var offset = $(".column-right-inner").offset(); var topPadding = 15; $(window).scroll(function() { if ($(window).scrollTop() > offset.top) { $(".column-right-inner").stop().animate({ marginTop: $(window).scrollTop() - offset.top + topPadding }); } else { $(".column-right-inner").stop().animate({ marginTop: 0 }); }; }); }); </script>


if you want the left sidebar that will be made sticky to change:
 column-right-inner -> column-left-inner

DEMO : all Right sidebar on this site use the code as above,
Please click the title of the other menus to see the effect

Featured Posts Thumbnail

Paste On Layout Page - Add A Gadget - Html/JavaScripts

<center>
    <div id="headerbox">Featured Videos</div>
    <div id="featuredpostside"></div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
    <script src="https://sites.google.com/site/fordizoo/scripts/featurevideo.js" type="text/javascript"></script>
    <script type='text/javascript'>
    //<![CDATA[
    FeaturedPostSide({
    blogURL:"http://www.videopoh.blogspot.com",
    MaxPost:8,
    idcontaint:"#featuredpostside",
    ImageSize:200,
    interval:5000,
    autoplay:true,
    tagName:false
    });
    //]]>
    </script>
    <link href='http://fonts.googleapis.com/css?family=Oswald:100' rel='stylesheet' type='text/css'/>
    <style scoped="" type="text/css">
    /*
    Made by AllBloggerTricks.com with lot of hardwork please keep the comment intact
    */
    ul.abt-sidebar-slider * {
        -moz-box-sizing: border-box;
    }
    ul.abt-sidebar-slider {
        font: 5px Verdana,Geneva,sans-serif;
    }
    ul.abt-sidebar-slider, ul.abt-sidebar-slider li {
        list-style: none outside none;
        margin: 0;
        padding: 0;
        position: relative;
    }
    ul.abt-sidebar-slider {
        height: 450px;
        width: 100%;
    }
    ul.abt-sidebar-slider li {
        display: none;
        float: left;
        height: 24.5%;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 100%;
    }
    ul.abt-sidebar-slider li:nth-child(1), ul.abt-sidebar-slider li:nth-child(2), ul.abt-sidebar-slider li:nth-child(3), ul.abt-sidebar-slider li:nth-child(4) {
        display: block;
    }
    ul.abt-sidebar-slider li:nth-child(2) {
        left: 0;
        top: 50%;
    }
    ul.abt-sidebar-slider img {
        border: 0 none;
        height: 100%;
        width: 100%;
    }
    ul.abt-sidebar-slider .overlayx, ul.abt-sidebar-slider li {
        transition: all 0.4s ease-in-out 0s;
    }
    ul.abt-sidebar-slider li:nth-child(4) {
        left: 0;
        top: 75%;
        width: 100%;
    }
    ul.abt-sidebar-slider li:nth-child(3) {
        left: 0;
        top: 25%;
    }
    ul.abt-sidebar-slider .overlayx {
        background-color: rgba(0, 0, 0, 0.5);
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 2;
    }
    ul.abt-sidebar-slider .overlayx, ul.abt-sidebar-slider img {
        border: 0px solid #2E8DCE;
        border-radius: 3px 3px 3px 3px;
    }
    ul.abt-sidebar-slider .overlayx:hover {
        opacity: 0.1;
    }
    ul.abt-sidebar-slider h4 {
        color: white;
        font-family: Oswald;
        font-size: 15px;
        font-weight: 70;
        line-height: 1.5em;
        margin: 0;
        padding: 0 10px;
        position: absolute;
        top: 25px;
        width: 100%;
        z-index: 2;
    }
    ul.abt-sidebar-slider .label_text {
        bottom: 10px;
        color: white;
        font-size: 90%;
        left: 10px;
        position: absolute;
        z-index: 2;
    }
    ul.abt-sidebar-slider li:nth-child(2) .autname, ul.abt-sidebar-slider li:nth-child(3) .autname {
        display: none;
    }
    .buttons {
        margin: 5px 0 0;
    }
    .buttons a {
        display: inline-block;
        height: 25px;
        position: relative;
        text-indent: -9999px;
        width: 15px;
    }
    .buttons a:before {
        border-color: transparent #535353 transparent transparent;
        border-style: solid;
        border-width: 8px 7px;
        content: "";
        height: 0;
        left: 50%;
        margin-left: -10px;
        margin-top: -8px;
        position: absolute;
        top: 50%;
        width: 0;
    }
    .buttons a.nextx:before {
        border-color: transparent transparent transparent #535353;
        margin-left: -3px;
    }
    .date {
        background: none repeat scroll 0 0 rgba(32, 122, 161, 0.84);
        bottom: 93px;
        padding: 8px;
        position: relative;
        right: 6px;
    }
    #headerbox {
        background: #8FB93D;
        font-family: Oswald;
        padding: 4px;
    }
    </style>
    </center>

Random Video Embeded

Paste This Code on Page Layout - Add a Gadget - HTML/Javascript


<script type="text/javascript">
var videos = [
    '1271942',
    '6692106',
    '4602387'
];

var index=Math.floor(Math.random() * videos.length);
var html='<div class="span4"><h3 class="meet">Random video</h3><iframe width="100%" height="200" src="http://flashservice.xvideos.com/embedframe/' + videos[index] + '" frameborder="0" allowfullscreen></iframe></div>';
document.write(html);
</script>

Random Posts With Thumbnail ( simple grid )

Place this style after ]]></b:skin>
<style>
#random-posts{width:100%;background:none;}
#random-posts ul {margin: 0 !important;  padding: 0 !important;  }
#random-posts ul li {background:none ;list-style-type: none;margin:0;padding:0 !important}
#random-posts li{float:left;list-style:none;}
#random-posts img{float:left;margin-right:5px;margin-bottom:5px;border:none;width:90px;height:90px;transition:all 400ms ease-in-out;}
#random-posts img:hover {opacity:.7}

</style>


Place it on the window layout - Add a Gadget - Html/Javascipt

<div id="random-posts">
<ul>
<script type="text/javaScript">
var rdp_numposts=12;
var rdp_snippet_length=0;
var rdp_info='no';
var rdp_comment='Comment';
var rdp_disable='';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"http://jokuci.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type="text/javaScript">
function random_posts(json){a=location.href;y=a.indexOf('?m=0');for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;if(y!=-1){rdp_posturl=rdp_posturl+'?m=0'}var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzbgyYUc8jydq6f5VR6c4uAuho2uQg9F6kjQBYR3tKPdHgtm2Z1ZWjB64O426Cml4je_pBMSUv1f7E8vGJ4wE60aWl9L1h965EMGP2O4l6rW4XRonjtcR-KEfLf3xM8nyGw3VAN484_ogC//"}}};document.write('
<li>');document.write('<a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_posttitle+'"><img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'" title="'+rdp_posttitle+'" height="90" width="90"/></a>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<div style="clear:both">
</div>
</li>
')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"http://jokuci.blogspot.com/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
</script>
</ul>
</div>
</div>

Save



DEMO : Look right on this page

FLOATING DIV in scroll following

1. Place on <HEAD>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    <script language="javascript">

            $(document).ready(function(){

         //on window scroll fire it will call a function.

                $(window).scroll(function () {

         //after window scroll fire it will add define pixel added to that element.

                    set = $(document).scrollTop()+"px";

        //this is the jQuery animate function to fixed the div position after scrolling.

                    $('#floatDiv').animate({top:set},{duration:1000,queue:false});

                });

            });

         </script>

    <style type="text/css">

    #floatDiv {
        position:absolute;
        left:10%;
        margin-top:200px;
        margin-left:-200px;
        width:200px;
        height:200px;
        background-color: red;
    }
          
    </style>

2. Place on <BODY>

<div id="floatDiv">
... content here ....
        </div>


Note : The scripts can also put in your posts


Demo : Scrool Down Up and Look red box on left page

RED BOX...
RED BOX...
RED BOX...

Make Blank Page On Blogger

1. Dashboard
2. Template ➩ Edit HTML
3. Delete All Template Source, Paste with New Template Source below

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
  <head>
    <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
    <b:if cond='data:blog.isMobile'>
      <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
    <b:else/>
      <meta content='width=1100' name='viewport'/>
    </b:if>
    <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>

    <b:skin><![CDATA[/*
-----------------------------------------------
Blank Blogger Template
Name:        Blank Blogger Template
URL:         http://lwthacking.blogspot.com
----------------------------------------------- */
]]></b:skin>
</head>

  <body>
  <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/>
</b:section>

<div style='margin-top:700px; '>
<br/>
<center><b><font color='#ffffff'>&#169; All Rights Resrved by <a href='http://Lwthacking.blogspot.com' style="color: #ffffff">LWTHacker</a> 2013.</font></b></center>
</div>
  
</body>
</html>

4. Save Template


DEMO :

 

Random DIV Loaded

Place on <body> or Layout Page  (blogger support )

<div class="item" >... your content here...</div>
<div class="item" >... your content here...</div>
<div class="item" >... your content here...</div>
<div class="item" >... your content here...</div>

<script type="text/javascript">
var random = Math.floor(Math.random() * $('.item').length);
$('.item').hide().eq(random).show();
</script>


Demo : Refresh this page will change the color of the div as an example on the right

How to Make DIV Appear & fade out at Certain Times in Accordance with The Time Specified

Copy code below and paste after <head>

<script type="text/javascript">
function showIt() {
document.getElementById("hid").style.display = "block";
}
setTimeout("showIt()",12000);

$(document).ready( function() {
        $('#hid').delay(1000).fadeOut();
      });

</script>

Place anywhere on  <body> or place on Layout Page ( add a gadget - html/javascript )

<div id="hid" style="width:200px;height:200px;opacity:0.1;background-color:orange;text-align:center;display:none;">
this is Loading & Fade Out DIV with timer
</div>

Note; always use the latest jquery

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js">

</script>

DEMO : wait a minute and it will show up div with orange background

Sticky Sidebar Page Per Widget

 Place the following code above </body>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2' type='text/javascript'/>
 <script type='text/javascript'> $(function() { 
var offset = $(&quot;#HTML7&quot;).offset(); 
var topPadding = 35;
$(window).scroll(function() { 
       if ($(window).scrollTop() &gt; offset.top) { 
         $(&quot;#HTML7&quot;).stop().animate({ 
                   marginTop: $(window).scrollTop() - offset.top + topPadding }); }
 else { $(&quot;#HTML7&quot;).stop().animate({ marginTop: 0 }); }; }); }); 
 </script>




The BLUE color is replaced with a widget on your blog that will be made stiky ( ID WIDGET )

if there had been no need jqueryscript then given again

DEMO : try to scroll the page and look to the right

Animated Background

Place it in your html code Please see below for the script  
example of use :

<html>
<head>
<title></title>
[... the contents of the scripts  SAWI1.min.js .....]

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

[... the contents of the scripts  SAWI2.js .....]

</head>

<body>

[... the contents of the scripts  SAWI3.min.js .....]

<canvas id="theapt" style="background-color: black; height: 100%; left: 0; position: fixed; top: 0; width: 100%; z-index: -1;"></canvas>

</body>
</html>

Note : canvas is a field or area of ​​the animation will run




Download Scripts :
- SAWI1.min.js
 - SAWI2.js
- SAWI3.min.js


 DEMO