» » Cara Membuat Populer Post Menarik dan Berwarna

Cara Membuat Populer Post Menarik dan Berwarna

Edit

Cara Membuat Popular Post Berwarna Keren di Blog

Cara Membuat Populer Post Menarik dan Berwarna
Cara Membuat Populer Post Berwarna-  Populer post adalah artikel yang sering dikunjungi di blog. Pada artike ini akan membagi tips bagaimana agar tampilannya lebih menarik jadi tidak membosankan. Caranya cukup mudah tanpa perlu repot edit banyak.

Cara Memasang Populer Post Keren di Blog

  • Masuk ke akun blogger yang inging dipasang.
  • Jika populer post belum dipasang, pasang dulu dengan masuk ke bagian tata letak kemudian tambahkan gadget dan setting ingin seperti apa yang akan ditampilkan nanti.

  • Ada beberapa contoh script di bawah ini yang bisa kalian aplikasikan di blog, cukup ke template => edit HTML kemudian cari ]]></b:skin> dan copy script di atas kode itu. Kalian bisa memilih script sesuai tampilan yang sesuai

1. 

Cara Membuat Populer Post Menarik dan Berwarna

/*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}

2. 

Cara Membuat Populer Post Menarik dan Berwarna
<style type='text/css'> /*----- POPULAR POST WARNA WARNI -----*/ #PopularPosts1 ul li a:hover{color:#fff;text-decoration:none} #PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;  color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;} #PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px} #PopularPosts1 ul li:first-child:after, #PopularPosts1 ul li:first-child + li:after, #PopularPosts1 ul li:first-child + li + li:after, #PopularPosts1 ul li:first-child + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"} #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"} #PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"} #PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"} #PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%} #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"} #PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%} #PopularPosts1 ul li:first-child + li + li:after{content:"3"} #PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%} #PopularPosts1 ul li:first-child + li:after{content:"2"} #PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%} #PopularPosts1 ul li:first-child:after{content:"1"} #PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none} #PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px} </style> - 

3.  Cara membuat populer post berwarna mungkin yang ini terlihat polos tapi tumbalis dapat berputar menjadikan lebih menari

Cara Membuat Populer Post Menarik dan Berwarna
#PopularPosts1 ul{margin:0;padding:4px 0;list-style-type:none}#PopularPosts1 ulli{position:relative;margin:4px 0;border:0;padding:10px}#PopularPosts1 ulli:first-child{background:#ff4c54;width:90%}#PopularPosts1 ulli:first-child:after{content:"1"}#PopularPosts1 ulli:first-child + li{background:#ff764c;width:87%}#PopularPosts1 ulli:first-child + li:after{content:"2"}#PopularPosts1 ulli:first-child + li + li{background:#ffde4c;width:84%}#PopularPosts1 ulli:first-child + li + li:after{content:"3"}#PopularPosts1 ulli:first-child + li + li + li{background:#c7f25f;width:81%}#PopularPosts1 ulli:first-child + li + li + li:after{content:"4"}#PopularPosts1 ulli:first-child + li + li + li + li{background:#33c9f7;width:78%}#PopularPosts1 ulli:first-child + li + li + li + li:after{content:"5"}#PopularPosts1 ulli:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}#PopularPosts1 ulli:first-child + li + li + li + li + li:after{content:"6"}#PopularPosts1 ulli:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}#PopularPosts1 ulli:first-child + li + li + li + li + li + li:after{content:"7"}#PopularPosts1 ulli:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}#PopularPosts1 ulli:first-child + li + li + li + li + li + li + li:after{content:"8"}#PopularPosts1 ulli:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}#PopularPosts1 ulli:first-child + li + li + li + li + li + li + li + li:after{content:"9"}#PopularPosts1 ulli:first-child:after,#PopularPosts1 ulli:first-child + li:after,#PopularPosts1 ulli:first-child + li + li:after,#PopularPosts1 ulli:first-child + li + li + li:after,#PopularPosts1 ulli:first-child + li + li + li + li:after,#PopularPosts1 ulli:first-child + li + li + li + li + li:after,#PopularPosts1 ulli:first-child + li + li + li + li + li + li:after,#PopularPosts1 ulli:first-child + li + li + li + li + li + li + li:after,#PopularPosts1 ulli:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;text-align:center;font-size:28px;color:#fff}#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}#PopularPosts1 ul li a{font-size:13px;color:#444;text-decoration:none}#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}#PopularPosts1 img{-moz-border-radius: 130px;-webkit-border-radius: 130px;border-radius: 130px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;padding:4px;border:1px solid #fff !important;}#PopularPosts1 img:hover {border-radius: 0 0 0 0;-moz-transform: scale(1.2) rotate(-711deg) ;-webkit-transform: scale(1.2) rotate(-711deg) ;-o-transform: scale(1.2) rotate(-711deg) ;-ms-transform: scale(1.2) rotate(-711deg) ;transform: scale(1.2) rotate(-711deg) ;}

4. 

Cara Membuat Populer Post Menarik dan Berwarna
.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;
  font:normal normal 13px/1.4 &quot;Arial Narrow&quot;,Arial,Sans-Serif;
  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;
  padding:.5em 1.5em .5em .5em;
  counter-increment:num;
  position:relative;
}
.PopularPosts ul li:before,
.PopularPosts ul li .item-title a {
  font-weight:bold;
  font-size:120%;
  color:inherit;
  text-decoration:none;
}
.PopularPosts ul li:before {
  content:counter(num);
  display:block;
  position:absolute;
  background-color:black;
  color:white;
  width:30px;
  height:30px;
  line-height:30px;
  text-align:center;
  top:50%;
  right:-10px;
  margin-top:-15px;
  -webkit-border-radius:30px;
  -moz-border-radius:30px;
  border-radius:30px;
}
/* Set color and level */
.PopularPosts ul li:nth-child(1) {background-color:#E11E28;margin-right:2%}
.PopularPosts ul li:nth-child(2) {background-color:#FD3C03;margin-right:2%}
.PopularPosts ul li:nth-child(3) {background-color:#FECB09;margin-right:2%}
.PopularPosts ul li:nth-child(4) {background-color:#6EBE27;margin-right:2%}
.PopularPosts ul li:nth-child(5) {background-color:#149A48;margin-right:2%}
.PopularPosts ul li:nth-child(6) {background-color:#5BBFF1;margin-right:2%}
.PopularPosts ul li:nth-child(7) {background-color:#61469C;margin-right:2%}
.PopularPosts ul li:nth-child(8) {background-color:#863E86;margin-right:2%}
.PopularPosts ul li:nth-child(9) {background-color:#863E62;margin-right:2%}
.PopularPosts ul li:nth-child(10) {background-color:#815540;margin-right:2%}

Oke itulah cara membuat populer post berwarna semoga bermanfaat dan berhasil percobaannya.

Baca Juga: Perawatan dan membersihkan hardware pada komputer

Subscribe to receive free email updates:

1 Response to "Cara Membuat Populer Post Menarik dan Berwarna"

  1. Buy Contact LensesSeptember 4, 2017 at 8:57 PM

    Blogging is the new poetry. I find it wonderful and amazing in many ways.

    ReplyDelete

Subscribe to: Post Comments (Atom)