The Simplest And The Smartest Blogger Related Posts

We have been discussed about How To Make A Blogger Related Post before, by written a JavaScript and CSS directly into our HTML Template.



Although this methode is more safer because we could see the naked ("true") JS and avoid the malicious script, to some people especially for newbie, it could be complicated to implemented this method.



If you are searching "The Simplest And The Smartest Blogger Related Posts" and did not bother with external JS.. (Before make this posting, I already checked that this code was "clean", even I used it too for this blog). Than I think this Blogger Related Post Tips will fit with you. I have found this code in more tech tips



To display related links at the end of every post. copy this code into a new HTML/Javascript widget and place at the bottom of the post or at the footer in the page elements section.

Widget uses jQuery v1.3.2, If you already included jQuery into your blog. no need to do it again.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"  type="text/javascript"></script>

<script src="http://blogger-related-posts.googlecode.com/files/related-posts-widget-1.0.js" type="text/javascript"></script>

<script type="text/javascript">

relatedPostsWidget({

   'containerSelector':'div.post-body'

   ,'loadingText':'loading...'

});</script>

And this what will we look after save...

Auto Hide/Show (Toggle) Blogger Navigation Bar

Instead of Removed the Blogger NavBar as I mention before (Removed Blogger NvBar), A lot of better if we  make it "toggle". We can set the display of the Blogger NavBar to disappear when our mouse pointer not in the Blogger NavBar position (top of our page),



To enable the Blogger NavBar Toggle function in your blog, you can follow these...



1. Log in to Blogger .

2. On your Dashboard, select the Layout menu, than click the Edit HTML. Under the Edit Template you can see your Blog's HTML.

3. If you already do "Blogger Tip Trick No.4.: Removed The Blogger NavBar", Then you must..! delete your code..

4. Then replace it / insert with this code..

/* Blogger Navigation Bar */

#navbar-iframe {

opacity:0.0;

height: 10px;

filter:alpha(Opacity=0)

}

#navbar-iframe:hover {

opacity:1.0;height: 30px;

filter:alpha(Opacity=100, FinishedOpacity=100)

border: 2px;}

If you never change your Blogger NavBar before, Just insert the code. You can Look at Blogger Tip Trick No.4. to see where you must put the code. (or see #5)





5. The final position is  shown as below..

  

 

5. Finish...

How To Removed The Blogger Navigation Bar

If you bother with the view of your Blogger NavBar (top of your blogger page), then you can get rid of it with the following ways:



1. Log in to Blogger .

2. On your Dashboard, select the Layout menu, than click the Edit HTML. Under the Edit Template you can see your Blog's HTML.

3. Insert this CSS definition as shown as below...

 4.We can easily show it again by removing the CSS definition