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:

  • Click to share on X (Opens in new window) X
  • Click to share on Facebook (Opens in new window) Facebook
  • Click to share on Pocket (Opens in new window) Pocket
  • Click to print (Opens in new window) Print
  • Click to share on WhatsApp (Opens in new window) WhatsApp
  • Click to email a link to a friend (Opens in new window) Email

Related

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

Comments

  1. Kylie says

    August 2, 2011 at 4:13 am

    I’m working on a project and attempting to implement this code. I’m hoping to create a “drop down” welcome box that is a HTML/Java Script widget in the upper widget area, under the links. I entered the codes and successfully made the widget disappear, but how do I connect the widget to a link that, when clicked, opens the peek-a-boo widget?

    Thank you!

    Reply
    • Ritesh Sanap says

      August 2, 2011 at 5:29 pm

      Well i have no idea, or i don’t think so we can achieve that through this code as it is bit too old, i can suggest you try to go with jQuery Accordion it will be helpful for you

      Reply

Leave a ReplyCancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

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

  • How to download Specific parts of YouTube videos
    How to download Specific parts of YouTube videos
  • Windows Vista CD key
    Windows Vista CD key
  • How to retrieve my Demonoid username
    How to retrieve my Demonoid username
  • How to add Logo to Thesis theme
    How to add Logo to Thesis theme
  • How to Delete Feedbacks from JetPack Contact Form
    How to Delete Feedbacks from JetPack Contact Form
  • List Of All 255 Keyboard All Alt Key Codes
    List Of All 255 Keyboard All Alt Key Codes
  • h4x0r ( Hacker ) - Blogger Template
    h4x0r ( Hacker ) - Blogger Template

Get Latest post in your Inbox

Random Posts

How to Find Windows XP CD-Key inside CD – in just 9 seconds

July 25, 2008 By Ritesh Sanap 2 Comments

How to Create an Internet Shortcut

January 8, 2011 By Ritesh Sanap Leave a Comment

Remove the Recycle Bin from the Desktop

February 29, 2008 By Ritesh Sanap Leave a Comment

How to Disable Emojis in WordPress

January 6, 2016 By Ritesh Sanap Leave a Comment

How to disable Rotator in thesis

March 29, 2011 By Ritesh Sanap 4 Comments

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

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