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:
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).
6 comments
This is really a great tutorial about how to convert old menu into new mac menu.Thanks to the author for this article
Gr8 creation Ali.
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
Awesome post brother Faizan.
Stay Blessed:)
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
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.