Monday, June 18, 2012

: Tutorial Letak Cbox Dalam Blogskin


Bismillah , Assalamualaikum

ok , lewat petang tadi ada seorang cute blogger ni request cara macam mana nak letak cbox kat dalam blogskin, haa macam mana ek ?

jom belaja ^^

1) Log In > Dashboard > Template

2) Klik Ctrl+F dan cari kod cbox 

3) Copy dan paste kod cbox korang kat situ

    - biasanya owner kod template tu akan sediakan tempat untuk korang letak cbox ,

    - contoh :
       CBOX CODE HERE. MAX WIDTH=260px;
4) Dah siap , korang preview dulu , kalau takde error , save ok , siap !! ^^


kalau takde kod tu , jom kita buat cbox terapung , ok ^^

1) Log In > Dashboard > Template 

2) Tekan Ctrl+F dan search kod </head>

3) Copy dan pastekan kod bawah ni kat bawah kod </head>


<div style='display:scroll; position:fixed; top:10px; right:10px;'></a><br /><a href="javascript:void(0);"onclick="showHideAT()"/><img class= width="140" height="140"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFwDTyNJcCnYGo-221d76oVrhBnu0hotz-IDUWijvZYpwJMYXux5yuGrgPfIWXfiW7GexkAIt1MIon8rOHdyitNtKg0VrRCI3aYn2J-61M6-MM8u30ge3sD4bUCRcs9MkpLJigdiX1XZ6L/s1600/icon+shout.png" alt="Shoutbox" title="Shoutbox" /></a>
</div>
<style type="text/css">#at{position:fixed;
top:0;;}* html #at{position:relative;}.attab{height:100px;width:30px;float:left;cursor:pointer;background:url();}
.atcontent{float:right;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_qBNgMiV70O8FEbU_-ebfoKYYwVN7VhU57lpUy-o02P5_HyH3y4ORD53KlgS7gyDcekrw7w20k-DeM3idwI7Ziy1-AoDU7WtrXPglwO0QkYsfnVSUiotXbtN2t6pgHoaEpRQRCWFKdh8/s1600/kak+yana+shout+frame+copy.png) no-repeat 0 0 transparent;width:800px;height:460px;center scroll ;
padding:56px 0 20px 5px;}</style><script type="text/javascript">function showHideAT(){var at = document.getElementById("at");var w = at.offsetWidth;at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);at.opened = !at.opened;}function moveAT(x0, xf){var at = document.getElementById("at");var dx = Math.abs(x0-xf) > 25 ? 35 : 1;var dir = xf>x0 ? 1 : -1;var x = x0 + dx * dir;at.style.top = x.toString() + "px";if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}}</script><div id="at"><div class="attab" onclick="showHideAT()"> </div><div class="atcontent"><div align="center"><div style="background:url() no-repeat;">
<br /><br /><br /><br /><br /><br />
Masukkan Shoutbox korang dengan lebar 270 dan tinggi 280
<center><div id="author"><a href="javascript:void(0);" onclick="showHideAT()"><input type="button" value="Close" class="close" /></a></div></center></div></div><script type="text/javascript">var at = document.getElementById("at");at.style.top = (-200-at.offsetWidth).toString() + "px";</script></div></div>

purple: gantikan dengan kod icon korang
hijau: gantikan dengan background shoutbox korang
bold: masukkan kod shoutbox korang

Freebies sikit , 

http://i777.photobucket.com/albums/yy57/bunnymeloney/c60.png


http://i777.photobucket.com/albums/yy57/bunnymeloney/c61.png

 
http://i777.photobucket.com/albums/yy57/bunnymeloney/c63.png
 
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikUqWGzLEHPRk82Qttvescu2rQydUuEE_KG_ZNKgqyziQb3OIHo8MR10nbNwoP6qeG-UK34kLGInsEHLq2bhxI2G3HZBYYsd8gmwNGDmKibQ02LdhV2l4zwQ6Qku0DGlQZjiuigNcW5Xo-/s1600/cb4.png
 
http://i356.photobucket.com/albums/oo3/babyemo1413/bihasart3.png


credit : Diya Sesame 



ok , jadi tak ? kalau tak jadi , tanya lah , nanti insyaAllah boleh tolong mana yang salah tu , ok , selamat mencuba !! ^^

9 comments: