Cara Membuat Popular Post Keren




Cara Membuat Popular Post Keren
Cara Membuat Popular Post Keren
Pada kesempatan kali ini saya akan berbagi tips sedikit mengenai cara membuat widget popular post seperti yang ada di blog ini, popular post yang dilengkapi dengan nomordan pasti anda sudah tidak sabar lagi untuk membuatnya kan..langsung saja anda peraktekan ya.

# Membuat Popular Post Blog Dengan Nomor

Membuat Popular Post Blog Dengan Nomor

1. Pertama Log in ke akun blogger 

2. dan Klik tata letak tambahkan widget popular post

3. KEmudian  anda tambahkan widgetnya lalu pergi ke template dan klik edit HTML
5. Nah Cari kode berikut ]]></b:skin> letakkan kode dibawah ini tepat diatas kode tersebut:


.popular-posts ul {
padding-left: 0px;
counter-reset: popcount;
}
.popular-posts ul li:before {
list-style-type: none;
margin-right: 15px;
padding: 0.3em 0.6em;
counter-increment: popcount;
content: counter(popcount);
font-size: 16px;
background: #359bed;
color: #ffffff;
position: relative;
font-weight: bold;
font-family: georgia;
float: left;
border: 2px solid #dddddd; 
}
.popular-posts ul li {
border-bottom: 1px dashed #dddddd;
}
.popular-posts ul li:hover {
border-bottom: 1px dashed #696969;
}
.popular-posts ul li a {
text-decoration:none; color:#5A5F63;
}
.popular-posts ul li a:hover {
text-decoration:none;
}


6. Terakhir anda Klik pratinjau, jika semuanya berjalan lancar klik simpan.



# Cara Membuat Popular post Keren Warna Warni 

Popular post kali ini adalah lanjutan. Widget popular post kali ini adalah popular post colorfull dengan penomoran.

Cara Membuat Popular post Keren Warna Warni

1. Log in ke akun blogger sobat

2. Klik template dan edit HTML

3. Cari kode berikut ]]></b:skin> setelah ketemu tempatkan kode berikut ini tepat diatas kode tadi yang saya sebutkan.

.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 "Arial Narrow",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 & level */
.PopularPosts ul li:nth-child(1) {background-color:#E11E28;margin-right:1%}
.PopularPosts ul li:nth-child(2) {background-color:#FD3C03;margin-right:2%}
.PopularPosts ul li:nth-child(3) {background-color:#FECB09;margin-right:3%}
.PopularPosts ul li:nth-child(4) {background-color:#6EBE27;margin-right:4%}
.PopularPosts ul li:nth-child(5) {background-color:#149A48;margin-right:5%}
.PopularPosts ul li:nth-child(6) {background-color:#5BBFF1;margin-right:6%}
.PopularPosts ul li:nth-child(7) {background-color:#61469C;margin-right:7%}
.PopularPosts ul li:nth-child(8) {background-color:#863E86;margin-right:8%}
.PopularPosts ul li:nth-child(9) {background-color:#863E62;margin-right:9%}
.PopularPosts ul li:nth-child(10) {background-color:#815540;margin-right:10%}
4. Klik pratinjau lalu klik simpan.

# Membuat Popular post Blog Berwarna Warni 

Popular post adalah widget pada blog yang menampilkan artikel yang paling banyak dibaca oleh pengunjung.

Cara Membuat Popular post Blog Berwarna Warni


1. anda Log in ke blogger

2. Dan Klik tata letak lalu tambahkan widget popular post

3. Pada setingan popular post hilangkan centang thumbnail dan seting min 9 tampilan popular post.
4. Selanjutnya simpan lalu klik template dan edit HTML
5. Cari kode berikut ini ]]></b:skin> setelah ketemu tempatkan kode berikut tepat diatas kode yang anda cari 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-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}

6. Klik pratinjau template jika semuanya lancar klik simpan.

# Cara Membuat Popular Post Blog Sederhana Tapi Keren 

Widget popular post bawaan standar blogger menurut sebagian orang tampil kurang menarik, berikut adalah tuorial cara membuat widget popular post blog secara sederhana namun keren:
Cara Membuat Popular Post Blog Sederhana Tapi Keren

1. Anda Log in ke akun blogger sobat

2. Klik tata letak/ tambahkan widget popular post

3. Pada pengaturan popular post hilangkan image pada thumbnail dan snippet.
4. Simpan lalu lanjutkan  ke tamplate dan edit HTML
5. Cari kode berikut ]]></b:skin> dan anda tambahkan kode berikut ini tepat diatas kode yang saya sebutkan diatas.

/*--- Genera Popular Posts --- */
    .popular-posts ul{padding-left:0px;}
    .popular-posts ul li {
    background: url("http://4.bp.blogspot.com/-7CHpNrL3BIY/UQFD2sPq6LI/AAAAAAAAI8E/Jibvq813XCE/s400/33.gif") no-repeat scroll 5px 8px rgb(255, 255, 255);
    list-style-type: none;
    margin: 0px 0px 5px;
    padding: 5px 5px 5px 20px !important;
    border: 1px solid #dddddd;
    border-radius: 10px 10px 10px 10px;
    }
    .popular-posts ul li:hover {
    border:1px solid #666666;
    }
    .popular-posts ul li a:hover {
    text-decoration:none;
    }

6. Klik pratinjau jika tidak terjadi eror klik simpan.

# Membuat Popular Post Thumbnail 

 Popular post ini hanya menampilkan gambar tetapi saat gambar disorot mouse akan keluar tampilan dari judul popular post yang kita sorot, caranya cukup mudah berikut adalah tutorialnya:


1. Log in ke blogger

2. Klik tata letak tambahkan gadget popular post

3. Lalu klik Template dan edit HTML
4. Cari kode berikut ]]></b:skin> lalu tempatkan kode berikut ini tepat diatasnya:

#PopularPosts1 {width:100%;background:none;} 
#PopularPosts1 .widget-content {margin: 0 !important; } 
#PopularPosts1 ul {margin: 0 !important; padding: 0 !important; } 
#PopularPosts1 ul li {background:none ;list-style-type: none;margin:0;
padding:0 !important} 
#PopularPosts1 ul li .item-title{display:none} 
#PopularPosts1 li {float:left;list-style:none;} 
#PopularPosts1 .item-thumbnail img {float:left;margin-bottom:3px;
width:90px;height:90px;border:none;transition:all 400ms ease-in-out;} 
#PopularPosts1 .item-thumbnail img:hover {opacity:.7}

5. Dilanjutkan cari kode seperti yang mirip dibawah ini:

<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>


6. Setelah ketemu ganti kode diatas dan ganti menggunakan kode seperti dibawah ini:
<!-- (3) Show only thumbnails --> 
<div class='item-thumbnail'> <a expr:href='data:post.href' expr:title='data:post.title' target='_blank'> <img alt='thumbnails' expr:src='data:post.thumbnail'  expr:title='data:post.title' height='90' width='90'/> </a> </div>

 Ini merupakan ukuran tinggi dan lebar gambar, ubah sesuai keinginan anda


7. maka jangan lupa Klik pratinjau dan jika semuanya lancar klik simpan.

# Membuat Popular Post Keren Scroll ke Bawah

Membuat Popular Post Keren Scroll ke Bawah

 Cara membuat widget popular post scroll ke bawah secara otomatis. jika anda ingin ikuti langkah-langkahnya.



1. Log in ke akun blogger sobat

2. Masuk tata letak klik add a gadget/ tambahkan widget
3. Tambahkan widget popular post
4. Jika klik template dan edit HTML

5. Cari kode yang mirip dengan kode berikut ini:

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>

5. Setelah ketemu tempatkan kode dibawah ini persis dibawah kode diatas:

<marquee align='left' direction='up' height='140' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='3' width='100%'>

6. Setelah sudah dipasang lalu kita tutup dengan </marquee> tepat dibawah kode </ul> sehingga susunannya menjadi seperti ini:

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<marquee align='left' direction='up' height='140' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='3' width='100%'> 
    <b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>
   <............>
      </b:loop>
    </ul> 
</marquee>


gg  Merupakan kode yang dicari

gg  Merupakan kode yang ditambahkan 
gg  Merupakan kode yang panjang jadi saya menyingkatnya

7. Klik pratinjau jika tidak terjadi eror klik simpan.

Nah sampai disini dulu penjelasaanya mengenai Cara Membuat Popular Post Keren di blog anda, semoga bisa bermanfaat dan selamat mencoba..terimaksih sudah berkunjung.

Share Google URL Shortener: Get Short URLloading short url

Bila Anda merasa memang artikel-artikel di blog ini bisa bermanfaat, maka Anda bisa membantu memberikan donasi melalui Paypal Dana hasil dari donasi akan digunakan untuk memperpanjang domain mizipedia.com - Terima kasih.



Comment Policy Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Peraturan Berkomentar di mizipediacom
1. Berkomentarlah dengan Relevan dan Sopan
2. Jangan Spam
3. Tidak Porn dan Sara
4. Berkomentar dengan link tanpa relevan maka akan otomatis terhapus
5. Semua komentar pasti akan saya baca dan dibalas. Show Emoticon. Klik ==>


Join on this site

with Google Friend Connect