Blogger Beta: Hide/Show, Expand/Collapse labels
After a request to get the 'Hide/Show, Expand/Collapse' hack to work with the label widgets in blogger beta, I figured it out. Here is what I came up with.
- You must implement the first two steps from Hide/Show, Expand/Collapse - Navigation Element.
- Now open "Template/Page Elements" click on "Add a Page Element". Choose "Labels/Add to Blog". Save changes and close. (This element is temporary...we only need it to find some code, then we will delete it later.)
- View your blog and right click anywhere in the blog. You want to "View Page Source".
- In the 'Source' page, find <div class='widget-content'> (we'll do something with it in a minute):
<div class='widget-content'>
<ul>
<li>
<a href='http://annie-flower.blogspot.com/search/label/beta'>
beta</a>
(1)
</li>
<li>
<a href='http://annie-flower.blogspot.com/search/label/how-to'>
how-to</a>
(1)
</li>
<li>
<a href='http://annie-flower.blogspot.com/search/label/test'>
test</a>
(1)
</li>
<li>
<a href='http://annie-flower.blogspot.com/search/label/trial'>
trial</a>
(1)
</li>
</ul> - Open "Template/Page Elements" click on "Add a Page Element". This time choose "Configure HTML/JavaScript". Now is where the third part of Hide/Show, Expand/Collapse - Navigation Element comes in. Add this code to the 'edit html box':
<a aiotitle="click to expand" href="javascript:togglecomments('UniqueName')">Title</a>
<br />
<div class="commenthidden" id="UniqueName"></div> - Fill in your 'UniqueName' in the 2 areas. Give it a title. For example "+/- Categories".
- Copy the code you found in step #4 and paste it between the <div> and </div>
<div class="commenthidden" id="UniqueName"> PASTE CODE HERE </div> - Save changes and close.
- Now you can open the 'Label Element' we made in #2 and "Remove Page Element".
I believe that should do it! It worked on my test blog. I ended up with a 'Hide/Show, Expand/Collapse' section of my sidebar that displays labels/categories for my blog.
Also see: Hide/Show, Expand/Collapse - Navigation Element
Labels:
Blogger Beta,
Categories/Labels,
Expand/Collapse,
Hacks,
Navigation
30 Comments:
Thnx Annie for your prompt reply! :)
ramya, I looked at your template, and it looks like you removed the 'hide/show' code. If you copy and send me your code from the editor page, I can see is I can get it to work. But first, did you follow the first post? To make the labels hide/show, you must implement the code outlined in this post:
Hide/Show , Expand/Collapse Navigation Element.
I thought I did everything correctly but it's displaying fine - only without any collapse/expand choices. I feel as if there's a step missing - like the +/-. Did I put the code in the wrong place(s) in the html? (http://yarnsandyarns.blogspot.com/) THANKS! -Anne
@jau, First off, read this whole comment before you start making any changes. It has been a work in progress!
I think that you may have to change this part of your code:
<div id="AVSO" class="commenthidden">
to:
<div class="commenthidden" id="AVSO">
Which, as I look at it, shouldn't really make a difference. But try it anyway. Because otherwise, all your code looks correct to me. (Sometimes there is a conflict between scripts...and I don't know how to find out what scripts.)
I did this code on a Test Blogagain and it worked. You can take a look at the blog and the page source (right click in the blog anywhere and select 'View Page Source'.) I will leave the blog up until I do some more testing.
The only thing I noticed is when you paste the code into the "html/javascript page element", you do it in the first window that opens up. In other words, don't click on the 'rich text' link in the upper right corner then paste the code.
Also, make sure that your 'uniquename' is truly unique.
One last thing...I just did a side by side comparison of our widget codes. It seems you forgot this part in your page element:
<div class="widget-content">
That is in step #4 in this post. I just think that may be the culprit!
annie, Is it possible to get a 'Hierarchy' view in 'Labels' widget just as one gets in 'Archives' widget.
@shrish, I just don't know about that one. I don't know of a way, but if I ever find it or figure a way to do it, I will post it.
@md shaffir, did you follow the first two steps in this post Hide Show, Expand/Collapse Navigation Element, then follow the rest of the instructions from this post?
can we collapse the posts too?
@rohit, yes you can. Look here:Hackosphere
Hi Annie,
I have a question.
1. Rather than make an expand/collapse hack, is it possible to make a drop-down menu for LINKS? I have done a drop-down menu for labels but couldn't find anywhere that explains how to make drop-down menu for links. Most important thing is: I want to make the drop-down menu and still able to use the original links widget in blogger to add new links.
Hope you could help me out. Thanks.
@gen, I think that is beyond my scope of 'hacking'. :-) That is why I'm using the +/- method. You may want to check out Hackosphere.
I know what you want to do...have an easy way (like the widget link list) to add links to your blog. Well, if you look at the +/- Blogging Chicks Blogroll, you will see that it is a lengthy list. It is easy to open a blogroll and put the list in your sidebar. Plus, adding a link to your blogroll is very simple to keep a long link list and add links to it on the fly. Go to Blogrolling and sign up. They have a feature called 1 Click Blogrolling. This is from their site:
"To install the one-click link addition bookmarklet. You can add links to your blogroll without ever coming back to the site. Just drag the link below to your links bar in IE and Netscape and when you're at a site you want to add to a blogroll just click the link. A pop-up window will present the pre-filled out link options for the site you're browsing."
Simple, quick and tidy. I personally like the look of the +/- feature more than the klunky drop down menu. It is cleaner. But, that is just me.
Thanks Anni for all the good work. I am stuck at step 7 because when i viewd my source code. That portion did not look anything like yours. This is what I have;
div class='widget-content'>
img alt='' height='93' id='Image1_img' src='http://photos1.blogger.com/x/blogger2/2661/1333/1600/z/460056/gse_multipart37704.jpg' width='414'/>
br/>
My blog address is;
http://www.omodudu.com/
Where did i go wrong.
I took a few < our because blogger wouldn't let me post html tags
@omodudu, You are trying to work with the wrong section of your template. This is the part you need:
<h2>Labels</h2>
<div class='widget-content'>
<ul>
<li>
<a href='http://www.omodudu.com/search/label/Economics'>Economics</a>
(12)
</li>
<li>
<a href='http://www.omodudu.com/search/label/Inspirational'>Inspirational</a>
(3)
</li>
<li>
<a href='http://www.omodudu.com/search/label/nigeria'>nigeria</a>
(28)
</li>
<li>
<a href='http://www.omodudu.com/search/label/Opinion'>Opinion</a>
(17)
</li>
<li>
<a href='http://www.omodudu.com/search/label/Politics'>Politics</a>
(12)
</li>
<li>
<a href='http://www.omodudu.com/search/label/Random'>Random</a>
(47)
</li>
<li>
<a href='http://www.omodudu.com/search/label/Top%20Posts'>Top Posts</a>
(10)
</li>
</ul>
That should get you back on track.
Thank you so much, you are an angel.
Honestly, I thought this was too good to be true. Thank you thank you thank you.
I have tried to figure this out since starting a blog! I have used javascripts, tried to figure out from other peoples sources, hackosphere, etc, but this is the only one I could work. Thank you!!!!!!!
This fonction don't work anymore with my Blogger. I don't know why because i didn't make any changes since the time i installed it a few months ago.
Do you have an idea why i have this problem now Annie?
:)
@cammu, I looked at your blogs. Two have it working wonderfully. The other one, Dans ma boîte à souvenirs... doesn't have it installed. So, I'm guessing you figured it out.
Lovely blogs, even though I don't understand French, the message gets across.
I'm so sorry Annie, i find out that the problem was the new "add-on" i installed on my Firefox yesterday. Everything is ok now. Good news dor me lol!
Have a nice day.
:)
Hi Annie
First I want to thank you for all this info. I spent about three days wondering how to expand/collapse my labels before I stumbled on your blog.
I have a slight problem though.
When I use the title part of the page element, I get a nice big title but it's not collapsable. If I use your code, the collapsable link appears in small text and isn't very visible.
I've put the examples up on my blog - which is at ReviewInk on blogspot.com
The first is your label code.
As you can see, the part entitled "Look at me, I'm collapsable" isn't in fact collapsable.
The collapsable link is actually the one underneath it that reads "Reviews By Author - small collapsable link.
The other part is the regular label listing under "Reviews - By Author" which is what I'd like the collapsable menu to look like.
Hopefully this is making some kind of sense, and I'd be really grateful for your help.
Thanks so much!
Amy
@Amy, I made a post for you on how to do it! Expand/Collapse Sidebar Widgt Title
I dont know what to say about you annie, though i dont have any of these problems but to read your blog and collect the information is always been a pleasure for me.
if you wanna collapse the posts with simply just visit here in Vilat Lines
yOU CAN SEE HERE FOR SIMPLE EXPAND COLLAPSE LINK POST LABEL HERE, OR ACCORDION LABEL BLOG OUR LINK POST HERE...btw this is nice blog ...thx
Thank you Annie, this works like a charm!! I've been searching for like forever and thank god I've found you
Thanks you!!
I am extremely interested to reading this.
to read your blog and collect the information is always been a pleasure for me.
coool, thanks mate I'mm try this right away :)
I just like to say thanks for sharing great information. It truly helpful me to make an interactive blog. Which is about to watch Naruto episodes.
Now i just wanna just some good suggest to make my blog more interactive so that everybuddy like to visit at my blog to enjoy episodes of Naruto. Just have a look :- >http://narutoepisode-online.blogspot.com/
thanks for the tips i applied it at my website.
james
http://www.articlescolumn.com