Skip to content Skip to sidebar Skip to footer

Cara membuat popular post rainbow pelangi dengan berbagai bentuk

Cara membuat popular post rainbow pelangi dengan berbagai bentuk

Banyak juga blogger yang suka mempercantik blognya dengan membuat popular post rainbow/pelangi. Sebenarnya bordernya bisa dibentuk dengan berbagai jenis seperti di entri aku sebelumnya tentang contoh-contoh jenis border blog, nah itu bisa diterapkan disini juga. Di bawah nanti aku akan memberikan contoh jenis bordernya sekalian penerapannya daripada aku harus menuliskan tutorialnya satu-persatu. Langkah-langkah cara membuat popular post rainbow pelangi dengan berbagai bentuk adalah sebagai berikut:

1. Masuk dashboard > template >edit HTML
2. Tick expand template widget dan tekan F3/CTRL + F dan cari kode  ]]></b:skin>
3. Copy paste kode di bawah ini dan letakkan di atas kode tadi:

#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:4px groove;color: #000;padding:10px;background:#fff;border-top-left-radius:25px;border-bottom-right-radius:25px;}


Kode di atas penerapannya adalah seperti gambar paling atas. Kalau ingin membuat model yang lain hanya perlu mengubah kode yang aku tandai dengan warna pink paling bawah dan jangan lupa untuk memberi tanda penutup css nya/tanda } contoh kode dan gambarnya adalah seperti di bawah ini:


Cara membuat popular post rainbow pelangi dengan berbagai bentuk

border:2px solid;color: #ccc;padding:10px;background:#fff;-moz-border-radius: 1em 4em 1em 4em; border-radius: 1em 4em 1em 4em;

Cara membuat popular post rainbow pelangi dengan berbagai bentuk

border:2px solid;color: #ccc;padding:10px;background:#fff;


Cara membuat popular post rainbow pelangi dengan berbagai bentuk

border:2px solid;color: #ccc;padding:10px;background:#ccc;border-top-left-radius:35px;border-top-right-radius:35px;border-bottom-left-radius:35px;border-bottom-right-radius:35px; 


Cara membuat popular post rainbow pelangi dengan berbagai bentuk

border:2px solid;color: #ccc;padding:10px;background:#ccc;-moz-border-radius: 35px 20px / 20px 35px; border-radius: 35px 20px / 20px 35px;

4. Tekan pratinjau dulu untuk melihat jadi apa gaknya,kalau jadi baru simpan template.

Silahkan untuk mengambil kodenya kalau suka, kalau ada pertanyaan silahkan tuliskan di komen.

10 comments for "Cara membuat popular post rainbow pelangi dengan berbagai bentuk"

  1. have a nice day and goodluck

    thanks for share

    ReplyDelete
  2. seger ya mba ngeliatnya, warna-warni :)

    ReplyDelete
  3. gan mau nanya, untuk saat ini tampilan edit html pada blogger sudah berubah, lantas bagaimana meletakkan kode css tadi ??? lalu apakah ada yang sudah menjadi script html dan langsung bisa dipasang pada widget ??? thanks

    ReplyDelete
    Replies
    1. kode popular post pelangi ini memang harus dimasukkan dalam template edit HTML sebenarnya cukup mudah untuk mencari kode b:skin yang letaknya ada di bawah kode2 css2,kode2 css yang dimasukkan ke dalam template html juga akan mengurangi error validasi w3c,nanti kita juga pasti akan terbiasa dalam mengedit dengan memakai template editor yang barusaja berubah xD.

      Delete
    2. wkwkwk muter muter ketemu wong kie maning :D
      yen go wordpress iso ora mbok??

      by alwi chelung

      Delete
    3. iso juga paling wi wohoho cobo jajal sik dadi ra,soale aku belom pernah lihat template wp hihihi...jangan bosan2 main kesini ya :p :d

      Delete