2:13 AM
Unknown
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
Please 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”
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
Find the next code
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
if any one have any suggestions about this menu icons and size please comment,
We’ll add new skins for this menu soon
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. |
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”
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>Adding second code.<script src='http://iblographics.com/jquery.js' type='text/javascript'/> <script src='http://iblographics.com/interface.js' type='text/javascript'/>
Find the next code
and Just “Before” it add the next code]]></b:skin>
And now we’ll add the last code, be careful adding this code in the right please will help you to make it appeare in the right place,/* 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
And after it add this code<body>
Now click save and go to your blog to see the new menu and enjoy,<div class='fisheye' id='fisheye'> <div class='fisheyeContainter'> <a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0GiWPqpOjTc4lEBjgyBhgmuChICS7hyggkBIpHbygKSNvG4Gi5Zi33e6pFjesMbn4rFqLkJstZdy-y9YO3NEtbwZPuKrnXcthu3fENWWWPGJ3b6EJ3iLdjVTay5d1m8_dyhrGUTJs/s1600/music-trans.png' width='30'/><span>Home</span></a> <a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtSqvNGbZTgYrVqlZVCGlvU2QXWzxAhElvhe6ZUouCuYeiiXkN8frt5ElpMQfBJfDg-lRO1hrdMUCxHTipWSDfZ82Ex00cpJNHp8uYY6N9jIrU6hVQB9MFs6bXMDHxRWa4Nk12wEna/s1600/rss2-trans.png' width='30'/><span>Email</span></a> <a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7uP3WUBXfx6M3rn1Nqm28_SQaqGln9Idrhb4rD5-OhET35BVyFSsMNfJcN3gySqD-OSorJz_jk7zhmZmp1rV7zVoj8uBa3g8JHcmKIuTXJScXpYEp5aPMwlPcv9OXN9unZUCHKjms/s1600/link-trans.png' width='30'/><span>Display</span></a> <a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaEwkedB5XKCkUWoOh0i92FSr2SdeiPBikIdHAOBtS_inbx5YhWhHI726W8LBLJmB5Quqh2BWzir3wZdqZKlggazYd8IBWDb5Is5NbxOYFLx-pA5A00uzYLy0uquubadVHzZ1el0T9/s1600/home-trans.png' width='30'/><span>Clock</span></a> <a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3f9DUgnmsyzwQJS8-tlG7vBTALg5Dg5bZTJoNVxnisiHj0Quh5MPodmjjSACdwC7pP2GTuAR_9eP8ffYsoTCqlx1mAuc3FLgmgN1S_uQYI6iRxKK9O8zGn3oxIzKL5puAehdPqwXe/s1600/history-trans.png' width='30'/><span>Web</span></a> <a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEAGWNRrjMiXYmA7s7i79KKRxnGhoUdQt-6heA3cMcVwWBKYyd8QtSUJHhPvrfD0CV38o3ENGyvcevCaCQVsjS84Oej9lnCDJJnJyfcrfUDd1WnzJeQlJkA1Yv_zohE6GPZl6NoiZ7/s1600/email-trans.png' width='30'/><span>Home</span></a> <a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwNuXp6hNwMOjKQNHmZLQHXp2LOkQRSV9211oyfC9Hk33dmqs-Kg__TUAoHCd5RWW45QnavIRaOGfAm_fiVynKhgDcpkrHsrIRPR46aD7uRq4dOfVERCkkaAe-vrVWGeLJELyG1gm_/s1600/video-trans.png' width='30'/><span>Email</span></a> <a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2mooVAQ1bpaCyW9tkwLaQ-gEI8miVtpqEcDKphgW7zsBftUD9F0InVnP_PRz-7GHZVkjJRqvPvc8KZ_vgd6Lrf1QmHPYjLQeX4z2IB5M_8g2m43bEHeFn-wT1m6hPodG8ly7K2pMM/s1600/rss-trans.png' width='30'/><span>Display</span></a> <a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVPv1fuxB0ux6_9DyFi7nyMa-8E421Z3GNpAwqlvCczkNDNpDUqQEQu2IpNjsTfWb2tz4397MRsNLqKaCXoE1xo5kkJBHY8IzB6pnGKZi7YQX0forKt4nLzyE_1TpMHePTVQXVSVNN/s1600/email-trans.png' width='30'/><span>Clock</span></a> <a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhuRqA6PcUmTKxTEin5XLCA4Oei3Ni0r2SfTBysyk2JZcH6MqYZLEj5EagZ9N0IIZ4ENm9TrMq28Y3_YIPpzdQCmwo0a79vaHU_h1kFGANBXH5tn2mLfnm16a0e0zkGtg6lbThZCp4/s1600/calendar-trans.png' width='30'/><span>Web</span></a> <a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0_eiWv7b2-5pBxb7-X7cjRA6icVw4aCrfofloRZCyW4eo6Iu9L55q7pY-lxmQfh2DAEkyJDOPjpIi0IQWGPhCct8964b1bIxKPtqkMrZt4BBBbJmGyMOE7dQDXQp-T0LfBaaHZNwA/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,
We’ll add new skins for this menu soon
Posted in: Tools+Plugins
Posts
0 comments:
Post a Comment