Thursday, May 21, 2009

Create Blogspot Tabslide Navigation



ok...many bloggers want to his/her blog looks cool and uniqe ,so.. many of them searching a template that is completely compatible with them. I...?!Of course i want my blog looks cool and different from the other blogs ,I have already create few template for blogspot...like "uchiha brothers" and "The Violet Rose "Template, that i hope will be used by the other blogger :D.

but only a template is not enough ,sometimes we must add a images or widget to beautify our template. so...this time, i want to tell you how to create a tabslide navigation.
if you don't know what it is,just look at the screenshot above. if you still not satisfied ok..click here to view the demo

ok thats enough for the chit-chat....let's go to the scripting :D
here i go
first you must set up a few file like this
1.mootools.js
2.tabslide.js
3.Header image(width=adjust with your header ,height 362px)

you can download that script with the default image here
upload these file to your filehosting
next open your "layout" and click "edit HTML" tab
find this code on tour template


paste this above that code
» Click to show Script «


here that you can modify from that script

#accordion {
border: 1px solid #1F669B;
width: 600px;/*ADJUST WITH YOUR HEADER WIDTH */

and change URL image with the url image you have uploaded
background-image:url(URL IMAGE tab-right.gif);


after that found this code on your template

open ziegey.txt and paste the script inside below that
here the screenshot


next
found this script on ur template

#header {
margin: 0 auto;
background: #000000 url(http://i191.photobucket.com/albums/z269/ziegey/VioHeader.jpg);
color: #ffffff;
padding: 0;
height: 200px;
text-align: $startSide;
}

delete image header URL and set header height to 0
like this

#header {
margin: 0 auto;
background: #000000 url();
color: #ffffff;
padding: 0;
height: 0px;
text-align: $startSide;

Final Step paste this script below
<script src="http://www.geocities.com/ziegey_clonesphare/mootools.js" type="text/javascript"></script>

<script src="http://www.geocities.com/ziegey_clonesphare/tabslide.js" type="text/javascript"></script>

oops i almost forgot ,you can add new panel and subpanel too
just open ziegey.txt u will find script like this

Change PanelID(look line 1 and 3),panel Name(line 2),subpanel name n subpanel url as u wish

Ok Thats it... if you have any question just reply here
credits to
http://www.andrewsellick.com


2 comments:

  1. hhahaha ok win... tnggu postingan gwa yg object dock navigation.... dijamin bakal lebih keren :D

    ReplyDelete

.