Popular Post
Tampilan ini sangat keren dan menarik ,
Apabila sobat penasaran ,, sobat bisa lihat penampilan gambarnya ...
Gimana,, keren kan .. !
Pada tutorial ini , kami menggunakan template viomagz , milik mas sugeng.
Kami melakukan sedikit modifikasi ,
" Jadi tutorial ini belum kami coba di template selain viomagz , apakah bisa atau enggak.
Popular post dengan tampilan yang lebih keren , semakin membuat pengunjung menjadi lebih betah , dan teringin untuk membaca artikel lainya yang tampil di popular post.
Memasang Widget Popular Post
Saran :
Sebelum melakukan pengeditan , alangkah baiknya sobat BackUp terlebih dahulu template milik sobat, apabila terjadi error , bisa segera di pulihkan.
Saran :
Dalam tutorial ini mungkin sedikit susah , supaya lebih mudah prosesnya , sobat pasang dulu popular post pada template milik sobat , minimal 1 ,
Ini bertujuan untuk pencarian kode yang akan di edit.
Langsung saja ;
1. Buka Akun Blogger.
2. Pilih Thema , Edit HTML.
Cari kode popular post yang berada di atas ]]></b:skin>
Contoh popular post template viomagz.
ini code nya gaes..
/* Popular Posts */
.PopularPosts .widget-content ul, .PopularPosts .widget-content ul li {
margin: 0 0;
padding: 0 0;
list-style:none;
border:none;
outline:none;
}
.PopularPosts .widget-content ul {
margin: 0;
list-style:none;
counter-reset:num;
}
.PopularPosts .widget-content ul li img {
display: block;
width: 70px;
height: 70px;
float: left;
}
.PopularPosts .widget-content ul li {
margin: 0 0 20px;
counter-increment: num;
position: relative;
}
.PopularPosts ul li:last-child {
margin-bottom: 0px;
}
.PopularPosts ul li .item-thumbnail-only::before, .PopularPosts ul li .item-content::before, .PopularPosts ul li > a::before {
color: $(body.link.color) !important;
}
.PopularPosts ul li .item-thumbnail-only::after, .PopularPosts ul li .item-content::after, .PopularPosts ul li > a::after {
}
.PopularPosts .item-title {
line-height: 1.6;
margin-right: 8px;
min-height: 40px;
font-weight: bold;
}
.PopularPosts .item-thumbnail {
float: left;
margin-right: 10px;
}
.PopularPosts .item-snippet {
line-height: 1.6em;
font-size: 14px;
margin-top: 8px;
opacity: 0.925;
}
.PopularPosts ul li > a {
font-weight: bold;
}
Hapus lalu ganti dengan yang ini.
ini code nya gaes..
/* Popular Posts by westoiku */
.Night .popular-posts{background:#2e4054;transition:all .5s ease}.Night .above-post-widget h2 span{background:#15202b;color:#fff}.Night .PopularPosts h2 span{background:#213040;color:#fff;transition:all .5s ease}.popular-posts{background:#1a73e8;background-image:linear-gradient(110deg,rgba(255,255,255,.1) 16%,rgba(255,255,255,.1) 17%,rgba(255,255,255,.05) 17%,rgba(255,255,255,.05) 23%,transparent 8.5%,transparent 78%,rgba(255,255,255,.05) 78%,rgba(255,255,255,.05) 84%,rgba(255,255,255,.1) 84%,rgba(255,255,255,.1));box-shadow:0 2px 2px 0 rgba(0,0,0,.04),0 3px 1px -2px rgba(0,0,0,.05),0 1px 5px 0 rgba(0,0,0,.04);transition:all .5s ease;padding:3px 15px 10px;border-radius:7px}.PopularPosts ul li:hover{background:#3333330f}.PopularPosts .widget-content ul,.PopularPosts .widget-content ul li{margin:0;padding:0;list-style:none;border:none;outline:0}.PopularPosts .widget-content ul li a{color:#fff}.PopularPosts .widget-content ul li img{display:block;width:70px;height:70px;float:left;border-radius:3px 25px}.PopularPosts .widget-content ul li{margin:0;counter-increment:num;position:relative;border-bottom:1px dashed rgba(255,255,255,.35)}.PopularPosts ul li:last-child{margin-bottom:0}.PopularPosts ul li .item-content::before,.PopularPosts ul li .item-thumbnail-only::before,.PopularPosts ul li>a::before{color:#f2994a!important}.PopularPosts ul li .item-content::after,.PopularPosts ul li .item-thumbnail-only::after,.PopularPosts ul li>a::after{background:#efefef}.PopularPosts .item-title{line-height:1.6;margin-right:8px;min-height:40px;font-weight:500}.PopularPosts .item-thumbnail{float:left;margin-right:8px}.PopularPosts .item-snippet{line-height:1.6em;font-size:14px;margin-top:8px;opacity:.925}.PopularPosts ul li>a{padding:6px 20px;min-height:0;color:#fff;font-family:sans-serif;font-size:15px}.popular-posts ul li a:hover{text-decoration:underline}.PopularPosts .widget-content ul,.PopularPosts .widget-content ul li{margin:0;padding:0;list-style:none;border:none;outline:0}.PopularPosts .widget-content ul{margin:0;list-style:none;counter-reset:num}.PopularPosts .widget-content ul li img{display:block;width:70px;height:70px;float:left;border-radius:3px 25px}.PopularPosts .widget-content ul li{margin:0;counter-increment:num;position:relative;transition:all .5s ease;border-bottom:1px dashed rgba(255,255,255,.35)}.PopularPosts ul li:last-child{margin-bottom:0}.PopularPosts ul li .item-content::after,.PopularPosts ul li .item-thumbnail-only::after,.PopularPosts ul li>a::after{background:#efefef}.PopularPosts .item-title{line-height:1.6;margin-right:8px;min-height:40px;font-weight:500}.PopularPosts .item-thumbnail{float:left;margin-right:8px}.PopularPosts .item-snippet{line-height:1.6em;margin-top:8px;opacity:.925}.PopularPosts ul li>a{font-weight:700;font-size:14px}.PopularPosts .item-snippet,.PopularPosts .item-thumbnail,.PopularPosts .item-title{margin-left:15px;margin-bottom:9px;margin-top:5px}.PopularPosts ul li>a{display:block;min-height:0;font-family:Quicksand,-apple-system,BlinkMacSystemFont,'Segoe UI',Oxygen,'Helvetica Neue',sans-serif;font-size:13px;line-height:17px;margin-left:10px}.PopularPosts ul li:before{content:counter(num) '.'!important;position:absolute;top:10px;left:-2px;color:#fff;z-index:1;width:20px;height:20px;font-family:arial;margin-right:12px;font-size:1.5em;font-style:italic}
.PopularPosts h2{
border-bottom:none;
width:100%;
font:400 14px Poppins,-apple-system,BlinkMacSystemFont,'Segoe UI',Oxygen-Sans,'Helvetica Neue',Arial,sans-serif;
color:#1d2129;
text-align:left;
background:url("data:image/svg+xml,%3Csvg viewBox='0 0 48.34 4.99' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon fill='%231a73e8' points='27.36 0 48.34 0 45.48 4.99 24.5 4.99 27.36 0'%3E%3C/polygon%3E%3Cpolygon fill='%23657786' points='2.86 0 23.84 0 20.98 4.99 0 4.99 2.86 0'%3E%3C/polygon%3E%3C/svg%3E");
height:6px;
font-size:1rem;
position:relative;
margin-top:9px;
margin-bottom:15px
}
.PopularPosts h2 span{
background:#ededed;
padding-right:10px;
top:-12.5px;
position:absolute;
font-size:18px;
transition:all .5s ease;
font-weight:700
}
.PopularPosts h2 svg{
fill:#1a73e8;
margin-right:7px;
display:inline-block;
width:24px;
height:24px;
background-repeat:no-repeat!important;
content:''
}
Selanjutnya cari kode ini ,
ini code nya gaes..
<b:if cond='data:title != ""'><h2><data:title/></h2></b:if>
Jika bingung ,
Klik simpan terlebih dahulu templatenya.
Pilih edit HTML ,
Cari seperti di gambar.
ini code nya gaes..
<b:if cond='data:title != ""'><h2><span><svg viewBox='0 0 24 24'>
<path d='M16,6L18.29,8.29L13.41,13.17L9.41,9.17L2,16.59L3.41,18L9.41,12L13.41,16L19.71,9.71L22,12V6H16Z'/>
</svg>westoiku</span></h2></b:if>
Selesai ,, klik simpan ,
Lihat hasilnya...
Untuk pengaturan warna silahkan sobat atur sesuai keinginan .
Post a Comment