Latest stylish 2013 CSS3 Fisheye Dock Navigation Menu For Pro Blogger

If you're the conservativist fan of raincoat software package, then you may love the CSS3 optical lens Dock Menu specially assembled for Blogger users though you'll simply integrate it in your WordPress website as a result of it's versatile enough to require form of something with none difficulties some. This Dock menu can provides a new life to your web site as a result of it'll scroll on whenever your guests navigate up or down the page. On the opposite hand, it'll keep your guests inquisitive about your diary as a result of this appliance has capabilities to amuse your readers. Moreover, it'll flip your uninteresting wanting {site|website|web website} navigation into a Mac-style site menu.

I know you'd have an interest in previewing the appliance, thus before we have a tendency to jump onto our Tutorial allow us to initial have a fast look into our Dock Menu.

Live Demo

• 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.

/*---TechnoZodiac.com Like To Enter Advance Traffic POP ---*/

  

div.cap {

 display: block;

 height: 100px; 

 width: 40px;

 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaNw7AwQkLrQfklGRBTApRjkdw9dcBHCookPFG6YCMdmebpJ81HFybJJ_zPwZ5PXLEers2aoGaIda8_lGSDMB4LLIjUXShq30hXPC-CghfPNmiZcwjDreTqQoU-TmiSdOGwr4kWWaN60c/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/AVvXsEgaNw7AwQkLrQfklGRBTApRjkdw9dcBHCookPFG6YCMdmebpJ81HFybJJ_zPwZ5PXLEers2aoGaIda8_lGSDMB4LLIjUXShq30hXPC-CghfPNmiZcwjDreTqQoU-TmiSdOGwr4kWWaN60c/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="http://mybloggerlab.com/Scripts/jquery.js"></script>

 <script type="text/javascript" src="http://mybloggerlab.com/Scripts/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.technozodiac.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR_I55uOg9TvPNXYKdCIYxZgbAaIcw9GE5WtuK-qSJsQRJJooeiTKHpEVPEdNGxxxmRG4kwGOkHzE782bqlm_fYEMoLW30UMwoU7q9BUeLDon0QcXy24-Wgj5rqKTTRkgeq6Yk2Xd_qGA/s1600/MBL_home.png" /></a>

   </li>

   <li>

   

<span>Contact</span>

   <a href="http://themobiforest.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1B7d0_j8Ds0fOfOsfXhuaqFIqgCoZtctCl6MbMlGzHr-KDT2-HYZmGBgEB7tqiS0yGP07X1OrU2VUvnVZ7s409XAkHZzAkVUOqQX_D8Aek2XmpWG0IH7n2TJ5hHZAkdfgEhIFHVBZ4SM/s1600/MBL_contact.png" /></a>

 </li>

 <li>

<span>About</span>

 <a href="themobiforest.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE0M0KtxQN7XgtNpvtWwWLAYGQxyY7A3QokePfSMo8f6Hcl4lTH-HL4O9Nz0l8AiPT3QDTLE-5wMBXfFHF2uLU4hlvE2QSuz7iCjk8z9gJPpgx4f7TNweZWTBnwAzBgD_hyA835dIU-sc/s1600/MBL_about.png" /></a>

 </li>

 <li>

     

<span>Search</span>

 <a href="www.technozodiac.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZnMIFoBdzaZO3JRh0kuY0XDsZubVfjjPUykYIQKhbHuz-7JNpKQJWj9oJ86M8-MkjBjL2boGhBE1tHRGzFwNPDp44je85lz7W4-Y4NNIVMZKVhJSeXkpWD9sBVFnV0VwkKfI0zK1OnOk/s1600/MBL_search.png" /></a>

 </li>

 <li>

     

<span>Feeds</span>

 <a href="http://technozodiac.blogspot.in/feeds/posts/default?alt=rss
"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEswy78xfBM_ka2U95Qp4zQzFlNf9lMskKGKE3A9XF_IjsZr3bdVZhocQUfD3gfkGeHvqCHBTMPPTW4o8jJWdfRsO1acG3LR5aXjcEX4msU0MOYxednIfTRjjwNmv_QvNfTB8P8wRlp34/s1600/MBL_rss.png" /></a>

 </li>

 <li>

<span>Blogger</span>

 <a href="http://www.blogger.com/profile/09260028753239129185"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFN6vNlMldkplOAZKhHwdYNZCHcVHXysFJz0mhIoyTYA4kJbD1CNV5Enu-vKBm4Jc1_NlLXEtw7bXR99XUunlRZrZDSqIV3G7G9KmLvoaH2HbChYA6U-ESErHT-aCYC9NZZSKNuup1HT0/s1600/MBL_blogger.png" /></a>

 </li>

 <li>

<span>PAGE</span>

 <a href="http://www.facebook.com/technologyzodiac"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGCibJVb0ziiKvqx2ByaS_BOZOjuH27pvPJ8eWaBASoHMEsc5_J9LGeei3z8bgP0lV1MrQ99BQ6n3W_OnlLq-xY5sv-s1RMQFJ0bDcgoLzmWzWdsCJAlv_3xj0EbbQWKDIRD4gN_REoyE/s1600/MBL_FB.png" /></a>

 </li>

 <li>

<span>Twitter</span>

 <a href="https://twitter.com/technozodiac"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDdVmeXxkIUeXmK271VlvPWZK9Z8Gpb2XRiAFBjR0oO38ut-J9yOPaiRLfaNb0IbhlYWFOAJcsv4Z7NQhyphenhypheno3-gLEQelJFhmA_JLrddSMGEisHvwHqqKneLPir9P9WoYWfEarrH6PqIwH0/s1600/MBL_Twitter.png" /></a>

 </li>

 <li>

 <span>Pin IT</span>

 <a href="http://pinterest.com/priyeshmarvi/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCdYoc5sWf1n12FFO3wuWmLE-YeknCzCXPbvV4GiJYXSpHkxQlgBrDoaFer8NNu3_oeeWmqHSu1OpjX6SzXEAV3pzTLD0AhNZ_U90TSZXs7jv9SY529QEdThZMeeIWm79aJogmpkILuIs/s1600/MBL_pin.png" /></a>

 </li>

 <li>

 <span>Google</span>

 <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEWw4eLrq-a0o14_r8nLy1tYlM8U79FV75YvXbOvBpAlNIjCO-6JNqJIQqQaMA-aaBWDsTpsjXrgej3bvqvCvIJ5w6LKwAXPcTq3ym1fAH2gKmfsR7mB6da9gYijE9V1_O4TtELxrcMFM/s1600/MBL_googleplus.png" /></a>

 </li>

 </ul>

 </div>

 </div>