Tips for Bloggers...!

Tutorial 77 : Cute Icon Tepi Sidebar Title

nak bgtaw kat korang lah kan , kalau nak letak icon macam ini , korang kena delete lah korang nye border taw ? takot tak menjadi pulak . kalau nak nak letak jugak border sidebar tuh , korang paste kan dekat kod yang saya akan bagi nanti , di bawah kod border ok ?

1. Dashboard > Design > Edit Html

2. Search kod ini :

h2 {

ataupun kod ini ,

.sidebar h2 {

Tapi , kalau kod yang dekat atas ni , kena Tick Expand Widget dulu tahu ?

3. Then , paste kod ini di bawah kod yang dekat atas tuh :

background:url(URLGMBR);
background-repeat: no-repeat;
background-position:left center;
padding:5px 3px 0 30px;
}

**Kalau sesiapa yang ada border , paste dekat bawah kod border ok ?

**Kalau tak menjadi jugak , delete je border tu :)

**Dekat mana nak amik URL GAMBAR ye ? Kat >>SINI<<

**Tak tahu nak copy URL macam mana ? >>TEKAN SINI<<

4. Ok , kalau dah siap , korang PREVIEW dulu.

5. Da jadi , terus SAVE ok ?

Tutorial 76: Tukar Jenis Font Untuk Post Title dan Sidebar Title

Haii . ok. Seperti yang korang tahu , entry ini ..

Saya nak ajarkan korang macamana nak

"Tukar Font Post Title and Sidebar Title" korang itu.

Untuk POST TITLE

1. Dashboard > Design > Edit Html >

2. Search kod ini : (Tekan Ctrl F untuk memudahkan pencarian)

h3.post-title {

kalau tak de , cari kod ni pulak oke?

.post h3 {

3. Then , bila dah jumpa , kat bawah tuh , ada tak kod lebih kurang macam ni lah ?

font: $(post.title.font);

4. Ada kan ? Oke . Copy and Paste Kod kat bawah ni .. DI BAWAH kod kat atas ni . ( Paham tak ?)

font-family:"Times New Roman",Georgia,Serif;

** Ok . Kalau sudah paste , perkataan MERAH itu , korang bolehlah tukar dengan Nama Font yang lain .
Kalau tak tahu nak cari kat mana nama font tuh , korang boleh lah check dekat Microsoft Word korang.
Mesti ada kann ? Then , Copy Jenis Font yang korang suka.. OK ? >.^

Untuk SIDEBAR TITLE

1. Step nye , sama sengan Step Di atas...

2. Cuma , korang kena cari kod yang ini :

h2 {

3. Kalau dah jumpa . Cari kod ini kat bawah tu..

font: $(widget.title.font);

4. Then , paste je kod yang macam saya tunjukkan untuk Post Tiltle.. oke? :)

5. Bila sudah siap , JANGAN Save lagi . Preview dulu.
Kalau menjadi , terus SAVE oke ?:) Chilll~

Tutorial 75: Meletakkan Gambar di Sidebar Dengan Mudah

Hii , Hari ni , Lyssa nak share lah ciket kan ,

Macamana nak Letakkan Gambar Di Sidebar Korang !:)

Bagi , New Bloggers , ini Untuk kamu !

Senang je ! :)

1. Dashboard > Design > Add Gadget > Html/JavaScript

2. Paste kod di bawah ini , di ruangan Html/JavaScript itu .

<center><img src="URL GAMBAR KORANG"/></center>

*Kat mana nak amik URL Gambar Korang Sendiri ? Korang boleh upload kat SINI
*Lepas sudah upload , korang copy code yang bawah sekali tu (Direct Link). Ada paham ?

3. Paste URL korang tuh . Then , bila dah siap , SAVE yerk !

P/S : If korang nak tulis apa kat bawah gambar tuh . boleh KLIK SINI .

Tutorial 74: Centerkan Ayat Di Sidebar

Kalau dekat sidebar..

If korang nak Centerkan ayat2 korang kan ...Korang juz buat macam niyh je ehh ! :))

<center>Ayat yang korang nak kan !</center>

Kalau nak ayat korang jadi macam enter...

Korang juz repeat je kod yang sama.. Contoh :

<center>Ayat 1</center>

<center>Ayat 2</center>

<center>Ayat 3</center>

<center>Ayat 4</center>

Bagi nak centerkan gambar korang di sidebar :

<center>Kod Gambar korang</center>

**So , senang je kan ? Kalau sesapa yang dah tahu tuh.. Tak payah ler buang masa baca entry ini ! HHA:)

Tutorial 73: Bentuk-Bentuk Border

ikut step di bawah !

Ada banyak pilihan oo ~ ^_^

** Border-boder kat atas niyh . korang boleh guna untuk Post Title .. Sidebar pun boleh jugak ! ^_^

Untuk Post Title : seacrh >> h3.post-title { (kalau tak de, carilah kod yg lebih kurang macam ini taw? :)

Untuk Sidebar Title : search >> h2 { (kalau tak de, carilah kod yg lebih kurang macam ini taw? :)

#Example_A {

-moz-border-radius-bottomright: 50px;

border-bottom-right-radius: 50px;

#Example_B {

-moz-border-radius-bottomright: 50px 25px;

border-bottom-right-radius: 50px 25px;

#Example_C {

-moz-border-radius-bottomright: 25px 50px;

border-bottom-right-radius: 25px 50px;

#Example_D {

-moz-border-radius: 1em 4em 1em 4em;

border-radius: 1em 4em 1em 4em;

#Example_E {

-moz-border-radius: 25px 10px / 10px 25px;

border-radius: 25px 10px / 10px 25px;

#Example_F {

-moz-border-radius: 35px;

border-radius: 35px;

**! Paste kod yang warna MERAH sahaja di bawah kod yang perlu korang carikan tu yea! :)

Tutorial 72: Bubbles Cursor Effect

Kalau nak tahu.. Meh sini mehh Saya ajarin ! :))

1. Dashboard > Design > Add Gadget > Html/Javascript

2. Then , copy kod di bawah and paste di ruangan html/javascript tuh ye :

<noscript></noscript><script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script type="text/javascript">

        // <![CDATA[

        var colours=new Array("#ff0080", "#ff0080", "#ff0080", "#ff0080", "#ff0080"); // colours for top, right, bottom and left borders and background of bubbles

        var bubbles=12; // maximum number of bubbles on screen

        /****************************

        * JavaScript Bubble Cursor *

        * (c) 2010 mf2fm web-design *

        * http://www.mf2fm.com/rv *

        * DON'T EDIT BELOW THIS BOX *

        ****************************/

        var x=ox=400;

        var y=oy=300;

        var swide=800;

        var shigh=600;

        var sleft=sdown=0;

        var bubb=new Array();

        var bubbx=new Array();

        var bubby=new Array();

        var bubbs=new Array();

        window.onload=function() { if (document.getElementById) {

        var rats, div;

        for (var i=0; i<bubbles; i++) {

        rats=createDiv("3px", "3px");

        rats.style.visibility="hidden";

        div=createDiv("auto", "auto");

        rats.appendChild(div);

        div=div.style;

        div.top="1px";

        div.left="0px";

        div.bottom="1px";

        div.right="0px";

        div.borderLeft="1px solid "+colours[3];

        div.borderRight="1px solid "+colours[1];

        div=createDiv("auto", "auto");

        rats.appendChild(div);

        div=div.style;

        div.top="0px";

        div.left="1px";

        div.right="1px";

        div.bottom="0px"

        div.borderTop="1px solid "+colours[0];

        div.borderBottom="1px solid "+colours[2];

        div=createDiv("auto", "auto");

        rats.appendChild(div);

        div=div.style;

        div.left="1px";

        div.right="1px";

        div.bottom="1px";

        div.top="1px";

        div.backgroundColor=colours[4];

        div.opacity=0.5;

        if (document.all) div.filter="alpha(opacity=50)";

        document.body.appendChild(rats);

        bubb[i]=rats.style;

        }

        set_scroll();

        set_width();

        bubble();

        }}

        function bubble() {

        var c;

        if (x!=ox || y!=oy) {

        ox=x;

        oy=y;

        for (c=0; c<bubbles; c++) if (!bubby[c]) {

        bubb[c].left=(bubbx[c]=x)+"px";

        bubb[c].top=(bubby[c]=y)+"px";

        bubb[c].width="3px";

        bubb[c].height="3px"

        bubb[c].visibility="visible";

        bubbs[c]=3;

        break;

        }

        }

        for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c);

        setTimeout("bubble()", 40);

        }

        function update_bubb(i) {

        if (bubby[i]) {

        bubby[i]-=bubbs[i]/2+i%2;

        bubbx[i]+=(i%5-2)/5;

        if (bubby[i]>sdown && bubbx[i]>0) {

        if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) {

        bubb[i].width=bubbs[i]+"px";

        bubb[i].height=bubbs[i]+"px";

        }

        bubb[i].top=bubby[i]+"px";

        bubb[i].left=bubbx[i]+"px";

        }

        else {

        bubb[i].visibility="hidden";

        bubby[i]=0;

        return;

        }

        }

        }

        document.onmousemove=mouse;

        function mouse(e) {

        set_scroll();

        y=(e)?e.pageY:event.y+sleft;

        x=(e)?e.pageX:event.x+sdown; }

        window.onresize=set_width;

        function set_width() {

        if (document.documentElement && document.documentElement.clientWidth) {

        swide=document.documentElement.clientWidth;

        shigh=document.documentElement.clientHeight;

        }

        else if (typeof(self.innerHeight)=="number") {

        swide=self.innerWidth;

        shigh=self.innerHeight;

        }

        else if (document.body.clientWidth) {

        swide=document.body.clientWidth;

        shigh=document.body.clientHeight;

        }

        else {

        swide=800;

        shigh=600;

        }

        }

        window.onscroll=set_scroll;

        function set_scroll() {

        if (typeof(self.pageYOffset)=="number") {

        sdown=self.pageYOffset;

        sleft=self.pageXOffset;

        }

        else if (document.body.scrollTop || document.body.scrollLeft) {

        sdown=document.body.scrollTop;

        sleft=document.body.scrollLeft;

        }

        else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {

        sleft=document.documentElement.scrollLeft;

        sdown=document.documentElement.scrollTop;

        }

        else {

        sdown=0;

        sleft=0;

        }

        }

        function createDiv(height, width) {

        var div=document.createElement("div");

        div.style.position="absolute";

        div.style.height=height;

        div.style.width=width;

        div.style.overflow="hidden";

        return (div);

        }

        // ]]>

        </script>

**Yang warna merah tuh , korang boleh tukar kod warna yang korang nak ye! DI SINI !!

PERHATIAN!!

Pada sesiapa yang sebelum ini telah menggunakan "SPARKLING CURSOR" ,

diharapkan korang bolehlah delete kod yang itu ,

kalau korang nak guna bubles cursor ini.. orait??

Takot-takot tak menjadi pulak ! :))

Tutorial 71 : Remove Attribution

1. Dashboard > Design > Edit Html > Tick Expand Widget

2. Lepas tuh , tekan Ctrl F dengan serentak dari search kod ini :

<b:widget id='Attribution1' locked='true' title='' type='Attribution'>

3. Bila korang dah jumpa kod tuh . korang tukar kat warna merah kar atas dengan perkataan false.

4. Da siap ? Save oke!!

5.Tapi , tunggu dulu ! Tak habis lagi lah ! :)

6. Sekarang , pergi bukak blog korang.. Bukak / Edit Widget Attribution kat bawah tu.. Nanti korang akan nampak Remove button. Tekan Remove tuh.. Dah tekan kan ? Haaa!~ Hasil nyer berkesan !:) kan?:))