4 Jenis Popular Posts Oye

info-gamepc.blogspot.com - Selamat malam Sobat Blogger, kali ini saya akan memberikan artikel 4 jenis Popular Post yang keren, sebelumnya baca dulu info singkat berikut ya. Blogger memperbolehkan kita untuk menambahkan jenis - jenis "Popular Posts", yang bisa kita pilih dari daftar gadget, dan kita bisa melakukan itu dengan mengklik "Layout" dari Blog kita.

Gadget ini, seperti namanya, merupakan postingan blog yang paling banyak dikunjungi, dan Anda dapat mengaturnya untuk menampilkan info yang Anda inginkan dalam empat kombinasi dalam bentuk :

1. hanya judul posting
2. sebuah thumbnail dari gambar dan judul posting
3. judul posting dengan ringkasan
4. menulis judul dengan thumbnail dan potongan artikel.

Popular Posts ini merupakan elemen yang tidak boleh Anda lewatkan di blog Anda karena mendorong pengunjung Anda untuk menavigasi melalui isi blog Anda dan dapat menghasilkan 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 pertama: Tambahkan gadget, jika Anda belum melakukannya belum.

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

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

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

Bagaimana menambahkan CSS untuk menciptakan jenis widget Popular Posts

1. Pilih jenis, kemudian kopi CSS yang muncul di bawah gambar yang menunjukkan jenis popular posts tersebut
. 2. Pilih tab "Template", kemudian klik pada Customize> Advanced> Tambah CSS dan kemudian paste jenis CSS yang paling Anda sukai.

3. Setelah Anda menambahkan CSS, perubahan Simpan dengan mengklik tombol "Apply to Blog".

Catatan: Beberapa template Blogger mungkin tidak memungkinkan menambahkan CSS di lokasi tersebut. Dalam hal ini, untuk menambahkan gaya CSS, Anda perlu mengakses HTML Template - dari Dashboard Blogger Anda, pergi ke Template> Edit HTML dan paste kode tepat di atas ]]></b:skin>, (tekan CTRL + tombol F untuk menemukannya - Anda mungkin perlu untuk mengklik pada panah untuk memperluas kode dan setelah itu cari lagi)

Dan itu saja!

Jenis-jenis Popular Posts

Berikut adalah CSS masing-masing jenis, Anda cukup memilih salah satu yang Anda sukai dan menaruhnya di blog Anda.

Jenis 1.

#PopularPosts1 h2{
padding:7px 0 3px 0;
width:100%;
margin-bottom:10px;
font-size:1.3em;
text-indent:-12px;
font-size:18px;
text-align:center;
color: #757575; /* Color of the widget's title */
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:8px 0px 1px;
left:-7px;
width:290px;
}
#PopularPosts1 li{
position:relative;
margin:0 0 10px 0;
padding: 3px 2px 0 17px;
left:-5px;
width:285px;
}
#PopularPosts1 ul li{
background: #eee;
position: relative;
display: block;
padding: .4em .2em .4em 2em;
*padding: .2em;
margin: .5em 0;
background: #ddd;
text-decoration: none;
border-radius: .3em;
transition: all .3s ease-out;  
}
#PopularPosts1 ul li:before{
content: counter(li);
counter-increment: li;
position: absolute;
top: 50%;
margin: -1.3em;
height: 2em;
width: 2em;
line-height: 2em;
font-size: 15px;
color: #fff; /* text color of numbers */
background: #FB8835; /* background color of numbers */
border: .2em solid #fff; /* border color */
-webkit-box-shadow: 0 8px 5px -7px #888;
-moz-box-shadow: 0 8px 5px -7px #888;
box-shadow: 0 8px 5px -7px #888;
text-align: center;
font-weight: bold;
border-radius: 2em;
position: absolute;  
left: 0;
transition: all .3s ease-out;
}
#PopularPosts1 ul li:hover{
background: #eee;
}
#PopularPosts1 ul li:hover:before{
transform: rotate(360deg);  
}
#PopularPosts1 ul li a{
font: 14px Georgia, serif; /* font size of post titles */
text-shadow: 0 -1px 2px #fff;
color: #444;
display:block;
min-height:25px;
text-decoration:none;
text-transform: uppercase;
}
#PopularPosts1 ul li a:hover{
color: #444;
}

Jenis 2:

#PopularPosts1 h2{
position:relative;
padding:8px 10px 6px 10px;
width:100%;
margin-bottom: 5px;
font-size:17px;
color:#757575; /* Color of the widget's title */
text-align:left;
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:10px;
left:-8px;
width:100%;
}
#PopularPosts1 li{ /* Styles of each element */
width:100%;
position:relative;
left:0;
margin:0 0 1px 12px;
padding:4px 5px;
}
#PopularPosts1 ul li:before{
content: counter(li);
counter-increment: li;
position: absolute;
left: -30px;
top: 50%;
margin-top: -13px;
background: #8E8E8E; /* background color of the numbers */
height: 1.9em;
width: 2em;
line-height: 2em;
text-align: center;
font-weight: bold;
color: #fff;
font-size: 14px;
}
#PopularPosts1 ul li:after{
position: absolute;
content: '';
left: -2px;
margin-top: -.7em;
top: 50%;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left:10px solid #8E8E8E; /* background color of the right arrow*/
}
#PopularPosts1 ul li a{
color: #444;
text-decoration: none;  
font-size:15px;
}
#PopularPosts1 ul li {
position: relative;
display: block;
padding: .4em .4em .4em .8em;
*padding: .4em;
margin: .5em 0 .5em 0.4em;
background: #ddd;
transition: all .3s ease-out;
text-decoration:none;
transition: all .1s ease-in-out;
}
#PopularPosts1 ul li:hover{
background: #eee; /* Background color on mouseover */
}  
#PopularPosts1 ul li a:hover{
color:#444; /* Link color on mouseover */
margin-left:3px;
}

Jenis 3:

#PopularPosts1 h2{
position:relative;
right:-2px;
padding:8px 63px 6px 17px;
width:100%;
margin:0;
font-size:16px;
background:#4F4F4F; /* Background color */
color:#f2f2f2; /* Color of the widget's title */
text-align:left;
text-indent:18px;
}
#PopularPosts1 h2:before{
position:absolute;
content:"";
top:36px;
right:0px;
width: 0px;
height: 0px;
border-bottom:12px outset transparent;
border-left:12px solid #000000;
}
#PopularPosts1 h2:after{
position:absolute;
content:"";
top:-6px;
left:-5px;
width: 0px;
height: 0px;
border-bottom:24px outset transparent;
border-top:24px outset transparent;
border-left:24px solid #ffffff; /* Arrow background color on the left */
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:10px;
left:-8px;
width:100%;
}
#PopularPosts1 li{
width:100%;
position:relative;
left:0;
margin:7px 0 16px 12px;
padding:10px  4px 0 5px;
}
#PopularPosts1 ul li:before{
content:counter(li);
counter-increment:li;
position:absolute;
top:-2px;
left:-20px;
font-size:35px;
width:20px;
color:#888888;
}

#PopularPosts1 ul li a{
display:block;
font-size:16px; /* Font size of the links */
color: #666; /* Color of the links */
text-decoration:none;
transition: all .1s ease-in-out;font-weight: bold;
}
#PopularPosts1 ul li a:hover{
color:#3366FF;
margin-left:3px;
}

Jenis 4:

#PopularPosts1 h2{
padding:8px 10px 3px 0;
width:100%;
margin:0;
font-size:16px;
position:relative;
left:-20px;
display:block;
border-bottom:2px solid #ccc;
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:10px;
width:100%;
}
#PopularPosts1 li{ /* Styles of each element */
width:100%;
position:relative;
left:0;
margin:0 0 6px 10px;
padding:4px 5px;
}
#PopularPosts1 ul li:before{ /* Style of the numbers */
content:counter(li);
counter-increment:li;
position:absolute;
top:3px;
left:-39px;
font-size:21px;
width:28px;
height:28px;
border-radius: 50%;
color:#777; /* Text color */
border: 2px solid #ddd; /* Rounded border color */
padding:0;
text-indent:9px;
}
#PopularPosts1 ul li a{
display:block;
position:relative;
left:-45px;
width:100%;
margin:0;
min-height:28px;
padding: 5px 3px 3px 39px;
color:#333; /* color of the links */
text-decoration:none;
font-size:14px; /* Font size of the links */
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, dikarenakan versi browser tidak mendukung jenis yang membuat angka-angka muncul. Misalnya dalam jenis ke-4, lingkaran terlihat kuadrat di IE8 dari versi sebelumnya, karena versi ini tidak mendukung properti yang membuat jenis tersebut terlihat seperti lingkaran.

Wahhh... Kwesel

Pokoke dicoba aja dulu, kalo nggak sukses, baru Komment ya.