Letak Frame Dan Background Pada Shoutbox

Preview:

Ramai juga yang bertanyakan saya macam mana cara nak combine frame dan background pada shoutbox..tutorial kali ni akan menunjukkan cara-caranya. Jom start:

1) Sign in akaun blogger

2) Dashboard >> Design >> Page Element >> Add A Gadget >> Html / Javascript

3) Copy dan paste kod di bawah pada ruang Html / Javascript tadi:

<center><div id="edited" style="width:200px; height:360px; background:url(http://img856.imageshack.us/img856/9573/framefibox5.png) no-repeat left top; padding-top:90px; padding-left:0px; position:relative" align="center">

<center><div id="custombg" style="width:180px; height:255px; background:url(http://dl6.glitter-graphics.net/pub/3220/3220296jsbm3yjnbc.png) repeat; padding-top:0px; padding-left:0px; position:relative" align="center">

<iframe frameborder="0" title="shoutboxsaya" height="255" src="http://shout.busuk.org/?shoutboxsaya" id="r" style="filter:alpha(opacity=60);opacity:0.60;-moz-opacity:0.60; display:block; " scrolling="auto" width="180"></iframe>

</iframe></div></center></div></center></div>

Nota: 

url warna biru - masukkan url image frame yang korang suka. Korang boleh create sendiri atau just pilih frame yang dah disediakan di sini.

url warna merah - masukkan url background yang korang nak. search kat sini atau pilih jer background yang dah disediakan kat sini.

url warna orange - url shoutbox korang. ( pada kod shoutbox korang, ambik dekat src='http://.....')


4) Lastly, klik save dan lihat hasilnya.

Selamat mencuba! :) 

Letak Copyright pada blog

Preview:

Copyright © 2012 ========Hafizal Haji Zainal========. Template by SoraTemplates

Copyright© All Rights Reserved HafizalHajiZainal.blogspot.com

Cuba scroll ke bahagian paling bawah blog ini, ada tertera perkataan Copyright© All Rights Reserved HafizalHajiZainal.blogspot.com kan?  Caranya, ikuti tutorial di bawah:

Caranya:

1) Sign in akaun blogger

2) Dashboard > Design > Edit HTML 

3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod

</body>

4) Kemudian, copy kod di bawah dan paste SEBELUM kod</body> yang korang cari tadi

<script type='text/javascript'>
window.setTimeout(function() {
document.body.className = document.body.className.replace(&#39;loading&#39;, &#39;&#39;);
}, 10);
</script>

<center>Ayat Copyright anda di sini</center>

Nota:
Pada Ayat Copyrigth anda di sini ,masukkan ayat copyright yang korang nak letak.

Contoh:

<script type='text/javascript'>
window.setTimeout(function() {
document.body.className = document.body.className.replace(&#39;loading&#39;, &#39;&#39;);
}, 10);
</script>

<center>Copyright© All Rights Reserved HafizalHajiZainal.blogspot.com</center>

 </body>

5) Klik preview, jika tiada error, klik save template dan lihat hasilnya.

Selamat mencuba! :) 

Comment form icon

Rujuk di sini untuk tutorial cara letak comment form icon - Letak comment form icon tutorial. Pilih dan copy url yang disediakan bagi setiap icon:

http://dl10.glitter-graphics.net/pub/499/499310ictbntcgpq.gif

http://dl3.glitter-graphics.net/pub/2848/2848713zyjupighyu.jpg

http://dl8.glitter-graphics.net/pub/1400/1400018ocqzge0n40.gif

http://dl10.glitter-graphics.net/pub/499/499310ictbntcgpq.gif

http://dl5.glitter-graphics.net/pub/1341/1341925bxnjqwck4h.png

http://dl6.glitter-graphics.net/pub/1663/1663196u1luba6vac.png

http://dl2.glitter-graphics.net/pub/1027/1027932ajq6co6hh8.png

http://dl5.glitter-graphics.net/pub/539/539925s0ysmv40at.png

http://dl8.glitter-graphics.net/pub/2198/2198928yzwzal4cnd.gif

http://dl3.glitter-graphics.net/pub/1665/1665783u47nt53aur.gif

http://dl7.glitter-graphics.net/pub/3135/3135127yq4db3m6cs.gif

http://dl8.glitter-graphics.net/pub/2889/2889398a0hnk0sw16.gif

http://dl9.glitter-graphics.net/pub/2103/2103809mdcn18ag62.jpg

http://dl6.glitter-graphics.net/pub/1885/1885256ptor804pon.gif

http://dl9.glitter-graphics.net/pub/2225/2225279kdfl5frmaj.gif

http://dl6.glitter-graphics.net/pub/1707/1707266rzpanswhs8.gif

http://dl8.glitter-graphics.net/pub/1244/1244738nkjfdcqzgn.gif

Letak comment form icon

Kebiasaannya bila nak komen, korang kena klik pada perkataan "comment" atau "post a comment" pada bahagian bawah entri kan? Untuk nampak lebih menarik, perkataan tersebut boleh ditukar kepada icon yang comel. Jom ikut step by step.

Caranya:

1) Sign in akaun blogger

2) Dashboard > Design > Edit HTML > Tick kotak "Expand Widget Templates"

3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod

<span class='post-comment-link'>

4) Kemudian, copy dan paste kod di bawah SELEPAS / DI BAWAHkod <span class='post-comment-link'> yang korang cari tadi:

<span class='post-comment-link'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<b:if cond='data:post.allowComments'>

<center><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' ><img class='post-comment-link' src=' URL image icon'/>

</a></center>

</b:if>

</b:if>

</span>

Nota:
Pada URL image icon, letakkan url icon yang korang nak. Korang  boleh search sendiri atau just copy url icon comment yang disediakan kat sini

5) Klik preview, kalau menjadi terus klik save template :)

Selamat mencuba! :) 

Letak border pada blog

Preview:

Bagi anda yang nak menampakkan kelainan pada blog, boleh cuba trick ini. Ikuti tutorial di bawah:

1) Sign in akaun blogger

2) Dashboard > Design > Edit HTML 

3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod 

.content-inner {

4) Kemudian, copy dan paste kod di bawah SELEPAS kod .content-inner { yang korang cari tadi:

border: 3px solid #000000;

Contoh:

 .content-inner {
border: 3px solid #000000;

Nota:
3px - Tebal border. Tukar kepada nilai yang korang mahu
solid - Style garisan border. Sama ada solid, dashed atau dotted.
#000000  - Warna border. Tukar kepada kod warna yang korang mahu. Pilih kod warna di bawah:
( untuk paparan besar, klik di sini)


5) Lastly, klik preview, dan jika tiada error, klik save template.

Selamat mencuba! :) 

Letak Background Pada Shoutbox

Preview:

Selain frame, korang juga boleh letak background pada shoutbox. Baru nampak meriah sikit kan? ^_^ Jom follow tutorial ini step by step:

1) Sign in akaun blogger

2) Dashboard >> Design >> Page Element >> Add A Gadget >> Html / Javascript

3) Copy dan paste kod di bawah pada ruang Html / Javascript tadi:

<center><div id="custombg" style="width:200px; height:300px; background:url(http://dl6.glitter-graphics.net/pub/3220/3220296jsbm3yjnbc.png) repeat; padding-top:0px; padding-left:0px; position:relative" align="center">

<iframe frameborder="0" title="shoutboxsaya" height="300" src="http://shout.busuk.org/?shoutboxsaya" id="r" style="filter:alpha(opacity=60);opacity:0.60;-moz-opacity:0.60; display:block; " scrolling="auto" width="200">

</iframe></center></div>

Nota: 
200 & 300 - saiz width dan height shoutbox korang.

url warna merah - url shoutbox korang. ( pada kod shoutbox korang, ambik dekat src='http://.....')

60 - nilai transperency shoutbox (ikut kesesuaian background yang korang pilih. jangan sampai tak nampak langsung tulisan shoutbox tu nanti ye ^_^)

url warna biru - masukkan url background yang korang nak. search kat sini atau pilih jer background yang dah disediakan kat bawah.

http://dl7.glitter-graphics.net/pub/676/676657yhxq5o5bjd.gif

http://dl4.glitter-graphics.net/pub/2080/2080324f7c521qp7z.gif

http://dl4.glitter-graphics.net/pub/577/577814mxl3lzplgr.gif

http://dl9.glitter-graphics.net/pub/1297/1297689x033a3xbsj.jpg

http://dl8.glitter-graphics.net/pub/2168/2168288zbnox1h1uo.gif

http://dl10.glitter-graphics.net/pub/1877/1877570beu28immp9.jpg

http://dl4.glitter-graphics.net/pub/3039/3039724iqnri5mycx.png

http://dl6.glitter-graphics.net/pub/3220/3220296jsbm3yjnbc.png

4) Lepas dah masukkan nilai yang sepatutnya pada kod tu, klik save dan lihat hasilnya.

Selamat mencuba! :)

Letak Frame Pada Shoutbox

Preview:

Tuto kali ni akan menunjukkan cara macam mana nak cantikkan shoutbox korang. Untuk nampak lebih menarik dan comel, pada kotak chat korang boleh tambah frame, macam preview kat atas. Jom follow step by step. Caranya:

1) Sign in akaun blogger

2) Dashboard >> Design >> Page Element >> Add A Gadget >> Html / Javascript

3) Copy dan paste kod di bawah pada ruang Html / Javascript tadi.

<center><div id="edited" style="width:200px; height:370px; background:url(URL IMAGE FRAME) no-repeat left top; padding-top:93px; padding-left:0px; position:relative" align="center">KOD SHOUTBOX</div></center>

Nota:
URL IMAGE FRAME - masukkan url image frame yang korang suka. Korang boleh create sendiri atau just pilih frame yang dah disediakan di bawah.
KOD SHOUTBOX - masukkan kod shoutbox korang. 


Contoh:

<center><div id="edited" style="width:200px; height:370px; background:url(http://img535.imageshack.us/img535/2325/frame6p.png) no-repeat left top; padding-top:93px; padding-left:0px; position:relative" align="center">SHOUT BUSUK : Start !--><iframe src="http://shout.busuk.org/?xxxx" width="180" height="255" frameborder="0" scrolling="auto"><a href="http://shout.busuk.org/?xxxx=viewfull">View shoutbox</a></iframe>
<!-- SHOUT BUSUK : End !--></div></center>

Freebies time.. frame untuk shoutbox. Just copy url yang disediakan:
P/s : kalau korang nak guna image frame ni, ukuran shoutbox korang mestilah 180x255 ( width: 180px, height:255)

http://img827.imageshack.us/img827/5499/framefibox1.png

http://img825.imageshack.us/img825/6149/framefibox2.png

http://img696.imageshack.us/img696/1825/framefibox3.png

http://img838.imageshack.us/img838/9023/framefibox4.png

http://img856.imageshack.us/img856/9573/framefibox5.png

4) Lastly, klik save dan lihat hasilnya.

Selamat mencuba! :) 

Letak Background Dalam Entri / Post

Biasanya background post entri anda adalah plain putih. Sekali-sekala tak salah jika nak menampakkan kelainan, dengan cara meletakkan gambar sebagai background pada entri anda, seperti post ini.

Caranya:

1) Sign in akaun blogger anda

2) Dashboard > New Post > Klik tab Edit HTML (sebelah compose)

3) Copy paste kod di bawah:

<div style="background:url(URL gambar background di sini) no-repeat;">

Content entry anda taip di sini

</div>

Nota:
Pada URL gambar background di sini, gantikan dengan url gambar background pilihan anda. Kalau tak tahu cara nak dapatkan url gambar, refer tutorial ini


4) Mulakan menaip entri pada ruang Content entry anda taip di sini

Contoh:

<div style="background:url(http://i417.photobucket.com/albums/pp255/Snakebitelayouts/Background.jpg) no-repeat;">

Hari ni rasa macam rajin je nak update belog. Maklum la mood tengah hepi..he3

</div>

Tips: pemilihan gambar background yang sesuai adalah penting. Jangan sampai tenggelam dan susah untuk di baca entri korang tu nanti.

Sekian, selamat mencuba! :)

Simple Template - Letak Kotak Pada Blockquote

Preview:

Bagi yang tak tahu apa itu Blockquote, rujuk di sini. Tutorial kali ini akan menunjukkan pada anda cara untuk meletakkan kotak pada petikan blockquote dalam blog anda.

Caranya:

1) Sign in akaun blogger

2) Dashboard > Design > Edit HTML 

3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod ini

/* Headings

4) Kemudian copy dan paste kod ini SELEPAS / DI BAWAH kod /* Headings tadi

.post blockquote {
background:#FFCCCC;
padding: 5px;
Border: 2px dashed #FF0099;

moz-border-radius: 25px 10px / 10px 25px;

border-radius: 25px 10px / 10px 25px;

colour:#FF0099;
}

Nilai yang anda boleh adjust dalam kod di atas
FFCCCC - warna background kotak blockquote. Rujuk kod warrna di bawah
2 - ketebalan garisan border kotak
dashed  - style garisan border. Sama ada dashed, solid atau dotted
FF0099 - warna garisan border. Rujuk kod warna di bawah
Kod warna purple - bentuk kotak border. Anda boleh pilih di sini

( untuk paparan lebih besar, klik di sini)


5) Bila dah selesai adjust nila-nilai di atas, klik preview dan jika tiada error, klik save template.

Selamat mencuba! :)