Skip to main content

Cara Membuat Popular Post Yang Cantik Dan Stylish

Berikut saya akan sharing cara membuat popular post yang cantik dan stylish. Ga tanggung-tanggung saya kasih 3!! Cara mempercantik popular post di blog ini menggunakan kode css jadi loading blog tidak terlalu berat. Cara membuatnya relatif mudah karena hanya menambahkan kode css untuk Popular Post bawaan blogspot.

1. Membuat Popular Post

Pertama kita aktifkan dulu Popular Post di blog kita, caranya

Buka Dashboard blog kita >> Layout >> Add Gadget >> Popular Post

Note: matikan opsi untuk image thumbnail dan snippet

2. Menambahkan CSS


Ada dua cara menambahkan kode css:
Cara pertama: Buka dashboard >> Template >> Customise >> Advanced >> Add css >> tinggal kita paste kode css nya. dan Apply to Blog

Cara kedua: Blogger Dashboard >> Template >> Edit HTML >>  cari kode ]]>
 (gunakan CTRL+F untuk menemukannya) kemudian paste kode CSS tepat diatas ]]> kemudian Save

Berikut ketiga Kode CSS yang harus ditambahkan, pilih sesuai selera.

CSS 1:





/*---  Popular Posts --- */
    .popular-posts ul{padding-left:0px;}
    .popular-posts ul li {background: #FFF url(http://1.bp.blogspot.com/_7wsQzULWIwo/ SmodosCuJCI/AAAAAAAABh4/ZSXbVW9Qpa8/s400/261.gif) no-repeat scroll 5px 10px;
    list-style-type: none;
    margin:0 0 5px 0px;
    padding:5px 5px 5px 20px !important;
    border: 1px solid #dddddd;
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;}.popular-posts ul li:hover {
    border:1px solid #6BB5FF;
    }.popular-posts ul li a:hover {
    text-decoration:none;
    }

Note: warna bordernya bisa kita ubah (kode warna merah) untuk melihat kode warna bisa dilihat di http://html-color-codes.info/

CSS 2:



.sidebar .PopularPosts .widget-content ul li{
height: 100%;
line-height: 22px;
float: left;
clear: left;
list-style-type: none;
overflow: hidden;
color: gray;
}
.sidebar .PopularPosts .widget-content ul{margin:0;padding:5px 0;list-style-type:none;}
.sidebar .PopularPosts .widget-content ul li{position:relative;margin:5px 0;border:0;padding:10px;opacity:0.8;
-webkit-transition:all 0.4s;
-moz-transition:all 0.4s;
-ms-transition:all 0.4s;
-o-transition:all 0.4s;}

.sidebar .PopularPosts .widget-content ul li:hover {border-radius:30px 0px 0px 0px;margin-left:10px;opacity:1.0}
.sidebar .PopularPosts .widget-content ul li:first-child {background:#ff4c54;width:90%}
.sidebar .PopularPosts .widget-content ul li:first-child:after{content:"1"}
.sidebar .PopularPosts .widget-content ul li:first-child + li{background:#ff764c;width:80%}
.sidebar .PopularPosts .widget-content ul li:first-child + li:after{content:"2"}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li{background:#ffde4c;width:70%}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li:after{content:"3"}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li{background:#c7f25f;width:60%}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li:after{content:"4"}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li{background:#33c9f7;width:40%;padding-right:20px;}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li:after{content:"5"}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:30%}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li:after{content:"6"}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:20%}
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li:after{content:"7"}
.sidebar .PopularPosts .widget-content ul li:first-child:after,
.sidebar .PopularPosts .widget-content ul li:first-child + li:after,
.sidebar .PopularPosts .widget-content ul li:first-child + li + li:after,
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li:after,
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li:after,
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li:after,
.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li:after{position:absolute;top:15px;right:-5px;border-radius:9%;background:#353535;width:30px;height:40px;line-height:1em;text-align:center;font-size:22px;color:#fff;}
.sidebar .PopularPosts .widget-content ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:30px;height:90px}
.sidebar .PopularPosts .widget-content ul li a{font-size:12px;font-weight:bold;color:white;text-decoration:none;text-shadow:0px 0px 6px white;
-webkit-transition:all 0.4s;
-moz-transition:all 0.4s;
-ms-transition:all 0.4s;
-o-transition:all 0.4s;
}
.sidebar .PopularPosts .widget-content ul li a:hover{color:black;text-decoration:none;text-shadow:1px 1px 1px white;}


CSS 3:



#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}

Kode tersebut bisa juga kita ganti warnanya sesuai selera kita. Semoga bermanfaat!


Tutorial ini diadopsi dari:
www.stramaxon.com, www.careerandtricks.com, dan http://www.bloggertrix.com


Labels:

Comments

Post a Comment

terima kasih atas kunjungan anda apabila ada yang kurang jelas/ada link yang mati silahkan berkomentar dan juga berkomentar yang sopan,tidak spam

Popular posts from this blog

Cara Setting IDM agar aktif selamanya/full version

Cara Setting IDM agar aktif selamanya   Internet Download Manager   merupakan program download manager terbaik saat ini, fitur – fitur yang ada di dalamnya cukup lengkap. Selain digunakan untuk mendownload program, Internet Download Manager juga dapat digunakan untuk mendownload video di Youtube secara langsung atau bahkan di situs mana saja jika terdapat konten video atau musik. Nah, bagi Anda yang tertarik dengan software Internet Download Manager (IDM) ini , tidak ada salahnya untuk mencobanya dan bagi Anda yang masih mempunyai lisensi masa trial yang aktif, tidak kami sarankan untuk menggunakan tutorial ini. Jadi tutorial ini hanya kami rekomendasikan untuk Anda pengguna IDM yang memang masa trialnya sudah benar – benar habis (expired). Baiklah, kita akan memulai  Cara Setting IDM agar aktif selamanya . Ikut langkah – langkahnya dibawah ini. Langkah 1. Masa trial IDM sudah habis dan tidak berlaku Jika Anda menggunakan IDM trial, maka akan diberikan li...
42 comments
Read more

Makalah Akhlaqul karimah

BAB I PENDAHULUAN A.  Latar Belakang Masalah              Seiring dengan perkembangan zaman, di mana setiap manusia kini tengah disibukkan  dengan  urusan  duniawi,  sehingga melalaikan  kehidupan  yang  lebih kekal,  yaitu  akhirat.Oleh  karena  itu  timbullah  gejala-gejala  kemerosotan moral akhlak  yang  telah  sampai  pada  titik  yang  sangat  mencemaskan,  antara  lain dengan  bertambahnya    aneka  sumber  kemaksiatan  secara mencolok. Kenakalan remaja  pun  semakin  meningkat.Hal  ini  ditandai    semakin  banyaknya  terjadi dikalangan  remaja perbuatan-perbuatan yang menjurus kepada kriminalitas, seks bebas, perkelahian antar pelajar, korban narkoba dan dekadensi moral  lainnya.
5 comments
Read more

Sumber atau dasar pendidikan Islam

BAB I PENDAHULUAN 1.       Latar Belakang Masalah Sumber atau dasar pendidikan  Islam merupakan landasan pokok agar pendidikan Islam tegak berdiri tidak mudah roboh karena pengaruh-pengaruh ideologi yang muncul baik sekarang maupun yang akan datang.Seperti halnya bangunan,dasar itu sendiri sebagai fondamen yang tegak dan kokoh. Agama Islam adalah agama universal yang mengajarkan kepada umat manusia mengenai berbagai aspek kehidupan,dengan sumbernya yaitu AlQuran,hadits,dan ijtihad.Sumber-sumber ini dalam pribadi manusia bertujuan mewujudkan kesejahteraan hidup di dunia dan kebahagiaan di akhirat kelak.Serta menguatkan iman dan takwa manusia. 2.       Rumusan Masalah Dari latar belakang masalah di atas, maka kita sebagai calon pendidik perlu mengetahui bagaimana sumber atau dasar Ilmu Pendidikan Islam sebagai landasan pokok agar pendidikan Islam tegak berdiri dan tidak mudah roboh karena pengaruh-pengaruh ideologi ...
5 comments
Read more