New Best 5 Style Widget Popular Post Blogger

New Best 5 Style Widget Popular Post Blogger

Cara Merubah Tampilan Widget Popular Post Di Blogger

Cara menciptakan widget popular post for blogger dengan style terbaru 2016, pada kesempatan kali ini mas tamvan akan membuatkan desain 5 style widget popular post untuk bloger, bagi kalian yang suka mendesain blognya supaua tampil rapih dan elegan tampaknya cocok untuk dipasang beberapa widget popular post yang sudah mas tamvan sediakan ini.

Contoh Tampilan Best 5 Style widget popular post for blogger

Result

Baca Juga tutorial menarik lainnya dari blog mas tamvan.

Tutorial Blogger Lainnya :

• Cara Praktis Membuat Video Di Blog Responsive

• Cara Membuat Widget Pop Up Card Di Blogger

• Cara Baru Membuat Banner Iklan Blog Melayang Kiri Kanan

Sebelum mendesain atau merubah code css pada blogger kalian, sebaiknya setting terlebih dahulu pada bab widget popular post di bab tataletak, sebagai referensi lihat gambar dibawah ini.

Nah Kalo sudah di atur menyerupai itu, kini kita lanjut ke pemasangan CSS dan Javascriptnya, ikuti langkah demi langkah tutorial memasng widget popular post di bawah ini.

Cara Membuat Widget Popular Post Terbaru

Silahkan Pilih Salah Satu CSS style Popular post dibawah ini

 .sidebar .PopularPosts ul { margin: 0; padding: 0; } .sidebar .PopularPosts ul li { list-style: none !important; padding: 0 !important; margin-bottom: 10px; } .sidebar .PopularPosts .item-thumbnail { height: 190px; margin: 0; overflow: hidden; width: 100%; } .sidebar .PopularPosts .item-title { position: relative; } .sidebar .PopularPosts img { height: 100%; width: 100%; object-fit: cover; } .sidebar .PopularPosts .item-title a { color: #FFFFFF; font: 15px 'Oswald', sans-serif; text-transform: uppercase; font-size: 20px; padding: 10px; position: absolute; right: 0; left: 0px; margin: 0px auto; text-align: center; text-decoration: none; top: 40px; width: 60%; height: 26px; overflow: hidden; z-index: 2; } .sidebar .PopularPosts .item-snippet { background: rgba(0, 0, 0, 0.35); border-top: 6px solid rgba(0, 0, 0, 0.1); border-bottom: 6px solid rgba(0, 0, 0, 0.1); color: #FFFFFF; left: 0px; right: 0px; margin: 0px auto; padding: 65px 10px 10px; position: absolute; font: 13px "Times New Roman",Times,FreeSerif,serif; text-align: center; top: 35px; width: 60%; z-index: 1; } .sidebar .PopularPosts .item-content { position: relative; } 

 .sidebar .PopularPosts ul { counter-reset: popularcount; margin: 0; padding: 0; } .sidebar .PopularPosts ul li { width: 100%; list-style: none !important; padding: 0 !important; margin-bottom: 20px; position: relative; border: 0; } .sidebar .PopularPosts .item-thumbnail a { clip: auto; display: block; height: auto; height: 120px; } .sidebar .PopularPosts .item-thumbnail { width: 100%; position: relative; margin-bottom: 15px; } .sidebar .PopularPosts .item-thumbnail::before { background: rgba(0, 0, 0, 0) none repeat scroll 0 0; border-bottom: 29px solid #fff; border-left: 29px solid transparent; border-right: 29px solid transparent; bottom: 0px; content: ""; height: 0; width: 0px; left: 0px; right: 0px; margin-left: auto; margin-right: auto; position: absolute; z-index: 3; } .sidebar .PopularPosts .item-thumbnail:after { color: #000; content: counter(popularcount, decimal); counter-increment: popularcount; font: 13px "Times New Roman",Times,FreeSerif,serif; list-style-type: none; position: absolute; bottom: 0; text-align: center; margin: 0px auto; left: 0px; right: 0px; z-index: 4; } .sidebar .PopularPosts .item-thumbnail img { position: relative; width: 100%; height: 120px; object-fit: cover; } .sidebar .PopularPosts .item-title { font: 15px 'Oswald', sans-serif; text-transform: uppercase; text-align: center; margin: 0px auto; padding-bottom: 10px; border-bottom: 1px solid #000; } .sidebar .PopularPosts .item-title a { color: #000; text-decoration: none; } .sidebar .PopularPosts .item-snippet { padding: 10px 15px; font: 13px "Times New Roman",Times,FreeSerif,serif; text-align: center; } 

 .sidebar .PopularPosts ul { padding: 0; margin: 0; } .sidebar .PopularPosts .item-thumbnail a { clip: auto; display: block; height: auto; overflow: hidden; } .sidebar .PopularPosts .item-thumbnail { width: 130px; height: 130px; border-right: 5px solid #fff; margin: 0px 10px 0px 0px !important; position: relative; } .sidebar .PopularPosts .item-thumbnail img { position: relative; height: 100%; width: 100%; object-fit: cover; } .sidebar .PopularPosts ul li { float: left; margin-bottom: 5px; max-height: 130px; min-width: 250px; overflow: hidden; } .sidebar .PopularPosts ul li:first-child { background: #D9EDF7; } .sidebar .PopularPosts ul li:first-child + li{ background: #F2DEDE; } .sidebar .PopularPosts ul li:first-child + li + li { background: #DFF0D8; } .sidebar .PopularPosts ul li:first-child + li + li + li { background: #FFEEBC; } .sidebar .PopularPosts ul li:first-child + li + li + li + li{ background: #E0E0E0; } .sidebar .PopularPosts .item-title { font: 13px 'Oswald', sans-serif; text-transform: uppercase; padding: 10px 5px 10px; } .sidebar .PopularPosts .item-title a { color: #000; text-decoration: none; } .sidebar .PopularPosts .item-snippet { font: 13px "Times New Roman",Times,FreeSerif,serif; padding-right: 5px; } .sidebar .PopularPosts .widget-content ul li { padding: 0px 5px 0px 0px!important; } 

 .sidebar .PopularPosts ul { padding: 0; } .sidebar .PopularPosts ul li:first-child{ width: 100%; max-height: 100%; opacity: 0.9; } .sidebar .PopularPosts ul li:nth-child(even){ margin-right: 2%; } .sidebar .PopularPosts ul li { box-sizing: border-box; position: relative; padding: 0px !important; width: 49%; max-height: 120px; opacity: 0.4; overflow:hidden; float: left; margin-bottom: 2%; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; } .sidebar .PopularPosts ul li:hover { opacity: 1; } .sidebar .PopularPosts .item-thumbnail { margin: 0; width: 100%; } .sidebar .PopularPosts ul li img { box-sizing: border-box; width: 100%; height: 100%; object-fit: cover; padding:0; } .sidebar .PopularPosts .item-content:hover .item-title a, .sidebar .PopularPosts .item-thumbnail-only:hover .item-title a { visibility: visible; opacity: 1; } .sidebar .PopularPosts .item-title a { color: #fff; background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.93) 100%, rgba(0, 0, 0, 0.85) 100%); text-decoration: none; position: absolute; text-align: center; font: 13px 'Oswald', sans-serif; left: 0; right: 0; bottom: 0%; padding: 100px 10px 10px; opacity: 0; visibility: hidden; } .sidebar .PopularPosts .item-snippet { display: none; } 

 .sidebar .PopularPosts ul { counter-reset: popularcount; margin: 0; padding: 0; } .sidebar .PopularPosts ul li { float: left; max-height: 130px; min-width: 250px; position: relative; } .sidebar .PopularPosts .item-thumbnail::after { color: rgba(255,255,255, 0.63); content: counter(popularcount, decimal); counter-increment: popularcount; font: 70px 'Oswald', sans-serif; list-style-type: none; position: absolute; left: 5px; top: -5px; z-index: 4; } .sidebar .PopularPosts .item-thumbnail::before { background: rgba(0, 0, 0, 0.3); bottom: 0px; content: ""; height: 100px; width: 100px; left: 0px; right: 0px; margin: 0px auto; position: absolute; z-index: 3; } .sidebar .PopularPosts .item-thumbnail a { clip: auto; display: block; height: auto; overflow: hidden; } .sidebar .PopularPosts .item-thumbnail { width: 100px; height: 100px; margin: 0px 10px 0px 0px !important; position: relative; } .sidebar .PopularPosts .item-thumbnail:hover:before { display: none; } .sidebar .PopularPosts .item-thumbnail img { position: relative; padding-right: 0px !important; height: 100%; width: 100%; object-fit: cover; } .sidebar .PopularPosts .item-title { font: 13px 'Oswald', sans-serif; text-transform: uppercase; padding: 0px 5px 10px; } .sidebar .PopularPosts .item-title a { color: #000; text-decoration: none; } .sidebar .PopularPosts .item-snippet { font: 13px "Times New Roman",Times,FreeSerif,serif; } .sidebar .PopularPosts .widget-content ul li { padding: 0px 5px 0px 0px !important; } .sidebar .PopularPosts .item-content { padding: 5px 0px; border-bottom: 1px dotted #dedede; overflow: hidden; height: 100px; position: relative; } 

Setelah kalian memilih style popular post mana yang mau dipilih, silahkan copy semua cssnya lalu.

• Login ke Blogger.com

• Masuk ke Tab Template-> Klik Edit HTML, Cari Code ]]></b:skin> atau </style> 

• Lalu masukan CSS yang sudah tadi di pilih sempurna diatas salah satu arahan ]]></b:skin> atau </style> 

• Langkah terakhir, Silahkan cari </body>

• Lalu masukan javascript dibawah ini, sempurna diatas arahan tadi

 <script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/> <script type='text/javascript'> $(&#39;.popular-posts img&#39;).attr(&#39;src&#39;, function(e, t) { return t.replace(&#39;/s72-c/&#39;, &#39;/s350-c/&#39;) }); $(&#39;.popular-posts ul li .item-snippet&#39;).each(function(){ var txt=$(this).text().substr(0,60); var j=txt.lastIndexOf(&#39; &#39;); if(j&gt;10) $(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,&#39;...&#39;)); }); $(&#39;.popular-posts ul li .item-content a&#39;).each(function(){ var txt=$(this).text().substr(0,60); var j=txt.lastIndexOf(&#39; &#39;); if(j&gt;=6) $(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,&#39;...&#39;)); }); </script> 

• Simpan Template dan Lihat Hasilnya :) Semoga berhasil Salam Tamvan B|

Keterangan
Tanda Merah pada Javascript. Jika di blog kalian sudah ada script ajax jquery libisnya maka yang itu tidak usah dimasukan lagi.

Ok, dikarenakan aku sudah nguantuk pengen tidur maka dengan ini aku menyatakan :

Cukup sekian artikel dari mas tamvan ihwal cara menciptakan widget popular post dengan 5 style terbaru, biar bermanfaat.

Jika ada yang gundah cara pemasangannya, silahkan bertanya dikolom komentar ya :)