Spoiler And Code Tutorial

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

THIS IS THE SPOILER

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... «

/*Spoiler script*/

.spoilertop{

background: #000000;

border: 1px solid #FF0000;

border-left: 4px solid #FF0000;

color: #ffffff;

font-weight: bold;

font-size: 10px;

margin: 8px auto 0 auto;

padding: 3px;

text-decoration: underline;

}

.spoilermain{

background: #000000;

border: 1px dotted #FF0000;

border-left: 4px solid #FF0000;

border-top: 0;

color: #ffffff;

padding: 4px;

margin: 0 auto 8px auto;

}

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... «

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



function openClose(id) {

var obj = &quot;&quot;;

if(document.getElementById) obj = document.getElementById(id).style;

else if(document.all) obj = document.all[id];

else if(document.layers) obj = document.layers[id];

else return 1;



if(obj.display == &quot;&quot;) obj.display = &quot;none&quot;;

else if(obj.display != &quot;none&quot;) obj.display = &quot;none&quot;;

else obj.display = &quot;block&quot;;

}

</script>

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... «

#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;

}

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

Tags: Tutorial, Tips, Tricks, HTML, CSS, JavaScript, blogger