Cara mudah membuat dan Memasang Popular Post Bagus Pada Blog



Cara memasang popular post yang bagus dan unik pada blog dengan tampilan list bawah.



Assallamualaikum,Selamat malam semua,Pada kesempatan kali ini saya akan membagikan artikel untuk blog lagi yang merupakan hasil penemuan di google.Haha ia ini penemuan sebuah ilmu,karena setahu saya ilmu internet dan teknologi itu gratis.Gratis bila bisa mengetahui segala cara kerjanya maupun cara mengoprasikannya.

Dan tentu saja cara praktekannya dapat di lakukan dengan diri sendiri dan gurunya juga guru sendiri Yaitu sesama Blogger.Mengapa demikian ? Bukankah ketika kita mencari sesuatu di internet ? Kita dulu yang mengawali hal tersebut dengan kata kunci yang telah di jadikan sebagai topik permasalahan.Bisa saja jawabanya iya.

Pada kesempatan tengah malam hari ini saya akan memposting mengenai Popstingan popular post yang berada di samping konten blog anda,Ada apa dengannya ? Tidak ada apa-apa karena ini hanyalah ulasan singkat,Apabila anda masuk ke blog ini ,sudah pasti anda mencarinya untuk di terapkan pada blog anda,Agar blog anda tampil lebih beda dan simpel.

Yaitu mengenai Kode Html untuk merubah atau memasang popular post dengan tampilan yang lebih keren ,lebih bagus,lebih Friendly dan lebih mudah pengunjung dalam menjelajahi semua isi blog.Karena tampilan yang bermodel list ke bawah dan thumbanil image yang aktif.Inilah postingan Blog inajsense pada malam hari ini.

Cara memasang Popular Post keren dan dinamis Pada blogger.
Sebelum melangkah pada kode html nya ,alangkah baiknya anda mengetahui kebergunaan atau manfaat dari memasang popular post pada blog.Mungkin anda lebih tahu hal itu.

Akan tetapi kalau menurut saya ialah agar blog terlihat terisi rapi dan memudahkan setiap pengunjung untuk membaca artikel blog tambahan anda,seusai mendapatkan topik yang di inginkan melalui pencarian google sehingga sampai  pada blog anda.Langsung saja simak inilah langkah memasang popular post.

#.Popular Post 1
  • Langkah pertama yang harus dilakukan adalah Masuk ke akun blogger,Pilih theme dan klik edit template
  • Jika sudah maka silahkan copy kode html popular postnya di bawah ini.
/* Popular Post */
.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 {color:#444 !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:#E1F3FD;margin-right:1% !important}
.PopularPosts ul li:nth-child(2) {background-color:#EDE3F2;margin-right:1% !important}
.PopularPosts ul li:nth-child(3) {background-color:#EFF8DD;margin-right:1% !important}
.PopularPosts ul li:nth-child(4) {background-color:#FEF6E1;margin-right:1% !important}
.PopularPosts ul li:nth-child(5) {background-color:#FEE4E3;margin-right:1% !important}
.PopularPosts ul li:nth-child(6) {background-color:#E1F3FD;margin-right:1% !important}
.PopularPosts ul li:nth-child(7) {background-color:#EDE3F2;margin-right:1% !important}
.PopularPosts ul li:nth-child(8) {background-color:#EFF8DD;margin-right:1% !important}
.PopularPosts ul li:nth-child(9) {background-color:#FEF6E1;margin-right:1% !important}
.PopularPosts ul li:nth-child(10) {background-color:#FEE4E3;margin-right:1% !important}
.PopularPosts .item-thumbnail {margin:0 0 0 0;}
.PopularPosts .item-snippet {font-size:11px;}

.profile-img{display:inline;opaciry:10;margin:0 6px 3px 0;}


  • Cara pemasangan,di bagian edit template silahkan tekan ctrl f dan masukan Tag ]]></b:skin> Kemudian paste kode tepat di atas tag skin tersebut.Jika sudah klik save dan lihat hasilnya seperti gambar di bawah.


#.Popular Post 2

  • Langkah pertama yang harus di lakukan adalah masuk ke menu dasbor Blogger,klik tema dan edit template.
  • Jika sudah silahkan copy kode html di bawah ini dan pastekan pada template blog anda.
/* Popular Post */
#PopularPosts1 ul{list-style:none;counter-reset:li;padding:8px 0px 1px;left:-7px;width: auto;margin-left: 25px;}
#PopularPosts1 li{position:relative;margin:0 0 10px 0;padding: 3px 2px 0 17px;left:-5px;width:auto;}
#PopularPosts1 ul li{background: #eee;position: relative;display: block;padding: .4em .2em .4em 2em;*padding: .2em;margin: .5em 0;background: #ddd;text-decoration: none;border-radius: .3em;transition: all .3s ease-out;}
#PopularPosts1 ul li:before{content: counter(li);counter-increment: li;
position: absolute;top: 50%;margin: -1.3em;height: 2em;width: 2em;line-height: 2em;font-size: 15px;
color: #fff; /* text color of numbers */background: #FB8835; /* background color of numbers */
border: .2em solid #fff; /* border color */-webkit-box-shadow: 0 8px 5px -7px #888;
-moz-box-shadow: 0 8px 5px -7px #888;box-shadow: 0 8px 5px -7px #888;
text-align: center;font-weight: bold;border-radius: 2em;
position: absolute;left: 0;transition: all .3s ease-out;}
#PopularPosts1 ul li:hover{background: #eee;}
#PopularPosts1 ul li:hover:before{transform: rotate(360deg);}
#PopularPosts1 ul li a{font: 12px Georgia, serif; /* font size of post titles */text-shadow: 0 -1px 2px #fff;
color: #444;display:block;min-height:25px;text-decoration:none;
text-transform: capitalize;}
#PopularPosts1 ul li a:hover{color: #444;}


  • Untuk cara pemasangan mungkin sudah anda ketahui seperti cara di atas ya,tempat melettakan kode htmlnya.dan untuk di lihat inilah gambar dari popular post di atas.


Itulah dua tampilan popular post yang bisa di gunakan pada blog anda ,agar tampilan menu popular post pada blog anda lebih terlihat keren dengan gaya tambahan.yang dapat membuat blog tampil creatif.Memasangkan kode html popular post pada blog dapat di lakukan belakangan,artinya bisa juga walaupun tidak menyusun sendiri css template tersebut.

Apabila dari kedua di atas ada yang di inginkan maka silahkan saja di coba dan pakai untuk blog anda secara gratis.

#Kesimpulan:
Popular post bertujuan untuk menampilkan postingan blog baik pada pertama kali di update dan bisa juga yang paling banyak di kunjungi.Ada fungsi lainnya juga agar blog tetap bisa di jelajahi dengan sangat mudah oleh setiap pengunjung yang berkunjung baik dari google pencarian atau link direct dari media sosial atau yang lainnya.

Fungsi lainnya ialah dapat membuat blog menjadi lebih efektip dalam Seo yang bisa menunjang segala kebutuhan pengelola Blog.Seperti menjadikan sebuah blog sebagai marketing online.
/div>


Artikel Terkait

Postingan populer dari blog ini

Begini Cara Memasang iklan penelusuran bersponsor google adsense Di Blog

Membuat Related Post Grid Untuk Template AMP Blogger

Download Template Igniel versi premium Gratis

Cara Menampilkan Traffic Data Koneksi Internet Pada Laptop

Koleksi Symbol Text Keren Untuk Blog Dan Sosial Media

Tutorial Full Flash Smartphone OPPO A37 ,Lupa Pola

Cara Mengatasi Gagal Install Driver VGA Pada windows 7 All version

Cara membuat Link Model no follow dan Do follow

Cara Membuat Kotak Script Border Dan Scroll Pada Blog

Cara Membuat Akun Google Adsense Hosted Terbaru