Cara Mudah Membuat Popular Post Blog Berwarna Keren

Mudahnya Membuat Popular Post Blog Menjadi Berwarna Dan Terlihat Keren 

Belajar memodifikasi tampilan blog di blogger secara bertahap adalah cara terbaik demi mempercantik sebuah tampilan blog . Tampilan default template yang kita pakai seringkali hanya menampilkan kesan itu itu saja dan tanpa adanya variasi .Namun apa jadinya jika tampilan blog tersebut menjadi lebih menarik? Baiklah sekarang kita berfikir sejenak sebelum merubahnya ,dan secara bertahap pula kita pahami betul langkah langkahnya sehingga di saat kita sisipkan atau kita rubah tampilan blog tersebut ,kita menjadi semakin mengerti bahwa ini adalah sebuah pengalaman baru yang perlu di catat dan kita mampu merubahnya sendiri . Kali ini saya akan mengarahkan sobat untuk merubah widget recent post / popular post yang biasanya terletak di samping kanan maupun kiri di antara beberapa posting blog . Jika sebelumnya blog sobat memiliki widget recent post dengan tampilan default dan ingin merubahnya ,ini sangatlah mudah dan saya yakin sobat semua mampu melakukan hal ini .



Di bawah ini adalah cara untuk merubah tampilan widget recent post dengan mudah ,perlu  di pahami secara seksama agar langkah ini semakin memperluas pengalaman sobat dalam hal mendesain tampilan blog ,perlu di ketahui juga bahwa dalam merubah widget recent post berikut ini adalah dengan menambahkan atau merubah beberapa kode Css yang ada di dalam format xml template blogger . Caranya adalah : 

  1. Log in ke akun blogger sobat
  2. Pilih blog mana yang akan di setting
  3. Pilih template
  4. Edit HTML
  5. Cari kode  ]]></b:skin>  dengan cara klik CTRL (Tahan) + F lalu ketikkan ]]></b:skin> di kolom / kotak pencarian lalu klik Enter . 
  6. Apabila sudah ketemu ,silahkan letakkan kode di bawah ini tepat di atas kode ]]></b:skin>
  7. Kemudian Simpan Template
  8. Selesai .





Untuk hasil seperti gambar di atas silahkan copy paste kode di bawah ini tepat di atas kode ]]></b:skin> 


/*Custom Popular Post*/
.PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0 0;padding:0 0;list-style:none;border:none;background:none;outline:none}
.PopularPosts ul{margin:.5em 0;list-style:none;color:black;counter-reset:num}
.PopularPosts ul li{background-color:#eee;margin:0 0 0 0!important;padding:.5em 1.5em .5em .5em!important;counter-increment:num;position:relative}
.PopularPosts ul li a{color:#fff!important}
.PopularPosts ul li a:hover{color:#2c3e50!important}
.PopularPosts ul li:before,.PopularPosts ul li .item-title a,.PopularPosts ul li a{font-weight:bold;color:inherit;text-decoration:none}
.PopularPosts ul li:before{content:counter(num)!important;display:block;position:absolute;background-color:#333;color:#fff!important;width:22px;height:22px;line-height:22px;text-align:center;bottom:0;right:0;padding-right:0!important}
/* Pengaturan Warna */
.PopularPosts ul li:nth-child(1){background-color:#f1c40f;}
.PopularPosts ul li:nth-child(2){background-color:#f39c12;}
.PopularPosts ul li:nth-child(3){background-color:#2ecc71;}
.PopularPosts ul li:nth-child(4){background-color:#27ae60;}
.PopularPosts ul li:nth-child(5){background-color:#e67e22;}
.PopularPosts ul li:nth-child(6){background-color:#d35400;}
.PopularPosts ul li:nth-child(7){background-color:#3498db;}
.PopularPosts ul li:nth-child(8){background-color:#2980b9;}
.PopularPosts ul li:nth-child(9){background-color:#ea6153;}
.PopularPosts ul li:nth-child(10){background-color:#c0392b;}
.PopularPosts .item-thumbnail{margin:0 0 0 0}
.PopularPosts .item-snippet{font-size:11px}



Untuk hasil seperti gambar di atas silahkan copy paste kode di bawah ini tepat di atas kode ]]></b:skin>


/* Custom CSS for Blogger Popular Post Widget */
.PopularPosts ul,
.PopularPosts li,
.PopularPosts li img,
.PopularPosts li a,
.PopularPosts li a img {
margin:0 0;
padding:0 0;
list-style:none;
border:none;
background:none;
outline:none;
}

.PopularPosts ul {
margin:.5em 0;
list-style:none;
color:black;
counter-reset:num;
}

.PopularPosts ul li img {
display:block;
margin:0 .5em 0 0;
width:50px;
height:50px;
float:left;
}

.PopularPosts ul li {
background-color:#eee;
margin:0 10% .4em 0 !important;
padding:.5em 1.5em .5em .5em !important;
counter-increment:num;
position:relative;
}

.PopularPosts ul li:before,
.PopularPosts ul li .item-title a, .PopularPosts ul li a {
font-weight:bold;
color:#000 !important;
text-decoration:none;
}

.PopularPosts ul li:before {
content:counter(num) !important;
display:block;
position:absolute;
background-color:#333;
color:#fff !important;
width:22px;
height:22px;
line-height:22px;
text-align:center;
top:0px;
right:0px;
padding-right:0px !important;
}

/* Set color and level */
.PopularPosts ul li:nth-child(1) {background-color:#A51A5D;margin-right:1% !important}
.PopularPosts ul li:nth-child(2) {background-color:#F53477;margin-right:2% !important}
.PopularPosts ul li:nth-child(3) {background-color:#FD7FAA;margin-right:3% !important}
.PopularPosts ul li:nth-child(4) {background-color:#FF9201;margin-right:4% !important}
.PopularPosts ul li:nth-child(5) {background-color:#FDCB01;margin-right:5% !important}
.PopularPosts ul li:nth-child(6) {background-color:#DEDB00;margin-right:6% !important}
.PopularPosts ul li:nth-child(7) {background-color:#89C237;margin-right:7% !important}
.PopularPosts ul li:nth-child(8) {background-color:#44CCF2;margin-right:8% !important}
.PopularPosts ul li:nth-child(9) {background-color:#01ACE2;margin-right:9% !important}
.PopularPosts ul li:nth-child(10) {background-color:#94368E;margin-right:10% !important}

.PopularPosts .item-thumbnail {
margin:0 0 0 0;
}
.PopularPosts .item-snippet {
font-size:11px;
}

.profile-img{
display:inline;
opaciry:10;
margin:0 6px 3px 0;
}


Lalu bagaimana jika sudah memakai salah satu dari widget recent post di atas atau sudah terdapat widget recent post default seperti di atas, kemudian kita ingin merubahnya ? mudah sekali , sobat tinggal mencari kode awal dari widget tersebut dengan menekan CTRL (tahan) + F  lalu ketik kan di kotak pencarian kode seperti ini /*Custom Popular Post*/ , maka akan di temukan kode CSS dari widget default tersebut dan langkah selanjutnya hapus lalu copy paste salah satu kode di atas , kemudian klik Simpan Template .  Semoga bermanfaat dan Salam Kreatif .




0 Response to "Cara Mudah Membuat Popular Post Blog Berwarna Keren"

Posting Komentar

Terimakasih atas kunjungan Anda. Mohon untuk berkomentar dengan sopan, tidak mengandung kalimat yang berbau kekerasan atau kriminal dan melampirkan LINK url, Apabila ketentuan tersebut terjadi, maka akan kami hapus. Semua komentar tidak langsung terbit, sebab kami sesuaikan sesuai tema posting dan pertanyaan, kemudian akan di publikasikan berikut jawabannya. Salam Kreatif