Dear readers,
Based on the new JSON format and the JavaScript code for displaying recent posts from Hans of beautiful beta, I now present horizontal navigational menus with auto (activates on mouse hover) drop-downs which display the most recent posts under each of your labels (say categories).
To see this in action take your mouse cursor to the "Beta Hack" or "Hack News" section in the navigation bar in my blog's head section (i.e. just below the hidden navbar).
This hack will allow readers to browse a particular label category by simply clicking on the label name in the menu or go directly to a specific post under that label by clicking the post title that appears in the drop-down. Therefore, this does not take away the navigational advantage of horizontal tabs in header and at the same time it allows a blog author(s) to give exposure to the most recently updated posts from various label categories.
I found the code for this drop-down menu on dynamic drive at the following link. (Don’t forget to visit this link to learn more about customizing this code according your preferences.)
Warning : If you are not familiar with your template code and HTML I recommend you create a backup copy of your template and/or first try this hack on a test blog.
The Hack
Here is the procedure for installing this hack in your blog:
1. JavaScript source
Copy-paste this line of code into the <head> section of your template, preferably just before </head>
<!-- /***********************************************
* Chrome CSS Drop Down Menu- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/ -->
<script src='http://stubb.fanatic.googlepages.com/chrome.js' type='text/javascript'/>
To download this file for modification/alternate hosting, right-click here and save to your hard-drive.
2. Including the CSS
Copy-paste any one of these CSS style codes just before the ]]></b:skin> line in the header section of your template. The images (links in the code) are hosted in my test blog, so if you wish to, you can download the images and host them in your own blog.
CSS style 1: Click here to view/download the code.
CSS style 2: Click here to view/download the code.
CSS style 3: Click here to view/download the code.
CSS style 4: Click here to view/download the code.
3. Code in the HTML widget.
Copy-paste this code into a HTML widget from the page layout section (using add a page element feature). You should ideally create this widget in the top most region of your page (like in my blog).
Click here to view/download the widget code.
Modifications:
- Each drop down menu’s code has been demarcated with indicator comments in <!-- … --> If you wish to add additional drop downs, follow the usual flow of the code i.e. a fourth drop down will have
<li><a href="[label link]" rel="dropmenu4">[label name]</a></li>
in the very first div, and
<!--4th drop down menu -->
<div id="dropmenu4" class="dropmenudiv" style="width: 150px;" >
[the js code for calling the post titles]
</div>
to include the function call for displaying post titles.
- Replace all the […]s with the appropriate text as indicated. For example, replace [Label feed URL] with the feed URL of your label which will be of the following format
http://stubborn-fanatic.blogspot.com/feeds/posts/default/-/[LabelName]
If the label name is not one single word and has got spaces between words, replace the spaces with %20
http://stubborn-fanatic.blogspot.com/feeds/posts/default/-/Label%20Name
- The value of “numposts” which by default equals 5, can be modified but I do not recommend increasing it, as long drop-downs might look ugly.
The hack is now installed. Do let me know if you face any problems.
Update: Alastor from nonstop nonsense (but it makes quite a bit of sense here :)) has used the same code from dynamic drive to convert entire widgets into drop-downs! Please visit his blog to learn how. The "Labels" and "Translate" section in my header navigation bar are using this hack.
Subscribe to my Newsfeeds:
This work is licensed under a
Creative Commons Attribution-ShareAlike 2.5 License.
Note: The author is not responsible for any loss of data or damages to your homepage as a result of using the hacks suggested here. Please observe all necessary precautions while modifying template code.
© 2006 Vivek Sanghi a.k.a Stubborn-Fanatic
40 comments:
Nice hack Vivek. But, is it not increasing the page load time?
@protesto:
Ofcourse protesto. Every new piece of javascript will add-on to the pageload time but in this case this is a navigational hack. I value navigational add-ons more than others as they directly affect your visitor's ability to find content in your page and thus determine if the visitor will convert into a regular reader.
This hack is works with that in mind as it gives the reader a bird's eye view of most recent posts across multiple categories. So even the older posts can be brought to your reader's notice right on the front page.
Bottom line: It's worth it :)
Vivek, I do not want to add an extra navigation unit to my header. It would be great if you can modify this hack for the default label wigdet. Look at the opml browser that purplemoggy blogged about:
http://purplemoggy.blogspot.com/2006/11/opml.html
You can browse labels. I do not have enough coding skill to do that. But maybe it is possible to hack default label widget with css to make it similar to this label browser, just an idea!
that's pretty cool!
you should really get another color though :P
that red looks so out of place, what with the rest of your layout being mainly shades of blue and green
Vivek, first of all, THANK YOU for all of your excellent hacks. I really enjoy your blog and the helpful information contained within it. Now to this hack: When I scroll over the Label it does not include a drop-down menu of the postings. What did I do wrong? Thanks,James.
Vivek,
Never mind. I figured out what I did wrong. Thanks again for all of your great hacks! I really enjoy your blog.
@protesto:
My CSS knowledge really sucks and I am just beginning in JavaScript.
However, I think I understand what you want to have, so I present an idea for you:
- Hierarchy labels (or peek-a-boo drop-down):
This will be like the archives widget. If you click on a sign beside the label, a drop-down will open and x most recent posts from that label will be displayed. It will be peek-a-boo style drop down and not the dumb looking menu-style drop down :D so looks are not compromised on. What say?
I cannot use the same code as the recent posts appear when mouse is hovered on the link and this won't work well in a vertical setting.
@purplemoggy
I can only distinguish primary colors and identify certain other shades :D I am very bad with colors. I will try modifying this stuff. If you have any suggestions in the code, let me know :) And I also implemented the search box CSS. It is well detailed with annotations. Thanks
@James:
Thanks for reading my blog and the hacks. I am glad you figured out the problem. If you face any issues with my hacks feel free to drop a line. cheers!
Vivek,
The only problem I have now is the third label I have does not work. I tried it with different labels, but to no avail. When I hover over the third label, "amsterdam", nothing happens. What did I do wrong?
@james
I checked the label URL for "amsterdam" and also the feed URL for the same i.e.:
http://jamesonthecanal.blogspot.com/search/label/amsterdam
(and)
http://jamesonthecanal.blogspot.com/feeds/posts/default/-/amsterdam
This label does not have any posts in it. Nor does its feed have any content, thats that reason nothing shows up here. Even on manual searching I could not find a post with this label in your blog.
Double-check the spelling of the label in question and modify the code as necessary and let me know where the problem was.
@vivek
for the updated search box, it looks like you copied the updated css, but forgot to grab the updated javascript, and the updated widget.
I updated all three parts, not just the one, sorry if there was any confusion.
@ Vivek
Hierarchy labels, this is exactly what I meant. Maybe purplemoggy can help with this ;)
Vivek,
I went back and capitalized the first 'a' in the label amsterdam and that fixed the problem.
The only other problem now is that the drop-down menu will not appear OVER my Flickr badge, but if I am not mistaken it is impossible to fix this, right? (I assume it has something to do with Flash??) I am not too tech savvy so bear with me.
If you could let me know how to have the drop-down menu to appear OVER the Flickr badge that would be great, otherwise I will just live with it. Thanks again for your time!
Hi Vivek!
I came up with a different hack to make use of this menubar. It uses widgets for each dropdown menu, so that you can put all kinds of stuff there.
See here for more information. =)
@purplemoggy
I have now copied all the code. Thanks and gr8 work with the search box.
@protesto
Glad I got exactly what you wanted. Yes we can request purplemoggy for this hack as he is skilled with CSS codes and colors as well. May be it can be a good learning.
@james
I do not know how we can fix that, but have a few ideas. May be you can bring the translation widget above flickr and/or reduce the number of posts in that drop-down to 5.
Better still you can shift the text in the menubar to the left using text-align there by also make room to add more drop-downs.
@alastor
you 've got mail :)
Wow Vivek, this is a really nice hack! You have become very good at hacking without any programming background.
Vivek, it wasn't immediately obvious to me that the dropdowns are expected from the label tabs. i was trying in the label cloud. cyou might want to clarify it in the post.
Thanks Ramani. I have also added some text and modified the post title to clear the confusion regarding the location of the hack in my blog. Thanks for stopping by!
Ooh, I can choose just a few tags to use this on? Man... I want to move to blogger BETA *pouts* ah, well, it's my own fault for not finishing my hack/template translations yet *sigh*
hey vivek,great hack man!I very busy with my exam lately,i will try this hack later.Well,so far i have a free advertising similar like adwords!!But it cannot work with adsense since its against TOS,it's work better for new blogger!Have a nice,my old buddy!
@Loui$$
Very nice to hear from you. All the best for your exams. I need to check out your site for adsense stuff. I have been reading a lot about it and wish to publish a comprehensive post. for my reader. Do drop a line here if you find some thing gr8! cheers!
Ya vivek,have a look on this post,
http://bloggingsecret.blogspot.com/2006/12/free-content-targeted-advertising-like.html
Just an intro for those new blogger,lol!^^
vivek,i have create a hack "Link To Me By Just One Click",any comment?
@loui$$:
That's a nice implementation of the one-click widget feature. Check out my comments on your post. Cheers!
Thanks buddy,any hacks in future you will create soon?
No ideas as of now.
The value of “numposts” which by default equals 5, can be modified
PLEASE tell me how to do it ?more than 5???
@gg:
Just head over to this link to view the widget code. Then search for:
var numposts = 5
Change 5 to any number of your choice.
Hi Vivek,
I am new to Blogger and is trying out a couple of hacks. It was fun !!!
Was trying out this hack but it didn't work.
When I copied the codes and tried to save the template, I get this error message:
"Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The reference to entity "callback" must end with the ';' delimiter. "
Can you enlighten me a bit?
Thanks
@Clumsy Hacker:
Hello there. In the widgets code every & has to be replaced with & I will update the widgetscode.txt file asap. However, you can incorporate these changes in your code.
Hi Vivek,
Thank yo so much for the tip. Now I managed to save the template. :)
However, I still couldn't get the drop down list to show.
Here is a low down of what I did:
a) I basically copied the steps described by Alastar.
b) I managed to create two tabs, "Home" and "Categories". The "Categories" tab does show a list of labels when I mouse over it.
I have a label called "Show Time" and I wanted to create a tab called "Show Time". The idea is that when I mouse over it, I want it to show last 5 posts for the label "Show Time". So, I followed the steps you descibed. But, it is not working.
When I mouse over the tab, nothing happens. When I clicked on the tab, the error message
"The feed specified by http://www2.blogger.com/feeds/418854064348857878/posts/default/-/Show+Time is not enabled" is shown.
Is there something not set up right in my blog that doesn't allow the feed to work?
Hope you can help.
Cheers and thanks again.
@Clumsy Hacker:
Firstly I recommend using this format for feeds:
http://[YourBlog].blogspot.com/feeds/posts/default/-/[labelname]
Second if there is a space in the label name use %20 (please read my post carefully.)
Third the feed url you have specified might be incomplete. Hve you used ?alt=jason in the end. (if not read the code given by me carefully)
Fourth and one that can be easily overlooked. Are you using the javascript provided by me. It contains an additional function that fetches post titles from a feed. I am not sure if Alastor's script file has that function.
Let me know if it still does not work after taking care of all these points.
Hi Vivek,
Thanks for your reply. So sorry to continue to trouble you. I did all the necessary checks and these are what I have in my template:
Script file:
<script src='http://stubb.fanatic.googlepages.com/chrome.js' type='text/javascript'/>
URL for the feed:
<li><a href='http://myshorttakes.blogspot.com/feeds/posts/default/-/Show%20Time' rel='dropmenu2' title='Click to view this section or select a post from below'>Show Time</a></li>
<div class='dropmenudiv' id='dropmenu2' style='width: 150px;'>
<script language='javascript'>var numposts = 5;</script><script src='http://myshorttakes.blogspot.com/feeds/posts/default/-/Show%20Time?alt=json-in-script&callback=showrecentposttitles'/>
The above seemed the same as what you wrote in your post. Maybe I missed out something?
(Noticed that it was json, but you mentioned jason?)
Cheers
Hi Vivek,
I reloaded my template with your hack again (without any changes made since last time) and now I got two error messages under two different scenarios:
1) When I set the Allow Blog Feed (under Setting -> Site Feed) to "None", I get the "HTTP 404 - File not found" error page.
2) When I set it to "Full", I get a pop up screen showing this message: "Internet Explorer cannot download Show Time from myshorttakes.blogspot.com. Internet Explorer was not able to open this Internet site. The requested site is either not available or cannot be found. Please try again later."
Was wondering if this shed any light?
BTW, when I mouse over the tab, in both cases, I still do not see the drop down list.
Cheers
Hi Vivek,
I finally found out what is wrong !!
In order for the feed to work, I need to set the blog up so that anybody can read the blog. If I chose only selected reader, it doesn't work, even for that selected reader.
Hmmmm .... if this is the case, then, I can't implement this hack in my blog cos I intend to restrict my blog to certain people.
Do you know of any workaround, if this is true?
Cheers
@Clumsy Hacker:
I don't know how restricting of a blog will affect the feed fetch etc as the admin code that controls all this is at the blogger back-end and not exposed. As far as I know there is no workaround for this.
And yes it is json and not jason. My bad...I went with the pronunciation :)
Thanks anyway Vivek for your help. Guess will have to KIV this hack for the time being. :(
Three Levels Navigation Bar Hack: Vivek, would be well using this navigation bar of three levels,
1º options
2º labels
3º Post Titles
Check It CSS Drive three Levels
Hi Vivek,
Kartik here.
Actually I use old blogger and my account has not yet been upgraded to the new blogger.
Can this hack work in the old blogger too.
Awaiting your reply!!!
Regards,
Kartik.
This is a beautiful hack, Vivek. It's along the lines of what I've been looking for for a very long time. But I'd like the tabs to look different and I can't figure out how to do that. For example, I'd like to do a solid block of a custom color behind the text, but I can't figure out how to adjust the .css to do that. Or, I'd like to make a gif with the text already in the gif, but again, I don't know how to do that. Or adjust the width of the line of labels.
Any advice you could offer would be much appreciated.
Post a Comment