CSS3 Fisheye Dock Navigation Menu For Blogger

Advertisements
Dock Navigation Menu
If you are the diehard fan of Mac operating system, then you will love the CSS3 Fisheye Dock Menu specially assembled for Blogger users although you can easily integrate it in your WordPress site because it is flexible enough to take shape of anything without any difficulties whatsoever. This Dock menu will give a new life to your website because it will scroll along whenever your visitors navigate up or down the page. On the other hand, it will keep your visitors interested in your blog because this widget has capabilities to amuse your readers. Moreover, it will turn your dull looking site navigation into a Mac-style site menu.
I know you would be interested in previewing the widget, so before we jump onto our Tutorial let us first have a quick look at our Dock Menu.

Features of Mac-Style Dock Menu:

  • You can easily include 9 different site links in this widget so your visitors can easily navigate your blog without any hassle.
  • It is compatible with almost each and every browser i.e. Google Chrome, Firefox, internet explorer and etc.
  • It is Floating/Scrolling Menu so it will roll with your readers while they move up or down.
  • It is manufactured with super-fast Jquery and CSS so it will hardly affect your site speed.

How To Install Fisheye Navigation Menu in Blogger BlogSpot:

Just like other Blogger widgets guide this one is also extremely straightforward and would hardly take more than 10 munities to integrate it in your blog, just do as follows.

  • Go To Blogger.com >> Template >> EDIT HTML >> Proceed
  • Now to add CSS Style Sheet search for ]]></b:skin> and just above it paste the following coding.
/*---MyBloggerLab.com Like To Enter Advance Traffic POP ---*/
  
div.cap {
 display: block;
 height: 100px; 
 width: 40px;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVv1ld1FJkCcL4b5TncVbF_86kyq9e-1152uQ7mZpr42y4z3xH1BqCzn9pKsdQit5GlBJmPnnyij3Ua_ot3Mgqrbd6Q5McN4FwLxo8tZnSHfdgw0Eoqw65CGg-vYxG61TzgA1BbEkIVuQ/s1600/dock-background-left.png)bottom left no-repeat; }
  
div.cap.left { 
 position: absolute; 
 bottom: 0px; 
 left: 0px; }
  
div.cap.right { 
 background-position: right bottom;
 position: absolute; 
 top: 0px;
 right: 0px; }
  
ul.mbl-dock { 
 display: inline-block; 
 height: 130px;
 padding: 0 40px 0 0; 
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVv1ld1FJkCcL4b5TncVbF_86kyq9e-1152uQ7mZpr42y4z3xH1BqCzn9pKsdQit5GlBJmPnnyij3Ua_ot3Mgqrbd6Q5McN4FwLxo8tZnSHfdgw0Eoqw65CGg-vYxG61TzgA1BbEkIVuQ/s1600/dock-background-left.png) no-repeat right bottom;
 overflow: hidden; 
 margin: 0 0 0 40px; }
  
ul.mbl-dock li { 
 display: block; 
 position: relative;
 float: left;
 width: 50px; 
 height: 50px; 
 margin: 60px 0 4px 0;
 -webkit-transition: 0.15s linear; 
 -webkit-transition-property: -webkit-transform margin;
 text-align: center; }
  
ul.mbl-dock li a {
 display: block;
 height: 50px;
 padding: 0 1px; 
 -webkit-transition: 0.15s linear;
 -webkit-transition-property: -webkit-transform margin; 
 margin: 0;
 -webkit-box-reflect: below 2px
 -webkit-gradient(linear, left top, left bottom, from(transparent),
 color-stop(0.45, transparent), to(rgba(255, 255, 255, 0.25)));}
  
ul.mbl-dock li a img { width: 48px; }
  
ul.mbl-dock li:hover { 
 margin-left: 9px; margin-right: 9px;}
  
ul.mbl-dock li:hover a { 
 -webkit-transform-origin: center bottom;
 -webkit-transform: scale(1.5);}
  
ul.mbl-dock li.nearby { 
 margin-left: 6px; margin-right: 6px;
 z-index: 100;}
  
ul.mbl-dock li.nearby a { 
 -webkit-transform-origin: center bottom;
 -webkit-transform: scale(1.25);}
ul.mbl-dock li span { 
 background:#fff;
 position: absolute; 
 bottom: 80px; margin: 0 auto;
 display: none; 
 width: auto;
 font-family:arial; 
 font-size: 11px;
 font-weight: bold; 
 padding: 3px 6px;
 -webkit-border-radius: 6px; 
 color: #000; }
  
  
ul.mbl-dock li:hover span { display: block; }
  
div#mbldockwraps { 
    position: fixed; 
 bottom: 12px; 
 height: 120px;
 padding: 50px 0 0; 
 text-align: center; 
 -webkit-border-radius: 6px; 
 -moz-border-radius: 6px;
 width: 100%;
 line-height: 1; z-index: 100; }
  
div#macWrap { 
    width: auto; 
 display: inline-block;
 position: relative; 
 border-bottom: solid 2px rgba(255,255,255,.35);
 line-height: 0; }

  • Now within the blogger template search for </head> and once you find it, just above it paste the following Javascript code.
<script type="text/javascript" src="https://mybloggerlab.googlecode.com/files/jquery.js"></script>
 <script type="text/javascript" src="https://mybloggerlab.googlecode.com/files/jquery.tipsy.js"></script>
 <script type="text/javascript">
  // Place all Javascript code here
  $(document).ready(function(){
   $("a[rel=tipsy]").tipsy({fade: false, gravity: "s"});
    $("ul.mbl-dock li").each(function (type) {
        $(this).hover(function () {
          $(this).prev("li").addClass("nearby");
          $(this).next("li").addClass("nearby");
        },
        function () {
          $(this).prev("li").removeClass("nearby");
          $(this).next("li").removeClass("nearby");
        });
      });
  });

 </script>

  • Now last but not the least search for </body> and above it paste the following HTML Structure code.
<div id="mbldockwraps">
<div id="macWrap">  
<div class="cap left"></div>
<ul class="mbl-dock">
<li class="active">
<span>Home</span>
  <a href="http://www.mybloggerlab.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgiGMaoAtLR6LpbRJnWk0_mrsvsNpzC6LUK3QJHHFRUi73is7H2kBCpwBms-uT4gTyjyBDyon48UnPJoQ5ZPTr2XFICT01hMnh6Xjn7IRukEleXRRz6x7ZARRPKGQndV6UorEP5TOM39E/s1600/MBL_home.png" /></a>
   </li>
   <li>
   
<span>Contact</span>
   <a href="http://contact.mybloggerlab.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6wYisT0eC9ksyFvjly7d4frK0EZZiDiWQoDnI9Q5DBhZAw3qP_mXtWtfS9PHfVhstOnBsqewD9FNdA0hJRPV3vKeumE_Jy7BncM0ID_2fLnrlFXMPxlrUT3waVnfRFz9S6bUh6c9KCMA/s1600/MBL_contact.png" /></a>
 </li>
 <li>
<span>About</span>
 <a href="http://www.mybloggerlab.com/2012/05/some-thing-about-author-syed-faizan-ali.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs3wNksF3hahps1YBTl-R0Kr5ntwVDLAc3g_nUoYG6a3DQwhOogzKCTNadLoWm9V3lOjUqggYM60OarfWKzR7vli9UuscrJxYDspJ_k33P99N6rMW0NqvQ0xCV-CUB31r6_3Rz7l6ZdRU/s1600/MBL_about.png" /></a>
 </li>
 <li>
     
<span>Search</span>
 <a href="http://www.mybloggerlab.com/p/search-engine.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoXGkLJBAwcsx9VXSBfWVD2Cf78h2ROMgJ9UmMxEvxzRfNM3uf0NyDwBFryPUWohqHLbZkahSqb0VB60LhU5L_IqANgCZTuN6jgzoHCdy0aex0fxedK3w0yFZmOUQkBW34lWGzBWfNmhY/s1600/MBL_search.png" /></a>
 </li>
 <li>
     
<span>Feeds</span>
 <a href="http://feeds.feedburner.com/mybloggerlab"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6FM4QSIxpzA3L6vJTg5zbl5F7qQvo_Vu9R_a4nJDf4ukW6gWzLqM6J_d8W4LNNjGThy_zc1eQgBcdBp82GnRXEXg-c6nfOFKRxO30ucEcZ42pFHh62F7u8F_GiJ87M3RFZyZrn8HLP04/s1600/MBL_rss.png" /></a>
 </li>
 <li>
<span>Blogger</span>
 <a href="http://www.blogger.com/profile/04420446464276156950"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi50lDh49jAdNxgrNCBpGlsM2XW0hU2OU9BGGrG6M57z_UhYH8_c01Aaj0qvwyHCBNEaKFtdR3IXTB-59_Bs9jAlFRA1f76gANMTridKZGLL_SgpznqgJlL3zXvKooH4PD2gEUKZTgIfSY/s1600/MBL_blogger.png" /></a>
 </li>
 <li>
<span>PAGE</span>
 <a href="http://www.facebook.com/mybloggerlab"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZgDV0XlQOGJAhK7F8LsTWoVikRl4HcYPkl3G09BfmBPkuTR59nj0ZPV0ipLcfYN-dPLZuNDr_-3zaZjnJSJC6GckATIx5yvJdKn99h3P22GF95QCFF4Vm2Z4ktZntqKyXy4tdsZ_JFPQ/s1600/MBL_FB.png" /></a>
 </li>
 <li>
<span>Twitter</span>
 <a href="https://twitter.com/mybloggerlab"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimJdM622nFajmNaE_PjWnH81LRJAb8g7UIBJGbr0Z0DW_RpI2j7TXYWqyDXOh7VK9jNJaY4IpdycQ8oqWqfGhGq2wzI2R4a6FwCT4YJdA_2ig0MlJonWI47sJz8NJbvX9UbTqasHobnCw/s1600/MBL_Twitter.png" /></a>
 </li>
 <li>
 <span>Pin IT</span>
 <a href="http://pinterest.com/fosterzone/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh07pDoW4Rn1bM4AD6ZTirLdg_eUiM7l3_8odOoMdh2rUN3GtDy0gYH2Uo2KcIa9HQGglibCQ_thxzqPKm75Ob7FmJ8ijoW0jOVGrCkYRm8CNwoXbi0jK_7wex2F2tdzkh4QnO7aJEtpVo/s1600/MBL_pin.png" /></a>
 </li>
 <li>
 <span>Google</span>
 <a href="https://plus.google.com/u/0/106374439082237286396"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5hR54DhtyrZIUs66cwOVKTscPqqLr95oa5rrikjKz2JsUWSSrin5k2VFEBC7iNF9uN0LxGQs3xIyCdJDVJCx7KzYgJTHDBz9UR70_9TSpkXmxZJt1UBwRHwmHf8iRF_WMKKZBEDpyqO0/s1600/MBL_googleplus.png" /></a>
 </li>
 </ul>
 </div>
 </div>

All Done: After customizing the widget according to your desire needs go ahead and save your template by pressing Save Template button. Now visit your blog to see a perfect well designed Mac-style Navigation Menu.

From the Editor’s Desk:

I Hope you have enjoyed it, truly this widget is among the best menus which we have ever created till date. However, soon will be using the same Dock Style to roll out yet another Social Sharing widget.  Till then take a lot care of yourself and your family peace, blessings and happy scrolling.
Acknowledgement: This widget is solely produced by MyBloggerLab.com, so if it was found that someone reproducing or redistributing without proper credit back will have to face detention inform of DMCA reporting. Please keep the environment Clean and use it for non-commercial purpose only.

Related Blogger Widgets:
Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

6 comments

September 1, 2012 at 12:39 PM

This is really a great tutorial about how to convert old menu into new mac menu.Thanks to the author for this article

September 1, 2012 at 12:53 PM

Gr8 creation Ali.

September 1, 2012 at 8:48 PM

Very Nice good work i'm goin to implement it on my blog
Try replacing the same thing with sharing icons i mean keep sharing icons instead of navigation icons

September 2, 2012 at 12:14 AM

Awesome post brother Faizan.
Stay Blessed:)

October 19, 2012 at 11:40 AM

great stuff i have problem when instal this widget my comment buttons like "publish" "preview" not working its like this code cover it over ot something ...
www.photojunk.org

Editorial Team MOD
October 19, 2012 at 11:44 AM

Yes, We have also witnessed the Same Bug. Do as Follows.
Install this Widget.
Write a Comment.
Then Scroll Down a Bit and Keep the Dock menu as away as possible and then Press the buttons both of will work perfectly.

We will soon solve this issue. Peace.

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2018. MBL Networks, All Rights are Strictly Reserved.