Membuat 'My Wishlist'.

Cara mudah membuat My Wishlist.

1. Masuk akaun Blogger.

2. Pilih 'Design'--> 'Add a Gadget'--> 'Html / Javascript'.

Copy kod di bawah dan Paste.

<form name=myform>
<input type="checkbox" name="mybox" value="1" checked />TOYOTA CALDINA<br />
<input type="checkbox" name="mybox" value="2" checked />KLX 250 <br />
<input type="checkbox" name="mybox" value="3" checked />KTM DUKE <br />
<input type="checkbox" name="mybox" value="4" checked />IPHONE 5 <br />
<input type="checkbox" name="mybox" value="5" disabled />PLAYBOOK <br />
<input type="checkbox" name="mybox" value="6" disabled />BLACKBERRY <br /></form>

Perhatian !!! Gantikan senarai Wishlist dan text kod yang berwarna biru atau merah Checked untuk tandakan dan disabled untuk kosongkan kotak wishlist anda.

3. Selamat Mencuba.

READ MORE...

Code Box #2.

Selain di jadikan sebagai code box,anda juga boleh memasukkan imej atau artikel,mengikut kreativiti anda:

Untuk membuat code box ini anda hanya perlu mengikuti,beberapa langkah mudah di bawah.

01. Mula-mula masuk akaun blogger anda.

02. Pilih 'Layout'-->'Edit Html'-->'Expand Widget Template'.

03. Ok,sekarang anda cari kod di bawah ini:

]]></b:skin>

04. Kemudian copy kod di bawah, dan paste di atas kod tadi.

05. Save template.

.codeview {
font-family: Arial, Helvetica, sans-serif;
color: #CC0000;
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
border-top : 2px solid #cccccc;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 2px solid #cccccc;
background-color: #FFFFFF;
}
.codeview li {
font-size : 13px;
line-height : 24px;
font-family : "Courier New", "MS Sans Serif", sans-serif, serif;
color : #333333;
font-weight : normal;
margin : 0;
padding : 0;
}

06. Sekarang sampailah ke peringkat yang terakhir.

07. Pergi ke 'Setting'-->'Formatting'-->'Post Template'.

08. Copy kod di bawah ini dan Paste :

<div class="codeview">
Insert the Special code here
</div>

09. Save Setting.

Pastikan setiap kali anda hendak membuat post baru text ini akan muncul 'Insert the Special code here' dan gantikan dengan artikel2 atau kod yang hendak di masukkan di dalam 'Code box'.

Anda boleh mengubah 'background colour dan border colour outset' mengikut citarasa anda.

Sekiranya anda mahu memasukkan kod ke dalam code box. Encode kod anda terlebih dahulu di web ini GoogleToad.

READ MORE...

Memasang 'Syntax Highlighter'.

Syntax Highlighter memberikan penampilan Code box lebih professional

Untuk memasang Syntax Highlighter, sila ikuti beberapa langkah mudah di bawah.

1. SIGN IN akaun blogger.

2. Pilih LAYOUT --> EDIT HTML --> EXPAND WIDGET TEMPLATE.

3. Cari kod ini.

]]></b:skin>

4. Copy di bawah dan letakkan di atas kod tadi.

.dp-highlighter
{
font-family: "Consolas", "Monaco", "Courier New", Courier, monospace;
font-size: 12px;
background-color: #E7E5DC;
width: 99%;
overflow: auto;
margin: 18px 0 18px 0 !important;
padding-top: 1px; /* adds a little border on top when controls are hidden */
}

/* clear styles */
.dp-highlighter ol,
.dp-highlighter ol li,
.dp-highlighter ol li span
{
margin: 0;
padding: 0;
border: none;
}

.dp-highlighter a,
.dp-highlighter a:hover
{
background: none;
border: none;
padding: 0;
margin: 0;
}

.dp-highlighter .bar
{
padding-left: 45px;
}

.dp-highlighter.collapsed .bar,
.dp-highlighter.nogutter .bar
{
padding-left: 0px;
}

.dp-highlighter ol
{
list-style: decimal; /* for ie */
background-color: #fff;
margin: 0px 0px 1px 45px !important; /* 1px bottom margin seems to fix occasional Firefox scrolling */
padding: 0px;
color: #5C5C5C;
}

.dp-highlighter.nogutter ol,
.dp-highlighter.nogutter ol li
{
list-style: none !important;
margin-left: 0px !important;
}

.dp-highlighter ol li,
.dp-highlighter .columns div
{
list-style: decimal-leading-zero; /* better look for others, override cascade from OL */
list-style-position: outside !important;
border-left: 3px solid #6CE26C;
background-color: #F8F8F8;
color: #5C5C5C;
padding: 0 3px 0 10px !important;
margin: 0 !important;
line-height: 14px;
}

.dp-highlighter.nogutter ol li,
.dp-highlighter.nogutter .columns div
{
border: 0;
}

.dp-highlighter .columns
{
background-color: #F8F8F8;
color: gray;
overflow: hidden;
width: 100%;
}

.dp-highlighter .columns div
{
padding-bottom: 5px;
}

.dp-highlighter ol li.alt
{
background-color: #FFF;
color: inherit;
}

.dp-highlighter ol li span
{
color: black;
background-color: inherit;
}

/* Adjust some properties when collapsed */

.dp-highlighter.collapsed ol
{
margin: 0px;
}

.dp-highlighter.collapsed ol li
{
display: none;
}

/* Additional modifications when in print-view */

.dp-highlighter.printing
{
border: none;
}

.dp-highlighter.printing .tools
{
display: none !important;
}

.dp-highlighter.printing li
{
display: list-item !important;
}

/* Styles for the tools */

.dp-highlighter .tools
{
padding: 3px 8px 3px 10px;
font: 9px Verdana, Geneva, Arial, Helvetica, sans-serif;
color: silver;
background-color: #f8f8f8;
padding-bottom: 10px;
border-left: 3px solid #6CE26C;
}

.dp-highlighter.nogutter .tools
{
border-left: 0;
}

.dp-highlighter.collapsed .tools
{
border-bottom: 0;
}

.dp-highlighter .tools a
{
font-size: 9px;
color: #a0a0a0;
background-color: inherit;
text-decoration: none;
margin-right: 10px;
}

.dp-highlighter .tools a:hover
{
color: red;
background-color: inherit;
text-decoration: underline;
}

/* About dialog styles */

.dp-about { background-color: #fff; color: #333; margin: 0px; padding: 0px; }
.dp-about table { width: 100%; height: 100%; font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; }
.dp-about td { padding: 10px; vertical-align: top; }
.dp-about .copy { border-bottom: 1px solid #ACA899; height: 95%; }
.dp-about .title { color: red; background-color: inherit; font-weight: bold; }
.dp-about .para { margin: 0 0 4px 0; }
.dp-about .footer { background-color: #ECEADB; color: #333; border-top: 1px solid #fff; text-align: right; }
.dp-about .close { font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; background-color: #ECEADB; color: #333; width: 60px; height: 22px; }

/* Language specific styles */

.dp-highlighter .comment, .dp-highlighter .comments { color: #008200; background-color: inherit; }
.dp-highlighter .string { color: blue; background-color: inherit; }
.dp-highlighter .keyword { color: #069; font-weight: bold; background-color: inherit; }
.dp-highlighter .preprocessor { color: gray; background-color: inherit; }

5. Cari kod ini

</head>

6. Copy kod di bawah dan letakkan di atas kod tadi.

<!-- Add-in CSS for syntax highlighting -->
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js' type='text/javascript'></script>

7. Cari kod ini.

</body>

8. Copy kod di bawah dan letakkan di atas kod tadi.

<!-- Add-in Script for syntax highlighting -->
<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>

9. Pilih SAVE TEMPLATE.

10. Pergi ke SETTING --> FORMATTING --> POST TEMPLATE.

11. Copy kod di bawah dan paste.

<pre name="code" class="cpp">
...Your html-escaped code goes here...
</pre>

Pastikan setiap kali anda hendak membuat post baru text ini akan muncul ...Your html-escaped code goes here... dan gantikan dengan kod anda.

Sekiranya anda mahu memasukkan kod ke dalam Syntax Highlighter. Encode kod anda terlebih dahulu di web ini Centricle.com

Selamat Mencuba....

READ MORE...

Membuat 'Text Area With Auto Highlight'.

Masukkan text anda di sini

1. Masuk akaun Blogger.

2. Pilih 'Layout'--> 'Add a Gadget'--> 'Html / Javascript'.

3. Copy kod di bawah dan Paste.

<textarea rows="5" cols="15" onfocus="this.select()" onmouseover="this.focus()" style="display: inline;" name="txt" onclick="this.focus();this.select()">

Masukkan text anda di sini

</textarea>

Perhatian !!! Gantikan text berwarna merah dengan text anda.

4. Save.

READ MORE...

Code Box .

Membuat 'code box' dalam bentuk 3D.

Selain di jadikan sebagai code box,anda juga boleh memasukkan imej atau artikel,mengikut kreativiti anda:

Untuk membuat code box ini anda hanya perlu mengikuti,beberapa langkah mudah di bawah ini.Mula-mula masuk akaun blogger anda.

Pilih 'Layout'-->'Edit Html'-->'Expand Widget Template'.

Ok,sekarang anda cari kod di bawah ini:

]]></b:skin>

Kemudian copy kod di bawah, dan paste di atas kod tadi !!!

'Save template'

.boxed {
background-color: #add8e6 ;
border: 2px outset #CCCCCC ; padding: 10px;
}

Sekarang sampailah ke peringkat yang terakhir (memang mudah buat benda ni..)

Pergi ke 'Setting'-->'Formatting'-->'Post Template'.

Copy kod di bawah ini dan Paste :

<div class="boxed">
This text is enclosed in a box.
</div>

'Save Setting'

Pastikan setiap kali anda hendak membuat post baru text ini akan muncul 'This text is enclosed in a box' dan gantikan dengan artikel2 atau kod yang hendak di masukkan di dalam 'Code box'.

Anda boleh mengubah 'background colour dan border colour outset' mengikut citarasa anda.

Sekiranya anda mahu memasukkan kod ke dalam code box. Encode kod anda terlebih dahulu di web ini Centricle.com

READ MORE...