Bloggeratto

This little mod comes from Russia (with love, i hope) and it has been waiting for over a year in a comment that was posted in the Peek-A-Boo Blogger Navbar post.

Unfortunately Russian is one of the languages i truly don’t know anything about and it just puzzles me. So there is a bit of a language barrier there. But the guy who developed this is called Артем Ивлев and looks like he is a Lotus Expert (Domino, Connections, Quickr, etc) and he has this blog with the name Homo Ludens that i guess refers to the “Play Theory” of the dynamic of Society and Culture and how that dynamic create art that reflects on the society that at the same time creates culture around the art as time passes and the circle goes over and over.

So this nice Mod (or Hack to a degree) comes with a instant Blogger page element install button. So thanks to that i can now offer it to you all since then the language barrier is not much of a problem but merely a bump.

This comes as a Blogger Navbar Mod that makes it retractable for 5 seconds.

So you can have the Blogger Navbar without having to remove it and without having to show it. It only will be shown if the visitor of your blog wants to access it. To do that he only needs to click a little rectangle in the top left corner of your blog that shows as this:

Once it is clicked, the navbar shows.

5 seconds pass and it hides.

The hiding happens in a nice one second motion.

An Actual Ideal Way To Hide The Blogger Navbar.

When i remember back on my idea of the Peek-A-Boo Blogger Navbar thing. The truth is that it was not the first take. My first take was exactly a Retractable Blogger Navbar just like this. It was never done because it required more of anyone wanting to use it since they had to install it themselves. So it didn’t had the mass appeal of my other idea. That i must say that it is heyday i would not be surprised if it was used by at least a 1000 blogs. 

That is quite a high number because it still needed to be installed but since the installation was only two lines of css code, it was adopted very well.  Another reason why it was chosen over is this was because it didn’t needed JS so there were not going to be issues with it.

This in the other hand don’t has that problem because the code needed for it (JS) auto-installs for the user thanks to the fact that it uses the One Click Install Button concept brought by the Blogger Page Elements and Blogger Gadgets.  This also reminds me to think that every single new Mod and Hack to Blogger should be archived this way. As a Auto-Installable Blogger Page Element or Gadget.

So i take my hat off because while the whole thing is simple, it is very well executed.

How To Install

Well, you only need to visit Артем Ивлев blog post and look out for this button:

You click it and it will ask you to log into your Google Account and then will take you to this Settings page:

Since the Page Element calls for a function that positions the little rectangle in the Top left corner of your Blog to show the Blogger Navbar. The little space it uses in your sidebar don’t shows a thing. For that reason i recommend you to leave the title field blank or just put a “.” or a “-“ simple to identify the element in your layout. You can then just drag it down to the bottom of your sidebar and leave it there.

Some Notes

While the Retractable Blogger Navbar mod is very well done. One of the rough things about it is that you cannot customize the text in the rectangle that serves as the “show navbar” button. So it will show as it is in Russian. Another thing is that it would be great if it not only the text could be customized but you could add a little favicon sized element you could link to that would really make it stand out, or that it already came with a arrow pointing down as a way to better indicate the action of what it does.

But at least i can tell you that it works very well and in my test of it cross browser. It worked perfectly in every current browser and that when it came to IE6 or IE7 the times it didn’t worked it just didn’t do nothing. So it will not get in the way of your blog if someone visits with a old browser. They simply don’t see the feature and that is that.

So a good feature to have if you are willing to look away from the peeve it has of not being customizable.

Linkage

Retractable Blogger Navbar

.

.

The first completed came to be by pure extension of what had originated the idea, and that was the original Native Search made by Aditya, so i can only guess that the minute aditya saw that i was asking for a new version, the minute he got into it because this was one of his most beloved hacks.

So, now you too can have this improved search in your blog,and the best of all is that is you got the H.P Blogger navbar or the navbar as it is, now you have two option to do your blog search, and that alone is worth it. in my case i like this search because it allows you to find the post you are looking way faster that making a regular search in the Blogger navbar, you get the search resultst in the same way you get them while searching google or live search without leaving your blog and without having to fiddle with the entire post reaload like the regular blog search built in the new Blogger.



this version has the added bonus of displaying the results in inputs of 10 at a time, and offering pagination depending on the number of results and changing from page to page in a very swift way.

You can test it in this blog search and if you like how it display, then go and grab the finished version at Aditya´s post.

Native Blog Search improved!

This development is part of the Ideas Post call i did to the Bleet and beyond, as a way for anyone brave enough to take on a challange had something to munch on.

And Stephen as the man how is the definition of what Bleet stands took upon on making Lightbox GW work for Blogger.

Now, what it is Lightbox GW and why is better than the regular lightbox script, and that is because they can contain media on them, just like MS has took them back and they are using them in Soapbox in the best way i have seen yet, or how you can see Digg also using them now for they video redistribution, all of that is done by Simi-Modal windows, why they are called like that and where does this comes from?

The short version of the story is that someone that were doing web developments for displaying in IE got to do what he denomined as Sub-Modal windows, windows that didn´t neede to open a new browser window, but that opened inside the already opened window, but that were not really a window, but more like a evolution of a prompt dialog and the objective was to save transitions and to mantain the concentration of the user.

But this is not truly Sub-modal on the technical terms, but on the look of things that is really something you would don´t know just from seeing it works, so it is is more of a simil, hence the simi pfrefix, it is also called semi or quasi, but i preferend simi.

This never catched up at the time it was created, but thanks to Lokesh that did Lightbox the guys at Particle Tree went with the idea and developed Lightbox GW based on it.

Now, this can be a GREAT feature if used well, and it really represents for me what the new web must be. so please take a look at it.

So, that is all the story, now you only need to go to Singpolyma post for the code and details.

I will be sporting it in Bloggeratto very soon and talking more about it.

Lightbox Gone Wild for Blogger

If someone had told me a 3 months ago that a CAT, was going to be worthy of being a Bleet so fast i would have called them crazy, but what do you know. it not only was a Cat, but a purple one that made it.

So, without much to Add, i am very happy Purplemoggy ported this singpolyma hacka, that remains one of my favorites from him and now is going to be usable in the new blogger..

This is a important hacks becuase it add personality to the comments, and it allows you see very quick who is commenting on your blog.



See?, cool as ice (yeah, a bad 90´s pun, sue me)

Comment Author Photos

Always nice Annie got worried seeing ugly blockquotes and in a true Bloggerosphere Public service, she wants to tell you how to make them prettier.



what more i can say?, nothing!, so please go and spice those blockquotes:

Pretty Blockquotes

What to have a vibrant color cordination in your post pages?.. now you CAN!.

Thanks to Vivek, that in fierce determination to have Rainbow Bright Comments, he took both Ramani and Purplemoggy work, and expanded upon it to make it more "colorful" (pun intended)

So, if you want that your comments look like this, and never ever again that your visitor confuse what your response to them where, then this is for you:



Add background colors to comments

New versions of previous done hacks are always welcome, this case it is even extra welcome.

This is the second version of This previous Hoctro hack done by purplemoggy.

The difference is that this one tries to be more efficent in relating the articles and you can set how many Related posts you want to show below a post page.

Related Posts

One of the hardest hacks and widgets to archive in a good fashion, are Related Article widgets, becuase even in the pro-sites that use them, most of the times it is just a quick title search result query, what is needed for it to be perfect would be a code word that could be placed where the Related articles widget is goung to render, and having a script that could search for the target word or words in both the titles and posts, to render a result, so yeah, it is hard to make such a thing.

However, not fret, if your blog uses post Threads, then it is really not hard, becuase then a simple title search would do to render perfect results.

Hoctro version of this is just that, a related articles widget that would be totally useful to you if you are using a lot of Post Threads or Your Blog is completely based on them.

A example of post thread is precisely the Blogger v3.0 prefix in this title entry, if i were using the widget, the it would show the latest matched to that post thread.

Same goes for "Blogger Says".



So, if you use them in a common fashion, then feel confident on using this widget, it will apper in your post pages to let now your visitor where to find post just like the one they are reading.

Blogger Hack: Related Articles Widget

This is a simple but yet interesting variation of Hoctro Breadcrumbs hack, Hoctro version is based on Referential Context Location that revolves around Labels:

You are here: Home > Label > Blog Title

And Purplemoggy is based on the Date, that will point you to the Archive of the blog.

You are here: Home > Year > Month > Blog Title

So, even if it is just a matter of personal taste, choice is always good.

Year & Month Breadcrumbs

You asked for it in over 100 e-mails so far, and you have asked me about it in the chat and in this very blog for it. and not last, it remains the most popular post in Bloggeratto, over 100 blogs use it in v2.0 and now you wanted it for v3.0 so here it is:

1.-Open Your Layout Settings
2.-Go To The Edit HTML
3.-Put This Two Lines Of Code Inside The CSS Section That Is After The Color Parameters Arrays Of Your Blogger v3.0 Template And Before the /head Code Tag:

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

Need more guidance to do it? ok, just look for this spot in your template Before the /Head code tag in the CSS section:



And the put it there so it can look like this:



4.-Save Template
5.-Look At Your Blog

That is it, just two lines of code to do it this time, now, i must reiterate, this code only works for Blogger v3.0, if you want any of the 2 versions for Blogger v2.0, then you only need to go to this post:

Blogger v2.0: Hovering Peek-A-Boo Blogger Navbar.


If yo still need to check how it looks in v3.0 first you can look at the v3.0 testblog:

testabloggerato v3.0

Why is this hack great?:

-No more need to erase the Blogger navbar without it getting in the way your blogs looks and works.

-You support Blogger default features unchanged and that makes it better than erasing it..

-It really looks cooler.

Now, more about this version, given the nature of the new Blogger and that i am no coder, i was not able to make the old code to work in Blogger v3.0, so i resorted to update this CSS code that is a update of the never released CSS version (until now) for v2.0 that Aditya also coded for me, the reason i never released it before is because when IE6 was out, the CSS version didn´t even hide it, much less worked for it.

Now it will hide it for IE7 and remain active, but will not offer the Peek-A-Boo funtionaly for it.

This is because Opacity didn´t make the cut into the new IE7 CSS support, so iguess maybe next year.

This CSS hack works for any Mozilla based Browser and Opera, i have not been able to check it in Safari, so if any one could check it for me and let me know, i will add it here.

So:

Basic Support: IE6 & IE7 (Hidden & Active=It is there invisible)
Semi Supported: Opera 9.0 and up. (a litle flickery, and can be activated by clicking on the search field too)
Full Support: Firefox, Iceweasel(linux),Flock, MZS6,Netscape, Safari & camino(linux)

If any other hacker can make the old version (css/js) work for v3.0, please let me know, i will still try to convince someone to help me out, if that happens this post will be updated.


*Update-09-11-06*: thanks for the support of this hack and to those over 100 already using it hope you enjoy it and pass it along, and for those other 15 people that have linked to it i also thank you.