4 Gaya Popular Post Widget Blog

Pada Blogger kita bisa dengan mudah menambahkan widget "Popular Posts", kita hanya perlu menambahkan widget tersebut melalui dashboard blogger -> tata letak/layout -> tambahkan/add gadget -- selesai, maka widget popular posts akan plugin pada blog kita, dan kita bisa menempatkannya dimanapun pada ruang blog kita.

Widget ini menunjukkan informasi posting/artikel mana saja yang paling banyak dikunjungi/baca oleh pengunjung blog kita, dan pada widget ini pula kita bisa memiliki option 4 kombinasi tampilan popular posts :

only the title of the post/hanya judul postingnya saja,

a thumbnail of the image and the post title/hanya thumbnail dan judul postingnya saja,

post title with a summary, and/judul dengan ringkasan postingan, dan

post title with a thumbnail and a post snippet/judul postingan dengan thumbnail dan potongan/cuplikan postingan.

Elemen/widget ini tidak boleh kita lewatkan di blog, karena widget ini mengajak pengunjung untuk menavigasi isi konten dan yang akan menghasilkan peningkatan jumlah halaman yang dikunjungi, dan pada gilirannya, dapat menarik minat para pengguna untuk berlangganan ke blog dan untuk membaca konten-konten yang menarik.

Langkah awal: Tambahkan gadget, jika kita belum memasang widget popular posts adalah,

Pilih "Layout/tata letak" tab dan menambahkan "Popular Posts" gadget di bagian blog kita, kita bisa bebas meletakkannya, seperti di sidebar, dengan mengklik "Add Gadget".

Konfigurasikan/atur widget untuk hanya menampilkan judul posting. kita dapat melakukan ini dengan mengklik "gambar thumbnail" dan "potongan/cuplikan" kotak centang, seperti yang ditunjukkan pada gambar berikut :

Popular Posts Widget

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

Selanjutnya adalah menambahkan kode CSS pada blog kita, ada 2 cara yang dapat kita lakukan untuk menambahkan kode CSS pada blog kita, (1) Pilih "Template" tab, kemudian klik pada Customize> Advanced> Tambah kode CSS

dan kemudian paste gaya kode CSS yang paling cocok dengan template blog kita dibawah ini :

Note : Beberapa template Blogger mungkin tidak memungkinkan menambahkan CSS di Blogger Template Designer (umumnya karena tidak menggunakan template dasar/basic dari blogger sendiri). Dalam hal ini, untuk menambahkan gaya kode CSS, yang dapat kita lakukan adalah melalui akses HTML Template - dari Dashboard Blogger, ke Template> Edit HTML dan paste kode tepat di atas kode tag html ]]> </ b: skin> .

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

http://demo-blog343.blogspot.com

GAYA - 1,

Kode CSS-nya :

#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;
}

GAYA - 2,

Kode CSS-nya :

#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;
}

GAYA - 3,

Kode CSS-nya :

#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;
}

GAYA - 3, Yang saya gunakan

Kode CSS-nya :

#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;
}

Dalam pengaplikasiannya, kadang kode CSS original (Milik HELP BLOGGER http://helplogger.blogspot.ro/2013/09/4-different-styles-for-popular-posts.html) tidak selalu cocok dengan template awal blog kita, maka perlu kita Amati, Tiru dan Modifikasi (ATM) agar sesuai dengan template awal kita, maka dalam penerapannya pada blog saya,kode CSSnya saya modifikasi menjadi :

Kode CSS-nya :

#PopularPosts1 h2{
padding:7px 0 3px 0;
width:100%;
margin-bottom:10px;
font-size:1.3em;
text-indent:-1px;
font-size:24px;
text-align:left;
color: #3399ff; /* Color of the widget's title */
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:8px 0px 1px;
left:18px;
width:320px;
}
#PopularPosts1 li{
position:relative;
margin:0 0 0px 0;
padding: 3px 2px 0 17px;
left:18px;
width:265px;
}
#PopularPosts1 ul li{
background: #eee;
position: relative;
display: block;
padding: .4em .2em .4em 2em;
*padding: .2em;
margin: .5em 0;
background: #3399ff;
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:#3399ff; /* 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: #cc0000;
display:block;
min-height:25px;
text-decoration:none;
text-transform: uppercase;
}
#PopularPosts1 ul li a:hover{
color: #3399ff;
}

Amati, Tiru, dan Modifikasi - ATM "Belajar Berbagi"

Top Menu

Pages

4 Gaya Popular Post Widget Blog

2 komentar:

Post a Comment

ATM - BELAJAR BLOGGING YUK..

Entri Populer

Label

Total Tayang

PESAN DAN KESAN ANDA

JAVASCRIPT SOURCE