========Hafizal Haji Zainal========

Jumaat, 28 Disember 2012

Letak Frame Dan Background Pada Shoutbox

3:24 PG

By Hafizal Haji Zainal

0 ulasan

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! :) Read more

Letak Copyright pada blog

3:19 PG

By Hafizal Haji Zainal

0 ulasan

Preview:

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('loading', '');
}, 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('loading', '');
}, 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! :) Read more

Comment form icon

3:02 PG

By Hafizal Haji Zainal

0 ulasan

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

3:01 PG

By Hafizal Haji Zainal

0 ulasan

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 != "item"'>

<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! :) Read more

Letak border pada blog

2:59 PG

By Hafizal Haji Zainal

0 ulasan

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! :) Read more

Letak Background Pada Shoutbox

2:58 PG

By Hafizal Haji Zainal

0 ulasan

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! :)

2:56 PG

By Hafizal Haji Zainal

0 ulasan

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>
</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)