http://trikkuampuh.blogspot.com/. Contoh laman HTML
SELAMAT DATANG DI BLOG KAMI "NIKI TRIK KULO"

CARA MEMASANG WIDGET ARSIP DI BLOG DENGAN KEREN

Cara Mengubah Tampilan Widget Arsip Agar Terlihat Keren Di Mata Pengunjung

Untuk memudahkan pengunjung dalam menjelajahi postingan dalam blog kita, alangkah baiknya kita memasang widget yang satu ini. Dan inilah cara untuk memasangnya

1. Masuk ke dalam blog kalian dan klik "Tata Letak"
2. Kemudian klik "Tambahkan Gadget" dan pilih "Arsip"
3. Silahkan atur dengan memilih opsi pada widget Arsip tersebut sesuai dengan selera anda
4. Jika sudah klik "Simpan" dan klik juga "Simpan Perubahan"
 

 Dengan sedikit mengubah tampilan widget arsip pada blog kita agar terlihat lebih keren, maka kemungkinan besar orang yang mengunjungi blog kita akan lebih tertarik untuk menggunakan widget arsip tersebut.
Berikut tutorialnya
1. Pastikan kalian sudah masuk ke dalam blog kalian
2. Pilih menu "Tema" dan klik "Edit Tema"
3. Selanjutnya cari kode </b:skin> atau </style>
4. Silahkan masukkan salah satu kode berikut ini di atas kode tadi (kode nomor 3)


/* Archive Year Header */
#ArchiveList ul > li > a.post-count-link {
    font-size: 18px;
    width: 100%;
    margin: 0;
    padding: 0 15px;
    line-height: 38px;
    background-color: #F5F5F5;
    box-sizing: border-box;
    letter-spacing: 1px;
}

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

#ArchiveList .zippy{
    visibility: hidden;
}

#ArchiveList ul li a.toggle {
    position: absolute;
    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: white;
    visibility: visible;
    text-shadow: none;
}

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

#ArchiveList ul ul .toggle-open:before {
    content: '\f107';
    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;
}

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


5. Setelah memilih dan meletakkan salah satu kode css widget arsip tersebut maka klik "Simpan Tema" dan lihatlah perubahannya

Itulah tutorial sekilas tentang Trik Memodifikasi Widget Archive Supaya Terlihat Keren yang dapat saya sampaikan, 

TERIMAKASIH DAN SELAMAT MENCOBA.......

Flag Counter