Tweets
Owner
Stuff
Freebies


? Old Memory ?

» July 2011
» August 2011
» September 2011
» October 2011
» November 2011
» December 2011
» January 2012
» February 2012
» March 2012
» April 2012
» May 2012
» June 2012
» July 2012
» August 2012
» September 2012
» October 2012
» December 2012
» January 2013
» February 2013
» March 2013
» April 2013
» May 2013
» June 2013
» July 2013
» September 2013
» October 2013
» November 2013


? Entry ?

  • Tutorial : Style kan Minima template anda ! [ Part...
  • Tutorial : Style kan Minima template anda ! [ Part...
  • Tutorial : Template Minima
  • Tutorial : Makeover Kampung Anda
  • EpiloG : Mereka
  • EpiloG : Allah Mengetahuinya
  • EpiloG : Ikhwan Sejati
  • EpiloG : Buah Hati
  • EpiloG : Ikhlaskah Kita Dalam Persahabatan
  • EpiloG : Indahnya nama pemberianmu


    • ? Credit ?

    ©2013 Inspired By Twitter .
    A round applause for;
    This code 90.9% by Ohmyungshoe .
    Service and Terms are from her .
    The helper and some basecodes are from HER .
    Some Code in this Template was edited by Me.
    This blog looks hot in Google Chrome.
    Please do not view my page source.
    Ask me if you need any codes :Sayuri Hana
    Empowered by Blogger
    Tutorial : Style kan Minima template anda ! [ Part 3 ]

    0 LoVeR | 29/07/2011

    Bismillahirahmannirahim..
    Assalamualaikum w.b.t
    Dear BeloG,


    Seperti yang SH janjikan, tutorial part 3 ni
    SH nak ajar korang membesarkan sikit bahagian entry dan sidebar korang!
    Bagi yang nak tahu part lain bagi tutorial ini boleh klik:
    Tutorial : Style kan Minima template anda ! [ Part 1 ]
    Tutorial : Style kan Minima template anda ! [ Part 2 ]

    Baiklah, bagi nak nampakkan besar bahagian entry dan sidebar korang,
    seperti biasa korang klik

     DESIGN > EDIT HTML

    after that korang cari code

    #outer-wrapper{

    korang akan jumpa code ini:


    #outer-wrapper {
    background-color: #f8b0d7;
    width: 660px;
    margin:0 auto;
    padding:10px;
    text-align:$startSide;
    font: $bodyfont;
    }



    Korang nampak tak width:600px; Korang tukarkannya kepada width: 1000px; !
    Lepas dah tukar korang preview dulu !
    Masa korang preview korang akan nampak entry & sidebar korang nampak pelik + ajaib kan !
    Korang cari pula code :

    #main-wrapper{

    Korang akan jumpa code macam ni:

    #main-wrapper {
    background-color: #fbe4f1;
    width: 600px;
    float: $startSide;
    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 */
    }


    Highlight kan kesemua code diatas dan gantikannya dengan code dibawah ini:



    #main-wrapper {
    background-color: #fbe4f1;
    width: 600px;
    margin-top: 0px;
    margin-left:50px;
    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 */
    }



    Korang cari pula code :


    #sidebar-wrapper{


    Korang akan jumpa code dibawah ini :


    #sidebar-wrapper {
    width: 290px;
    float: $endSide;
    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 */
    }


    Seperti code untuk entry, code sidebar ini juga korang highligt dan gantikannya dengan code dibawah ini:



    #sidebar-wrapper {
    background-color: #dcadc7;
    width: 290px;
    float: right;
    margin-top: 0px;
    margin-right: 25px;
    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 */
    }

    Notes ** Background-color pastikan ianya sama dengan code warna yang telah korang ubah semasa di tutorial part 2 okies!

    Apa yang SH ajar tadi akan menjadikan beloG korang seperti ini :



    Okies, bila tengok tulisan di dua bahagian tersebut nampak ketepi sangat kan 1
    Jadi kita boleh edit. 


    Untuk date, korang cari code :


    h2 {


    Jumpa??
    Korang masukkan code ini betul-betul dibawah code atas tuh :


    padding-left: 10px;
    padding-right: 10px;


    Entry pula, korang cari code :


    .post {


    masukkan code ini betul-betul dibawah code diatas :


    padding-left: 10px;
    padding-right: 10px;
    Sidebar pula, korang cari code :


    #sidebar-wrapper{


    dan masukkan code ini dibawahnya :


    padding-left: 10px;
    padding-right: 10px;


    Hasilnya :






    Jumpa lagi !!
    Nanti SH terangkan cara nak buat header sendiri dan cara membuang border di header tuh :)



    Thanks with Love to: Belog Cap Ayam
    EpiloG Dunia SaYuRi.

    Labels:



    << OLDER
    NEWER >>