Hallo !
Kali ini saya akan membahas tentang cara merubah popular post blogger yang biasa menjadi lebih keren ketje dan lutju. Saat kita belajar ngeblog, setidaknya kita akan pernah merubah ataupun menambahkan widget yang ada di template pilihan anda.
Lalu setelah konfigurasi dan pemasangan selesai, kita masuk ke menu template > Edit Template. Lalu cari tag ]]></b:skin> dengan cara CTRL+f dan ketik tag tersebut. Lalu copy kode CSS dibawah ini.
Lalu cari tag </body> dan tambahkan kode dibawah ini tepat di ATASnya.
Mungkin hanya itu saja yang akan kita bahas pada artikel ini, terimakasih, semoga bermanfaat.
Read More
Kali ini saya akan membahas tentang cara merubah popular post blogger yang biasa menjadi lebih keren ketje dan lutju. Saat kita belajar ngeblog, setidaknya kita akan pernah merubah ataupun menambahkan widget yang ada di template pilihan anda.
 |
| Popular Post |
Menambahkan Popular Post pada Blog
Oke langkah pertama yang harus dipersiapkan adalah menambahkan widget Popular Post atau Entri Popular di blog anda. Caranya dengan masuk ke menu Tata Letak > Tambah Gadget > Popular Post. Lakukan konfigurasi seperti screenshot berikut ini. |
| Konfigurasi |
Merubah Tampilah Popular Post
 |
| Demo |
.sidebar .PopularPosts ul {Lalu cari tag <b:skin><![CDATA[ dan tambahkan kode di bawah ini tepat di ATASnya.
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: "";
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 "Times New Roman",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 'Oswald', 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 "Times New Roman",Times,FreeSerif,serif;
text-align: center;
}
<link href='https://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'/>
Lalu cari tag </body> dan tambahkan kode dibawah ini tepat di ATASnya.
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/>Oke jika sudah klik tombol simpan template, dan silahkan lihat di blog anda hasilnya.
<script type='text/javascript'>
$('.popular-posts img').attr('src', function(e, t) {
return t.replace('/w72-h72-p-nu/', '/s350-c/')
});
$('.popular-posts ul li .item-snippet').each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(' ');
if(j>10)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,'...'));
});
$('.popular-posts ul li .item-content a').each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(' ');
if(j>=6)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,'...'));
});
</script>
Mungkin hanya itu saja yang akan kita bahas pada artikel ini, terimakasih, semoga bermanfaat.
