Cara memasang popular post warna-warni pada blog- ternyata sangat mudah sekali loh untuk kalian pasang pada blog yang sedang kalian kelola sekarang ini, dan widget popular post yang akan admin kasih kali ini di ambil dari salah satu template yang sangat populer sekali yaitu template Evo Magz buatan mas sugeng.
Adapun untuk tampilan nya di sini admin akan kasih 3 macam tampilan popular post warna warni, jadi kalian tinggal pilih saja mana yang akan kalian pasang pada blog yang sedang kalian kelola sekarang ini.
Oke kita langsung saja menuju ke tutorialnya, silahkan lihat di bawah ini.
CARA MEMASANG POPULAR POST WARNA-WARNI PADA BLOG.
1) Masuk Blogger.
2) Pilih Tema => Edit HTML.
3) Lalu cari kode ]]></b:skin> atau bisa juga kode </style> gunakan tombol Ctrl-f untuk mempermudah pencarian.
4) Jika sudah kalian copy kode CCS populer post di bawah ini sesuai yang kalian ingin kan dan pastekan tepat di atas kode ]]></b:skin> atau </style> tadi.
Popular post style 1
/*Popular Post Style 1 By Riziq Design*/ .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}
popular post style 2 (mirip Evo Magz)
/* Popular Post Style 2 By Riziq Design */ .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:normal;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;} .widget-content ul li{margin:0;padding:6px 0px;border-bottom:1px solid #ededed} .widget-content ul li:last-child{border-bottom:medium none !important} .widget-content ul li a{color:#333} .widget-content ul li a:hover{color:#C80441} .item-date {font-size:11px;font-style:italic;font-weight:bold;color:#FFCC00}
Popular post style 3
/*Popular post Style 3 By Riziq Design */#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:70px;height:63px}#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"}#PopularPosts1ul{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}
Silahkan kalian pilih style popular post mana yang akan kalian pasang di blog milik kalian dan ingat kode CCS di atas harus di paste tepat di atas kode ]]></b:skin> atau kode </style>, dan jika sudah jangan lupa untuk menyimpan template, mungkin sampai di sini dulu pembahasan kali ini semoga bisa bermanfaat bagi kalian semua dan terimakasih atas kunjungannya ke blog Riziq Design.
0 Response to "Cara Memasang Popular Post Warna-warni pada Blog"
Posting Komentar