4 Gaya Berbeda Untuk Popular Posts Widget

Blogger memungkinkan kita untuk dengan mudah menambahkan "Popular Posts" widget, yang kami pilih dari daftar gadget, dan kita bisa melakukan itu dengan pergi ke "Layout" dari Blog kami. 

Gadget ini, seperti namanya, menunjukkan yang merupakan posting blog yang paling banyak dikunjungi, dan Anda dapat mengaturnya untuk menampilkan info yang Anda inginkan dalam empat kombinasi yang mungkin: (1) hanya judul posting, (2) sebuah thumbnail dari gambar dan judul posting, (3) judul posting dengan ringkasan, dan (4) menulis judul dengan thumbnail dan potongan pos. 

Ini merupakan elemen yang tidak boleh Anda lewatkan di blog Anda karena mendorong pengunjung Anda untuk menavigasi melalui konten Anda, yang dapat mengakibatkan pendapatan yang lebih tinggi jika Anda mendapatkan penghasilan dari blog Anda karena akan menghasilkan peningkatan jumlah halaman yang dikunjungi, dan pada gilirannya, dapat menarik minat para pengguna untuk berlangganan ke blog dan membaca konten yang menarik. 

Langkah awal: Tambahkan gadget, jika Anda belum melakukannya belum.

1. Pilih "Layout" tab dan menambahkan "Popular Posts" gadget di bagian blog Anda, Anda ingin tampil, misalnya di sidebar Anda, dengan mengklik "Add a Gadget". 

2. Konfigurasi widget untuk hanya menampilkan judul posting. Anda dapat melakukan ini dengan mengklik "gambar thumbnail" dan "potongan" kotak centang, seperti yang ditunjukkan pada gambar berikut. 

3. Setelah mengkonfigurasi widget, simpan perubahan dengan mengklik Simpan, dan kemudian Simpan pengaturan. 

Bagaimana menambahkan CSS untuk menciptakan gaya widget Popular Posts

1. Pilih gaya, kemudian salin CSS yang muncul di bawah gambar yang menunjukkan gaya. 

2. Pilih "Template" tab, kemudian klik pada Customize> Advanced> Tambah CSS dan kemudian paste gaya CSS yang paling Anda sukai. 

3. Setelah Anda menambahkan CSS, perubahan Simpan dengan mengklik "Terapkan ke Blog" tombol. 

Dan itu saja! Aku sudah disesuaikan tulisan populer widget, ketika itu hanya menunjukkan judul posting. 

Styles 

Berikut adalah CSS masing-masing gaya, hanya memilih salah satu yang Anda sukai dan menaruhnya di blog Anda. Anda dapat melihat masing-masing gaya ini beraksi di demo blog berikut: 

http://demo-blog343.blogspot.com 

Gaya 1: 

 # PopularPosts1 h2 {
padding: 7px 0 3px 0;
width: 100%;
margin: 0;
font-size: 1.3em;
text-indent:-12px;
font-size: 18px;
text-align: center;
color: # 000; / * Warna judul widget * /
}
# PopularPosts1 ul {
list-style: none;
kontra-ulang: li;
padding: 8px 0px 1px;
kiri:-8px;
width: 290px;
}
# PopularPosts1 li {
position: relative;
margin: 0 0 10px 0;
padding: 3px 2px 0 7px;
kiri:-5px;
width: 285px;
border: 1px solid # ccc;
}
# PopularPosts1 ul li: sebelum {
isi: counter (li);
kontra-increment: li;
position: absolute;
display: block;
top: 5px-;
kiri:-5px;
font-size: 18px;
width: 14px;
margin: 0 0 10px 0;
padding: 4px 4px 4px 3px;
color: # 333;
text-align: left;
background: # E8E8E8;
text-indent: 2px;
}
# PopularPosts1 ul li: setelah {
isi: "";
position: absolute;
top: 5px-;
kiri: 15px;
width: 0px;
height: 0px;
border-top: 5px awal transparan;
border-left: 5px solid # aeaeae;
}

# PopularPosts1 ul li a {
font-size: 17px; / * Ukuran font dari link * /
color: # 444; / * Warna link * /
font-style: italic;
margin-left: 17px;
display: block;
min-height: 25px;
text-decoration: none;
padding: 4px 0 3px 0;
}
# PopularPosts1 ul li: hover {
background: # f9f9f9;
border: 1px solid # aaa;
}
# PopularPosts1 ul li a: hover {
color: # 0174DF;
}

Gaya 2: 

 # PopularPosts1 h2 {
position: relative;
padding: 10px 6px 8px 10px;
width: 100%;
margin: 0;
font-size: 17px;
background: # bada55;
color: # 222; / * Warna judul widget * /
text-align: center;
}
# PopularPosts1 h2: sebelum {
position: absolute;
isi: "";
top:-6px;
kanan:-5px;
width: 0px;
height: 0px;
border-bottom: 24px awal transparan;
border-top: 24px awal transparan;
border-right: 24px solid # fff; / * Warna segitiga * /
}

# PopularPosts1 h2: setelah {
position: absolute;
isi: "";
top:-7px;
kiri:-5px;
width: 0px;
height: 0px;
border-bottom: 24px awal transparan;
border-top: 24px awal transparan;
border-left: 24px solid # fff; / * Warna segitiga * /
}

# PopularPosts1 ul {
list-style: none;
kontra-ulang: li;
padding: 10px;
kiri:-8px;
width: 100%;
}

# PopularPosts1 li {/ * Styles dari setiap elemen * /
width: 100%;
position: relative;
kiri: 0;
margin: 0 0 1px 12px;
padding: 4px 5px;
}

# PopularPosts1 ul li: sebelum {/ * gaya angka * /
isi: counter (li);
kontra-increment: li;
position: absolute;
top: 2px;
kiri: 23px-;
font-size: 35px; / * Ukuran font nomor * /
width: 20px;
color: # 666; / * Warna teks * /
}
# PopularPosts1 ul li a {
display: block;
position: relative;
kiri: 30px-;
width: 100%;
margin: 0;
padding: 10px 29px 9px 3px;
font-size: 15px; / * Ukuran font dari link * /
font-style: italic;
color: # 333; / * Warna link * /
text-decoration: none;
Transisi: semua .1 s kemudahan-in-out;
}
# PopularPosts1 ul li a: hover {
color: # 3366ff;
margin-left: 3px;
}

Style 3: 

 # PopularPosts1 h2 {
position: relative;
kanan:-2px;
padding: 63px 6px 8px 17px;
width: 100%;
margin: 0;
font-size: 16px;
background: # C00000; / * Warna latar belakang * /
color: # f2f2f2; / * Warna judul widget * /
text-align: left;
text-indent: 18px;
}
# PopularPosts1 h2: sebelum {
position: absolute;
isi: "";
top: 33px;
kanan: 0px;
width: 0px;
height: 0px;
border-bottom: 12px awal transparan;
border-left: 12px solid # 800000;
}
# PopularPosts1 h2: setelah {
position: absolute;
isi: "";
top:-6px;
kiri:-5px;
width: 0px;
height: 0px;
border-bottom: 24px awal transparan;
border-top: 24px awal transparan;
border-left: 24px solid # fff;
}
# PopularPosts1 ul {
list-style: none;
kontra-ulang: li;
padding: 10px;
kiri:-8px;
width: 100%;
}
# PopularPosts1 li {
width: 100%;
position: relative;
kiri: 0;
margin: 7px 0 16px 12px;
padding: 10px 5px 4px 0;
}
# PopularPosts1 ul li: sebelum {
isi: counter (li);
kontra-increment: li;
position: absolute;
top: 2px-;
kiri: 20px-;
font-size: 33px;
width: 20px;
color: # 888888;
}

# PopularPosts1 ul li a {
display: block;
font-size: 14px; / * Ukuran font dari link * /
color: # 666; / * Warna link * /
text-decoration: none;
Transisi: semua .1 s kemudahan-in-out;
}
# PopularPosts1 ul li a: hover {
color: # 3366FF;
margin-left: 3px;
}

Style 4: 

 # PopularPosts1 h2 {
padding: 10px 8px 3px 0;
width: 100%;
margin: 0;
font-size: 16px;
position: relative;
kiri: 20px-;
display: block;
border-bottom: 2px solid # ccc;
}
# PopularPosts1 ul {
list-style: none;
kontra-ulang: li;
padding: 10px;
width: 100%;
}
# PopularPosts1 li {/ * Styles dari setiap elemen * /
width: 100%;
position: relative;
kiri: 0;
margin: 0 0 6px 10px;
padding: 4px 5px;
}
# PopularPosts1 ul li: sebelum {/ * Style nomor * /
isi: counter (li);
kontra-increment: li;
position: absolute;
top: 3px;
kiri: 39px-;
font-size: 21px;
width: 28px;
height: 28px;
border-radius: 50%;
color: # 777; / * Warna teks * /
border: 2px solid # ddd; / * Rounded warna border * /
padding: 0;
text-indent: 9px;
}
# PopularPosts1 ul li a {
display: block;
position: relative;
kiri: 45px-;
width: 100%;
margin: 0;
min-height: 28px;
padding: 5px 3px 3px 39px;
color: # 333; / * warna link * /
text-decoration: none;
font-size: 14px; / * Ukuran font dari link * /
font-style: italic;

}
# PopularPosts1 ul li a: hover {
color: # 3366ff;
margin-left: 3px;
}

Catatan akhir 

Semua CSS tersebut valid. Aku hanya harus menyebutkan bahwa penomoran tidak terlihat di Internet Explorer 7, sejak versi browser tidak mendukung sifat yang membuat angka-angka muncul. Misalnya dalam gaya ke-4, lingkaran terlihat kuadrat di IE8 dan versi sebelumnya karena, versi ini tidak mendukung properti yang membuat mereka terlihat seperti lingkaran. 

Font akan diwariskan dari template, karena mereka belum dinyatakan dalam CSS.