How to Install Dock Menu For Bloggers - Blog Kabar Berita Nasional dan Internasional

Friday, March 11, 2011

How to Install Dock Menu For Bloggers

CSS Dock Menu can be found easily on the internet. There are many variants of the Dock menu. One of them made ​​by Ndesign-studio.com. Maybe you've seen the picture below on Windows, Macintosh and some other OS [Operating System]
 How it works like this dock menu, if you point the mouse cursor to the dock icon menu, there will be changes in the size of the icon. For details, please see the menu on My Blog
Step One:
Download the CSS dock package files. Then unzip the file. Look in the folder there are 2 JS file JavaScript is interface.js and jquery.js. While in the images folder is a file picture. Please upload the file jquery.js & interface.js to your hosting, and uploading image files to your hosting image.



Step Two:
-Log in to Blogger with your id.
-Please go to Layout.
-Choose Edit HTML.
-Backup the template by clicking Download Full Template.
-Search <head> then place the javascript code at the bottom so that it becomes:
Javascript

<head>
<script src='http://yourhosting/jquery.js' type='text/javascript'></script>
<script src='http://yourhosting/interface.js' type='text/javascript'></script>


Step Three:
Still in the Edit HTML, now looking for code ]]></b:skin> and place the following code on it.
so be Thou this
Javascript

/* CSS Dock Menu
------------------------ */
.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;
}
]]>


Step Four:
Still in the Edit HTML, now we will put the id for css dock menu.
find this code:
Javascript

<div id='header-wrapper'>
.........
.........
</b:section>
</div>


And place the following code below it, thus becomes:

Javascript

<div id='header-wrapper'>
.........
.........
</b:section>
</div>

<div class='fisheye' id='fisheye'>
<div class='fisheyeContainter'>
<a class='fisheyeItem' href='http://your_site'><img src='http://link_image.png' width='30'/><span>Calendar</span></a>
<a class='fisheyeItem' href='http://your_site'><img src='http://link_image.png' width='30'/><span>History</span></a>
<a class='fisheyeItem' href='http://your_site'><img src='http://link_image.png' width='30'/><span>Music</span></a>
<a class='fisheyeItem' href='http://your_site'><img src='http://link_image.png' width='30'/><span>Video</span></a>
<a class='fisheyeItem' href='http://your_site'><img src='http://link_image.png' width='30'/><span>Home</span></a>
<a class='fisheyeItem' href='http://your_site'><img src='http://link_image.png' width='30'/><span>Link</span></a>
<a class='fisheyeItem' href='http://your_site'><img src='http://link_image.png' width='30'/><span>Email</span></a>
<a class='fisheyeItem' href='http://your_site'><img src='http://link_image.png' width='30'/><span>Portofolio</span></a>
<a class='fisheyeItem' href='http://your_site'><img src='http://link_image.png' width='30'/><span>Posts RSS</span></a>
<a class='fisheyeItem' href='http://your_site'><img src='http://link_image.png' width='30'/><span>Comment RSS</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>


-Now click the Save Template button
-Completed

Note :
  • For bold text, please replace the link provided.
  • And for the text italic, you please replace with the address of your image

Bagikan artikel ini

Silakan tulis komentar Anda