Follow Guna Gambar

Tujuan tutorial kali ni ialah untuk tampil berbeza daripada blog lain dengan mengubah follow button kepada image yang kiut miut..
Icon boleh diubah mengikut cita rasa korang..Caranya mudah je..Jom try !!


1. Sign in Blog > Design > Add Gadget > Html/JavaScript

2. Copy dan pastekan kod di bawah ke dalam ruangan HTML/JavaScript

<a href="http://www.blogger.com/follow-blog.g?blogID=BLOG ID" target="_blank"><img src="IMAGE URL" border="0"></a>

3. Gantikan BLOG ID dengan blog ID korang
4. Gantikan IMAGE URL dengan URL gambar yang korang nak letak
5.Save dan lihat perubahannya ^^

*Freebies untuk korang*

http://i1143.photobucket.com/albums/n634/PrinceSsVirGo09/437843yn4bmybu6n.gif

http://i1143.photobucket.com/albums/n634/PrinceSsVirGo09/469680y9dheoe2bu.gif

http://i1143.photobucket.com/albums/n634/PrinceSsVirGo09/493040srfqimnt77.gif

* Image kali ni tak berapa ok...sebab kejar masa nak tido..hahaa..next time akan upload yang lain lagi..so, rajin2 la melawat kat cni ya..

Mencantikkan Scroll Bar Blog

Kali ni nak buat tutorial yang simple dan cepat..sebab esok da start kuliah da..huhu (｡◕︵◕｡)
Tak tahu scroll bar tu apa...tengok contoh gambar kat bawah ni ye..

 Just follow step kat bawah ni...
1. Sign in blog > Design > Edit HTML
2.Copy kod di bawah..Tekan Ctrl F dan pastekan di kotak find..

]]></b:skin>

3. Copy kod di bawah dan pastekan di atas kod yang dicari tadi

::-webkit-scrollbar {

height:12px;

width: 12px;

background: #6A0888;

}

::-webkit-scrollbar-thumb {

background-color: #D358F7;

-moz-border-radius: 10px;

border-radius: 10px;

} 

4. Warna background scroll bar dan scroll bar boleh dtukar mengikut kesukaan korang

#6A0888 merujuk kepada warna background scroll bar

#D358F7 merujuk kepada warna scroll bar

Klik sini untuk kod warna..
5. Preview dan Save

Tutorial Meletakkan Mini Icon di Blog Archive

Tutorial kali ni ialah tentang cara nak letak icon mini kat tepi blog archive tu...Contohnya icon yang ada dalam petak hitam kat bawah tu... Icon tu boleh pilih ikut cita rasa korang.. Icon statik @ animated boleh digunakan...

*Gunakan icon yang kecil sahaja...Icon yang besar akan menyemakkan blog archive korang...

1. Sign in Blog > Design > Page Elements > Blog Archive > Edit

*Pastikan setting STYLE kat blog archive korang tu ditanda pada Hierarchy (Kalau belum tukar ke setting tu)

2. Copy kod di bawah ni... tekan Ctrl+F dan pastekan dalam kotak search tu then enter

<a expr:href='data:i.url'><data:i.title/>

3. Delete kod tersebut & gantikan dengan kod di bawah

<a expr:href='data:i.url'><img src="URL ICON"/><data:i.title/>

4. Gantikan URL ICON dengan mini icon yang korang nak..

*Mini icon free ada kat bawah ni :) Pilih je yang mana satu..Semuanya terbaek dari ladang..hehe ^^

5. Done..Save and preview hasil kerja korang..comel tak ??

ANIMATED ICON

http://dl5.glitter-graphics.net/pub/423/423745xrxlw8t2qy.gif

http://dl7.glitter-graphics.net/pub/501/501657i92p8yxkrl.gif

http://dl3.glitter-graphics.net/pub/650/650813hs7chex7nq.gif

http://dl4.glitter-graphics.net/pub/434/434834mnz0ts3r2i.gif

http://dl.glitter-graphics.net/pub/718/718451lnl1yo559a.gif

http://dl4.glitter-graphics.net/pub/147/147894jk0hkxy1kn.gif

http://dl10.glitter-graphics.net/pub/718/718340lmhikd8pc2.gif

http://dl9.glitter-graphics.net/pub/2121/2121609jsiec779ph.gif

STATIC ICON

http://dl2.glitter-graphics.net/pub/574/574522sixw97tk3d.gif

http://dl4.glitter-graphics.net/pub/1040/1040064xw9vxyhvdd.gif

http://dl9.glitter-graphics.net/pub/1942/1942469ivrwbtozfy.gif

http://dl6.glitter-graphics.net/pub/1754/1754136bqzrz4m8n9.gif

http://dl9.glitter-graphics.net/pub/1914/1914399xjhm3sjedy.gif

http://dl3.glitter-graphics.net/pub/122/122443t6ldkt7jir.gif

http://dl4.glitter-graphics.net/pub/1597/1597864dcroeqh6lb.gif

http://dl5.glitter-graphics.net/pub/1891/1891505zwwd020ryc.gif

Tutorial Sembunyikan Shoutbox Blog

Tutorial kali ni nak ajar cara hide shoutbox korang tu..Caranya mudah je..Just simply follow the step below...Selamat Mencuba :)

1. Login ke akaun blogger anda

2. Pergi ke Dashboard > Design > Page Element > Add a Gadget > HTML/Javascript

3. Copy & Paste kod berikut ke ruangan HTML/Javascript

<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://4.bp.blogspot.com/_CEj8AwvwSNM/S5PppULtvPI/AAAAAAAAEDs/NITPY9kKySs/s400/icon+untuk++shoutbox+tersembunyi.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">

Kod Shoutbox Anda di Sini



<div style="text-align:right"><a href="http://princessvirgo09.blogspot.com/2011/12/tutorial-sembunyikan-shoutbox-blog.html" target="_blank"><small>tutorial here</small></a>

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

4. Save.

5. Dan siap..

Tab Shoutbox asal yang diberi ialah berwarna biru. Kalau korang nak tukar ke warna lain, lihat tutorial ini Tukar warna tab shoutbox yang sedia ada