Sunday, February 16, 2020

Css3 Fisheye Dock Navigation Carte Du Jour For Blogger

If yous are the diehard fan of Mac operating organisation CSS3 Fisheye Dock Navigation Menu For Blogger
If yous are the diehard fan of Mac operating system, thus yous volition dearest the CSS3 Fisheye Dock Menu particularly assembled for Blogger users although yous tin easily integrate it inward your WordPress site because it is flexible plenty to receive got shape of anything without whatsoever difficulties whatsoever. This Dock bill of fare volition give a novel life to your website because it volition scroll along whenever your visitors navigate upward or downwardly the page. On the other hand, it volition proceed your visitors interested inward your weblog because this widget has capabilities to amuse your readers. Moreover, it volition plough your irksome looking site navigation into a Mac-style site menu.
I know yous would hold upward interested inward previewing the widget, thus earlier nosotros bound onto our Tutorial allow us start receive got a quick await at our Dock Menu.



Features of Mac-Style Dock Menu:

  • You tin easily include nine dissimilar site links inward this widget thus your visitors tin easily navigate your weblog without whatsoever hassle.
  • It is compatible with almost each as well as every browser i.e. Google Chrome, Firefox, cyberspace explorer as well as etc.
  • It is Floating/Scrolling Menu thus it volition whorl with your readers piece they motion upward or down.
  • It is manufactured with super-fast Jquery as well as CSS thus it volition hardly touching your site speed.

How To Install Fisheye Navigation Menu inward Blogger BlogSpot:

Just similar other Blogger widgets take this 1 is besides extremely straightforward as well as would hardly receive got to a greater extent than than 10 munities to integrate it inward your blog, only attain every bit follows.

  • Go To Blogger.com >> Template >> EDIT HTML >> Proceed
  • Now to add together CSS Style Sheet search for ]]></b:skin> as well as only higher upward it glue the next 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/AVvXsEhOf_0moVSFAorlnZjleHpfAOLEcFTAb33qYIcWX_0CtHO4Tryr5IZhIYx1fdb9_CqDzpDpy5Luc5dLIMTViDgp-qMK-aQmspQxGJDBhHlvJJGP0Go5bCmMkRFpUf9u50Yj_5ujOZw1hZo/s1600/dock-background-left.png)bottom left no-repeat; }
  
div.cap.left { 
 position: absolute; 
 bottom: 0px; 
 left: 0px; }
  
div.cap.right { 
 background-position: correct 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/AVvXsEhOf_0moVSFAorlnZjleHpfAOLEcFTAb33qYIcWX_0CtHO4Tryr5IZhIYx1fdb9_CqDzpDpy5Luc5dLIMTViDgp-qMK-aQmspQxGJDBhHlvJJGP0Go5bCmMkRFpUf9u50Yj_5ujOZw1hZo/s1600/dock-background-left.png) no-repeat correct 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: see 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: see bottom;
 -webkit-transform: scale(1.25);}
ul.mbl-dock li bridge { 
 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 bridge { 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: company 2px rgba(255,255,255,.35);
 line-height: 0; }

  • Now inside the blogger template search for </head> as well as in 1 lawsuit yous respect it, only higher upward it glue the next 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");
        },
        component subdivision () {
          $(this).prev("li").removeClass("nearby");
          $(this).next("li").removeClass("nearby");
        });
      });
  });

 </script>

  • Now final but non the to the lowest degree search for </body> as well as higher upward it glue the next 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/AVvXsEj7Fgo3q-utD9Jv6HvAaefC0skP_sh1Ukx-vE24g5gCn7z52VSq30SkhzE5RVZms_X6J_SqROxayySWdjNdnoLick_4ytooQka1r41yL_BObJztfoLqr6wfGMKJ5sH71QVSO42UTdqhLJ8/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/AVvXsEh-psqVmMRs7snXN1yxWhPKL_N-DZ_WJL1W-LOjnQ33gXMrDv6mebzKEw7EqK96SgtuJOLBWThnjT82FHBuae4NFi74NfMRuRm0gTM7V4p8Fsrp2kiJpgP9lGERMngLfQHdy0AcPH0y_94/s1600/MBL_contact.png" /></a>
 </li>
 <li>
<span>About</span>
 <a href=" /search?q=css3-popup-text-and-image-boxes-for"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDxZ6aQeV77j882Ba-P1P7QcS58D_5xpSKLwy2ICxFbDEEGTJiz7TSlEZqgAF78bKtSSSNjESgazPo93-YvXFN9Qoan5TcqCfrwg0nXEZuDPMyscvjN5rhDXthxLhZV0mnQVeSb5XvnmM/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/AVvXsEjtqLb2QN6lXlFMI_UZGV_fhtmTlFYV0L1DlNrOhN0S2YxMwjiDmkGMZwIHY0bDdJLBxGdPez37d8Fg7aM6Ad11hFaxrC7lFKSIm-OG476YxTrysi-z3JGq0wYuvThDGl6455WyL8_quwE/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/AVvXsEjLgOpKXY3x3Jmm5Q40yyvnv_zZSEivcnkG8pvXlv3aW9AJ_3kQEsKfaPG0b-n2wM7pKbusASIVUpe-RYZ7uSmMOD7POqqc7C_xs11z9DDrkHBP5ejPVWNBJ6f-48tDHjL6NOAG6RVsDQM/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/AVvXsEgMq8oeFl815SUuoUoJjhQdnSzT1fokixrf08YvVZOC_ld5XXQqPDGOHpz9aF1ONcihwVMuvt4iDNZyNcRSfMnZ87MGg06pq8AitnWlI2l6VqQ6WF5dVrDhaGs5dh-AcsniVlPaN2TbnjU/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/AVvXsEiTzoZ4TwHd8fkK3OdjR2gyK9o_pmC3jWfiay_LqeD44o1G6gGfehR5hlLUjOOs3568La8rZDgZlw_GFb71PH8g6qM9dN6q4Tsmv5EBQKxCpL6R-8hsXmjYIdnEpCUzYSz1e_A2skCDQsA/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/AVvXsEhAyIBRAhVIjwnAzgl-Efw-220N1oszl3Nov2H2fpEAV6c5FxMJyrf0oJpmX-jyiHusjyWw6pHQB0nvm6yvJXHvBNgatxglRBGmrjZ14tSApRr7LKo6V9HIY5TG1E1ldUvfNUdNpynJoNI/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/AVvXsEgLMk9poEqThpn8SbZVgnbdFU12ppArFcRum2rQ0TvAKPJhlYlxwTYN0_8NE2C-8q404NySnWUKmT2QDlvcXbHBkORhda8cT4IeNgqnTyGJ3U0yU-a3ln0VyjaFI6etSvmMUsf-FGGZmFA/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/AVvXsEhU9eoy8cksy_X9CZtzTPK3lgQZscXLqvQEHG_N0McYUxOD_w_ZEbkrlcd63SxiJr2n7jpSV7Z4CdJ7Kw3Uaxxk-VCHGipu5KuF8P174z_7EjiMJPfgMHhmcsU-HSq8-xe72yPhM-akdnQ/s1600/MBL_googleplus.png" /></a>
 </li>
 </ul>
 </div>
 </div>

All Done: After customizing the widget according to your wishing needs become ahead as well as salve your template past times pressing Save Template button. Now see your weblog to run into a perfect good designed Mac-style Navigation Menu.

From the Editor’s Desk:

I Hope yous receive got enjoyed it, genuinely this widget is with the best menus which nosotros receive got always created till date. However, presently volition hold upward using the same Dock Style to whorl out nonetheless some other Social Sharing widget.  Till thus receive got a lot attention of yourself as well as your identify unit of measurement peace, blessings as well as happy scrolling.
Acknowledgement: This widget is exclusively produced past times MyBloggerLab.com, thus if it was flora that individual reproducing or redistributing without proper credit dorsum volition receive got to confront detention inform of DMCA reporting. Please proceed the surroundings Clean as well as utilization it for non-commercial purpose only.

Related Blogger Widgets:
Posted by at
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)