CSS3 Fisheye Dock Navigation Menu For Blogger

Socialize It →

Tweet

7

Advertisements

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.

CSS3 Fisheye Dock Navigation Menu (LIVE DEMO)

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:

• How To Create a Full Width Page and Remove Sidebar
• Like To Enter Advanced Social Traffic Pop
• Grid Accordion Portfolio Photo Gallery 

Advertisements

About the Editorial Team

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