TUTORIAL

Cara Meletakkan TV Di Blog

Jika anda pernah melawat blog orang lain, mungkin anda terjumpa ada blog yang meletakkan gadget TV online di blog mereka. Sama ada TV3 , TV9 atau TV1 . Jika anda ingin meletakkan gadget tv online di blog anda , maka anda boleh teruskan bacaan anda di bawah.

Di bawah ini adalah contoh gadget tv online TV3. Anda boleh menontonnya sama seperti anda menonton tv di rumah anda.

TV3 ONLINE



Untuk meletakkan TV3 online ini di dalam web anda , ikuti langkah berikut :

1. Log in akaun blog anda.
2. Pilih blog mana yang anda ingin letakkan tv online.
3. Buat pilihan sama ada untuk di masukkan dalam Posting atau di ruangan gadget.
4. Jika anda pilih untuk letak diruangan gadget maka pilih LAYOUT --> ADD GADGET --> SCRIPT/HTML , kemudian copy dan paste kod dibawah.
5. Jika anda pilih untuk letak dalam ruangan posting seperti yang saya buat . Maka copy dan paste kod di bawah dalam ruangan isi posting anda. Lepas itu savekan dia.

6. COPY dan PASTE kod di bawah :


<div><embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/Downloads/Contents/MediaPlayer/" width="350" height="350" src="http://www.um.com.my/tv_channels/malaysia/tv3.asx" filename="http://www.um.com.my/tv_channels/malaysia/tv3.asx" autostart="True" showcontrols="True" Volume="100" id='mediaPlayer' displaysize='4' autosize='-1' showstatusbar="True" showdisplay="False" autorewind="True"></embed></div>

7.Savekan...selesai...


Cara Membuat Title Header Bergerak

Pernah tengok title header blog yang boleh bergerak ? Title header ialah tajuk yang atas sekali sebelah lambang blogger [B]. Tahu cara nak membuatka ia bergerak contonya seperti SELAMAT DATANG KE BLOG SAYA dan sebagainya ? Kalau tak tahu anda boleh baca entry ini , kalau dah tau tak payah lah baca.

Langkahnya ialah :

1. Login akaun blogspot anda.
2. Pilih blog [ kalau anda ada banyak blog la ]
3. Klik DESIGN yang ada kat sebelah SETTING tu.
4. Klik EDIT HTML
5. Klik kotak Expand Widget Templates.
6. Cari perkataan <HEADER>
7. Salin / copy kod ini sebelum kod <HEADER> tadi :


<script type='text/javascript'>
//<![CDATA[

msg = " SELAMAT DATANG KE BLOG KAMI ";
msg = "--- [MACAM-MACAM ADA] ---" + msg;pos = 0;
function scrollMSG() {
document.title = msg.substring(pos, msg.length) + msg.substring(0, pos); pos++;
if (pos > msg.length) pos = 0
window.setTimeout("scrollMSG()",200);
}>
scrollMSG();
//]]>
</script>

Jika anda mahukan tulisan lain anda boleh ubah ajer tulisan selamat datang tu dan macam-macam ada tu yea.

Jangan lupa SAVE kan template anda tu. Atau kalau takut tak jadi cuba klik PReViEW dulu.

Ok , selamat mencuba ...

Letak Button Like Di Blog

Bagaimana anda hendak menentukan secara rawak berapa ramai yang suka blog anda.?.
Salah satu daripadanya adalah dengan meletakkan button 'like' untuk blog.

Jika tutorial meletakkan button 'like' dalam entri merujuk kepada pengunjung yang suka pada entri anda, meletakkan button 'like' ini pula akan merujuk kepada bilangan pengunjung yang suka blog anda secara keseluruhannya.

Anda boleh menggunakan kod yang diberi untuk diletakkan di sidebar blog anda



Tutorial untuk meletakkan button ini seperti di bawah.

1. Login akaun blogger, dari dashboard > design > add a gadget > HTML javascript

2. Copy dan paste kod di bawah ke dalam ruangan HTML/javascript


<iframe scrolling="no" frameborder="0" allowtransparency="true" style="border: medium none; overflow: hidden; width: 280px; height: 40px;" src="http://www.facebook.com/plugins/like.php?href=http://URL-ANDA.blogspot.com&layout=standard&show_faces=false&width=280&action=like&font=arial&colorscheme=light&height=40"></iframe>


note: Gantikan URL-ANDA dengan url blog anda

3. Save dan lihat hasilnya.:)

Disable Highlight Entri Blog

Sesetengah orang mungkin agak tidak senang bagi sesiapa mengambil hasil entri dalam blog mereka. Antara cara yang digunakan untuk mengelakkan entri atau kandungan dalam blog di'ambil' adalah dengan disable right click atau disable highlight.


Tutorial untuk disable right click sudah pun ada sebelum ini, dan kali ini tutorial adalah untuk disable highlight text dalam blog.


Ikuti tutorial mudah seperti di bawah.

1. Dari dashboard > design > add a gadget > HTML/javascript

2. Masukkan kod di bawah dalam ruangan HTML/javascript


<script type="text/javascript">
function disableSelection(target){
if (typeof target.onselectstart!="undefined") //IE route
target.onselectstart=function(){return false}
else if (typeof target.style.MozUserSelect!="undefined") //Firefox route
target.style.MozUserSelect="none"
else //All other route (ie: Opera)
target.onmousedown=function(){return false}
target.style.cursor = "default"
}
//Sample usages
//disableSelection(document.body) //Disable text selection on entire body
//disableSelection(document.getElementById("mydiv")) //Disable text selection on element with id="mydiv"
</script>
<script type="text/javascript">
disableSelection(document.body) //disable text selection on entire body of page
</script>


3. Save dan lihat hasilnya..:)


TIPS:
Untuk kesan yang lebih baik, letakkan/drag HTML atas ruangan blog post. Ini akan membuatkan kod disable highlight ini 'dibaca' dahulu sebelum entri.:)



Disable Right Click


Adakah anda tidak suka orang lain mengambil apa sahaja kandungan dalam blog anda.?
Dan pada masa yang sama anda tidak suka dengan kod² yang berserabut yang perlu di edit dalam 'edit html'. Kini ada cara mudah untuk realisasikan hasrat anda.:)

Kenapa Perlu Disable Right Click.?
Kebiasaannya,seseorang pemilik blog akan menggunakan fungsi ini untuk megelakkan orang lain mengambil apa yang ada dalam blog mereka. Samada tidak senang ayat mereka ditiru bulat² (copy paste), ataupun untuk mengelakkan bandwidth habis digunakan. Kebiasaan alasan yang aku selalu baca adalah kerana ada orang yang copy entri mereka bulat².

Berikut adalah contoh msg yang akan keluar apabila anda aktifkan disable right click



Disable Right Click dalam blog



Berikut adalah cara yang mudah untuk menggunakan fungsi ini.


1. Copy kod ini.

<script language=JavaScript>
<!--

//edit by unwanted


var message="Masukkan Mesej Anda Disini";

///////////////////////////////////
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}

function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}

if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}

document.oncontextmenu=new Function("alert(message);return false")

// -->
</script>


2. Paste pada "HTML/javascript" dalam blog anda.
Dashboard >Layout>Add a Page element >html/javascript. Kalau masih kurang jelas, klik sini.





Apabila sudah siap, save dan lihat kesannya pada blog anda.:)


Cara Letak Effect Salji Di Blog


Hai all...wah dah lama saya tak kongsi dengan korang tutorial untuk menghiaskan blog...ok...hari ini saya nak ajar korang cara nak letak effect salji di blog korang^^...Sebelum saya mulakan tutorial saya nak kasi tahu yang effect salji ini tidak memberatkan blog anda...Ada banyak tutorial yang di kongsikan para blogger-blogger lain...tapi kebanyakkannya ada yang memberatkan blog bila effect ini di pakai...Jadi korang jangan risau...Effect salji yang koz berikan ini tak memberatkan blog anda^ ^...Caranya amat mudah ...kalau korang nak cube sila ikuti langkah-langkah di bawah:-

Langkah 1

Layout>Page Elements>Add a Gadget>HTML/Javascript

Langkah 2

Kemudian korang copy dan paste code di bawah


<br />
<script src="http://snow-effect.googlecode.com/files/snow.js" type="text/javascript"></p>
<p>/***********************************************</p>
<p>* Snow Effect by BudakNakal at http://kozumiro.blogspot.com/</p>
<p>* Please keep this notice intact</p>
<p>***********************************************/</p>
<p></script><br />

kemudian save....

dan lihat hasilnya...

selamat mencuba^ ^...

Cara Membuat Box Pesanan Show/Hide Di Blog

click to zoom

Hai all...Next tutorial pada hari ini koz akan ajar korang cara nak buat box pesanan.Kegunaannya adalah untuk memberi pesanan kepada para pengunjung sama ada dalam bentuk nasihat mahu pun pemberitahuan.Jadi kalau nak buat ikuti langkah-langkah di bawah:-

Langkah 1

Seperti biasa backup templet dulu kemudian Log in blog>Dashboard>Layout>Edit HTML. kemudian klik pada Expand Widget Templates.

Langkah 2

Copy dan paste code di bawah ,di atas code ]]></b:skin>

.author-box {
background: #FF99CC;
margin: 20px 0 40px 0;
padding: 10px;
overflow: auto;
color:#888;
font-family:verdana, sans-serif;
-moz-border-radius-topleft:0px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:0px;
}

.author-box p {
margin: 0;
padding: 0;
}

.author-box a{
color:#666;
}

.author-box img {
background: #FFFFFF;
float: left;
margin: 0 10px 0 0;
padding: 4px;
}


Kemudian save...

Langkah 3

Layout>Page Elements>Add a Gadget>HTML/Javascript

Langkah 4

copy dan paste code di bawah

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


.gbcontent{
float:right;
border:5px solid #FDE8F8;
background:#F76FB4;
padding:10px;
-moz-border-radius-topleft:0px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:0px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-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.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>

<div class="gbcontent">

<div style="text-align:right">
<a href="javascript:showHideGB()">
<img src="http://img706.imageshack.us/img706/642/tutupb.png" title="DOuble Klick Tau!" alt="tutup" />
</a>
</div>
<center>


<div class='author-box'>
<img alt="avatar" class="avatar avatar-70 photo" height="70" src="http://img189.imageshack.us/img189/4873/firetoy48x48.png" width="70" /><b>Perhatian!</b><br />
Pesanan Korang<br />
</div>
</center>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.center = (30-gb.offsetWidth).toString() + "px";
</script></div></div>


Pada code berwarna merah tetapkan warna yang korang suka.
Pada code berwarna biru Letak gambar avatar yang korang suka.
Pada code berwarna hijau Tulis pesanan yang korang suka.

Save dan lihat hasilnya...

Camat mencuba...

Cara Buat Dropdown Menu 

Hai all...camat pagi...ahak...maap ye sebab ada yang menunggu tutorial berikutnya dari koz...hihi...okey hari ini koz akan ajar next tutorial pulak dekat korang...nak belajar??^^okey kalau nak hari ini koz akan berkongsi dengan korang cara buat Dropdown Menu dekat blog korang...contoh seperti yang koz ada buat unutk Rakan Budak Nakal di belah kanan>>>

Kalau nak buat ikuti langkah-langkah berikut...

Langkah 1

Dashboard>Layout>Page element>Add a gadget>HTML/javascript.

Langkah 2

Copy dan paste code di bawah

<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option selected>Tajuk</option>
<option value="Link 1">Text 1</option>
<option value="Link 2">Text 2</option>
<option value="Link 3">Text 3</option>
</select>

Langkah 3

Pada Link 1 Masukkan link.
Pada Text 1 Masukkan perkataan/ayat untuk link yang di paparkan.

Langkah 4

JIka ingin menambah ruangan menu,masukkan code ini

<option value="Link ">Text </option>

Diatas/sebelum code ini
</select>

Save dan lihat hasilnya...

camat mencuba...

Hide/Show Shoutbox Versi Simple 

Sebenarnya saya dah buat tutorial ini dalam versi comel...tapi memandangkan ada yang nak jenis simple saya akan edit kembali code tersebut kepada yang asal..
jadi jika inginkan yang jenis simple teruskan megikuti langkah-langkah berikut:-

Langkah 1

Login 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:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://img411.imageshack.us/img411/6496/hijau.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, 30-w) : moveGB(20-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 DISINI

<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 = (30-gb.offsetWidth).toString() + "px";
</script>


Langkah 3

Kemudian korang masukkan code shoutbox korang pada perkataan
" MASUKKAN CODE SHOUTBOX DISINI "

dah masukkan save dan tengoklah hasilnya...

Pada code yang berwarna hijau korang boleh ubah gambar tersebut(saiz 100X30)





Kalau Rajin Klik Ea...