style your static page with switch view

100 % working - can't afford demo

If you are a YOUTUBE user you could see two types of views available for your channel , you get any one of the view just by clicking it, it will change the look of your channel. Though we cant use two views for our blogger home page we can use them in our static page. Here i am going to tell you how to create a table of content.
Please follow the steps given below with at-most concentration..

switch view example for blogger

Step 1: Save your Template before you try something, it will help you when something goes wrong with your editing.

Step 2: Now You have to remove some thing in your static page .

Step 3: Goto >> Edit Html >> and search for </head> and paste this code above it

<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>

Step 4: 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://blogger-demo-wierdy.blogspot.com/p/switchview.html&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>

this code you can remove the sidebars and other things in a particular webpage. Make sure that

you replace your page URL in the above code marked in red.

step 5: 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 & 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 & 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&orderby=published&alt=json-in-script&callback=showrecentposts"></script> </ul>

</div>

Replace the Yourblog.blogspot.com with your blogspot url or domain name..

Thats It..