Best 2 Know

The Ultimate Blogging Resource

  • Advertising
  • WebHosting
  • Contact Us
  • Blogger
    • Blogger Templates
    • Blogger Tutorials
  • Browser
    • Firefox
    • Google Chrome
  • Google
  • Internet
    • Facebook
    • Twitter
  • Thesis
  • Windows
  • WordPress
    • WordPress Themes
    • WordPress Plugins
  • More
    • Linux
    • Review
    • Solutions
    • Announcements

Peek-A-Boo Widget for Blogger

Peek-A-Boo widgets are useful when the widget content is too long. You can hide the content of the widget and let your visitors click on the widget title to show the content of that particular widget. This will make your sidebar short and sweet.

I’ve seen Peek-A-Boo widgets in certain blogs, but it lacked visitor attraction. I wanted to add certain effects to these widgets to make it more attractive. For eg: the way in which the content is shown and hidden. So I did some research in the net and came to know about the toggle effect. Yes, we can use toggle effects to make the sidebar widgets Peek-A-Boo.

Follow the steps given below to make your sidebar widgets Peek-A-Boo.

Log in to Blogger. Go to Layout > EditHTML. Check Expand Widget Templates.

Add the javascript given below to the <head> section of your template.

<script src=’http://deepakpensieve.googlepages.com/prototype.js’ type=’text/javascript’></script>
<script src=’http://deepakpensieve.googlepages.com/scriptaculous.js?load=effects’ type=’text/javascript’></script>

The above javascripts are Prototype and Scriptaculous. If you’ve already added it to your template while applying some other hack then no need to add it now.

Add the code given below to the CSS area in your template, just above ]]></b:skin>:.

.collapsible {
cursor: pointer;
}

You might be having lot of widgets in your blog. Any widget can be made Peek-A-Boo. The method is the same for all widgets. But for explanation I’ll be using the Link List widget. The widget must be there in your blog to apply this hack. So if you haven’t added the widget then go and add the widget and come back.

Find the portion of code given below.

<b:widget id=’LinkList1′ locked=’false’ title=’WIDGET TITLE YOU GAVE’ type=’LinkList’>
<b:includable id=’main’>
<b:if cond=’data:title’>
<h2 class=’title’><data:title/></h2>
</b:if>
<div class=’widget-content’>
<ul>
<b:loop values=’data:links’ var=’link’>
<li><a expr:href=’data:link.target’><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name=’quickedit’/>
</div>
</b:includable>
</b:widget>

Add the codes highlighted in red at the right places as shown below.

<b:widget id=’LinkList1′ locked=’false’ title=’WIDGET TITLE YOU GAVE’ type=’LinkList’>
<b:includable id=’main’>
<b:if cond=’data:title’>
<h2 class=’collapsible’ onclick=’new Effect.toggle(“linklist”, “blind”);’><data:title/></h2>
</b:if>
<div class=’widget-content’ id=’linklist’ style=’display:none’>
<ul>
<b:loop values=’data:links’ var=’link’>
<li><a expr:href=’data:link.target’><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name=’quickedit’/>
</div>
</b:includable>
</b:widget>

Save Template.

As I said earlier, any widget can be made Peek-A-Boo. Method is the same as mentioned above. The only thing that changes is id. id must be unique. No other widgets must be having same id as another widget. ie: In this tutorial I used “linklist” as id. No other widgets must be having the same id name as “linklist”.

Try it on your blog and tell me how good it is. Do contact me if you have any doubt. You can also contact me if you’re confused and stuck in the middle of the hack. Leave your comments and URL of your blog so that I’ll be able to know who all are using this hack. It will also help the visitors to check how the hack is working in various blogs.

Subscribe via Email

Share this:

  • Twitter
  • Facebook
  • Pocket
  • Print
  • Email

Related

March 5, 2009 Ritesh Sanap Blogger Tutorials, Solutions Blogger Hacks, Cool things, Hacks, Tutorials

Post navigation

Previous Previous post: "I have forgotten my Orkut/Gmail Password" – How to Recover the Hidden Password
Next Next post: How To Make Your Own Windows Media Player Theme

Currently Trending

  • Windows Vista CD key
  • How to Increase Dropbox upload speed
  • How to download Specific parts of YouTube videos
  • Free Online Angry Birds game
  • How to Delete Feedbacks from JetPack Contact Form
  • Add Three New Widgets At The Bottom or Header Of Blogger/Blogspot Blog
  • HORIZONTAL AND VERTICAL SPACING
  • ZooZooo - Vodafone Logos
  • 100+ Best Online Games - Who Else Wants to Play ?
  • How to display or show comment-author's profile image in Blogger/BlogSpot blogs

Random Posts

The Incredible Hulk 2008

July 12, 2008 By Ritesh Sanap Leave a Comment

Btemplatr WordPress Theme

December 19, 2010 By Ritesh Sanap 1 Comment

How to Create an Internet Shortcut

January 8, 2011 By Ritesh Sanap Leave a Comment

Demonoid Invitation Code Giveaway

January 10, 2015 By Ritesh Sanap Leave a Comment

[How-To]Using Google For Finding Ebook’s

December 28, 2007 By Ritesh Sanap Leave a Comment

WordPress

HTTP2 Server Push for W3 Total Cache Minify plugin

August 17, 2016 By Ritesh Sanap 5 Comments

How to Disable Emojis in WordPress

January 6, 2016 By Ritesh Sanap Leave a Comment

JetPack Related posts and Sharing not working with NGINX

November 10, 2015 By Ritesh Sanap Leave a Comment

Simply Pure – WordPress Theme

November 2, 2014 By Ritesh Sanap 2 Comments

Advanced What should we Write about next? – WordPress Plugin

July 28, 2014 By Ritesh Sanap Leave a Comment

How to Disable Self Pingback or TrackBack

January 16, 2014 By Ritesh Sanap Leave a Comment

BlueStrap – WordPress Theme

January 1, 2014 By Ritesh Sanap 15 Comments

How to Create Multiple Excerpts in WordPress

December 24, 2013 By Ritesh Sanap Leave a Comment

How to Disable Auto Update in WordPress

November 21, 2013 By Ritesh Sanap Leave a Comment

How to Delete Feedbacks from JetPack Contact Form

November 19, 2013 By Ritesh Sanap 9 Comments

Recent Posts

  • HTTP2 Server Push for W3 Total Cache Minify plugin
  • How to show hidden files and folders in Mac OS X
  • How to Disable Emojis in WordPress
  • Canva – Online Photo Editor
  • JetPack Related posts and Sharing not working with NGINX

Archives

Recommends

  • DigitalOcean – Cloud Hosting
  • Dropbox – Cloud Storage
  • Elegant Themes – WordPress Themes
  • LastPass – Password Manager
  • Like us on Facebook
  • Follow on Twitter
  • +1 on Google
  • Subscribe via Email
  • RSS Feed

© 2021 Best 2 Know · All Rights Reserved · We ♥ DigitalOcean

loading Cancel
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.