Just navigate to the following link - Recent Bookmarks. Notice the three tabs/links that say "Low | Medium | High" once you hit the display options. Each one shall show you a different view: single, compact or full. So, how do I achieve a similar effect on blogger? Pretty simple, provided you have some knowledge about CSS and Jquery! Adaptable view can be used to change background colors, switch layouts, increase or decrease font size, darken or lighten the post area - as you see on Sohantaka's blog when you toggle the article view, etc...
In this article, I'll illustrate the above effect using two views: single-column and two-column view. Users can switch their views between single-column and two-column dynamically. I don't want to take too much of your time on explaining the same further. So, take a look at the live demo and let's get started...
ILLUSTRATING BASICS ABOUT ADAPTABLE VIEW ON BLOGGER - LIVE DEMO
1. Navigate to "Design>>Edit HTML" and make a backup of your template by clicking on the "Download full template" link at the top of the page. Once the back up is over, search for the following piece of code.
]]></b:skin>
2. Paste the following piece of code just above the line mentioned step 1.
#commands { margin-top:50px;}
#list { width:580px; margin:0px; padding:0px;}
#list li { list-style:none; display:block; width:560px; background-color:#D7D3E0; padding:5px; margin:5px;}
#list li span { font-size:1.2em; margin-right:10px; font-weight:bold;}
#list.compact li { float:left; width:270px;}
#list { width:580px; margin:0px; padding:0px;}
#list li { list-style:none; display:block; width:560px; background-color:#D7D3E0; padding:5px; margin:5px;}
#list li span { font-size:1.2em; margin-right:10px; font-weight:bold;}
#list.compact li { float:left; width:270px;}
3. Next, search for the following piece of code.
</head>
4. Paste the following piece of code just above the line mentioned in step 3. Save your template.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$("#fullswitch").click(function() {
$("#list").removeClass("compact");
});
$("#compactswitch").click(function() {
$("#list").addClass("compact");
});
});
</script>
<script type='text/javascript'>
$(document).ready(function() {
$("#fullswitch").click(function() {
$("#list").removeClass("compact");
});
$("#compactswitch").click(function() {
$("#list").addClass("compact");
});
});
</script>
Note: You need not paste the first line (highlighted in orange) in the above coding if you already have the jquery file running on your blog.
5. Now, insert the following tags anywhere in your template - may be within the post editor or on the sidebar or below the content wrapper. Replace CONTENT HERE with your content.
6. That's it! Save your template just in case you made use of the code on your template else, publish the post with the codes mentioned in step 5 and you're done!
I would like to provide the reference script (used within the post editor to illustrate adaptable view on the demo blog) for those who find it difficult to work out step 5 in the above tutorial. Download the reference script here - REFERENCE.
The above effect was tested to work fine on all major browsers - IE, Firefox, Opera, Safari. I'll illustrate the same (adaptable view) with more examples in the upcoming articles on my blog. Subscribe to my blog so that you don't miss any article that might interest you like the one above:) Share your opinions via comments! You may read more about the tutorials on jquery here - Jquery.
<div id="commands">
Click on icons to change view:
<a href="#commands" id="fullswitch">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_HZuX1Wy5dRiJVUUIwUT3vqqRR6tj79GifE3H1orLjpHeOCAKL1NWx6myiDTkdG_A9Tj6lnaTNGZ4rv0XWriVx1YrhCa1DV-YvkYhE4zRCwai98PkfmHtpu8CglwBD6ASBOyLSaVWbSI/s800/switch_full.png"/>
</a>
<a href="#commands" id="compactswitch">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxmC3BGksj2Rkmuu4tTFa4B_54OQg1UTtLVCTly3pfJkb2mK0qIW-YwnQf5Nb5Y2GZXZfIr7V6YD18G0XClKSv0OtZ8O0WltNzl11OJosaqcrMcUd18c6GedWyIDtz2_2uNGQYxTsVfe4/s800/switch_compact.png"/>
</a>
</div>
<ul id="list">
<li> CONTENT HERE </li>
<li> CONTENT HERE </li>
<li> CONTENT HERE </li>
<li> CONTENT HERE </li>
</ul>
Click on icons to change view:
<a href="#commands" id="fullswitch">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_HZuX1Wy5dRiJVUUIwUT3vqqRR6tj79GifE3H1orLjpHeOCAKL1NWx6myiDTkdG_A9Tj6lnaTNGZ4rv0XWriVx1YrhCa1DV-YvkYhE4zRCwai98PkfmHtpu8CglwBD6ASBOyLSaVWbSI/s800/switch_full.png"/>
</a>
<a href="#commands" id="compactswitch">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxmC3BGksj2Rkmuu4tTFa4B_54OQg1UTtLVCTly3pfJkb2mK0qIW-YwnQf5Nb5Y2GZXZfIr7V6YD18G0XClKSv0OtZ8O0WltNzl11OJosaqcrMcUd18c6GedWyIDtz2_2uNGQYxTsVfe4/s800/switch_compact.png"/>
</a>
</div>
<ul id="list">
<li> CONTENT HERE </li>
<li> CONTENT HERE </li>
<li> CONTENT HERE </li>
<li> CONTENT HERE </li>
</ul>
I would like to provide the reference script (used within the post editor to illustrate adaptable view on the demo blog) for those who find it difficult to work out step 5 in the above tutorial. Download the reference script here - REFERENCE.
The above effect was tested to work fine on all major browsers - IE, Firefox, Opera, Safari. I'll illustrate the same (adaptable view) with more examples in the upcoming articles on my blog. Subscribe to my blog so that you don't miss any article that might interest you like the one above:) Share your opinions via comments! You may read more about the tutorials on jquery here - Jquery.
