Modifikasi Widget Populer Post di Blogger
Modifikasi Widget Populer Post di Blogger - Hallo sahabat Jendral Kancil, Pada Artikel yang anda baca kali ini dengan judul Modifikasi Widget Populer Post di Blogger, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan
Artikel Tutorial Blog,
Artikel Widget, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.
Judul : Modifikasi Widget Populer Post di Blogger
link : Modifikasi Widget Populer Post di Blogger
Anda sekarang membaca artikel Modifikasi Widget Populer Post di Blogger dengan alamat link https://jekancil.blogspot.com/2020/09/modifikasi-widget-populer-post-di.html
Judul : Modifikasi Widget Populer Post di Blogger
link : Modifikasi Widget Populer Post di Blogger
Modifikasi Widget Populer Post di Blogger
Memodifikasi Widget Populer Post di Blogger adalah tutorial sangat mudah yang bisa dilakukan oleh pemula. Setidaknya mengerti mengenai CSS dan HTML karena kalau tidak paham tentu kan tidak akan paham meletakkan kode tersebut.
Widget Populer Post adalah sebuah element dari Blogger dimana kamu bisa melihat tanding artikel yang berdasarkan Mingguan, Bulanan, dan Tahun.
Populer yang di modifikasi ini seperti template dipakai Sudar Blogger, atau ala Inverpro punya arlinacode.
Agar memodifikasi populer Post widgett ini supaya berhasil maka harus perhatikan langkah - langkah nya, yuk mulai.
Memodifikasi Widget Populer Post di Blogger
Langkah pertama kamu harus ubah dulu template yang versi lama dengan yang baru caranya dengan mengubah kode berikut tepat di atas <head>
<html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:templateVersion='1.3.0' expr:class='data:blog.languageDirection' expr:dir='data:blog.languageDirection' lang='id' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>Maka otomatis template kamu akan update dengan widget versi ke dua.
Lalu salin kode HTML dibawah iki karena kode akan berbeda pada sebelumnya pada tampilan widget versi 2
<b:defaultmarkups> <b:defaultmarkup type='Common'> <b:includable id='widget-title'> <b:if cond='data:defaultTitle or data:title'> <div class='widget-title'> <h4 class='title'> <data:title/> </h4> </div> </b:if> </b:includable> </b:defaultmarkup> <b:defaultmarkup type='PopularPosts'> <b:includable id='main' var='this'> <b:include name='widget-title'/> <div class='widget-content'> <b:loop values='data:posts' var='post'> <b:include data='post' name='postContent'/> </b:loop> </div> </b:includable> <b:includable id='postContent' var='post'> <div class='post'> <div class='post-content'> <a class='post-image-link' expr:href='data:post.url'> <img class='post-thumb lazy' expr:alt='data:post.title' expr:data-src='data:post.featuredImage resizeImage 100' src='data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='/> </a> <div class='post-info'> <h3 class='post-title'> <a expr:href='data:post.url'><data:post.title/></a> </h3> <div class='post-meta'> <span class='post-date published' expr:datetime='data:post.date.iso8601'><data:post.date/></span> </div> </div> </div> </div> </b:includable> </b:defaultmarkup> </b:defaultmarkups>Setelah itu masukkan CSS berikut ini di atas </head>
<style>/* Popular Post Index */ #PopularPosts ul{list-style:none;margin:0 auto;padding:0;overflow:hidden;width:100%}#PopularPosts1 li,#PopularPosts1 li img,#PopularPosts1 li a,#PopularPosts1 li a img{margin:0;padding:0;list-style:none;background:none;outline:none}#PopularPosts1 ul li{margin:0 auto 10px;position:relative;overflow:hidden;line-height:1em;list-style:none;padding:10px 0}#PopularPosts1 ul li a:hover{color:#999}#PopularPosts li a{color:#222;font-weight:500;font-size:14px;list-style:none;line-height:1.3em;display:block;overflow:hidden}#PopularPosts1 ul li img{position:relative;z-index:2;width:102px;height:auto;object-fit:cover;float:left;display:inline-block;transition:all .3s}#PopularPosts .item-thumbnail{background:#f1a7a7;display:flex;align-items:center;justify-content:center;width:102px;max-height:68px;border-radius:8px;overflow:hidden;float:left;margin:-10px 13px 0 0;position:relative}#PopularPosts ul li:nth-child(even) .item-thumbnail{background:#c3bcec}#PopularPosts1 ul li:nth-child(3n+3) .item-thumbnail{background:#eeda92}#PopularPosts .item-snippet{display:block;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;font-size:12px;color:#aaa;overflow:hidden;margin:4px 0 0;display:none}#Popular Posts .item-title{padding:0;margin:0;text-align:left}.Night #PopularPosts .item-thumbnail,.Night #PopularPosts ul li:nth-child(even) .item-thumbnail,.Night #PopularPosts ul li:nth-child(3n+3) .item-thumbnail{background:#1c2733}</style>Setelah itu klik Tombol Simpan Tema.
Nah itulah Cara Memodifikasi Widget Populer Post di Blogger, selamat mencoba wassalam.
Demikianlah Artikel Modifikasi Widget Populer Post di Blogger
Sekianlah artikel Modifikasi Widget Populer Post di Blogger kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.
Anda sekarang membaca artikel Modifikasi Widget Populer Post di Blogger dengan alamat link https://jekancil.blogspot.com/2020/09/modifikasi-widget-populer-post-di.html