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



3 comments:

  1. Congratulations for the postage, I liked on the subject congratulations. Valter. :))

    ReplyDelete
  2. bagus sob,tapi aq ga tau buat pake apa ya bagusnya..:)

    ReplyDelete

.