Forget the old style navigation menu. Now, you can add this Animated "Dock Menu" to blogger also.
Steps :
- Log into blogger account. Got to Dashboard and then layout section.
- Choose "Edit HTML" (Note: Before making any changes, it's advisable to make a backup of your template).
- Adding the First code :
Find (Ctrl + F ) <head>
And add this code just below <head>
<script src='http://iblographics.com/jquery.js'
type='text/javascript'/>
<script src='http://iblographics.com/interface.js' type='text/javascript'/>
- Adding Second code
Find ]]></b:skin>
Add code just above ]]></b:skin>
.fisheye{
text-align: center;
height: 62px;
position: relative;
}
a.fisheyeItem
{
text-align: center;
color: #000;
font-weight: bold;
text-decoration: none;
width: 40px;
position: absolute;
display: block;
top: 0;
}
a.fisheyeItem2
{
text-align: center;
color: #000;
font-weight: bold;
text-decoration: none;
width: 40px;
position: absolute;
display: block;
bottom: 0;
}
.fisheyeItem img
{
border: none;
margin: 0 auto 5px auto;
width: 100%;
}
.fisheyeItem2 img
{
border: none;
margin: 5px auto 0 auto;
width: 100%;
}
.fisheyeItem span,
.fisheyeItem2 span
{
display: none;
positon: absolute;
}
.fisheyeContainter
{
height: 50px;
width: 200px;
left: 500px;
position: absolute;
}
#fisheye2
{
position: absolute;
width: 100%;
bottom: 0px;
}
- Now, final code
Find <body>
Add code just below <body>
<div class='fisheye' id='fisheye'>
<div class='fisheyeContainter'>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLAwL0-JcM4eNwsNfMNnh0VARU1k4X6vF9qQzpBTuKem6BPEVW8IGttW_qOHO1XbfqjX9B9avvg3HfFbRda_W4iq_EXDw9oi2wh5czYLQAigEkhzfT4SD71PYnyKcze5KWJ8As_r9D/s1600/music-trans.png' width='30'/><span>Home</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2rKDMDoi3s9y_5TDME4L4Ox40JOBlOeX9zrdhdsZgrVQACP2_awnWkvFLMGzUZSAkr8phj9rjAqkPvZcYi7iN3bdg1PL_hRtwRLJTqO1fVdOTCZWclufzrovdrOn12OxRG01VVGqK/s1600/rss2-trans.png' width='30'/><span>Email</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ1itD-DNfV-JdyfkbrLDEuHV6NxVTfJQbnTJ10XOrh9DoaNvfo_V-TMbkYkuTeOXrg6huGv8jLmd7cj_zt0eV10JptfdpBKE3hyUigtUyNMe0AVlFpyFLAJ1T8ARBgIUwV1rAvJ3z/s1600/link-trans.png' width='30'/><span>Display</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKXk_ZjJeX00g05HGqevDqjBPyHb_pfrUQeTM23P772hLqFldnAicMUB1T2PElKRYZ3m8vvoZG5YO1oMhKYn7k_sAw89xV3gExx-eUCKTFUghMnFbgc1Kw181Ihls2A6Tb2KeYrBOW/s1600/home-trans.png' width='30'/><span>Clock</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKaruPiCI70pWtdUT8LGB9eUhfZP_46o-SoPqBLCfQQybWvVBIoEBmGvzwAqa1TUdZIfmnbQFKPsqhhkOmh5DYUePXKrhCCPSzqL-0JYVcf0FVu8DSYanMwbG2ehGB9ocfvnQ0oUfw/s1600/history-trans.png' width='30'/><span>Web</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy7u3Mvx6jLzNWMKEbk1xnRtedLhh6OhnWpOStU-EFnNIW0QTZ4rLeqTl6MeuYtzyjYF2sjefO8-__3E7_7PrpkvxN19wOSJjRxQWH3CucYeXzxRoZEsqYx70fgsz8a62R_rjC79HD/s1600/email-trans.png' width='30'/><span>Home</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCKMxzCnLDSGtbLEGxy2Fetogeoe2uLpJlgvFSXuuwRfS7X1ztjXKIuTJE96Ahty2q16CugLaUDvdYLAnlqt9RYw6aovu5xZ12bpFsGKIdFmX9FrfitFBKIci4kqeFUDHArSstUAj9/s1600/video-trans.png' width='30'/><span>Email</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVKSJjG0PjrarlSNmBWCkItqOfYWgBKE3FWs82Fk2dgILfOHcGqWRpmx6vfBzO1X2qfLGae-3huq-0lyKiG-KluHR6fBno2CvPfjZUz-rjBP5TuC3xKqsg_fACXxjC3M-LtqhjEv9N/s1600/rss-trans.png' width='30'/><span>Display</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtzZnWnJoMI1PJZMCrjJcWz7dfqQpV5qx2MMegQ06SyUFCp3-A8c1Rzgv0wA0VbGPUhnJaAIJOB0trFweWwxwqZZPgVjGMekHNCbwNsSZ0Jwp7rXvDsKCNSCec4wLDfINwPQrGqFkV/s1600/email-trans.png' width='30'/><span>Clock</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG33CCKQBIy_fTUWm__NqONo6PK8ZRU7ANCJHys5z0pPu-6u6jXCPrNmD5BjgMlOXj-RGkWzPVqgcAl56UzIiwgHNBbrSSbvbwPOOg365RC7XI6h_3CX8Ut0e0TQ0CNeSRzmCt-WsO/s1600/calendar-trans.png' width='30'/><span>Web</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOhyphenhyphenUMQEPgl2fPeTeoL7PiUZGI3qsr5rgtwM3sx4mI_lDKHJmhGBQbyI8JGd-t_tSEeIY6w1ri31HfFTZMPNZH47P9Ec2HQ5yxXKQrAuEBt8Ej7E6siaO5JWye-l0JE-HAGRQGZpeC/s1600/portfolio-trans.png' width='30'/><span>Web</span></a>
</div>
</div>
<script type="text/javascript">
$(document).ready(
function()
{
$('#fisheye').Fisheye(
{
maxWidth: 15,
items: 'a',
itemsText: 'span',
container: '.fisheyeContainter',
itemWidth: 30,
proximity: 70,
halign : 'center'
}
)
}
);
</script>
Finally, Save your template !!!!
Still have any problem ? Post it in the comment box and i shall be hopefully quick to reply.
Subscribe to my feed