IBX5A5D7242811CD -->
» » » Cara Merubah Tampilan Post Popular (Popular Post) Menjadi Lebih Keren

Cara Merubah Tampilan Post Popular (Popular Post) Menjadi Lebih Keren

, Edit


Haiii.... selamat datang di kupihitam blog sekarang kita akan membahas agar popular post di blog anda keren, yuk silahkan simak di bawah ini

MEMBUAT POPULAR POST KEREN


  • Masuk Dashboard Blogger (Masuk disini)
  • Pilih Menu Tata Letak
  • Tambahkan Gadget
  • Pilih Popular Post (Pos Populer)
  • Simpan
Jika sudah, silakan ikuti langkah berikut ini, dengan memilih tampilan sesuai yang anda inginkan. 
  • Masuk Dashboard Blogger (Masuk disini)
  • Pilih Menu Template (Tema)
  • Tekan CTRL+F, kemudian ketikkan </style>
  • Letakkan kode ini tepat di atas </style>  
Salin semua kode
/* 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;
    background:none;
    outline:none;
}
.PopularPosts ul {
    margin:.5em 0;
    list-style:none;
    color:black;
    counter-reset:num;
    border-left:4px solid #0066ff;
}
.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 0 0 0 !important;
    padding:10px 20px 10px 10px !important;
    counter-increment:num;
    position:relative;
    border-bottom:1px solid #f0f0f0;
}
.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;
    font-family:arial, sans-serif !important;
    font-size:12px;
    font-weight:bold !important;
    display:block;
    position:absolute;
    top:18px;
    right:-5px;
    border-radius:16px;
    background-color:#333;
    color:#fff !important;
    width:25px;
    height:25px;
    line-height:25px;
    text-align:center;
    padding-right:0px !important;
    border:2px solid #0066ff;
}
.PopularPosts ul li:nth-child(1) {
    background-color:#ffffff;
}
.PopularPosts ul li:nth-child(2) {
    background-color:#ffffff;
}
.PopularPosts ul li:nth-child(3) {
    background-color:#ffffff;
}
.PopularPosts ul li:nth-child(4) {
    background-color:#ffffff;
}
.PopularPosts ul li:nth-child(5) {
    background-color:#ffffff;
}
.PopularPosts ul li:nth-child(6) {
    background-color:#ffffff;
}
.PopularPosts ul li:nth-child(7) {
    background-color:#ffffff;
}
.PopularPosts ul li:nth-child(8) {
    background-color:#ffffff;
}
.PopularPosts ul li:nth-child(9) {
    background-color:#ffffff;
}
.PopularPosts ul li:nth-child(10) {
    background-color:#ffffff;
}
.PopularPosts .item-thumbnail {
    margin:0 0 0 0;
}
.PopularPosts .item-snippet {
    font-size:11px;
}
.profile-img {
    display:inline;
    opacity:10;
    margin:0 6px 3px 0;
}
/* POPULAR POST WIDGET */
  • Simpan Tema
 
Popular Post 2:

  • Masuk Dashboard Blogger (Masuk disini)
  • Pilih Menu Template (Tema)
  • Tekan CTRL+F, kemudian ketikkan </style>
  • Letakkan kode ini tepat di atas </style>  
Salin semua kode
/* 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{
    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
}
.PopularPosts ul li:nth-child(1){
    background-color:#fff;
}
.PopularPosts ul li:nth-child(2){
    background-color:#fff;
}
.PopularPosts ul li:nth-child(3){
    background-color:#fff;
}
.PopularPosts ul li:nth-child(4){
    background-color:#fff;
}
.PopularPosts ul li:nth-child(5){
    background-color:#fff;
}
.PopularPosts ul li:nth-child(6){
    background-color:#fff;
}
.PopularPosts ul li:nth-child(7){
    background-color:#fff;
}
.PopularPosts ul li:nth-child(8){
    background-color:#fff;
}
.PopularPosts ul li:nth-child(9){
    background-color:#fff;
}
.PopularPosts ul li:nth-child(10){
    background-color:#fff;
}
.PopularPosts .item-thumbnail{
    margin:0 0 0 0
}
.PopularPosts .item-snippet{
    font-size:11px
}
/* POPULAR POST WIDGET*/
  • Simpan Tema
Popular Post 3

  • Masuk Dashboard Blogger (Masuk disini)
  • Pilih Menu Template (Tema)
  • Tekan CTRL+F, kemudian ketikkan </style>
  • Letakkan kode ini tepat di atas </style>  
Salin semua kode
/* 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 3em .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;
}
.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;
    opacity:10;
    margin6px 3px 0;
}
/* POPULAR POST WIDGET */
  • Simpan Tema

Sekarang tampilan Popular Post sudah berubah sesuai yang kalian inginkan.

0 Response to "Cara Merubah Tampilan Post Popular (Popular Post) Menjadi Lebih Keren"

Post a Comment

Subscribe to: Post Comments (Atom)