Setelah kemarin Blog Oto Website membahas tentang Cara Membuat Entri Populer Dengan Fungsi Scroll, dan sekarang Blog ini akan membahasa tentang . . . masih tentang Entri Populer sih. Tapi beda postingan beda tema ya . . .
Dan kali ini blog ini mencoba share tentang Membuat Entri Populer Tampil Lebih Menarik, maksudnya pasti udah pada tau kan, intinya kali ini kita mencobat membuat atau memodifikasi Entri Populer di blog sobat agar semakin lebih menarik!
Lihat gambar berikut:
Entri Populer Tampil Lebih Menarik

Nah cotohnya seperti pada gambar di atas, jadi kita akan membuat Entri Populer di blog sobat menjadi sepertti itu, gambarnya menjadi bundar-bundar, hehehe . . .
Oke mari sekarang kita bahas cara memasangnya di blogger sobat :

1.Masuk ke akun blogger sobat.

2. Pada menu klick Rancangan ➨ Tambah Gadget(di bagian mana saja sobat ingin widget Entri Populer muncul)

3. Pilih Entri Populer, lalu simpan.

4. Selanjutnya pada menu Klick Rancangan ➨ Edit HTML ➨ Centang Expand Template Widget.

5. Lalu Backup dulu templatenya untuk berjaga-jaga ➨ Dalam Edit template sobat cari kode ]]></b:skin> Jika kesulitan mencarinya coba baca Cara Cepat Mencari Kode HTML.

6. Jika sudah ketemu sekarang sobat copy kode CSS berikut dan paste atau letakkan di atas kode tadi.

<style type='text/css'>
.PopularPosts .item-title{display:yes}
.PopularPosts ul li {
border-radius:50px 0px 0px 50px;
float: left;list-style: none outside none;margin: 1px !important;padding: 1px !important;
border: 1px solid #444;
overflow: hidden;
box-shadow: 0px 0px 1px #333;
font-style: normal;
font-weight:bold;
width: 100%;
height:60px;
border-radius:35px 5px 5px 35px;
}
.PopularPosts ul li:hover{
background: -moz-linear-gradient(top, #FFFFFF 1%, #5c5c5c 50%);
overflow: hidden;
color: #414141;
width: 100%;
height:60px;
border: 1px solid #ffffff;
box-shadow: 0px 0px 2px #ffffff;
}
.PopularPosts ul li img {
padding:1px  ;
margin:1px;
margin-top:3px;
border-radius:35px 35px 35px 35px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
border: 1px solid #333;
height: 50px;width:50px;
overflow: hidden;
}
.PopularPosts ul li img:hover {
border:1px solid #ffffff;
border-radius:25px 25px 25px 25px;
background: -moz-linear-gradient(top, #FFFFFF 1%, #5c5c5c 50%);
box-shadow: 0px 0px 10px #ffffff;
}
</style>

7. Klick pertinjauan terlebih dahulu, Jika sudah muncul klick simpan.

Nah sekian dulu untuk kali ini, semoga bisa bermanfaat untuk sobat semua.

Bagaimana, apakah sobat berhasil menerapkannya ke blogger sobat? silahkan tinggalkan tanggapan atau komentar sobat tentang postingan atau articles di atas!

Posting Komentar Blogger Disqus

  1. gan saya reques donk saya minta kodenya untuk membuat label blog sperti pnyanya abang itu.,.,.,.,.,.,.,email ane gan please

    BalasHapus
  2. @arie wWidget tersebut menggunakan generator, mohon sabar, di tunggu saja, saya sedang membuatnya tapi masih dalam masa percobaan.

    BalasHapus
  3. mantap tipsnya gan. salam sukses selalu.

    BalasHapus

  4. situs poker online terpercaya, dewa poker, texas poker, poker club,judi bola online,poker online indonesia, daftar situs poker online indonesia
    poker 88,situs poker online indonesia uang asli,situs poker online terpercaya, dewa poker, texas poker, poker club,poker online indonesia
    nice post....
    article yang menarik untuk dibaca dan bermanfaat...
    maju terus sob,,,
    kunjungi blog saya juga ya sob, http://chaniaj.blogspot.com
    dan kunjungi juga situs kesayangan kami http://www.oliviaclub.com/oliviaclub/index.php
    link alternatif http://www.oliviaclub.net/oliviaclub/index.php
    oliviaclub poker online uang asli indonesia terbaik dan terpercaya
    Poker Indonesia, Indonesia Poker, Poker Online Indonesia
    yuk,,buruan gabung,,ada bonus nya lho,,,,

    BalasHapus
Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Penting:
Jika Anda mengajukan pertanyaan klik 'Subscribe by email' link di bawah form komentar untuk mengetahui komentar balasan.

Khusus untuk membalas komentar disarankan menggunakan tombol balas/reply di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.

Dilarang Meninggalkan Link Aktif, Link Aktif Terpaksa Akan Saya Hapus Dari Komentar.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Konversi Kode di Sini! Daftar Member Aktif

 
Top