Collapsible Message Panels On Blogger

collapsible-effect-blogger
When I was browsing a design blog called "impressivewebs", I found a header that could collapse itself. Impressed by the effect, I sat down to work out the logic and it was pretty simple to achieve it on blogger. In this article, I'll illustrate the collapsible effect with simple message panels while you may apply the same logic to your header or post area or to any widget of your choice.

COLLAPSIBLE MESSAGE PANELS ON BLOGGER - LIVE DEMO

So, take a look at the live demo by hitting the link above. I guess you liked it... Interested to add this on your blog, as well? Then, follow the steps below.
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. Just paste the following piece of code above the line mentioned at step 1.
.message_list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 383px;
}
.message_list li {
    padding: 0;
    margin: 0;
    background: url(https://lh5.googleusercontent.com/-rFKQUJCuaBU/TkdtUFeNzGI/AAAAAAAABec/bn_KIzqh03c/s800/message-bar.png) no-repeat;
}
.message_head {
    padding: 5px 10px;
    cursor: pointer;
    position: relative;
}
.message_head .timestamp {
    color: #666666;
    font-size: 95%;
    position: absolute;
    right: 10px;
    top: 5px;
}
.message_head cite {
    font-size: 100%;
    font-weight: bold;
    font-style: normal;
}
.message_body {
    padding: 5px 10px 15px;
}
.collapse_buttons {
    text-align: right;
    border-top: solid 1px #e4e4e4;
    padding: 5px 0;
    width: 383px;
}
.collapse_buttons a {
    margin-left: 15px;
    float: right;
}
.show_all_message {
    background: url(https://lh3.googleusercontent.com/-SYzKGAtmZa8/TkdtUMVjh4I/AAAAAAAABeY/VXlnQnXlEQ4/s800/tall-down-arrow.png) no-repeat right center;
    padding-right: 12px;
}
.show_recent_only {
    display: none;
    background: url(https://lh6.googleusercontent.com/--99zjaBlqYY/TkdtURvdWRI/AAAAAAAABeg/Z8Yismgt5YY/s800/tall-up-arrow.png) no-repeat right center;
    padding-right: 12px;
}
.collpase_all_message {
    background: url(https://lh4.googleusercontent.com/-_mvlatWt3m4/TkdtUCz8LII/AAAAAAAABeU/mctqJi0fkbs/s800/collapse-all.png) no-repeat right center;
    padding-right: 12px;
    color: #666666;
}
Note: I've used an image for the title part of the image. You may replace the same with gradient colors using CSS. Refer the following article to do the same - Cross-Browser Gradient Effect Using CSS.
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(){
    //hide message_body after the first one
    $(&quot;.message_list .message_body:gt(0)&quot;).hide();
    //hide message li after the 5th
    $(&quot;.message_list li:gt(4)&quot;).hide();   
    //toggle message_body
    $(&quot;.message_head&quot;).click(function(){
        $(this).next(&quot;.message_body&quot;).slideToggle(500)
        return false;
    });
    //collapse all messages
    $(&quot;.collpase_all_message&quot;).click(function(){
        $(&quot;.message_body&quot;).slideUp(500)
        return false;
    });
    //show all messages
    $(&quot;.show_all_message&quot;).click(function(){
        $(this).hide()
        $(&quot;.show_recent_only&quot;).show()
        $(&quot;.message_list li:gt(4)&quot;).slideDown()
        return false;
    });
    //show recent messages only
    $(&quot;.show_recent_only&quot;).click(function(){
        $(this).hide()
        $(&quot;.show_all_message&quot;).show()
        $(&quot;.message_list li:gt(4)&quot;).slideUp()
        return false;
    });
});
</script>
Note: Do not include the first line in the script mentioned above if you've already added the latest jquery file on your blog.
5. Now, paste the following piece of code in the document - HTML FOR COLLAPSIBLE EFFECT, anywhere inbetween your <body> and </body> tags - probably within the post editor (or) below <div class='main-wrapper'> (or) <div class='columns fauxcolumns'>.
6. That's it! Save your template or publish the article and view the same to enjoy the effect.

HTML CUSTOMIZATION - FOR CODE MENTIONED IN STEP 5
If you wish to generate the time for your messages (displayed at the top right) by default, then change the text that appears in between  <span class="timestamp"> and  </span> tags. Similarly, you can change the text from "NAME" and "CLIENT" with your names and clients respectively. I've added my name and a small message in the first few div tags for reference. Check the same (code mentioned in text document at step 5) for your reference.

I've tested the above effect on all the major browsers which includes, but not limited to, IE, FF, Chrome, Safari and Opera. Let me know if you find some bugs with the above coding. If you need assistance in extending this effect to other elements on your blog, then leave a comment below and I'll help you out when I'm free:) Do share your opinions about the article via comments!

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!

    Other Recommended Posts

  • Blogger Tutorials, jQuery
Brijesh Pogul said on August 14, 2011 at 8:18 PM :

Nice one...
But there should be an option to expand them all too...!

REPLY
Mukund said on August 14, 2011 at 8:25 PM :

@Brijesh Pogul: Hmmm! Well, I'll consider what you said! Probably the next time I write about some article based on this effect, I'll design with an expand all option. Thanks for the comment Sahil:)

REPLY
Anonymous

Hey There. I found your blog using msn. This is a very well written article. I will be sure to bookmark it and come back to read more of your useful information. Thanks for the post. I'll definitely return.

REPLY
Mukund said on August 15, 2011 at 10:03 PM :

@Anonymous: I would be happy if you leave your name and url, the next time you comment! Thanks for the comment anyway:)

REPLY
Beben Koben said on August 16, 2011 at 6:25 AM :

just suggest...
don't used &quot: in your script...
used it...
<script type='text/javascript'>
//<![CDATA[

CONTENT HERE

//]]>
</script>

hihihi ☺
nice snippet

REPLY
anil singh said on August 16, 2011 at 10:15 AM :

i know that why you are not making money by your blog and i know why your buysellads ads impression is very low

REPLY
Mukund said on August 16, 2011 at 10:56 AM :

@Beben Koben: Well, you are right Beben! But, the above script should work as well because I tried it on my demo blog and it's working perfectly fine:) Anyway, thanks for the suggestion buddy!

REPLY
Mukund said on August 16, 2011 at 11:03 AM :

@anil singh: Ah! Well, if you can tell me the reason for the same, I would be very happy to correct my mistakes:)

REPLY
Himanshu Raut said on August 16, 2011 at 11:06 PM :

Great POst Mukund. Always a good read. i m gonna implement as soon as i get some time. really busy with work :(

REPLY
Brijesh Pogul said on August 16, 2011 at 11:14 PM :

@Mukund lol... I'm not sahil :D
I'm the co-author of iBlognet.
Sahil is the owner of iBlognet!!!
Sahil said me about your blog, thats why I was just checkin out...! :)

REPLY
Mukund said on August 16, 2011 at 11:58 PM :

@Himanshu Raut: Yup! Thanks for the comment Himanshu! Let me know once you implement the same:)

REPLY
Mukund said on August 16, 2011 at 11:59 PM :

@Brijesh Pogul: Oh! Ok! Sorry about that! Anyway, thanks to Sahil for recommending my blog and to you, (for the comment) as well:)

REPLY
Samantha said on August 18, 2011 at 7:44 PM :

Wow, great tutorial Mukund, thanks a bunch will be adding this to my blogger blog shortly.

REPLY
Mukund said on August 18, 2011 at 11:11 PM :

@Samantha: Yup! Thanks for the comment Samantha! I hope you enjoy the upcoming articles on my blog as well! Would love to hear more from you:)

REPLY
MUXLIMO said on August 19, 2011 at 6:59 PM :

Hola Mukund Bro..
I tried this on my blog. I thought it usefull as "feedback box" to my blog. but.. i can even write any new message on it?

So, what this all about, Bro??
I will be gratefull if me and my blog readers can put their short message on it.

Im waiting for Your reply in a great expectation. Thanks.

REPLY
Mukund said on August 19, 2011 at 10:48 PM :

@MUXLIMO: Well, basically this widget is similar to your gmail inbox. When you have a two way communication, you can notice this effect. In short, it's similar to accordion effect with collapse all option. Just ping me on gtalk if you need any assistance.

REPLY
Get adsense approved said on August 20, 2011 at 5:14 PM :

Thanks i m waiting for this tut. thanks you so much

REPLY
Mukund said on August 21, 2011 at 12:48 PM :

@Get adsense approved: Yup! I hope you enjoy the upcoming tutorials as well!

REPLY

Use the tab below to comment. No spam please!!!

[netinsert=0.0.1.11.14.1]