How to Make static page on blogger/blogspot. 0

Anil Kumar Singh | 7:45 AM | , ,


Now add best static page on your blogger , this static page as youtube .
Follow simple step to add this cool static page on uour blogge now--->>>>

* Now first go to your blogger Dashboard.

* Click on Design tab and edit html now,

* Now click on box to expand your blogger template .

* Again find this code </head> and copy below code and paste just before </head>



<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style>
.blog-pager, .footer, .post-footer, .feed-links, .sidebar, #navbar { display:none !important;}
#main-wrapper {width: 95%; float:none; margin: 0 auto !important;}
</style>
</b:if>

NOTE--If you want to use  Your sidebar and  widgets in your other static page , you can remove the sidebar and other unwanted widgets in this table of content or archive page.
(i,e ) using  this


<b:if cond='data:blog.url == &quot;http://YOUR URL HERE&quot;'>
<style>
.blog-pager, .footer, .post-footer, .feed-links, .sidebar, #navbar { display:none !important;}
#main-wrapper {width: 95%; float:none; margin: 0 auto !important;}
</style>
</b:if>


* First Create a page naming archive or table of contents or anything you want. and in the post's edit html section paste this code



<title>Switch Display Optionswith CSS &amp; jQuery - by Soh Tanaka</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

    $("a.switch_thumb").toggle(function(){
      $(this).addClass("swap");
      $("ul.display").fadeOut("fast", function() {
          $(this).fadeIn("fast").addClass("thumb_view");
         });
      }, function () {
      $(this).removeClass("swap");
      $("ul.display").fadeOut("fast", function() {
          $(this).fadeIn("fast").removeClass("thumb_view");
        });
    });

});
</script>
<script>
imgr = new Array();

imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";

showRandomImg = true;

aBold = true;

summaryPost = 70;
summaryTitle = 80;

numposts = 12;



function removeHtmlTag(strx,chop){
    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);
        }
    }
    s =  s.join("");
    s = s.substring(0,chop-1);
    return s;
}

function showrecentposts(json) {
    j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
    img  = new Array();

      for (var i = 0; i < numposts; i++) {
        var entry = json.feed.entry[i];
        var posttitle = entry.title.$t;
        var pcm;
        var posturl;
        if (i == json.feed.entry.length) break;
        for (var k = 0; k < entry.link.length; k++) {
              if (entry.link[k].rel == 'alternate') {
                posturl = entry.link[k].href;
                break;
              }
        }
       
        for (var k = 0; k < entry.link.length; k++) {
              if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
                pcm = entry.link[k].title.split(" ")[0];
                break;
              }
        }
       
        if ("content" in entry) {
              var postcontent = entry.content.$t;}
        else
        if ("summary" in entry) {
              var postcontent = entry.summary.$t;}
        else var postcontent = "";
       
        postdate = entry.published.$t;
   
    if(j>imgr.length-1) j=0;
    img[i] = imgr[j];
   
    s = postcontent    ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);

    if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

    //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';


    var month = [1,2,3,4,5,6,7,8,9,10,11,12];
    var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

    var day = postdate.split("-")[2].substring(0,2);
    var m = postdate.split("-")[1];
    var y = postdate.split("-")[0];

    for(var u2=0;u2<month.length;u2++){
        if(parseInt(m)==month[u2]) {
            m = month2[u2] ; break;
        }
    }

   
    var daystr = day+ ' ' + m + ' ' + y ;


    var trtd = '
<li><div class="content_block">
<a href="'+posturl+'"> <img width="215" height="120" src="'+img[i]+'"/></a><h2>
<a href="'+posturl+'">'+removeHtmlTag(posttitle,summaryTitle)+'</a></h2>
<p>
'+removeHtmlTag(postcontent,summaryPost)+'</p>
</div>
</li>
';

    document.write(trtd);

    j++;
}

}


</script>
<style type="text/css">
body {
    margin: 0;
    padding: 50px 0 0;
    font: 10px normal Verdana, Arial, Helvetica, sans-serif;
    background: #111 url(http://www.sohtanaka.com/web-design/examples/display-switch/body_bg.jpg) no-repeat center top;
    color: #fff;
}
* {
    margin: 0;
    padding: 0;
}

img {
    border: none;
}
h1 {
    font: 5em normal Georgia, 'Times New Roman', Times, serif;
    text-align:center;
    margin-bottom: 20px;
}
h1 span {     color: #e7ff61; }
h1 small{
    font: 0.2em normal Verdana, Arial, Helvetica, sans-serif;
    text-transform:uppercase;
    letter-spacing: 1.5em;
    display: block;
    color: #ccc;
}

.container {
    width: 758px;
    margin: 0 auto;
    padding-bottom: 100px;
    overflow: hidden;
}
ul.display {
    float: left;
    width: 756px;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid #333;
    border-right: 1px solid #333;
    background: #222;
}
ul.display li {
    float: left;
    width: 754px;
    padding: 10px 0;
    margin: 0;
    border-top: 1px solid #111;
    border-right: 1px solid #111;
    border-bottom: 1px solid #333;
    border-left: 1px solid #333;
}
ul.display li a {
    color: #e7ff61;
    text-decoration: none;
}
ul.display li .content_block {
    padding: 0 10px;
}
ul.display li .content_block h2 {
    margin: 0;
    padding: 5px;
    font-weight: normal;
    font-size: 1.7em;

}
ul.display li .content_block p {
    margin: 0;
    padding: 5px 5px 5px 245px;
    font-size: 1.2em;
}
ul.display li .content_block a img{
    padding: 5px;
    border: 2px solid #ccc;
    background: #fff;
    margin: 0 15px 0 0;
    float: left;
}

ul.thumb_view li{
    width: 250px;
    height: 184px;
}
ul.thumb_view li h2 {
    display: inline;
}
ul.thumb_view li p{
    display: none;
}
ul.thumb_view li .content_block a img {
    margin: 0 0 10px;
}


a.switch_thumb {
    width: 122px;
    height: 26px;
    line-height: 26px;
    padding: 0;
    margin: 10px 0;
    display: block;
    background: url(http://www.sohtanaka.com/web-design/examples/display-switch/switch.gif) no-repeat;
    outline: none;
    text-indent: -9999px;
}
a:hover.switch_thumb {
    filter:alpha(opacity=75);
    opacity:.75;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
}
a.swap { background-position: left bottom; }


</style>


<h1>
Switch <span>Display Options</span><small>with CSS &amp; jQuery</small></h1>

<div class="container">

<a href="#" class="switch_thumb">Switch Thumb</a>

<ul style="display: block;" class="display">     <script src="http://yourblog.blogspot.com/feeds/posts/default?max-results=12&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts"></script> </ul>

</div>

* Change your blog address with your own in above code now.

StumpleUpon DiggIt! Del.icio.us Blinklist Yahoo Furl Technorati Simpy Spurl Reddit Google I'm reading: How to Make static page on blogger/blogspot. ~ Twitter FaceBook

0 Responses So Far:

Categories

Select Your Categories