5 Popular Posts Widget Keren For Blog

Jika Anda menggunakan Blogger sebagai platform untuk blog pribadi atau bisnis Anda, Anda mungkin mencari cara untuk menyesuaikan dan membuat Anda sendiri. Dengan cara ini, Anda akan membuat halaman Web Anda unik dan eye-catching dan memastikan mereka akan berdiri keluar dari banyak halaman lain di internet. Anda juga akan menarik perhatian target pasar Anda, mendorong mereka untuk menelusuri blog Anda dan menjadi pembaca setia Anda dan pengikut.

Untungnya, ada banyak cara untuk personalisasi blog Blogger Anda, dan salah satunya adalah untuk menyesuaikan Anda Populer Posts widget. Belum menginstal ini belum? Jangan khawatir karena memasukkannya ke dalam blog Anda mudah.

Menambahkan Popular Posts Widget untuk Blogger

Cukup klik pada judul blog Anda, mengakses menu Layout, klik "Add Widget" dan pilih "Popular Posts". Sebuah jendela akan muncul meminta Anda untuk mengkonfigurasi widget dengan memilih yang posting Anda akan memiliki (misalnya orang-orang yang paling banyak dilihat di 7 hari terakhir atau 30 hari atau dari awal blog Anda). Anda juga akan diminta untuk memilih berapa banyak posting Anda akan memiliki dalam bagian Popular Posts Anda dan pilih jika Anda akan menampilkan judul posting saja atau bersama dengan thumbnail gambar dan / atau potongan. (Ingat bahwa masing-masing gaya widget memiliki kebutuhan yang berbeda, sehingga mengikuti instruksi dengan seksama untuk mengetahui apakah Anda akan memerlukan potongan dan gambar thumbnail atau tidak).

Konfigurasi Popular Posts Widget untuk Blogger

Setelah Anda mengikuti petunjuk ini, Anda akan bisa melihat versi dasar Popular Posts Widget untuk Blogger di blog Anda. Anda dapat menempel dengan ini jika cocok desain blog Anda tetapi, jika tongkat keluar seperti jempol sakit atau tidak sesuai selera Anda, ada tidak perlu resah karena Anda dapat mempersonalisasikan itu. Anda dapat memilih dari gaya berikut - melihat demo blog:

DEMO

Popular Posts Style 1 - Box dalam kotak

Ini adalah gaya widget yang menarik karena menggunakan potongan Anda dan thumbnail gambar dengan cara yang unik. Cuplikan Anda ditulis dalam teks buram dan ditempatkan dalam kotak transparan kecil. Hal ini, pada gilirannya, ditempatkan dalam kotak persegi panjang yang lebih besar, dimana thumbnail gambar Anda digunakan sebagai latar belakang. Memilih ini Popular Posts Widget untuk Blogger dapat menjadi pilihan jika Anda ingin mencerahkan blog Anda dan menarik perhatian pembaca dengan foto berwarna-warni.

Pesan populer widget untuk blogger

CSS code:

<style type='text/css'>

.sidebar .PopularPosts ul {

margin: 0;

padding: 0;

}

.sidebar .PopularPosts ul li {

list-style: none !important;

padding: 0 !important;

margin-bottom: 10px;

}

.sidebar .PopularPosts .item-thumbnail {

height: 190px;

margin: 0;

overflow: hidden;

width: 100%;

}

.sidebar .PopularPosts .item-title {

position: relative;

}

.sidebar .PopularPosts img {

height: 100%;

width: 100%;

object-fit: cover;

}

.sidebar .PopularPosts .item-title a {

color: #FFFFFF;

font: 15px &#39;Oswald&#39;, sans-serif;

text-transform: uppercase;

font-size: 20px;

padding: 10px;

position: absolute;

right: 0;

left: 0px;

margin: 0px auto;

text-align: center;

text-decoration: none;

top: 40px;

width: 60%;

height: 26px;

overflow: hidden;

z-index: 2;

}

.sidebar .PopularPosts .item-snippet {

background: rgba(0, 0, 0, 0.35);

border-top: 6px solid rgba(0, 0, 0, 0.1);

border-bottom: 6px solid rgba(0, 0, 0, 0.1);

color: #FFFFFF;

left: 0px;

right: 0px;

margin: 0px auto;

padding: 65px 10px 10px;

position: absolute;

font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;

text-align: center;

top: 35px;

width: 60%;

z-index: 1;

}

.sidebar .PopularPosts .item-content {

position: relative;

}

</style>

Popular Posts Style 2 - thumbnail besar dengan judul posting kecil di bawah

Ini menggunakan kode yang sama sebagai dasar Blogger Popular Posts Widget dengan beberapa tweak. Dipopulerkan oleh blog terkenal, gaya ini adalah eye-catching karena berfokus pada gambar, yang tidak hanya merangkum isi tulisan 'tetapi juga menambahkan drama visual untuk seluruh halaman. Hal ini sangat berguna untuk blog yang berfokus pada pakaian, makeup, seni dan topik lainnya yang sangat bergantung pada presentasi visual untuk lebih mengekspresikan ide-ide.

Pesan populer widget untuk blogger

CSS code:

<style type='text/css'>
.sidebar .PopularPosts ul {
counter-reset: popularcount;
margin: 0;
padding: 0;
}
.sidebar .PopularPosts ul li {
width: 100%;
list-style: none !important;
padding: 0 !important;
margin-bottom: 20px;
position: relative;
border: 0;
}
.sidebar .PopularPosts .item-thumbnail a {
clip: auto;
display: block;
height: auto;
height: 120px;
}
.sidebar .PopularPosts .item-thumbnail {
width: 100%;
position: relative;
margin-bottom: 15px;
}
.sidebar .PopularPosts .item-thumbnail::before {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border-bottom: 29px solid #fff;
border-left: 29px solid transparent;
border-right: 29px solid transparent;
bottom: 0px;
content: &quot;&quot;;
height: 0;
width: 0px;
left: 0px;
right: 0px;
margin-left: auto;
margin-right: auto;
position: absolute;
z-index: 3;
}
.sidebar .PopularPosts .item-thumbnail:after {
color: #000;
content: counter(popularcount, decimal);
counter-increment: popularcount;
font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
list-style-type: none;
position: absolute;
bottom: 0;
text-align: center;
margin: 0px auto;
left: 0px;
right: 0px;
z-index: 4;
}
.sidebar .PopularPosts .item-thumbnail img {
position: relative;
width: 100%;
height: 120px;
object-fit: cover;
}
.sidebar .PopularPosts .item-title {
font: 15px &#39;Oswald&#39;, sans-serif;
text-transform: uppercase;
text-align: center;
margin: 0px auto;
padding-bottom: 10px;
border-bottom: 1px solid #000;
}
.sidebar .PopularPosts .item-title a {
color: #000;
text-decoration: none;
}
.sidebar .PopularPosts .item-snippet {
padding: 10px 15px;
font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
text-align: center;
}
</style>

Popular Posts Style 3 - kotak Colorful

Jika blog Anda membutuhkan pop warna, ini adalah pilihan yang tepat untuk Anda. Gaya widget ini menyajikan Tulisan Populer di beberapa kotak yang menampilkan gambar thumbnail dan memiliki cerah, eye-catching warna seperti hijau muda, kuning oker dan tajam oranye. Setiap kotak memiliki warna yang berbeda, dan Anda dapat menambahkan hingga empat kotak.

Pesan populer widget untuk blogger

CSS code:

<style type='text/css'>
.sidebar .PopularPosts ul {
padding: 0;
margin: 0;
}
.sidebar .PopularPosts .item-thumbnail a {
clip: auto;
display: block;
height: auto;
overflow: hidden;
}
.sidebar .PopularPosts .item-thumbnail {
width: 130px;
height: 130px;
border-right: 5px solid #fff;
margin: 0px 10px 0px 0px !important;
position: relative;
}
.sidebar .PopularPosts .item-thumbnail img {
position: relative;
height: 100%;
width: 100%;
object-fit: cover;
}
.sidebar .PopularPosts ul li {
float: left;
margin-bottom: 5px;
max-height: 130px;
min-width: 250px;
overflow: hidden;
}
.sidebar .PopularPosts ul li:first-child {
background: #D9EDF7;
}
.sidebar .PopularPosts ul li:first-child + li{
background: #F2DEDE;
}
.sidebar .PopularPosts ul li:first-child + li + li {
background: #DFF0D8;
}
.sidebar .PopularPosts ul li:first-child + li + li + li {
background: #FFEEBC;
}
.sidebar .PopularPosts ul li:first-child + li + li + li + li{
background: #E0E0E0;
}
.sidebar .PopularPosts .item-title {
font: 13px &#39;Oswald&#39;, sans-serif;
text-transform: uppercase;
padding: 10px 5px 10px;
}
.sidebar .PopularPosts .item-title a {
color: #000;
text-decoration: none;
}
.sidebar .PopularPosts .item-snippet {
font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
padding-right: 5px;
}
.sidebar .PopularPosts .widget-content ul li {
padding: 0px 5px 0px 0px!important;
}
</style>

Popular Posts Style 4 - tata letak Grid

Sama seperti gaya widget-gambar besar, tata letak jaringan adalah pilihan yang sangat baik jika Anda ingin menampilkan gambar Anda atau jika blog Anda tergantung pada informasi visual. Namun, judul posting Anda tidak akan disertakan dalam tata letak, sehingga pembaca harus membawa mouse mereka pada gambar untuk membaca judul.

Pesan populer widget untuk blogger

CSS code: 

<style type='text/css'> 
.sidebar .PopularPosts ul {
padding: 0;
}
.sidebar .PopularPosts ul li:first-child{
width: 100%;
max-height: 100%;
opacity: 0.9;
}
.sidebar .PopularPosts ul li:nth-child(even){
margin-right: 2%;
}
.sidebar .PopularPosts ul li {
box-sizing: border-box;
position: relative;
padding: 0px !important;
width: 49%;
max-height: 120px;
opacity: 0.4;
overflow:hidden;
float: left;
margin-bottom: 2%;
-webkit-transition: all 0.5s ease 0s;
-moz-transition: all 0.5s ease 0s;
-ms-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;
}
.sidebar .PopularPosts ul li:hover {
opacity: 1;
}
.sidebar .PopularPosts .item-thumbnail {
margin: 0;
width: 100%;
}
.sidebar .PopularPosts ul li img {
box-sizing: border-box;
width: 100%;
height: 100%;
object-fit: cover;
padding:0;
}
.sidebar .PopularPosts .item-content:hover .item-title a,
.sidebar .PopularPosts .item-thumbnail-only:hover .item-title a {
visibility: visible;
opacity: 1;
}
.sidebar .PopularPosts .item-title a {
color: #fff;
background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.93) 100%, rgba(0, 0, 0, 0.85) 100%);
text-decoration: none;
position: absolute;
text-align: center;
font: 13px &#39;Oswald&#39;, sans-serif;
left: 0;
right: 0;
bottom: 0%;
padding: 100px 10px 10px;
opacity: 0;
visibility: hidden;
}
.sidebar .PopularPosts .item-snippet {
display: none;
}
</style>

Popular Posts Style 5 - posting bernomor

Jika Anda menyukai daftar bernomor, atau jika Anda ingin membuat blog Anda lebih terorganisir, ini bisa menjadi pilihan yang sempurna. Dengan menggunakan kode untuk gaya widget ini, Pos Populer Anda akan secara otomatis nomor dan akan menampilkan, kotak minimalis bersih yang mencakup cuplikan Anda dan thumbnail gambar.

Pesan populer widget untuk blogger

CSS code:

<style type='text/css'>

.sidebar .PopularPosts ul {

counter-reset: popularcount;

margin: 0;

padding: 0;

}

.sidebar .PopularPosts ul li {

float: left;

max-height: 130px;

min-width: 250px;

position: relative;

}

.sidebar .PopularPosts .item-thumbnail::after {

color: rgba(255,255,255, 0.63);

content: counter(popularcount, decimal);

counter-increment: popularcount;

font: 70px &#39;Oswald&#39;, sans-serif;

list-style-type: none;

position: absolute;

left: 5px;

top: -5px;

z-index: 4;

}

.sidebar .PopularPosts .item-thumbnail::before {

background: rgba(0, 0, 0, 0.3);

bottom: 0px;

content: &quot;&quot;;

height: 100px;

width: 100px;

left: 0px;

right: 0px;

margin: 0px auto;

position: absolute;

z-index: 3;

}

.sidebar .PopularPosts .item-thumbnail a {

clip: auto;

display: block;

height: auto;

overflow: hidden;

}

.sidebar .PopularPosts .item-thumbnail {

width: 100px;

height: 100px;

margin: 0px 10px 0px 0px !important;

position: relative;

}

.sidebar .PopularPosts .item-thumbnail:hover:before {

display: none;

}

.sidebar .PopularPosts .item-thumbnail img {

position: relative;

padding-right: 0px !important;

height: 100%;

width: 100%;

object-fit: cover;

}

.sidebar .PopularPosts .item-title {

font: 13px &#39;Oswald&#39;, sans-serif;

text-transform: uppercase;

padding: 0px 5px 10px;

}

.sidebar .PopularPosts .item-title a {

color: #000;

text-decoration: none;

}

.sidebar .PopularPosts .item-snippet {

font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;

}

.sidebar .PopularPosts .widget-content ul li {

padding: 0px 5px 0px 0px !important;

}

.sidebar .PopularPosts .item-content {

padding: 5px 0px;

border-bottom: 1px dotted #dedede;

overflow: hidden;

height: 100px;

position: relative;

}

</style>

Ini hanya beberapa dari gaya widget Anda dapat memilih dari. Bila Anda telah memilih gaya yang Anda inginkan, pastikan untuk menyalin kode CSS nya. Setelah Anda melakukannya, pergi ke blog Anda, klik "Template" di sisi kiri dan pilih "Edit HTML" di bawah preview template yang.

Kode-kode berikutnya perlu disisipkan di atas "</ head>" atau "</ body>" tag, jadi instruksi untuk tahu persis di mana Anda harus menempatkan kode.

Menambahkan CSS

Ketika template editor telah dibuka, klik di mana saja di dalam area kode dan tekan CTRL + F atau Command F untuk mencari tag berikut:

</ Head>

Hanya ATAS </ head> tag, copy-paste kode CSS dari salah satu gaya di atas.

Penting: Jika Popular Posts widget terletak di footer blog Anda, hapus kelas .sidebar ditemukan dalam kode CSS untuk membuatnya bekerja.

Harap dicatat bahwa sebagian besar gaya menggunakan font Oswald yang Anda perlu menambahkan kode template Anda juga.

Jadi, mencari tag ini:

<Head>

Hanya BAWAH itu, tambahkan baris ini:

<link href='https://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'/>

Menambahkan JavaScript

Gaya ini juga memerlukan kode JavaScript untuk mengubah ukuran tulisan populer gambar / thumbnail dan trim pos cuplikan dan judul. Untuk menambahkan JavaScript, cari </ body> tag dan paste script berikut tepat di atas itu:

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/>

<script type='text/javascript'>

$(&#39;.popular-posts img&#39;).attr(&#39;src&#39;, function(e, t) {

return t.replace(&#39;/s72-c/&#39;, &#39;/s350-c/&#39;)

});

$(&#39;.popular-posts ul li .item-snippet&#39;).each(function(){

var txt=$(this).text().substr(0,60);

var j=txt.lastIndexOf(&#39; &#39;);

if(j&gt;10)

$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,&#39;...&#39;));

});

$(&#39;.popular-posts ul li .item-content a&#39;).each(function(){

var txt=$(this).text().substr(0,60);

var j=txt.lastIndexOf(&#39; &#39;);

if(j&gt;=6)

$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,&#39;...&#39;));

});

</script>

Catatan: Jika Anda sudah perpustakaan jQuery di template Anda, menghapus garis merah.

Setelah Anda menambahkan semua kode di tempat yang tepat, tekan tombol "Simpan template" untuk menyimpan perubahan.

Itu dia!

Lima Popular Posts widget untuk Blogger unggulan saat ini adalah semua solusi yang bagus untuk menambahkan bagian posting populer untuk blog Anda. Mereka semua memiliki penampilan yang berbeda untuk menentukan apa yang membuat posting yang populer, tetapi hasil akhirnya adalah sama: pengunjung selalu satu klik dari konten terbaik Anda. Cobalah beberapa gaya ini, menemukan favorit Anda, dan melihat bagaimana dampak kinerja blog Anda.