Aniem Shah Story: tutorial

Showing posts with label tutorial. Show all posts

Tutorial : tukar background blog dengan mudah

hye. memang lama effa tak buat tuto kan? so hari ni effa nak ajarkan macam mana nak tukar background blog dengan cara yang sangat mudah. nak belajar tak? follow step bawah :

1) Design > Add Gadget > HTML/Javascript

2) copy code bawah ni then paste dekat Html/javascipt tadi (copy guna Ctrl+C) :

<style>

body {

background-image: url('URL BACKGROUND');

background-attachment: fixed;

background-repeat:repeat;

}

</style>

3) tukar yang warna merah tu dengan url background yang korang suka

4) da siap? SAVE

Tutorial : post title background

hari ni effa nak ajar korang buat post title background. kalau korang nak buat follow step bawah ni ok

1. Design > Edit Html

2. click Ctrl+F dan cari .post h3 { kalau tak jumpa , cari ini h3.post-title {

3. kalau tak jumpa code yang atas ni cari h4 } pulak

4. copy code bawah ni dan paste di bawah .post h3 { atau bawah h4 }

border:0px dashed #cc99cc;
    text-align: center;
    margin:.5em 0 .5em;
    padding:0 0 4px;
    font-size:140%;
    font-weight:normal;
    line-height:1.2em;
    background:url(URL BACKGROUND);
    color:$titlecolor;
    }

4. bagi yang guna h3.post-title { korang paste code bawah ni di bawah code yang korang cari tu

border: 3px solid #C0C0C0; background: url(URL BACKGROUND);

yang warna merah tu gantikan dengan url background yang korang nak

5. preview dan save

Tutorial : background berbeza pada setiap pages

kalau blog korang ada pages, actually korang boleh tukar background page tu jadi berbeza-beza pada setiap page. macam best kan? nak buat? follow step bawah ni

1. Dashboard>Design>Edit html>Tick Expand Widget Templates

2. click Ctrl+F dan cari code ni:

</head>

3. copy code bawah ni pula:

<b:if cond='data:blog.url == "url pages korang"'> <style> body { background-image: url( url background);background-position: center; background-repeat:repeat; background-attachment: fixed; }

warna biru tukar dengan like pages korang

warna hijau tukar dengan url background yang korang suka

4. save

Tutorial : window alert

selamat malam korang. ok, malam ni effa nak buat tuto pasal window alert.

1. Dashboard > Design > Page Element > Add Gadget > Html/javascript

2. copy code bawah ni dan paste di Html/javascript

<script language='javascript'> window.alert("AYAT KORANG"); </script>

p/s : yang warna biru ganti dengan ayat korang ok

3. Save

Tutorial : letak jumlah komen atas post title

ok sapa rasa nak letak jumlah comment atas entry dia boleh follow step bawah ni:

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

2. click Ctrl+F dan cari code bawah ni

<h3 class='post-title entry-title'>

3. copy code bawah ni dan paste sebelum code <h3 class='post-title entry-title'>

<b:if cond='data:post.allowComments'>
<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/><br/><span style='font-size:10px'>Komen</span></a></b:if>

nanti jadi macam ni, contoh:

<b:if cond='data:post.allowComments'><a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/><br/><span style='font-size:10px'>Komen</span></a></b:if><h3 class='post-title entry-title'>

Tutorial : bubbles cursor

salam korang effa nak ajar buat bubbles cursor effect. bendanya yang macam dekat blog effa ni. kalau korang gerakkan cursor tu nantikan ada keluar bubbles. ok nak buat tak?

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

2. copy code bawah ni dan paste dekat Html/Javascript

<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 biru tu korang tukar code warna yang korang suka. code boleh ambik dekat SINI.