Add the navigation CSS dock menu on your blogger - If you know macintosh menu or you are a big Mac fan, you will love this CSS dock menu, and then you can add this menu on your blogger, you can read more this tutorial for web page on this link ndesign .
Here I will show you how to implement it to your blogger page.
1. Please Login your blogger acount
2. Design, Edit Html
3. Save This CSS before ]]></b:skin> section:
/* ---------------
Menu navigasi CSS Mac Dock top with jQuery
---------------------------------- */
/* dock - top */
.dock {
position: relative;
height: 50px;
text-align: center;
}
.dock-container {
position: absolute;
height: 50px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcrrn66dwmCid8QfBqGu8oorYAxUS8NpK2meLjqGr20E9_UbgLhXmFcMFhoDdx0HA35MYEiWvNQkAtVS3Za7blQh60S_-I_qAs5gX7FRZpYpdXNnMkiVb7Q1e-QTLJcYL0LXX21OrC17w/s1600/dock-bg2.gif);
padding-left: 20px;
}
a.dock-item {
display: block;
width: 40px;
color: #000;
position: absolute;
top: 0px;
text-align: center;
text-decoration: none;
font: bold 12px Arial, Helvetica, sans-serif;
}
.dock-item img {
border: none;
margin: 5px 10px 0px;
width: 100%;
}
.dock-item span {
display: none;
padding-left: 20px;
}
/* dock2 - bottom */
#dock2 {
width: 100%;
bottom: 0px;
position: relative;
left: 0px;
}
.dock-container2 {
position: absolute;
height: 50px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcSNhg8eps7Kljhe3pgdU0VPIzqbh-X0fhEa2jhk-Hs05uW28eeefqqk7yltkL-7HYr8Mfn0KyTeTkEFDYrQ_K3qu8BVxUzrYE5SIoVykbUUKVoF_oVckiDHgusUQF7muxLW49ZQDx2wU/s1600/dock-bg.gif);
padding-left: 20px;
}
a.dock-item2 {
display: block;
font: bold 12px Arial, Helvetica, sans-serif;
width: 40px;
color: #000;
bottom: 0px;
position: absolute;
text-align: center;
text-decoration: none;
}
.dock-item2 span {
display: none;
padding-left: 20px;
}
.dock-item2 img {
border: none;
margin: 5px 10px 0px;
width: 100%;
}
4. Save this java script before </head> section:
<script type="text/javascript" src="http://scriptbase.googlecode.com/files/jquery1.3.2.min.js"></script>
<script type="text/javascript" src="http://scriptbase.googlecode.com/files/interface.js"></script>
5.Now put this script before </body> section:
<!--dock menu JS options -->
<script type="text/javascript">
$(document).ready(
function()
{
$('#dock').Fisheye(
{
maxWidth: 50,
items: 'a',
itemsText: 'span',
container: '.dock-container',
itemWidth: 40,
proximity: 90,
halign : 'center'
}
)
$('#dock2').Fisheye(
{
maxWidth: 60,
items: 'a',
itemsText: 'span',
container: '.dock-container2',
itemWidth: 40,
proximity: 80,
alignment : 'left',
valign: 'bottom',
halign : 'center'
}
)
}
);
</script>
6. Save Template
7. How to add this menu to Html (Posting, Template Or Gadget), put this code:
CSS Dock Top Menu :
<div class="dock" id="dock">CSS Dock Bottom Menu:
<div class="dock-container">
<a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipf3Ej9pszms64A5KcquSRtHbybGRJv13tI4L2GBI05y-i9jUtyDcmSpc4Y3axgbWiJNmuMvHrXIkJGGmlhoCw5u29DbSPPlCfvwnhLxpxEmuc6aGZ-ymC4JWcd475m8sgoFHrmBgcZYo/s1600/home.png" alt="home" /></a>
<a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjysZJTaBtl0O_m95EqHCBNAdqXMMHjtSf0UnZYGyNwqDFfCjHRyyXKSOzX9iMCbq4R6i4wrddWbvoSGfIirm71l6rIPSk1NeuYjLCbCcK5LaSZ7mi3q42bzmoX4xlMD_7uiGBepkPoivk/s1600/email.png" alt="contact" /></a>
<a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwD2KSlANsCt2YlfkZWu-A6oFUJfP4MbsAHWGGHIbD0x3qTt6PY519-bNKQIxmjIwuA2ADg2HSZzZQMoCrXUFNUIELGHjzGtCBMbpm_PmshAN1bCRaLdJFPNQz2AND28tiM3LkIh_O3LU/s1600/portfolio.png" alt="portfolio" /></a>
<a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTGsvTLbJcQGnbyMLlUpQm7fFf_cGHqw3NSyoDOFljTGe8N7ddQOVcPN7ZYc0KvXYM2HRKH_YW1sJdvEM1VEMGuUexUyWRsigWlb77X0wYvVsIAkVTQbIRVRmiwPeUX4wiUilYSltHPGo/s1600/music.png" alt="music" /></a>
<a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm3dt19wTmb11LdTCQChmK6U8-IlBlvdkAYvYlzcrPw2Csk_XvgGQMYdM2dIm_dRP28O7lldKAvyDOh45CaYo3W76fc9KMEKUOG9S7rC6NIwebMpU9hKPxkZEkb079llgy8wBYVjiqIDk/s1600/video.png" alt="video" /></a>
<a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDRjxMafApHhEKle0g1LCri8-AbM-LqkxSDErxZC76CBep3No7T2ClKMxJcx3VGH7tm_QppqTOkY-F1NjO3eA0x82MVGZFTDgyIbJaEk_tXEkxBsPz_3O0z8-skx6KYlGk-2OzL9dLFVU/s1600/history.png" alt="history" /></a>
<a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDfkCGAARgUJvHnjJ_BbUPwJg9tRv9L53USvbMVKuOMUiuqdkhyphenhyphenkLbgLwg50pPiH-OdKdWOQrg6N8iJKkFMp0sq8gnGzzeWxo7PP606hE4_0fRkjSlagWlhSOkFw3vIfwbrUu9tRJt7Vc/s1600/calendar.png" alt="calendar" /></a>
<a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicktuRk4HqUwkG6I0L_msD7whYUylM-H2jsLjIg2A2cAjkzQAmrUrkYduEq5YIKI4axaQ8npbATxPj_I58WrU_lVX-JTHvtZAGfoqtneQDJIXnzZusbnvss22xM61a3JCcTi9GXEupl44/s1600/rss.png" alt="rss" /></a>
<a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTSVnHe1rJP7zG9oPCjtTGFubzj3WnTJlhaebMHQdqS1pvGUJeUdqy6J8KFTQ8HEmhD_fl26IOIIt3tlfaouWkQCyrrsot305lF6NYWeSEfo3kNSh9M_iFswujba92660CJDS6bH453mc/s1600/rss2.png" alt="rss" /></a>
</div>
</div>
<div class="dock" id="dock2">8. OK Done, I hope you can use for your blog...
<div class="dock-container2">
<a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipf3Ej9pszms64A5KcquSRtHbybGRJv13tI4L2GBI05y-i9jUtyDcmSpc4Y3axgbWiJNmuMvHrXIkJGGmlhoCw5u29DbSPPlCfvwnhLxpxEmuc6aGZ-ymC4JWcd475m8sgoFHrmBgcZYo/s1600/home.png" alt="home" /></a>
<a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjysZJTaBtl0O_m95EqHCBNAdqXMMHjtSf0UnZYGyNwqDFfCjHRyyXKSOzX9iMCbq4R6i4wrddWbvoSGfIirm71l6rIPSk1NeuYjLCbCcK5LaSZ7mi3q42bzmoX4xlMD_7uiGBepkPoivk/s1600/email.png" alt="contact" /></a>
<a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwD2KSlANsCt2YlfkZWu-A6oFUJfP4MbsAHWGGHIbD0x3qTt6PY519-bNKQIxmjIwuA2ADg2HSZzZQMoCrXUFNUIELGHjzGtCBMbpm_PmshAN1bCRaLdJFPNQz2AND28tiM3LkIh_O3LU/s1600/portfolio.png" alt="portfolio" /></a>
<a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTGsvTLbJcQGnbyMLlUpQm7fFf_cGHqw3NSyoDOFljTGe8N7ddQOVcPN7ZYc0KvXYM2HRKH_YW1sJdvEM1VEMGuUexUyWRsigWlb77X0wYvVsIAkVTQbIRVRmiwPeUX4wiUilYSltHPGo/s1600/music.png" alt="music" /></a>
<a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm3dt19wTmb11LdTCQChmK6U8-IlBlvdkAYvYlzcrPw2Csk_XvgGQMYdM2dIm_dRP28O7lldKAvyDOh45CaYo3W76fc9KMEKUOG9S7rC6NIwebMpU9hKPxkZEkb079llgy8wBYVjiqIDk/s1600/video.png" alt="video" /></a>
<a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDRjxMafApHhEKle0g1LCri8-AbM-LqkxSDErxZC76CBep3No7T2ClKMxJcx3VGH7tm_QppqTOkY-F1NjO3eA0x82MVGZFTDgyIbJaEk_tXEkxBsPz_3O0z8-skx6KYlGk-2OzL9dLFVU/s1600/history.png" alt="history" /></a>
<a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDfkCGAARgUJvHnjJ_BbUPwJg9tRv9L53USvbMVKuOMUiuqdkhyphenhyphenkLbgLwg50pPiH-OdKdWOQrg6N8iJKkFMp0sq8gnGzzeWxo7PP606hE4_0fRkjSlagWlhSOkFw3vIfwbrUu9tRJt7Vc/s1600/calendar.png" alt="calendar" /></a>
<a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicktuRk4HqUwkG6I0L_msD7whYUylM-H2jsLjIg2A2cAjkzQAmrUrkYduEq5YIKI4axaQ8npbATxPj_I58WrU_lVX-JTHvtZAGfoqtneQDJIXnzZusbnvss22xM61a3JCcTi9GXEupl44/s1600/rss.png" alt="rss" /></a>
<a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTSVnHe1rJP7zG9oPCjtTGFubzj3WnTJlhaebMHQdqS1pvGUJeUdqy6J8KFTQ8HEmhD_fl26IOIIt3tlfaouWkQCyrrsot305lF6NYWeSEfo3kNSh9M_iFswujba92660CJDS6bH453mc/s1600/rss2.png" alt="rss" /></a>
</div>
</div>
0 comments:
Post a Comment