Tawau Blog Tutorial

  • Langkah Awal Bina Blog


  • Bagaimana Mengedit Template


  • Pasang Status YM Diblog


  • Bagaimana Buat Text Area


  • Bolehkah Hilangkan Navbar?Caranya Disini


  • Membuat Read More....

  • Menyusul Kemudian Untuk Anda Ketahui

  • Cara meletak lagu dari radioblog di blogger

  • Cara mengedit file css

  • Menambah Background

  • Membuat column baru

  • Mengganti background warna menjadi image/gambar

  • Memasang file js dan css (new blogger)



  • dan lain-lain



  • Dangerous of"Pitick""
    RAINPADLE"

    Remaja ini terkena serangan yang di panggil kalangan bebudak dengan "Pitik" amat merbahaya kerana hujung matanya berbentuk mata kail yang sukar untuk dicabut"terpandang menyeramkan.(Gambar kiriman"EmJ - Tawau Boys)



    Sanggupkah anda melihat ibu anda menitiskan air mata disebabkan tingkahlaku buruk yang anda lakukan ?keluarga menanggung beban kerana perilaku anda. Oleh itu BERHENTI melakukan kemusnahan dan dosa kepada orang lain,menyakiti insan lain"pedulilah dengan suasana disekeliling anda"waspada bahaya "Pitik !"Cegah kerusakan pergaulan generasi hadapan

    Inikah yang di banggakan ibubapak kita dengan gaya dan kesombongan berkumpulan keluar di bandar dan tempat tempat awam yang merisaukan banyak pihak.

    orang suka mintak puji

    “Apabila kamu melihat orang yang suka memuji, maka
    taburkanlah debu di mukanya.” (HR Muslim)

    Ketika Khalifah Hisyam bin Abdil Malik berada di Makkah, dia menyuruh pengawalnya untuk mendatangkan seorang sahabat. Sang pengawal berkata, “Mereka semua telah tiada, wahai Amirul Mukminin.” Hisyam berkata, “Kalau begitu, datangkan saja tabi’in.” Maka, dipanggillah Thawus Al-Yamani yang kebetulan ada di Makkah.

    Thawus pun datang memenuhi panggilan Khalifah. Thawus berkata, “Assalamu ‘alaika ya Hisyam (Keselamatan atasmu, hai Hisyam).” Thawus tidak memberikan salam Amirul Mukminin kepada Khalifah. Bahkan, Thawus juga tidak menyertakan gelar apa pun untuk Khalifah. “Bagaimana kabarmu, hai Hisyam?” tanya Thawus.

    Wuhhh, muka Khalifah merah padam menahan amarah yang teramat sangat, sampai-sampai dia hendak membunuh Thawus. Namun, sang pengawal membisikkan, bahwa dia sedang berada di Tanah Haram, dimana dia tidak mungkin melakukan hal tersebut.

    Khalifah berkata, “Hai Thawus, apa yang membuatmu berani bersikap seperti itu?” Thawus menjawab, “Memangnya apa yang aku lakukan?” Khalifah pun semakin geram. “Kau tidak mengucapkan salam Amirul Mukminin kepadaku dan langsung memanggil namaku ‘Hai Hisyam’ tanpa menyebut gelar apa pun!” kata Khalifah.

    Thawus berkata, “Aku tidak memberikan salam Amirul Mukminin kepadamu, karena tidak semua orang ridha dengan pemerintahanmu. Dan, aku tidak mau berbohong dalam hal ini. Adapun aku langsung memanggilmu Hisyam, karena Allah memanggil para nabi dan kekasih-Nya; Hai Yahya, hai Isa… Sedangkan kepada musuhnya, Dia menyebut; Celakalah kedua tangan Abu Lahab!”

    Sejatinya, bukan hanya penguasa dan pejabat sahja yang gila pujian ingin dipanggil dengan panggilan terhormat dan sebutan mentereng. Terkadang, sadar atau tidak, kita juga suka memuji diri sendiri; menyebut diri sebagai Ulama, Kyai, Ustadz, Tuan Haji, Mak Hajah, dan sebagainya. Jika memuji orang lain secara berlebihan saja dicela Nabi SAW. Bagaimana halnya dengan orang yang suka memuji dirinya sendiri? Wallahu a’lam bish-shawab.
    How can I create expandable post summaries?

    Cara Membuat Read More.... atau Post Summary

    Dengan trik ini anda dapat menampilkan read more....
    (atau baca selanjutnya)
    atau sejumlah teks sebagai paragraf awal dari artikel/ posting anda.
    Terpenggal dan paparan blog anda tidak panjang,berjela, jika pelawat ingin membaca keseluruhan artikel cukup meng-klik link 'read more' untuk melihat keseluruhan artikel. Hal ini untuk meringkas jika anda mempunyai artikel yang panjang pada satu page halaman anda.


    Ada tiga trik yang harus anda lakukan untuk menampilkan post summary:
    conditional CSS, link "read more" untuk setiap posting, dan modifi bagi posting-posting yang menggunakan featur ini.
    Mari kita lakukan cara ini, selangkah demi selangkah.


    1. Untuk Klasik Template (classic templates)


    Kondisional CSS


    Kita akan menggunakan tag kondisional untuk merubah paparan posting anda di setiap halaman. Masukan kod script berikut pada style sheet anda, dan kod ini khas untuk classic template:


    <MainOrArchivePage>
    span.fullpost {display:none;}
    </MainOrArchivePage>


    Style sheet letaknya di bahagian atas template anda antara <style> dan </style>. Sisipkan kod diatas tepat di atas tag ini>>></style>


    Link "Read More"


    Simpanlah kod berikut pada template anda, letaknya setelah tag <$BlogItemBody$>


    <MainOrArchivePage><br />
    <a href="<$BlogItemPermalinkURL$>">Read more!</a>
    </MainOrArchivePage>



    Nota : Read More! boleh anda ganti dengan perkataan apapun, seperti Baca Selengkapnya atau Baca Selanjutnya, atau apapun.


    Link read more hanya akan tampil pada halaman utama, dan akan membawa pelawat anda pada post keseluruhan dari teks anda.


    Modified Post


    Langkah terakhir yang perlu dilakukan ialah meletak kod singkat ini:


    <span class="fullpost"></span>


    Sisip kod diatas pada kolom 'Post Template', letaknya di 'Formatting' pada bagian 'Setting' dalam 'Dashboard' blogger anda.


    2. Untuk Layout Blogger Beta layouts):


    condision CSS


    Masukan kod ini:


    <style>
    <b:if cond='data:blog.pageType == "item"'>
    span.fullpost {display:inline;}
    <b:else/>
    span.fullpost {display:none;}
    </b:if>
    </style>


    Tepat letak diatas </head> di css template beta anda


    Read More


    Langkah selanjutnya membuat Read More. Setelah tag ini <data:post.body/> masukan kod dibawah ini:


    <b:if cond='data:blog.pageType != "item"'>
    <a expr:href='data:post.url'>Read more!</a>
    </b:if>


    Anda juga boleh memodified read more anda, disini ada sejumlah cara untuk itu:


    1. Klik 'read more' sekalian membuka window baru.


    <b:if cond='data:blog.pageType != "item"'>
    <a expr:href='data:post.url' target='_blank'>Read more!</a>
    </b:if>


    Dengan ini tanda 'read more' akan membuka window baru jika diklik oleh pelawat blog anda.


    2. Mengubah font/huruf 'read more' anda menjadi besar:


    <b:if cond='data:blog.pageType != "item"'>
    <span style="font-size:120%;"><a expr:href='data:post.url' target='_blank'>Read more!</a></span>
    </b:if>


    3. Mengubah font 'read more' anda menjadi bold:


    <b:if cond='data:blog.pageType != "item"'>
    <span style="font-weight:bold;"><a expr:href='data:post.url' target='_blank'>Read more!</a></span>
    </b:if>


    4. Jika anda ingin font 'read more' anda besar dan bold, ini kodnya:


    <b:if cond='data:blog.pageType != "item"'>
    <span style="font-weight:bold;"><span style="font-size:120%;"><a expr:href='data:post.url' target='_blank'>Read more!</a></span></span>
    </b:if>


    Nota Read More dapat anda tukar dengan apa apa perkataan yang anda kehendaki.


    Modified Post


    Langkah terakhir yang perlu dilakukan ialah meletak kod singkat ini:


    <span class="fullpost"></span>


    Letak kod diatas pada kolom 'Post Template', letakanya di 'Formatting' pada bahagian 'Setting' dalam 'Dashboard' blogger anda.


    Dan nanti paparanya akan seperti beberapa artikel pada blog saya ini.


    Selamat mencuba "Good Luck.

    Hidden Navbar Blog

    Cara mengilangkan kepala blogger,hidden navbar
    Sekarang kita mula dengan langkah-langkah

    1. Sign in akaun blog kamu

    2. Klik menu Template

    3. Klik menu Edit HTML

    4. COPY CODE di bawah ini;



    #navbar-iframe {

    height:0px;

    visibility:hidden;

    display:none

    }



    Lalu kod diatas paste dalam template blog anda yang akan saya tunjukkan letak untuk menyimpanya...mudah saja kan,,ringkasnya ikut contoh dibawah ini dimana kamu meletak kod. ini adalah template yang saya sudah cut bagian bawah bermula dari atas,,lihat tempat untuk simpan kod yang saya sudah tanda dengan perkataan SISIP KOD DI TENGAH TENGAH SINI


    Katakanlah ini template kamu sekarang:


    Blogger Template Style

    Name: Son of Moto (Mean Green Blogging Machine variation)

    Designer: Jeffrey Zeldman

    URL: www.zeldman.com

    Date: 23 Feb 2004

    Updated by: Blogger Team

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

    /* Variable definitions

    ====================

    type="color" default="#ffffff" value="#ffffff">
    type="color" default="#555544" value="#555544">
    type="color" default="#ffffee" value="#ffffee">
    type="color" default="#ffffee" value="#ffffee">
    type="color" default="#669922" value="#669922">
    type="color" default="#88bb22" value="#88bb22">
    type="color" default="#555544" value="#555544">
    type="color" default="#555544" value="#555544">
    type="color" default="#555544" value="#555544">
    default="normal normal 100% tahoma, 'Trebuchet MS', lucida, helvetica, sans-serif" value="normal normal 100% tahoma, 'Trebuchet MS', lucida, helvetica, sans-serif">

    */



    SISIP KOD DI TENGAH TENGAH SINI


    /* Primary layout */

    body {

    margin: 0;

    padding: 0;

    border: 0;

    text-align: center;
    color: $mainTextColor;
    background: #692 url(http://www.blogblog.com/moto_son/outerwrap.gif) top center repeat-y;
    font-size: small;
    }
    img {
    border: 0;
    display: block;
    }
    .clear {
    clear: both;
    }
    /* Wrapper */

    #outer-wrapper {
    margin: 0 auto;
    border: 0;
    width: 692px;
    text-align: left;
    background: $mainBgColor url(http://www.blogblog.com/moto_son/innerwrap.gif) top right repeat-y;
    font: $bodyFont;
    }


    Seterusnya Klik butang Simpan Perubahan Template dalam bahasa inggris Save Template
    Ya...siap buka dan lihat kepalanya...ada ???







    Remove the NavBar english article

    To hide the Blogger NavBar:

    - Log in to blogger

    - On your Dashboard, select Layout. This will take you to the Template tab. Click Edit HTML. Under the Edit Template section you will see you blog's HTML.

    - paste the CSS definition in the top of the template code:


    <b:skin><![CDATA[/*-----------------------------------------------Blogger Template StyleName: RoundersDesigner: Douglas BowmanURL: www.stopdesign.comDate: 27 Feb 2004Updated by: Blogger Team----------------------------------------------- */




    #navbar-iframe { display: none !important;}




    /* Variable definitions ==================== <Variable name="mainBgColor" description="Main Background Color" type="color" default="#fff" value="#ffffff"> <Variable name="mainTextColor" description="Text Color" type="color" default="#333" value="#333333"> ...


    Remove the code to show it again.

    Edit Template Blog


    Ketahui tentang template blog
    Edit template blogger (new blogger)
    Jom Belajar Edit
    Sign in Blog

    Klik pada template, klik edit html


    Lihat beberapa Script kod dalam



    margin: adalah ukuran batas pinggir luar dengan border


    padding: =ukuran batas pinggir dalam dengan border


    background: =latar dari suatu content atau halaman


    color: =warna ( warna teks )


    font-size: =Ukuran teks / font


    font: =Jenis teks


    border: =garis batas


    width: =lebar


    height: =tinggi


    float: =keuddukan content


    text-align: =kedudukan text text itu



    MARGIN


    Beberapa contoh kod margin dalam template

    margin: 4px; =batas pinggir sama ada atas bawah ataupun pinggir 4 px


    margin-left: 2px; =batas pinggir kiri 2 px


    margin-right: 2px; =batas pinggir kanan 2 px


    margin-bottom: 2px; =batas pinggir bawah 2 px


    margin-top: 2px; =batas pinggir atas 2 px


    margin: 3px 0 2px; =batas pinggir atas 3 px,kiri 0 , bawah 2 px


    margin: 1px 2px 0 3px;=batas pinggir atas 1px,kanan 2px,bawah 0,kiri 3px



    PADDING


    Beberapa contoh kod padding dalam Template


    pading: 3px; =batas pinggir baik atas bawah atau pun pinggir 3 px


    pading-left: 4px; =batas pinggir kiri 4 px


    pading-right: 2px; =batas pinggir kanan 2 px


    pading-bottom: 2px; =batas pinggir bawah 2 px


    pading-top: 2px; =batas pinggir atas 2 px


    pading: 3px 0 2px; =batas pinggir atas 3 px,kiri 0 , bawah 2 px


    pading: 1px 2px 0 3px;=batas pinggir atas 1px,kanan 2px,bawah 0,kiri 3px





    BACKGROUND


    Beberapa contoh kod BACKGROUND dalam Template


    background-color:#000000; =warna background #ffffff (kod warna hitam)


    background:$bgcolor;=warna background $bgcolor (warna di edit di variable


    definitions) biasanya terletak di bagian atas


    background: url("http://linkimage") no-repeat left bottom;


    Menunjukan background dengan gambar,sebelah bawah kiri


    background: url("http://linkimage") no-repeat right bottom;


    Menunjukan background dengan gambar,sebelah bawah kanan


    background: $bgcolor url("http://linkimage") no-repeat right bottom;


    Menunjukan background dengan gambar,sebelah bawah kanan dengan


    warna background $bgcolor


    Untuk lebih ringkas kod untuk menunjukan kedudukan gambar:


    no-repeat left bottom; =sebelah kiri bawah


    no-repeat right bottom;= sebelah kanan bawah


    no-repeat right top; =sebelah kanan atas


    no-repeat left top; =sebelah kiri atas


    repeat-x; left top; =akan mengisi dari sebelah atas kiri ke kanan (Vertical)


    repeat-y; left top; =akan mengisi dari sebelah atas kiri ke kanan (horizontal)




    COLOR


    Beberapa contoh kod COLOR


    color:#000000; warna teks #000000 (kod warna hitam)


    color:$textcolor; warna text $textcolor (warna di edit di variable
    definitions) selalunya ada di bahagian atas


    selamat mengutak atik Template

    Berikut adalah warna dan kod kod yang boleh anda pilih

    Klik tabel untuk jelas



    How To Make Text Area For Blog

    Bagaimana untuk membuat text area


    HTML <textarea> tag
    Definition and Usage
    Defines a text-area (a multi-line text input control). A user can write text in the text-area. In a text-area you can write an unlimited number of characters. The default font in the text-area is fixed pitch.
    Differences Between HTML and XHTML
    NONE

    Example



    Agar banner,logo atau text dalam blog kita boleh di copy/paste oleh orang lain
    kita cuma memasukan beberapa script

    contoh text area:



    Copy script dibawah ini dan sisipkan perkataan atau kod kod HTML dari
    banner,gambar dan simpan diblog anda

    <textarea name="code" rows="6" cols="60">


     </textarea>


    Cara kerja: <textarea name="code" rows="6" cols="60">  
    sisip  ditengah script ini 
    </textarea>


    Jeritan: Lebar dan panjang text anda boleh mengubahnya,sama ada
    menariknya dalam frontpage atau menukar width dan height


    Selamat mencuba"Good Luck

    Display Status Yahoo Mesengger
    Memasang icon Yahoo status online pada blog.
    Tips how to add your yahoo messenger status on your blog or site.
    Caranya super mudah, masukan sahaja scrip kod ini di sidebar anda:

    <imgsrc="http://opi.yahoo.com/online?u=maitawau&amp;m=g&amp;t="/>


    Contoh imejnya:

    [yahoo+icon1.bmp]

    Kalu anda mahu icon Yahoo ukuran besar ini kod scripnya:

    <imgsrc="http://opi.yahoo.com/online?u=maitawau&amp;m=g&amp;t=2"border="0"/>

    Ini contoh imejnya




    Perhatian: Tukar perkataan maitawau dengan id yahoo anda. selesai!

    Ok,,selamat mencuba"good luck