Tutorial Customize Blog Archive Tutorial Customize Blog Archive - The New Minded Tutorial Customize Blog Archive Tutorial Customize Blog Archive

Jumaat, 19 Ogos 2016

Tutorial Customize Blog Archive

15 comments


Blog Archive
Assalamualaikum dan Salam Sejahtera...

Apa khabar anda semua? Sihat? Semoga berada didalam kesihatan yang baik yer..

Okay hari ini saya ingin berkongsi sedikit tutorial untuk customize blog archive di blogspot anda.

Ia cukup mudah sekali untuk anda buat hanya perlu copy code dan paste dalam file html anda.

Code ini saya telah edit semula untuk memastikan ia betul-betul berfungsi di blog, terutama blog saya ini..

Bagaimana nak guna customize blog archive ni?

Pertama

Copy all code dibawah ni..
/*****************************************
/* Archive Year Header */
******************************************/

#ArchiveList ul > li > a.post-count-link {
    font-size: 18px;
colour : black;
    width: 100%;
    margin: 0;
    padding: 0 15px;
    line-height: 38px;
    box-sizing: border-box;
    letter-spacing: 1px;
     background: #FBFED3;
}



/* Blog Archive */
#ArchiveList ul ul li  a.post-count-link{
    font-size: inherit;
    colour : black;
    width: auto;
    margin: 0 5px 0;
    padding: 8px 25px;
    line-height: 1;
    text-transform: uppercase;
}

#ArchiveList .zippy{
    visibility: hidden;
}

#ArchiveList ul li a.toggle {
    position: absolute;      
    color: black;
    top: 0;
    left: 0;
    width: 100%;
    display: block;
    height: 38px;
    z-index: 5;
}

#ArchiveList ul ul li a.toggle {
    position: absolute;   
    top: 0;
    left: 0;
    width: 30px;
    height: 24px;
    display: block;
    z-index: 0;
}

#ArchiveList .toggle {
    position: relative;
}

#ArchiveList ul ul .zippy{
    color: black;
    visibility: visible;
    text-shadow: none;
}

#ArchiveList ul ul .zippy:before {
    content: '';
    font-family: FontAwesome;
    position: absolute;
    top: 3px;
    left: 12px;
    padding: 4px;
    line-height: 1;
    font-size: 12px;
    color: #8C8C8C;
}

#ArchiveList ul ul .toggle-open:before {
    content: '';
    position: absolute;
    top: 3px;
    left: 10px;
}

#ArchiveList ul li{
       
    padding: 0 !important;
    text-indent: 0 !important;
    margin: 0 !important;
    position: relative;

}

#ArchiveList ul .post-count-link {
    padding: 10px 0;
    display: inline-block;
    margin: 0 5px 0;
}

#ArchiveList ul ul .posts li {
    margin: 0px 10px 10px 30px !important;
    text-transform: none;

}

#ArchiveList ul {
    margin: 0 0 2px !important;
 background: #FBFED3; <---------edit warna box archive

}

span.post-count {
    position: absolute;
    right: 10px;
    top: 10px;
    color: #8C8C8C;
}
Kedua

Pergi ke dashboard blog anda > template > edit html

Ketiga

Ctrl+f > cari <b:skin>  > paste kan kod tadi tu di ruangan ni.

Cara nak paste dia...

/***************************************** nampak tak ada benda camni, so paste sebelum section tu.. benda ni dipanggil section mcm divider la untuk setiap css...

Rujuk sini
 Okay nampak tak macam mana kedudukan nak paste code tadi tu? Nak letak dekat section mana2 pun boleh tapi pastikan ia sebelum new section dan bila dah paste tu ia jadi warna biru..

Keempat 

Kalau nak tukar warna background tu boleh tukar kod  warna di bahagian ni
#ArchiveList ul {
    margin: 0 0 2px !important;
 background: #FBFED3; <---------edit warna box archive

}
Code ni berada dekat hujung section blog archive ni...

Bila dah siap ia akan jadi macam ni..



Di blog archive ini akan paparkan bilangan post setiap bulan dan post setiap tahun..

Selamat mencuba..




If You Enjoyed This, Take 5 Seconds To Share It
SHARE

About Ahmad Hasif


Blogger


Berkongsi Mengenai : Teknik SEO | Info | Tutorial | Freebies |


Untuk sebarang pertanyaan mengenai review atau giveaway boleh emel di:-

[email protected]

15 ulasan :

  1. good info. Nanti nak cuba. Dah la tak berapa pandai bab coding ni.. Harap2 menjadi.

    BalasPadam
  2. W'salam Ahmad Hasif,

    Info berguna untuk bloggers..
    Suka dengan tutorial dari Hasif sebab jelas dan mudah diikuti..
    Thanks for sharing..

    BalasPadam
    Balasan
    1. welcome.. semoga berjaya ikuti tutorial ini yer..

      Padam
  3. very nice info Asep :) Nti kita nak try la :D

    BalasPadam
  4. Nice tips..! Sgt berguna..!

    BalasPadam
  5. Nice sharing...bolehlah try2 buat nanti..

    BalasPadam
  6. Alhamdulillah mudah faham ...Tq sharing

    BalasPadam
  7. Alhamdulillah mudah faham ...Tq sharing

    BalasPadam