Tutorial Cara Buat Hide/Show Shoutbox

 

Hai all..bersua kembali ke tutorial yang berikutnya...

koz pasti kebanyakan korang mesti tertanya-tanya macam mana nak buat shoutbox macam koz nyer blog inikan...ok...lau korang nak tahu cara nak buat mari koz ajarkan...langkah-langkahnya senang jek...

sebelum mulakan pastikan korang dah ada shoutbox sendiri(kalau yang tak ada itu boleh dapatkan di sini Shoutbox )

Langkah 1

Log in blog >Layout> Page Elements>Add a Gadget>HTML/JavaScript 

Langkah 2

Korang copy dan paste code di bawah:-

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:150px;
width:100px;
float:left;
cursor:pointer;
background:url('http://img686.imageshack.us/img686/686/shoutbox.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #666666;
background:#F5F5F5;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 100-w) : moveGB(80-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

MASUKKAN CODE SHOUTBOX KORANG DEKAT SINI

<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (100-gb.offsetWidth).toString() + "px";
</script>

Langkah 3

Kemudian korang masukkan code shoutbox korang pada perkataan 

" MASUKKAN CODE SHOUTBOX KORANG DEKAT SINI"

dah masukkan save dan tengoklah hasilnya...

camat mencuba :D

Tutorial Cara Buat Auto Readmore Di setiap Post

Hari ini koz nak berkongsi dengan korang cara-cara nak set button readmore didalam blog korang secara auto,sebagai contoh korang leh tengok pada setiap post blog koz ini...

okey langkah-langkahnya seperti berikut:-

Langkah 1 

Log in blog > Dashboard> Layout>Edit HTML. Dan kick pada kotak Expand Widget Templates...

Langkah 2

Tekan Ctrl+ F pada keyboard . Seterusnya, copy paste code

</head>

pada ruangan Find dan tekan Enter...

Langkah 3

Kemudian copy code di bawah dan paste sebelum code

</head>

Copy code di bawah ini

<script type='text/javascript'>

var thumbnail_mode = "float" ;

summary_noimg = 350;

summary_img = 450;

img_thumb_height = 140;

img_thumb_width = 140;

</script>

<script type='text/javascript'>

//<![CDATA[

/*
*/

function removeHtmlTag(strx,chop){

if(strx.indexOf("<")!=-1)

{

var s = strx.split("<");

for(var i=0;i<s.length;i++){

if(s[i].indexOf(">")!=-1){

s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);

}

}

strx = s.join("");

}

chop = (chop < strx.length-1) ? chop : strx.length-2;

while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;

strx = strx.substring(0,chop-1);

return strx+'...';

}

function createSummaryAndThumb(pID){

var div = document.getElementById(pID);

var imgtag = "";

var img = div.getElementsByTagName("img");

var summ = summary_noimg;

if(img.length>=1) {

imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';

summ = summary_img;

}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';

div.innerHTML = summary;

}

//]]>

</script>

 Langkah 4

Tekan Ctrl+ F pada keyboard kemudian copy paste code di bawah pada ruang Find dan tekan Enter.

<data:post.body/>

Langkah 5

Copy dan paste code di bawah (gantikan) pada code tadi (Langkah 4)

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'><img src='http://img709.imageshack.us/img709/7056/readmorez.png'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Kemudian save dan tengoklah hasilnya...

camat mencuba...

Tutorial Cara Memasang emoticon pada bahagian comment

Hai all...hari ni koz nak berkongsi dengan korank cara nak taruk smile kat comment blog korang...

kalau nak tahu,ikut langkah-langkah seperti di bawah:-


apa-apa hal korang Save script template sebagai backup.


Langkah 1

Log in blog > Dashboard > Layout > Edit HTML. Seterusnya, klik pada kotak Expand Widget Templates...


Langkah 2

Dengan menggunakan keyboard, tekan kekunci Ctrl+ F dan taip atau paste code

</body>

pada ruang Find. Dan tekan kekunci Enter...


Langkah 3

Salin code di bawah dan paste diatas atau sebelum code

</body>

Salin code ini

<script src='http://sites.google.com/site/javascript10/emoticon.js' type='text/javascript'/>

Langkah 4

Lagi sekali dengan menggunakan keyboard, tekan kekunci Ctrl+ F dan taip atau paste code

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

pada ruang Find. Seterusnya tekan kekunci Enter...


Langkah 5

Salin code di bawah dan paste di atas atau sebelum code

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

Paste code ini

<b>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTX2KX5BM8yJM45m2Hqs5CypIYuMTosNeff23DA5b7iEKuKjP2PcsHzXrs64DHg2RMVL2qPHgAUvvsOpZUHiPnWXdJp3pJj8aH09GkVSOoDA9Vep3v9Oh9OMwO2F_lhyntajc7-hOe_evL/s200/20x20-waaaht.png'/>:a:
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVoQALvix6l0sBIc5LpTvJECyTh1AaEUxNRBsGsapgq1RgCFY080S0Hv_BMXz1KRwNWOrROB1-x6VfCNmJYG7HcMcCtF0xuFnPDLX0e5hpEeLH89_5aZ-gxOnTJiN3jlwMy9n-lsLRQnK8/s200/20x20-too_sad.png'/>:b:
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi51XbulXQQIRG-eONQy66eAdqg3RfGTmG9Bp8Xgss3SQbqrcayEQPvtTBW00PvR-rFKJ6IArc1mPdTgBVkx-8HJILDIkcSC4TmATacFUOa_BehYqdiq-A5GG9I2dt7Oc3pWVqFdjxWqh4t/s200/20x20-look_down.png'/>:c:
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsVEmB8y5ToYlaTkHi4rFDKvV-cqTX0aneQe1QntAedGK-vrjFZscqECT8KqTy4xn6vvlfogBNDk6qJLtMJfrgFGMlbhZo0Rh9YFTIfr-t_I-haAMBY5zsV1IEnUHvh2Twm0g3JuoSZt4i/s200/20x20-hell_boy.png'/>:d:
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmsicIDrPritafOvUSrnZl02ViPozkc_ag7uoEqNE6hOfQF_oQqgrx9MKmBEDhCO_VaKlQaDuMWh3Hq-0nzxqeD-VNHtV0lh-a4ACQEOyygnu9hN67sNdst85T8doW9vmsEJpS_ueTOdNh/s200/20x20-feel_good.png'/>:e:
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj45v0mc3jkQH5lT_3d0X8bgakfGdcYFNpA4-hbXtQCtcOWVIlS0CXpG0snsoRNu2zX9auISIFX6Wj-lLqtljqMCEYdYaWqFznK83hxIXW9bkviTNFLtqJKy1YQ-hiMc50xtJV25ruZdjXp/s200/20x20-extreme_sexy_girl.png'/>:f:
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsmsjKClGSMYUny8lBnkS2GbCdn-A_u2-i7ybJW0MDhi03RBA21mDJOFZA8sB1gE9CTN0JD-tSMt2h0CQQDB8_jyAMbqiIjhiHSUIOvyTrRTJSLtL7170LMCvbJ4xIY1hdfOTN_rxE2I3X/s200/20x20-confuse.png'/>:g:
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvu56shslKLslJvLg_OysXiIKqfmYiTPjPWxDKU97MCz8H1qKxdfTeS9YoDlrWZkzBAfSvUusYetB4CDVL6actsQBYb2JDdIaWhpmXCntaW1SLgg64unvcmJy2IEpTJeKTvJ3vewIuKiNr/s200/20x20-confident.png'/>:h:
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_XvmO7OxrWNYCHJertrfUeCsLTnmJpwnOTcwDMJMOl33WZVRmg6LkPu9HgGswxuuQMpK24I0tnDrNB8a7C6N6r8hOIG1Q5dbPKxrb-6hC-3zB0NgAQeTgt40E9ek8ZKiiooh4FkLiQ5Kl/s200/20x20-cold.png'/>:i:
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggXKdsmUZliGwcTei0qh6ZmHhmgbBba8BKi1kgW1w_gX55ozWAh_5iMlYp4YHChMLuJqLTcOk4PWnck7V7neVZZnxceSq8huDQj5D_s5JFXMKtlFGdawIEo6jl_xy_greK3rEmuyCCODYL/s200/20x20-choler.png'/>:j:
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKdvtqqYnI1xLrEoqyi5NM64OcvuR6kF5NlfPvTk1QxorR0lplojiTTbEFWzoLstv-7i9cI4JU0vUOfANOEKMyrJe-N6kTPrhtnWk9cT3kiLYGkDjeXvEExS_HIMGnyB8YaOWShixeMebK/s200/20x20-boss.png'/>:k:
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhypYGjOYioziv-VR4v91N0-gsXpyU1aBd6czhUtSZk8gLUUQTq1YTui1R9aq6Yn6RmDHr3P8SkmfXxgHdEc-ZFdZBnmtouguYly5l6nZQepb_Gt97xX55U9qvIgncVjQkktjiCQWkY1ZDN/s200/20x20-big_smile.png'/>:l:
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHabGn5CpEiojtgJvc76UYy6eY4yzBMFelhxCXwGMerzIjOHiAGybDKZJ7Xb6Ggzld-TSHm_QsMmLG-TFe4rvTveCDu35eRu2864PVPpOhDF4U0zOBhqGj3UBvWeM_z0BMitrSXNslUkMn/s200/20x20-beauty.png'/>:m:
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilJaIdwt5bjtERHbERtjO5NkJFMb4q0ddC8KHn3SteHa3yBQsDjKh8IApD5SVeCBmjd_deGwUpRhs9nIQzg5YXVO6Oeqo_ycSCXtegA0Sk7wr1e4DBBZhmQsJD8ZuMqJnG66gUL0vabPM_/s200/20x20-beat_brick.png'/>:n:
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc-AGjnXQkIir-LGEY5yqVnq29-R4iKtUmXARxW9aVKs99SbPcc3RWs26axgGn84a9rzFK-08GGPzClHprqB_oFygREjPWKrVx_lBGUZohYW1GWDpgexdt7HWOZkifvHkqgs5Bd6h4xRHA/s200/20x20-bad_smelly.png'/>:o:
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN0BLdi9ULsBrHL0jzhd9tIQbfiDYSqddG-skkchcvs-RI_qYjdeRtbTg5_C-N2p0qe6k01kSN9hb8zNU3TqKrvWT3_LwetN7MsWuAMZ7f909TNpfA-_KkzWnlXkosSt06z0daA9nXv_oZ/s200/20x20-angry.png'/>:p:
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-ZMldXnvAJJYKkDiAsJGz4VoOJZl758Re0Gwtk2yVmb58KsFIWRag4uHRvG9YQzNmjpilpov5zPyRvGtGu4s6rZiKWxYy0Xewd3hXC_x7g3v_qzWCXNmndcTvlMxv0iqC6yiqBbfOolOq/s200/20x20-amazed.png'/>:q:
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLQG-g-oqk-STWrpRJWnx3v8ovMh9Q-Wg2pLJph41qzStmpg780IQavUDeRW1hjloy0fqoSniBn-zfFJWuKwCYaQVy_7F9SebXEXz3eK6YB1AAU_gvMGfuiHtpKsXjbMJEjtLJTUN1Rsc2/s200/20x20-ah.png'/>:r:
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoL1bHb6Phs8YmTGvxGZPxTDgwimWoX4nLyQpX_lIqroNO6LqisHMmTOLod8mbVrDWkvSsZ3u2fyuRzlF_O83Nixauq5HnmK4CzGWIX8QD9RMWB1_Z8RBRbc8SfEOUz9y2IBaG6JC5nAKY/s200/20x20-after_boom.png'/>:s:
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc4T3UNR46UGeGp2L1E9XpvscWpxNEg8vRHPYzGjICiz8FIwFentKRgQcd2Rn1j9O2NA6-r745oxMKFUEHoTKa6dSP36Qmh7W6EexHGUZ1xjRi7_KWZi4y4VjrnuQDbGPk67Zy5PSukgef/s200/20x20-adore.png'/>:t:
</b>

Sesudah itu save dan lihatlah hasilnya...

camat mencuba