Diah Andani Blog: 2013

letak frame and backtound pada southbox

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 kamu suka. Kamu boleh create sendiri atau just pilih frame yang dah disediakan di sini

url warna merah - masukkan url background yang yang kamu mau, nah di sini

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

4) Lastly, klik save dan lihat hasilnya.

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

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFgy-NH78KE6qS7VPEN9lUMz-9xtf6IWqAkWS6YDGVgG119vyYxEXPBFhF_JFOtS9ZV7FY8oyy8vsbdCEpWjeBbD1_uMLRji9sNvQvH1uoQIKT_FNvLVsDdWL804dETFOy9cz0ip_BL9g/s1600/frame+fibox1.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_GUB7jQ0BeE6Q1TizVhYUr59gZgcoV7m-op-uPm5kuvoj-2Opq_e0s6SENyunm7Q2xebi60cKgFYxe7fv8sz9zNbIoT75_hdc0-janEwzSDPHjcaaTVAgc0mT_HVQJOnW1-fp7DkXYQo/s1600/frame+fibox2.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyFBY1IMdfMtL3h1wLDdpDnpfLi4GpfCmu3IVNGfUrW_bVwU4VAro5SQo5gLJZ-DBL5a_psVC5Ct4ZHfpKqWMI6J9qylJqNDCpXQMyKOoTjgEbe-z2gux74YCqJaUrqXtD7N5gayWk6tE/s1600/frame+fibox3.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil1F1iVIkzCaW3Hj05FOMiVq_uBoGEzTPZLC8b5kJBRxXipbv7PwgioFhjvtlxVw1V7bHZuIvN0lHiKNWWmzROY2gxVOeu0nuhXn1l3KZQpVGnXQYQQsVmy3cHyIKKam2s91c871V4rXA/s1600/frame+fibox4.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuVQjBD0dcHXiPXLZA3uxzndg_0maeiUuubTvRD8PSW4bKXQ5QYQw4cCwJfKPswGOBElD1WdrjkApveWxZClb4SgwNj98xm1q87x7YHfC5n6Ib9g9mxpA5cnwdVv54TFnFFxmzmdehC6c/s1600/frame+fibox5.png

4) Lastly, klik save dan lihat hasilnya.

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>