Cara buat tajuk post bergerak.

Pertama sekali login ke bloggger

Kedua pergi ke design

Ketiga pergi ke Edit HTML

Keempat tekan Expand Template Widget

Kemudian cari

<b:includable id='post' var='post'>

Selepas itu highlightkan dari

<b:includable id='post' var='post'>

<div class='post hentry uncustomized-post-template'>

<a expr:name='data:post.id'/>

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

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

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

<a expr:href='data:post.link'><data:post.title/></a>

<b:else/>

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

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

<b:else/>

<data:post.title/>

</b:if>

</b:if>

</h3>

</b:if>

Kemudian gantikan kode yang highlight tadi dengan kode dibawah ini.

<b:includable id='post' var='post'>

<div class='post hentry uncustomized-post-template'>

<a expr:name='data:post.id'/>

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

<marquee direction='left'><h3 class='post-title entry-title'>

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

<a expr:href='data:post.link'><data:post.title/></a>

<b:else/>

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

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

<b:else/>

<data:post.title/>

</b:if>

</b:if>

</h3></marquee>

</b:if>

selepas itu save

semoga berjaya Geng

cara membuat link berwarna warni

Hari ini saya akan mengajar anda bagaimana untuk membuat link pelangi...
Pernahkah anda mendengar link tentang warna-warni? Yah itu sebenarnya apabila anda mengarahkan mouse anda ke atas link yang disediakan di blog , teks akan berubah warna secara automatik. Ok, sekarang cuba arahkan mouse anda pada link di bawah ini:

Bagamina nak buat macam atas nie.Sekarang anda hanya perlu ikut tutorial dibawah nie: -


1. Log in ke akaun blogger anda
2. Pergi ke Design -> Edit HTML
3. Tekan "Expand Template"
4.Search kode dibawah ini

</head>

5. Copy kod dibawah nie: -

<script src='http://sites.google.com/site/free2cry/rainbow.js'/>

6. Letakkan kode atas nie di bawah

</head>

7. kalau suda selesai, Simpan template anda. Kemudian lihat blog anda lihat ia berfungsi atau tidak.

 Selamat mencuba Geng...

 

Tajuk blog bergerak seperti menaip

sesiapa yang ingin kan tajuk blognya bergerak seperti menaip.contoh seperti tajuk blog saya kat atas tu.  sila ikut tutorial dibawah ini :

1. Login ke blogger

2. Pilih Design

3. Klik Edit HTML

4. Cari kode </body>

5. Paste script berikut ini diatas kode </body>

<script>
var tit = document.title;
var c = 0;
function writetitle() {
document.title = tit.substring(0,c);
if(c==tit.length)
{
c = 0;
setTimeout("writetitle()", 2000)
}
else {
c++;
setTimeout("writetitle()", 275)
}
}
writetitle()
</script>

6. Preview dulu kalu menjadi baru save.

selamat mencuba Geng....

 

Tutorial 3 column

atas permintaan cik rosmadah jd aku buat kan lah dia tutorial ini supaya column nya buli menjadi 3 hehe.

1)Mula2, kamu kena buat back up dulu templete korang .kang nanti kalau silap, ada back up tu huhu *rujuk gambar di bawah* so korang boleh klik Download Full Template untuk back up template kamu tu.

2) lepas tu klik Choose New Template dan pilih Minima Dark.

3) kamu pergi ke Edit HTML dekat Layout tab tu.  tak payah k klik Expand Widget Templates. TAK PERLU okay!

4) then cari code kat macam kat bawah ni. untuk memudahkan kerja, korang klik Ctrl+F untuk search code dia.

#sidebar-wrapper {

width: 220px;

float: right;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

5) then copy paste code bawah ni dekat BAWAH code yang korang cari tadi.

#left-sidebar-wrapper {

width: 220px;

float: left;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

6) then cari code ni pula. klik Ctrl+F macam biasa.

<div id='main-wrapper'>

7) bila dah jumpa, kamu copy code kat bawah ni di ATAS code yang step 6 tu.

<div id='left-sidebar-wrapper'> <b:section class='sidebar' id='left-sidebar' preferred='yes'/> </div>

8) bila dah siap step 7 tu, cari code kat bawah ni dan tukarkan macam yang tunjuk kat dekat tulisan pink tu

#main-wrapper {

x;width: 410px; <-- tukarkan kepada 440p

margin-left: 20px;

float: left;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE *

/ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

dan tukarkan code di bawah ni juga~~

/* Outer-Wrapper

----------------------------------------------- */

#outer-wrapper {

width: 660px; <-- tukarkan kepada 920px;

margin:0 auto;

padding:10px;

text-align:$startSide;

font: $bodyfont;

}

9) then klik Save Template dan suppose dekat Layout kamu akan jadi 3 column macam gambar kat bawah ni.

10) kamu boleh la drag kan gadget korang ke sidebar kiri. bagi balance sikit.

11) klik Save Template. then korang carik code kat bawah ni, lepas tu tambah sikit tulisan pink tu.

#main-wrapper {

width: 440px;

margin-left: 20px; <-- tambahkan code

float: left; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }

12) then Save Template. done! .cuba view, jadi ke tak ^^

Selamat mencuba Geng...

Tutorial readmore

Fungsi "Read More" amat penting bagi sesebuah blog. Ia dapat mengelakkan sesebuah post yang terlalu panjang terpapar di muka utama blog. Dengan adanya fungsi "Read More", hanya ringkasan post yang akan terpapar di muka utama blog anda. Jadi, ia akan memendekkan muka utama blog anda. Ini untuk kaedah "Auto Read More". Sebelum ini ada kaedah yang hampir sama tetapi anda perlu menambah beberapa tag di dalam post anda dan post-post yang terdahulu tidak termasuk dalam fungsi "Read More". Susah dan melecehkan.

Kelebihan fungsi "Auto Read More":-

    * Automatik mempamerkan gambar post dan kemudian isi post.
    * Tidak perlu menambah sebarang kod pada post anda.
    * Tidak perlu update post-post yang terdahulu.
    * Imej "Read More" yang menarik. Lihat gambar di atas.
    * Tidak ada javascript. Blog tidak menjadi berat.
    * Sesuai untuk semua template yang tidak mempunyai fungsi "Auto Read More"


OK, let see how to do this. Mudah.
Pergi ke Dashboard >> Layout >> Edit HTML, pastikan
Expand Widget Templates
dan cari tag </head>.

Kemudian anda "copy" letakkan kod di bawah SEBELUM tag di atas.

    <script type='text/javascript'>var thumbnail_mode = "no-float" ;

    summary_noimg = 430;

    summary_img = 340;

    img_thumb_height = 100;

    img_thumb_width = 120;

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

Sekarang cari pula tag <data:post.body/>dan GANTIKAN dengan kod di bawah:-

    <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;padding-top:20px;'><a expr:href='data:post.url'><img src='http://i37.tinypic.com/351icqx.jpg'/></a></span>

    </b:if>

    <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Klik "Save Templates" dan selesai.

Anda boleh gantikan url http://i37.tinypic.com/351icqx.jpg dengan salah satu url image di bawah:-

http://img15.imageshack.us/img15/1821/black1q.gif

http://img15.imageshack.us/img15/4785/blackfc.png

http://img27.imageshack.us/img27/6199/black1l.gif

http://img27.imageshack.us/img27/8146/bluedark.gif

http://img27.imageshack.us/img27/3691/pinkua.png

http://img27.imageshack.us/img2/5526/lightorange.gif

http://img27.imageshack.us/img27/7469/red1.gif

http://img20.imageshack.us/img20/4997/grey1.gif

selamat mencuba Geng....

Tutorial like untuk blogger

Bagi semua pengguna Facebook, tentunya arif tentang butang "Like". Baru-baru ini Facebook telah melancarkan plugin. Bagi pengguna WordPress, mudah kerana hanya install plugin tersebut dan aktifkan. Bagaimana kita ingin gunakan dalam Blogger pula? Jika korang berminat, ikut langkah mudah berikut:

1) Pergi ke Dashboard >> Layout >> Edit HTML dan tik pada kotak "Expand Widget Templates".

2) Kemudian cari tag:

<div class='post-header-line-1'/>

Jika tiada, cari pula tag di bawah:

<data:post.body/>

3) Copy kod di bawah dan masukkan SEBELUM (di atas post) atau SELEPAS (di bawah post):-

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>

4) Preview atau klik save.

**NOTA**Untuk like, boleh ditukarkan kepada recommend. Untuk arial (font), boleh ditukarkan kepada salah satu senarai font di bawah:

lucida+grande
segoe+ui
tahoma
trebuchet+ms
verdana

Dan untuk light, boleh ditukarkan kepada dark atau evil.

selamat mencuba geng