♥ ASSALAMUALAIKUM ♥
Good morning all, .. this morning after opening my blog, I looked there is someone left message on my chatbox Again..Said
“ wow! mcmana mau buat yg pages di atas tu jadi begitu ?. lawaaaa ^^ yg home, about tu. ajar ^^ “ Its about how to install Fixed menu navigation just like mine.Since I did not want to disappoint her, after all she was one of my WSB's Family..
Lucky day today is Saturday,not as much office work to do..This day tutorial requested by
Adik Khansyaa @ IP .
How to do it ;
Log In Blogspot @ Click to
Dashboard> Layout>
Edit HTML>
Tick Expand Widget Templates [make sure you first backup your template before start of this tutorial ... if not so at least you already have backup template. Refer to the image below
Find the code
]]></ b:skin by using the box find [
Ctrl + F].
Copy and paste the code below, on or before the code
]]></b:skin
/*----------------
Beautiful Slide Out Navigation
-------------------------------*/
.headerfixed
{
width:600px;
height:56px;
position:absolute;
top:50%;
left:10px;
background:#ffffff url(Your Link Image) no-repeat top left;
}
ul#navixed {
position: fixed;
margin: 0px;
padding: 0px;
top: 0px;
right: 10px;
list-style: none;
z-index:999999;
width:721px;
}
ul#navixed li {
width: 103px;
display:inline;
float:left;
}
ul#navixed li a {
display: block;
float:left;
margin-top: -2px;
width: 100px;
height: 25px;
background-color:#000;
background-repeat:no-repeat;
background-position:50% 10px;
border:1px solid #BDDCEF;
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-bottom-left-radius: 10px;
text-decoration:none;
text-align:center;
padding-top:80px;
opacity: 0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
ul#navixed li a:hover{
background-color:#000;
}
ul#navixed li a span{
letter-spacing:2px;
font-size:11px;
color:#FFF;
}
ul#navixed .home a{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVsDYCsX-Pp4BUJYnVAvDlt_MX9p2flzZ6uqv2kWOJcnxNFQJK7l006QE8gKiiuZ4IGbkR-m6C9TU8HLQY9D0XjdU0ilDmEa5KTcgAAHHPWDmchyphenhyphenmaOVZRy_u-c5sYnNHiFzh_PUmv0Mc/s1600/home.png);
}
ul#navixed .about a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg45tvVFI9PxPXc9j9jNej1V6vpuBMgSJbeulTy2uHbt6DRtq1Rd4ivDlmv838pClNt0vfjjEJbJIbt_UFtvmpABek03H7X-j0-h6-Iyr4YvhvTFNJ_kQIlY04EvsiIpalwCFOKTm5bSQY/s1600/id_card.png);
}
ul#navixed .search a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu5AnnuqrlBvGKhzLL9G_wj9SQS90UprupILFI4jobSgX01l2Fs_mBvDXkkzt2u14b-FW7SQUI-0sBsZ7T4PL88jWD4ARXPocEJeVgaKlZEKu-yNXDvLp7uEjWH9xCUUZ0wOxzDkp7cQc/s1600/search.png);
}
ul#navixed .podcasts a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikFbK1RPKpJg0Sbd5B0gW7GhxsWP4BbbuSWyYZ98gjB-GfQEVKRt2epqeTd7Hw2pX9ZNPKyaiHPezJz1QZfprCxs0IJw__2PM4BBFOQl6KqHKJcb3rZSD6nEuF8EBx6YrM9cRHbL50IuE/s1600/ipod.png);
}
ul#navixed .rssfeed a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTM1OauVJ4m4XI4Z0qQdbKFUZEQlyh0tj1KAvyjhTlMC_oo8BzbFEhciuMSY4XGRW_XhkGO0BbLbkU58jmEKRub8GHmKzjh2Pxl42A29yXGQcZv0Z68UefFDvu__suwGHExQWTCV7jQqQ/s1600/rss.png);
}
ul#navixed .photos a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqGB8gpvba6-zfgEAcTdBlFF5Kbgn4q2-ZKDlwNvykurasxXGWohn15Ob4I1DYX2lrjer_f4lTamWUksg4nDyIGNE0ef1Kdv3MbC1reRWW_ytth4bDREWWiFO3TREXH6KC7bzsRFgYXV4/s1600/camera.png);
}
ul#navixed .contact a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEdrr1N1YOeQE8EyQjH8oT2jto_coVnrpiEchjlSPJixi6IhkDMuourB9jb7MMqHg-cAbvMPzCvCUHT8RdUxkFnVtVU_6qykikavpFl3PWn6iETks74GDCyTlgvbdqQiSUWSMZrDyoGcY/s1600/mail.png);
}
✿
#ffffff - you can change the colour whatever you want..Click
Here
✿✿ (
Your Link Image) - you have to put a link of your image in case you want a background when your mouse hover on the box
✿✿✿
#000 - you change according to your desired section.
✿✿✿✿
1px solid #BDDCEF - Change the border size,Border Type And Border Color
✿✿✿✿✿
11px - Change The font size
✿✿✿✿✿✿
#FFF - Change The Font size colur
And save this script below above the code
</ head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>
<script src='http://pinkdiva.googlecode.com/files/beautifulnavigation.js'/>
<script type='text/javascript'>
$(function() {
var d=300;
$('#navixed a').each(function(){
$(this).stop().animate({
'marginTop':'-80px'
},d+=150);
});
$('#navixed > li').hover(
function () {
$('a',$(this)).stop().animate({
'marginTop':'-2px'
},200);
},
function () {
$('a',$(this)).stop().animate({
'marginTop':'-80px'
},200);
}
);
});
</script>
Finally save the following code above the code
<body>
<ul id='navixed'>
<li class='home'><a href='
Your Own Link'><span>
Home</span></a></li>
<li class='about'><a href='
Your Own Link'><span>
About</span></a></li>
<li class='search'><a href='
Your Own Link'><span>
Search</span></a></li>
<li class='photos'><a href='
Your Own Link'><span>
Photos</span></a></li>
<li class='rssfeed'><a href='
Your Own Link'><span>
Rss Feed</span></a></li>
<li class='podcasts'><a href='
Your Own Link'><span>
Podcasts</span></a></li>
<li class='contact'><a href='
Your Own Link'><span>
Contact</span></a></li>
</ul>
Note : Change the Url Link Of Your Own link.
Done ... preview if there’s no error then save the template.
Note : You can change the picture / icon as you like..Find it
Here and
Here
<img class='comments-tab-icon' src='http://2.bp.blogspot.com/-uFjnblDYmQk/TgvzeRCM3QI/AAAAAAAAB7U/Zebl_cpQ4lk/s1600/facebook.png'/>
<fb:comments-count expr:href='data:post.url'/> People Sharing Comments
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Comments from Blogger'>
<img class='comments-tab-icon' src='http://1.bp.blogspot.com/-9FmbJGH15sM/Tgvzd04Q-VI/AAAAAAAAB7Q/Lme3FaDgAts/s1600/blogger.png'/> <data:post.numComments/> People Sharing Comments
</div><div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='500'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='YOUR_FB_ID' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(".comments-tab").addClass("inactive-select-tab");
$(selectTab).removeClass("inactive-select-tab");
$(".comments-page").hide();
$(selectTab + "-page").show();
}
</script>
P/S : For Those Using Old Template Find this code h3.post-title, .comments h4 { And put the CSS code below above it.
#blogger-comments-page { padding: 0px 5px; display: none;}
.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}
.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}
Preview .. If you are satisfied, Save And you're DONE..Goodluck!!!
P/S : Updated 16/08/2011 - Image Add On