Showing posts with label Tutorial. Show all posts
Showing posts with label Tutorial. Show all posts

Thursday, February 10, 2011

ZBrush HotKeys List for beginners

Photobucketokay...for 3D artist zbrush is one of the most important software because it's more easier to do the texturing in this software, zbrush is the first program to replace the concept of digital modeling with digital sculpting, creating forms in Zbrush feels more likle sculpting virtual clay.
Zbrush is an easy program to use once you know how, this software can be a little difficult at first but with a litte effort,patience , and practice you'll quickly learn all you need to know to start creating amazing digital sculptures.
to learn how to sculpt like a pro, first you need to speed up your work in the program quite a bit, there is a lot of ways to speed up your work, by understanding the interface for example and know how to use the hotkeys
here is a list of ZBrush hotkeys you'll be using a lot, take your time to use it during practice.

» Click to show Spoiler - click again to hide... «

Thursday, February 3, 2011

Mental Ray Depth of Field Tips

well, cuz i have no idea what i'm going to write next to fill this blog...maybe i'll just share some tutorial about 3D. i know i'm still not good enough in 3D, but who knows someone out there, a newbie like me for example gonna need this haha...
okay, the one i wanna tell you is tips and tricks about DOF(Depth of Field) in mental ray, just in case, 3D software im used is 3ds max and i dont know this tricks will work in maya mental ray...cuz i never tried maya, maybe maya user out there can tell me if this is work :D

well lets get started
i suppose you guys already know that DOF can only be rendered with perspective or camera view, you can find the setting in camera parameters in multi-pass effect tab and for the perpective view in the render setting renderer tab.

okay, first create new material with black diffuse and name it Depthshader, turn on self illumination and give it fall-off material in the box beside the self illumitation color(1)
go to render setup in the processing tab, check enable in the material override, click the occlusion tab to open material browser, choose from Mtl Editor and choose the name of material we created before(Depthshader), choose instance (2)
back to the material editor, in the fall off parameters,change the falloff type to distance blend, setting the near and far distance, for example im using 29 for near and 111 for far distance (3)
look at this image
Photobucket

Next, render 2 image files(DOF_depth.tga and DOF_Color.tga). with *.tga extension cuz this extension could save depth information. Open the images in the photoshop, all selection(ctrl+A) in DOF_Depth image and copy(ctrl+c) (4)
go to DOF_Color now and click in the channel tab and paste DOF_Depth into alpha channel(5)
and add a gaussian blur(6)
Photobucket

add lens blur, in the lens blur parameters change the depth map source to alpha, and the rest of it you just need to change the parameters until you satisfied with the DOF effect, oh yeah...you can also just click the parts of the image where you want to be focused(7)
Photobucket

yep..that's it, with this you can save more render time and more efficient
im sorry if my english is sooo baadd :P and see you next time :)

Friday, March 12, 2010

Digital Tutors:Introduction to Lighting


Learn an essential workflow to lighting in 3ds Max and fundamental techniques to establishing moods and adding greater realism to your scenes through lighting. Contains over 2 hours of project-based training. Ideal for new and beginning artists.

Popular highlights include: Overview of Standard Light Types; Overview of Photometric Lights; Controlling Light Decay and Attenuation; Modeling Environments to Scale for Accurate Lighting; Using Shadow Maps for Efficient Rendering; Utilizing Accurate Raytraced Shadows; Creating Soft and Diffuse Shadows; Real-world Lighting Profiles with Photometric Lights
; Exposure Controls to View HDR Renders; Outdoor Lighting with Daylight System and Skylight; Altering Rendering Controls for Objects; Adding Glow Effects to Geometry and Lights; Creating Volumetric Lighting Effects; Radiosity to Simulate Indirect Illumination; Using the Light Lister; Creating Gobo Effects
1. Project Overview
2. Intensity and Attenuation controls of Standard Lights
3. Specialized parameters of spot lights
4. Understanding and using Direct lights
5. Using Photometric lights in 3ds Max
6. Adding Shadow Maps to rendered scenes
7. Using Raytraced shadows in 3ds Max
8. Utilizing Area and Advanced Raytraced shadows
9. Shadow parameters of mental ray lights
10. Altering the Rendering Controls on individual objects
11. Adding glow effects to geometry and lights
12. Adding volumetric effects to lights
13. Including and excluding objects from individual lights
14. Using the Skylight to create outdoor illumination
15. Creating outdoor lighting using the Daylight system
16. Using radiosity to calculate realistic indirect illumination
17. Methods for refining and enhancing radiosity results
18. Using the Light Lister in 3ds Max
19. Using the Advanced Effects for greater lighting control


» Click to show Download Links - click again to hide... «


Tuesday, February 16, 2010

Digital Tutors:Introduction to modelling in 3Ds Max


Learn a fundamental workflow to Polygon, NURBS, and Splined-based modeling and time-saving techniques to creatively utilizing the robust tools available in 3ds Max. Contains nearly 4 hours of self-paced training for artists new to modeling in 3ds Max and experienced artists seeking a refresher.

Popular highlights include: NURBS Workflow; Polygon Workflow; Splines and Patches Workflow; Scene Organization with Layers; Smoothing Methods; Working with Sub-objects; Sub-object Selection Methods; Adding Viewport Background Images; Scale Deformation
; Cloning Geometry and Shapes; Mirroring Geometry; Sweep Modifier; Shell Modifier; Symmetry Modifier; Surface Modifier; FFD Modifiers; Lathe Modifier; Modifier Stack; Moving Pivot Points; Transforming Geometry and Shapes; Modifying Creation Parameters; Creating Booleans; Attaching and Detaching Objects; Welding Vertices; Rendering and Viewing Curves; HSDS Modifier for Subdivision Surfaces

Lesson
Working with polygons
In this lesson we will get a basic overview of working with polygons in 3DS Max.
Working with NURBS
In this lesson we will explore NURBS geometry in 3DS Max.
Working with smoothing and subdivision surfaces
In this lesson we will look at a variety of ways to smooth geometry.
Working with splines and patches
In this lesson we will learn to create geometry using splines and patches.
Project overview and interface setup
In this lesson we will preview the final modeling project and create a custom interface.
Adding viewport background images

In this lesson we will add reference art using Viewport Backgrounds.
Setting up a layer scale template
In this lesson we will create a template for building the geometry of the knife.
Building pivot geometry with primitives
In this lesson we will use primitive geometry to create the pivots for the knife.
Adding resolution to the pivot
In this lesson we will use Connect to add resolution to the pivot geometry.
Building a full section from the pivot geometry
In this lesson we will build a full section of the knife from the pivot geometry.
Creating caps from the full section
In this lesson we will use the section geometry to build the top and bottom caps.
Modeling the saw
In this lesson we will use the Bevel tool to build the saw for the knife.
Building the screwdriver
In this lesson we will use the Lathe modifier to build the small screwdriver.
Finishing the saw layer
In this lesson we will finish out the saw layer geometry.
Modeling the magnifying glass
In this lesson we will use the Sweep Modifier to build the magnifying glass.
Building the small knife
In this lesson we will use some NURBS tools to build a small knife blade.
Finishing the magnifying glass layer
In this lesson we will finish building geometry for the magnifying glass layer.
Modeling the bottle opener
In this lesson we will use primitive geometry to build the can opener.
Finishing the bottle opener layer
In this lesson we will use the full section geometry to fill out the can opener layer.
Building the corkscrew
In this lesson we will build the corkscrew using a helix spline.
Starting the scissors
In this lesson we will start to build the scissors using the HSDS modifier.
Finishing the scissors layer
In this lesson we will duplicated modeled geometry and complete the scissors.
Creating the large knife blade
In this lesson we will build the large knife blade from splines.
Adding an indentation and hilt to the large blade
In this lesson we will add various details to the large knife blade.
Finishing the large knife blade layer
In this lesson we will use Booleans to finish building the large knife blade layer.
Assembling the parts of the knife
In this lesson we will begin to assemble the modeled geometry into a completed knife.
Building the chain connector
In this lesson we will use multiple splines to build the flat connector for the key chain.
Modeling the chain
In this lesson we will use a Path Constraint to build the key chain links.
Adding the key ring
In this lesson we will use a helix to attach a key ring to the chain.
Adding materials to the knife
In this lesson we will add some appropriate materials to the pieces of the knife.
Setting up UVs on the knife
In this lesson we will set up some UVs on the knife that will allow us to add a logo.
Adding a logo to the knife
In this lesson we will use a Blend Material to add the logo to the knife.

» Click here to show Download Link - click again to hide... «




Digital Tutors:Introduction to Mental ray


Learn an essential workflow to rendering with mental ray and techniques for fully utilizing the tools available inside 3ds Max to save time and see better results. Contains over 2 hours of project-based training for artists new to mental ray and experienced artists seeking a refresher.

Popular highlights include: mental ray Overview; Global Illumination Workflow; Final Gather Workflow; Caustics Workflow; Emitting GI Photons from Light Sources; Photon Energy and Decay Parameters; Controlling Final Gather Accuracy; Adding Secondary Final Gather Bounces; Mixing Final Gather and Global Illumination; Saving and Reusing Lighting Data; Image-based Lighting; HDR Exposure Controls; Emitting Caustic Photons from Lights; Optimizing Caustic Photon Use; Subsurface Scattering Shader; Ambient Occlusion Shader; mental ray Architectural Material; Utilizing the Material Editor; Contour Line Rendering; Using Render Elements; Scene States; Compositing Rendered Passes

Lesson
1.Introduction
2.Setting Mental ray as the default renderer
3.Using Photon-based Global Illumination
4.Adjusting the photon properties of lights
5.using Final gather in mental ray
6.Combining Global illumination and Final Gather
7.Saving and reusing indirect illumination Data
8.Setting up image-based lightning in mental ray
9.Using and optimizing caustic photons
10.Exploring mental ray's archcitectural Materials
11.Overview of the mental ray car paint shader
12.Using Subsurface Scattering in mental ray
13.Utilizing ambient occlusion to enhance shadows
14.Adding depth of field effects to renders
15.Rendering a depth of field pass for compositing
16.Special mental ray light parameters
17.Understanding contour outlines
18.Using Render Elements for compositing purposes
19.Compositing multiple render passes
20.Using Scene States to output multiple renders

» Click here to show Download Link - click again to hide... «




Sunday, August 30, 2009

Digital tutors:3Ds Max Automotive Modelling


another cool tutorial again i've got here!!
This is a video tutorial for 3Ds Max for creating automotive model ,if you wants to be a animator i suggest you must have this video,I already download it , the tutorial is very cool and the explanation is easy to understand at all.
In this tutorial you will Learn a production workflow to automotive modeling in 3ds Max and a multitude of Polygon, NURBS, and Spline-based techniques that can be used for Film, Games, and Automotive Design. Contains over 7.5 hours of project-driven training.

» Click to show Video Screenshots - click again to hide... «


Popular highlights include:
• Viewport Background Images
• Establishing Automotive Line Flow
• Creating Multiple Fitted Panels
• Redrawing Topology
• Adding Resolution to Tighten Edges
• Adding Edge Loops with Connect Tool
• Edge Loop and Ring Selections
• Converting Sub-object Selections
• Adding Geometry with Bridge
• Cloning Geometry and Shapes
• Attaching and Detaching Geometry
• Building Geometry with Splines
• Building Geometry with NURBS Curves
• Mirroring Geometry
• Symmetry Modifier
• Converting Parametric Geometry
• Previewing Smooth Geometry
• Creating Detail with Extrude Tool
• Importing Adobe Illustrator Curves
• Creating and Adding Realistic Materials
• Adding Bump Maps to Materials
• Creating UV Layouts
• Creating Geometry with Primitives
• Changing Geometry Creation Parameters
• Welding Vertices
• Creating Splines and Patches
• Edit/Delete Message Reply With Quote
this is The 58 Lesson you can find in this tutorial
1. Project Overview 0:44
2. Setting up Viewport Background images 3:29
3. Modeling the wheel arches 9:48
4. Bridging geometry between the arches 2:57
5. Extruding edges up along the side 5:34
6. Extruding out the back 4:24
7. Extruding out the front 9:25
8. Tweaking the topology on the front fascia 8:04
9. Extruding across hood 11:53
10. Extruding across the back and bottom 10:18
11. Detaching the belly pan 6:48
12. Detaching and shaping the hood 7:59
13. Adding edge detail to the front fascia 10:20
14. Extruding in the front vent area 10:33
15. Adding struts to the grill 9:37
16. Adding remaining fascia details 11:28
17. Building the side vent 9:29
18. Finishing the fascia details 9:36
19. Refining the headlight interior 11:17
20. Refining the topology of the trunk 11:28
21. Detaching the trunk and taillights 9:35
22. Finishing the taillights 10:45
23. Adding body detail to the side 9:43
24. Detaching the panels 7:51
25. Building the top of the cab 7:04
26. Extruding down the sail panel 8:00
27. Building the roof 11:20
28. Detaching the door frame 4:47
29. Adding thickness to the panels 12:59
30. Adding the rocker panel 4:01
31. Adding details to the back end 9:47
32. Creating the exhaust pipes 5:03
33. Detaching the doors 4:34
34. Adding door handles 12:09
35. Cloning the quarter panel 3:09
36. Modeling the fuel cap 8:13
37. Building the windshield 7:51
38. Modeling the back light 6:59
39. Adding windows to the doors 5:22
40. Modeling covers for the quarter windows 10:27
41. Adding a scoop to the hood 11:23
42. Building a spoiler 12:23
43. Modeling the trunk emblem 4:57
44. Modeling the grill mesh 9:32
45. Building head lamps 11:39
46. Adding an emblem to the grill 5:18
47. Building a tire 4:46
48. Adding the wheel 5:17
49. Finishing the shape of the wheel 8:29
50. Adding detail to the wheel 11:39
51. Adding disc brake and caliper 8:03
52. Modeling the rearview mirror 8:29
53. Creating a UV layout for the tire 4:15
54. Adding a car paint material 7:45
55. Creating reflector materials 6:18
56. Setting up a material for the tire 4:05
57. Adding remaining materials 8:02
58. Performing final material changes 5:43
Total Run Time: 7:37:37

Discreet 3ds max : 102 New Techniques
» Click to show Download Link - click again to hide... «




Tags: , ,

Monday, July 20, 2009

Create Template:Box Positioning(Part 2)

» Click to show Screenshot«


hi...you all,previously i thought you about creating a template ,right??
but,only until the page structure ,so this article will be the next part for the previous one.
this time i decided to tell you about Boxes, it's the main bar and the sidebar
i will tecah you how to move it and create your own design with that,as you know there is some type of template ,like 2 coloumn(only mainbar and sidebar),3 coloumn(usually mainbar and 2 sidebar),and sometimes there is also 4 coloumn or more,the box position itself depends with the one who created it,for example you decided to create 2 coloumn template with the mainbar on the left and the sidebar on the right.
for the position you can change it in the HTML section like i explained in the last article,if you forget where is the HTML section ,it is below this code


]]></b:skin>


the first in the HTML section is the javascript you can input in your template(inside the Head tag but below the code above) and the body tag after that,this is where we can configure our boxes.for example i will using my violet rose template script(you can download it here).the Violet rose is 3 coloumn template type with mainbar on the center and the sidebar on the left and right.
first in the body tag is the header script,i will skip this because this time i will teach you to configure your mainbar and sidebar,so skip the header script until you found this code


<div id='content'>

<div id='crosscol-wrapper' style='text-align:center'>

<b:section class='crosscol' id='crosscol' showaddelement='yes'/>

</div>
.
.
.<!-- This is where the mainbar and sidebar script -->
.
.
</div>


in the violet script i named the center with "main-wrapper",left side with "sidebar-wrapkiri" and right side with "kanan",so the position itself depends where you put the code,for example if you put the "main-wrapper" first, means the mainbar will be located on the left,but if you put it(the "main-wrapper") after "sidebar-wrapkiri" the mainbar will be located on the center ,in this HTML section the code you input will be located from the left to the right.example:
if you put the "main-wrapper" first,"sidebar-wrapkiri" second ,and "kanan" last

[Mainbar][sidebar1][sidebar2]

if you put the "sidebar-wrapkiri" first, "main-wrapper" second ,and "kanan" last

[sidebar1][Mainbar][sidebar2]

if you put the "sidebar-wrapkiri" first, "kanan" second ,and "main-wrapper" last

[sidebar1][sidebar2][Mainbar]

if you delete one of the code,"kanan" for the example,your template will be 2 coloumn, thats how it works....
the question is...will be the naming still the same if we're using other script??
the naming depends on who created the script itself,but don't worry because you only need to found the content script,it's not to hard to find it,many script creator usually name it with "content" so don't worry ,you'll find that code.
ah yes...this trick you can use for the the page structure,you can move it as you wish,for example you put the header code after content and footer script then the header will be located below content and footer,but i think it's not the header anymore if the position like that :D

I think thats enough for the positioning,next time i will teach you how to added new box with two different style,so keep in touch okay...

To be Continued.....




Monday, July 13, 2009

Create Template:Page Structure(Part 1)

» Click to show Screenshot«


Hi all...from now on i will share my thought to you about how to create a template,but i'm not guarantee you can create very cool template after this,because it's up to to your imagination after all :D....hmm at least you'll know how to create it, i think...
before we start, i must tell you something first,you must have knowledge of HTML and CSS language to create a template, although it's only a basic you must understand this language(because it's impossible to create a template if do not understand at all)

okay...in this part i'll tell you the page structure of the template.
a webpage divided into three parts...that is..Header,Content,and footer (see the screenshot above)
in the header section,you know,this is where your header image or your web title placed,you can put the navigation on this section too if you want.
the content section is a place where your blog content with the article in the mainbar and widget in the sidebar .
and the footer itself usually used for credits to someone,like a link..you know..:D

Now we go to the script
in our blog template script itself divided into two parts...that is CSS section and HTML section,in the Css section you can modify your blog style ,like changing the text color,text size,mainbar and sidebar size and many more..
curious???? hmmmm...okay let's give it a try :)


in this section i take an example with Violet Rose Script
you can download the script here
» Click to show CSS - click again to hide... «


nah..that is the css for the body,if you already familliar with Css you should understand that code right...in that script i'm not using background image,i'm just using background color with #000000(Hex Color for black) and #FFFFFF(Hex Color for white) for the text color
see the width with 985 pixel in the outer wrapper,thats your page width,you can modify on your own as you wish.
now the HTML section,this is the place where the widget you placed...you can put javascript too in this section ,okay for the example ,this is where you can put the javascript on the HTML section

]]></b:skin>


<script language='JavaScript' type='text/javascript'> >


YOUR JAVASCRIPT CODE


</script>


</head>



or upload the javascript file and put the url like this

]]></b:skin>


<script src='YOUR JS URL' type='text/javascript'/>


</head>



hmm i think thats it for the page structure...next time i will tell you how to moved a sidebar and create new sidebar...so keep in touch until the next part

To be Continued....



Tuesday, June 23, 2009

Jquery Tab Menu Tutorial


Live Preview


hi guys...sorry im late again...got an exams in the last two weeks ,so little busy to create new post...yeah but somehow i managed to finishing the exams(i hope the result in very very goood...:P).
ah i almost forgot...for what reason i am being here...yeah to give you a little trick to beautify our template.look at the screensgot above and the Live Preview too,the name is Jquery TabMenu, cuz we will using jquery again.

in this TabMenu u can put anything (in HTML Of course)like links,comment,shoutbox and many more, and of course...with this tabMenu ur template will be a litle simple ^.^.

Now...Lets Start
First
Open ur template Edit HTML page....and found this code:

and paste this CSS code above it

» Click to show CSS Code - click again to hide... «




and again paste this js below

» Click to show JS Code - click again to hide... «


NOTE:see the url jquery above that script...Download that and reupload to ur hosting for safety,cuz im not responsible if that file will be deleted from my geocities account

Save ur template and go to page element...add new gadget and choose HTML/javascript
Now the last u need to do....(sigh..finally)
paste this code to it...
» Click to show HTML Code - click again to hide... «



u can change the content if u want(see the Green text),for example i change the comment tab with shoutmix script,save ur gadget if ur finished...and....taraaaaa....enjoy ur tabmenu
Thx To http://www.1stwebdesigner.com
See Other Tutorial
Object Dock Navigation
Tabslide Navigation
Spoiler And Code Tutorial
Horizontal Accordeon Slide Tutorial


Saturday, June 13, 2009

Horizontal Accordeon Slide Tutorial



Live Preview
sorry guys...for not being able to post a new one back there...im a litle busy these few days,but im back right now :D...of course with the new one :))

this time i will teach you to make a Horizontal accordeon slide....
acctualy i got this Tutorial after surfing in this cyber world hehehe ,and right now i will share it what i've got to you
see the screenshot above if you want to know what it is...and the Live Preview included of course ^.^,see it up there too.
Features :
* handle aligned to the left
* animation is opening and closing content at the same time
* event trigger is mouse over
* cycling every 10 seconds from 1 to 4 and than from 4 to 1
* new event will only be allowed, once the first animation completed

Ok Lets begin....

First Paste This Css Code, above this Code

» Click to show CSS Code - click again to hide... «


Now For the JavaScript,Paste This Code Below


<script src='http://www.geocities.com/ziegey_clonesphare/jquery-1.3.2.js' type='text/javascript'/>

<script src='http://www.geocities.com/ziegey_clonesphare/jquery.easing.1.3.js' type='text/javascript'/>

<script src='http://www.geocities.com/ziegey_clonesphare/jquery.hrzAccordion.js' type='text/javascript'/>

<script src='http://www.geocities.com/ziegey_clonesphare/jquery.hrzAccordion.examples.js' type='text/javascript'/>



NOTE:you see js file URL right?? I suggest you download that file and reupload to your filehosting ,because im not responsible if that file removed from my account


Now The Last Thing you need to do...
Paste This Script Below

» Click to show Script Code - click again to hide... «




NOTE:If in your Header already had a widget then paste the code after </div> tag
Change As Needed...Text With Blue Color is Image Url,Text With Red Color Is Title For The Content,And with green color is the slide content

Ok Guys Thats all...(huff really tired after this)
Thx To http://www.1stwebdesigner.com
See Other Tutorial
Object Dock Navigation
Tabslide Navigation
Spoiler And Code Tutorial

Thursday, June 4, 2009

Spoiler And Code Tutorial


» Click to show Spoiler - click again to hide... «




ok...come again guys... this time i will teach you how to create "Spoiler" and "Code" for your blogs(Double Tutorial!!..Cool Isn't it :D).
some of you surely already know about spoiler ,right??...yeah script used to hide text,image,script and many more ,if you don't know just go up there and you'll find it :)

and "Code"...what is this??... this is the script used in many forums ,you sure know it if you ever joined a forum (like always...see above for the screenshot if you don;t know)
yoshh...this time i'll make that Code available in your post..hehehehe

first...i'll teach you how to create the spoiler
open your template (layout--->Edit HTML)
go to Css Section (Above This Code)
and Paste this Code

» Click to show CSS Code - click again to hide... «


you can change the color if you want
next to HTML Section(Below this Code )

Paste This Code
» Click to show Script - click again to hide... «


Save Your Template
go to settings--->formatting and paste this on the "post template"

<div class="spoilertop" onclick="openClose('YOURSPOILERID')"> » Click to show Spoiler - click again to hide... « </div>

<div class="spoilermain" id="YOURSPOILERID" style="display: none;"> THIS IS YOUR SPOILER CONTENT </div>

Now if u create new post , This code will appear in the post
Change "YOURSPOILERID" with The Spoiler ID (anything but uniqe) and "THIS IS YOUR SPOILER CONTENT" for ur content u want to hide

Now for the "Code"
open your template (layout--->Edit HTML)
go to Css Section (Above This Code)
and Paste this Code
» Click to show CSS CODE - click again to hide... «



Save Your Template
go to settings--->formatting and paste this on the "post template"

<div id='code'>THIS IS CODE CONTENT</div >

change "THIS IS CODE CONTENT" as needed
I will take the css code above for example
you must write like this for the code to work

<div id='code'>

#code {

font-size: 12px;

color: #FFFFFF;

padding: 15px;

width: 100%;

background-color: #b3b0b0;

display: block;

font-family: "Courier New", Courier, mono;

border-left-width: 15px;

border-left-style: groove;

border-left-color: #FF0000;

}

</div>


and the result will be like this


See other Tutorial
Object Dock Navigation
Tabslide Navigation



Sunday, May 31, 2009

Object Dock Navigation Tutorial



here...another tutorial for your blog guys ^^
as the title above, you can tell ...am i right?..yes, this is the tutorial to create object dock navigation :),ah if u dont know it's ok...just see the screenshot above this Tutorial ,nah...you can tell now ,right ^^ .I am already using this trick too ,so...you can see the live preview for this tutorial.

Actually my previous post already using this too ,yeah "The DotA Allstars Template"...because of that ,few visitors want to know how i create this navigation.So...to answer that question i will tell you how to create it with this post

Here I come!!!! :D
First Found this Code


Paste this Css Code above that code

» Click to show CSS Code - click again to hide... «


next...paste this code below this

<script src='http://www.geocities.com/ziegey_clonesphare/jquery.js' type='text/javascript'/>
<script src='http://www.geocities.com/ziegey_clonesphare/interface.js' type='text/javascript'/>


NOTE:you see jquery.js and interface.js URL right?? I suggest you download that file and reupload to your filehosting ,because im not responsible if that file removed from my account


ok next
here the last script .paste this below
» Click to show Script - click again to hide... «


you can modify that script on your own ,you can change # for the URL,Images ,and dock labels
Ok Thats all...see you again in the other tutorial ^^

Thx to
http://www.andrewsellick.com


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


.