How to Create An Adaptable View On Your Blog?

Basically, adaptable view is an user interface pattern that lets the user decide the visual appearance of your blog. In other words, users can dynamically change the layout of your theme. Interesting… Isn’t it? Well, there could be  no better example than delicious bookmarks to explain what I mean. So, for those who actually wonder what I’m blabbering, take a look at the following link – Recent Bookmarks.

Now, look for the display options that say “low, med, high” and hit the one of your choice. You may refer to the screen shot above, just in case you find it difficult to find where the display options are. So, each option shows you a different view – either single, compact or full. So, in this article, you’ll be able to install a similar kind of effect on your blog. Take a look at the final effect that you’ll achieve on completing this tutorial below.

Adaptable view can be used to increase/decrease text size, change backgrounds, switch layouts, alter between light and dark backgrounds for post area and so on… Well, that’s a lot of story about Adaptable view I guess. So, let’s get started with the tutorial…

JAVASCRIPT/JQUERY for adaptable view

WordPress users may refer the following link to know about adding a custom javascript (given below) on their theme – Using JavaScript On WordPress while users on blogspot can add the following script just above </head> on their blogger 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() {
            $(&quot;#singleswitch&quot;).click(function() {
                $(&quot;#list li .url&quot;).hide();
                $(&quot;#list li .desc&quot;).hide();
            });
            $(&quot;#compactswitch&quot;).click(function() {
                $(&quot;#list li .url&quot;).show();
                $(&quot;#list li .desc&quot;).hide();
            });
            $(&quot;#fullswitch&quot;).click(function() {
                $(&quot;#list li .url&quot;).show();
                $(&quot;#list li .desc&quot;).show();
            });
        });
</script>

That’s it! Save your theme/template. Let’s add the HTML required for the above effect. You need not include the first line in the above script provided you already have a jquery file on the head section – probably the latest version.

HTML

Well, the HTML which I used on my demo blog is given below. You may change the links, titles and the description as per your choice. I suggest you to work with the reference script initially. Once, you get the hack working, you may replace the codes with your own details.

<p id="commands">
Click on icons to change view:
<a id="singleswitch" href="#"><img src="http://www.shoutmeloud.com/wp-content/uploads/2011/08/switch_d_single.png?699e3a" /></a>
<a id="compactswitch" href="#"><img src="http://www.shoutmeloud.com/wp-content/uploads/2011/08/switch_d_compact.png?699e3a" /></a>
<a id="fullswitch" href="#"><img src="http://www.shoutmeloud.com/wp-content/uploads/2011/08/switch_d_full.png?699e3a" /></a>
</p>
<ul id="list">
<li>
<strong>Who is Harsh Agarwal?</strong>
<span class="url"><a href="http://www.shoutmeloud.com/about">Refer to the "About Me" page</a></span>
<span class="desc">Harsh Agrawal is a young Entrepreneur and professional blogger from India who blogs at Shoutmeloud.</span>
</li>
<li>
<strong>What does he blog at Shoutmeloud?</strong>
<span class="url"><a href="http://www.shoutmeloud.com/about">More about Shoutmeloud</a></span>
<span class="desc">He writes about Blogging, Social media, WordPress, SEO, Technology and Make money online.</span>
</li>
<li>
<strong>SAMPLE HEADER</strong>
<span class="url"><a href="URL">TITLE OF URL</a></span>
<span class="desc">Write down a short description about the link in between these two span tags.</span>
</li>
</ul>

You may add the above codes anywhere in your template/theme – be it blogger or WordPress. Well, let’s style the HTML with some CSS and we’re done!

CSS

WordPress Users may add the following codes to your custom.css file and upload the same to your host server while users on blogspot shall add the following codes before ]]></b:skin> on your blogger template.

#commands { margin-top:10px;}
#list { width:500px; margin:0px; padding:0px;}
#list li { list-style:none; display:block; width:480px; margin:10px 0px; padding:5px;  border-top:solid 1px #D7D3E0; text-align:justify; font-family:Georgia,"Nimbus Roman No9 L",serif;}
#list li span { display:block; text-align:justify;
font-family:Georgia,"Nimbus Roman No9 L",serif; margin:5px 0px;}
#commands img:hover {border:solid 1px #D7D3E0;}

That’s it! Save your template/theme and enjoy the effect! I’ll try to come up with unique articles based on adaptable view in the upcoming weeks. Better, subscribe to Shoutmeloud so that you don’t miss any of those tutorials. Anyway, share your opinions about this article via comments!

Article by Mukund

Mukund has written 35 articles.

If you like This post, you can follow ShoutMeLoud on Twitter. Subscribe to ShoutMeLoud feed via RSS or EMAIL to receive instant updates.

Follow @ShoutMeLoud