Adaptable View On Blogger - Introduction

Save on del.icio.us Add to Technorati Digg this article! Add it on Reddit! 6 Comments

It sounds pretty interesting rather strange to hear adaptable view. Isn't it? Well, adaptable view is basically an user interface pattern that allows people to change the visual appearance of the content/design on your blog. This offers more flexibility and control to the user over your content/design. A very good example to illustrate this effect could be on your delicious bookmarks.

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

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>

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.

<div id="commands">
Click on icons to change view:
<a href="#commands" id="fullswitch">
<img src="https://lh3.googleusercontent.com/-2y4pzJuYcjs/TjJ5jYMHtTI/AAAAAAAABac/YRmIswHipxE/s800/switch_full.png"/>
</a>
<a href="#commands" id="compactswitch">
<img src="https://lh3.googleusercontent.com/-WKPq4xPCASU/TjJ5jIrsdMI/AAAAAAAABaY/juaHG4yFUj8/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>

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.

Enjoyed the article?

Subscribe to this Blog via Email:

Click here to subscribe to FREE email updates from "Everything About Blogging", so that you do not miss out anything that can be valuable to you and your blog!

What's Next?

Save on del.icio.us
Add to Technorati
Digg this article!
Add it on Reddit!
Leave a comment

Other Recommended Posts

• CSS Tricks, jQuery