Skip to HeaderSkip to PostSkip to Footer

Cara Membuat Widget Popular Post Warna Warni

Table of Content
    Cara Membuat Widget Popular Post Warna Warni - Halo Sobat Blogger.. Sudah lama saya tidak update artikel ya. Kali ini Saya akan Membuat Sekaligus membagikan kepada Sobat Sobat Tentang Cara Membuat Widget Popular Post Warna Warni.

    Cara Membuat Widget Popular Post Warna Warni
    Gambar Widget Popular Post
    Widget Popular Post Adalah Widget yang memuat artikel artikel yang sering di baca oleh visitor blog kita. Otomatis Artikel Itu Menarik Dan Suka Di Baca Pengunjung. Nah, Jika Pengunjung Lain Suka Artikel itu, Orang Lain Pun akan tertarik Untuk Membaca Artikel itu dengan mengeklik Artikel Populer di Widget Popular Post. Supaya Orang Lain Tertuju Pada Widget Popular Post Yang Kita Pasang, Kita Harus Membuat Widget Itu Semenarik Mungkin Dengan Cara Memberi Warna Menarik Pada Widget Tersebut. Kali ini Kita Akan Membahas Tutorialnya.

    Tutorial

    1. Pasang Widget Popular Post Dengan Cara Masuk Tata Letak => Tambahkan Widget => Artikel Populer lalu centang sesuai keinginan sobat masing masing.

    2. Kemudian Masuk ke Template => Edit HTML

    Tambahkan Code CSS Berikut di atas Code ]]></b:skin> atau </style>  



    /* Popular Post Full Color */
    .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%}

    3. Kemudian Save Template Dan Lihat Hasilnya.  :D

    Gimana ? Mudahkan....
    Itulah Artikel yang Sangat Singkat dari saya... semoga bermanfaat... :)

    Comments

    Post a Comment

    This is a comment message for you.