Posted by ADMIN in
Amazing new duck menu now can be added for blogger
blogspot animated navigation menuBlogger graphics
All of us saw duck menu in windows and some where els,
and we all love it and the way it moves,
so it’s going to be great thing to see it again here in our blogger “blogspot” blogs.
and here is live demo to try it Click here
(It’ll open in a new window) and see how nice and charming is it.
We need to say here thanks to iBloGraphics.com
 | - Before We Start: - You need to be careful while changing your template. - Before you make any changes, Back up your template and save it at safe place. |
go to blogger.com and log into your account,
once you are in your account dashboard click “Layout” and then select ” edit html”
at “edit html” page Make sure to check the “expand widget templates”
after that we’ll start adding the codes,
we’ll add 3 codes, first one, is the java code, second one is is the css and the third will control where is the menu will be displayed on your blog.
so lets go to add the first code.
at “edit html” page find
<head>
<script src='http://iblographics.com/jquery.js' type='text/javascript'/>
<script src='http://iblographics.com/interface.js' type='text/javascript'/>Find the next code
]]></b:skin>
/* Dock menu by www.iblographics.com
----------------------------------------------- */
.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;
}
/* Fin del dock menu
----------------------------------------------- */if you are have expirence with html, you’ll be able to add it where ever you want,
if you don’t have, you’ll add it to the default place,( top of blog ) .
so lets learn how to add it to the default place, find
<body>
<div class='fisheye' id='fisheye'>
<div class='fisheyeContainter'>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUjrw3p3ftKXoBTFcrJcI8AcioVR1nLUg5bW03NUGeQwCsp0TdcEuGnux0k97QHK93H9j2NHD2ItQZkxTURqRzS-9SJZbhYN7lrLaJ4aHtfAbZXghA6wsgXgtZdi-CmXLah8gKC30k/s1600/music-trans.png' width='30'/><span>Home</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt8z8K0Gx-jtVFWZ1Yo7cbjZu8SqbBZ1nikTtOyMR4rhjsUZ8Jd-_cO_tuQQWck4HQiQrbrqIG117T2TGucMDVVAONTIaKzuVpfQUPBjYr26tBFM-bprtKWmOXhFA9QNg_4vFKhq7s/s1600/rss2-trans.png' width='30'/><span>Email</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIVYL0ya78Y3QYXGhyQTCVwLur6zGC-1HgznUxwgmOiwkYPwzhhgWPu8KAzk4aDmKkVYVYGfaU_0kvFcI_rRiJiXF21EWb664U5v5iLUtIK07Twh_K_ZilXxqnCR3HRLpDleg9ZEZo/s1600/link-trans.png' width='30'/><span>Display</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmenwZPLnUw4eqalUxxjFeI3VrXwE7ShV9GsnS5knAY6aJScf3AnaS7WqCYueAWBlnv2XHSCw6EntOlV7BKX2wlwyv6w7jg4l3x6lidrpc8WcTaPpXjbpeTJd7-VIQeRSKj5WpFvQQ/s1600/home-trans.png' width='30'/><span>Clock</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-tMg8Ac3fwJnl2kpTUBZZpTfUV0AU6Rnflv9AeGiKR5x8rxi_Rt695sL3WmlqcjbsEixRl2mRVgZ7kXutubf1DU5zFekplY9qC3-xeDDb1H9ds24d6zPMBnc8wuFmsL0miwXWiC25/s1600/history-trans.png' width='30'/><span>Web</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCd5spk7JDZs9vrRf2yVsx1pzH6dvMVm_KLrVnEbf0PpKA0v6yBMpEpCFUz-iHN6kvKXGdlfsc7x4toIP3WDVqf4GFhZyOP1iP-j7xe1bcOTYl4otVOTEqtgtSbjkvMYA8XFPGTZHi/s1600/email-trans.png' width='30'/><span>Home</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEHORHBYaOxfdcFsGIo6mkgfC9ICuTfd6WljDQm88iG-BdlacPwbB0T50ghTiSX4_zdE3OvuvcA4LAal0H8UsI3hGDKIGEqnAs1zVKzRPAZM5FGk-o54qaBsYySC2_HsCe3qz_Lzfv/s1600/video-trans.png' width='30'/><span>Email</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEDeC6iwZbP3ZxhtK0t1eufAr5FYTAjJAoTe8xUD51mCMQ_SjVVvsCsUAzCYiSJzXrxxXhXlYgd5zO1XapEGgTNQ2IwUCLL5xtLUMy-5FtgBJRNTW2m-e2AK2LDh4-_yvD6Zm9xPsN/s1600/rss-trans.png' width='30'/><span>Display</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ3BIb-pMY-jXU72faOhUmHXl4E4fwZOiP5SnNCgU3evrLXHn5RlCe0xaHKhIBatdIeIVStYhPETAwJE06ILlUO_PBHFpm4OVkHoyIo-IOIjNtrduuiOwYVmcPh0CDnQL8JA1bhCxM/s1600/email-trans.png' width='30'/><span>Clock</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHrxMH5gbxb6p4z9JDiZotNqNlpkfcxzgWg7C5PDhcKzB_yG4DPUIj6HP9_pm02TN9NLRoVxzqj51VOeJUI0M0AzeughoSHYGku7TlnpuGLp1BAOhUePyFrpqqtl7hK7ysMAXIueEx/s1600/calendar-trans.png' width='30'/><span>Web</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZY9qA7MmMeavDqrT9kvbm4fZqUh-QeDtjlhDyNYKQ74Ea3sC4x4nKZaHgelDBoXuB3aQlPb_GY0-1M8Cd4stW0y5bNlODZjoxm0HSpZ6ICcpjvGckgNSud6Ul8xOdaG5SXysSxrHr/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>if any one have any suggestions about this menu icons and size please comment,
0 comments:
Post a Comment
sadasdasda