Header Ads Widget

Responsive Advertisement

Membuat 5 model Widget Blog

Pksaimadiunkota1 Januari 13, 2022

Kebanyakan blogger menginginkan blog mereka minimal dan bersih tetapi mereka tetap ingin menambahkan beberapa widget terpenting seperti Widget Posting Populer. itu adalah bagian paling penting dan penting dari setiap blog blogger. itu menampilkan posting yang paling banyak dilihat atau dikomentari dari sebuah blog. ini membantu dalam mengurangi rasio pentalan dan memberikan sentuhan gaya pada blog Anda. Hari ini dalam tutorial ini kami telah menerbitkan 5 jenis widget posting populer yang berbeda yang dapat Anda tambahkan di blog Anda. Jadi ayo mulai.

Menambahkan Widget Postingan Populer (Wajib)  

Pertama buka Judul Blog → Tata Letak → Tambah Widget → Postingan Populer. Tambahkan widget di lokasi yang diinginkan dan simpan template. Ingatlah untuk mencentang opsi Item Snippet dan Gambar Thumbnail.
Ingatlah untuk mencentang opsi Item Snippet dan Gambar Thumbnail. 

Let's Start Step-1 ( Adding CSS ) 

Before Editing we recommend you to make a backup of your template, so that anything goes wrong you still have your blog design safe.
The First thing you need to do is to login into your Blogger account and go to >> Templates >> Edit HTML and search for the ending ]]></b:skin> tag and just above it paste the following code.

Style-1



.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%;
position: relative;
}
.sidebar .PopularPosts .item-title {
display:block;
clear:both;
}
.sidebar .PopularPosts img {
height: 100%;
width: 100%;
object-fit: cover;
}
.sidebar .PopularPosts .item-title a {
display: block;
margin: 0 auto;
padding: 5px 10px;
font-size:15px;
font-family: 'Playfair Display', serif;
}
.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;
}
.img-overlay {
position: absolute;
left: 0;
top: 0;
z-index: 1;
width: 100%;
height: 100%;
background-color: rgba(40,35,40,0.05);
}
.PopularPosts .item-thumbnail:hover a .img-overlay {
background-color:rgba(40,35,40,0.3)
}

Style-2



.sidebar .PopularPosts ul {
margin: 0;
padding: 0;
}
.sidebar .PopularPosts ul li {
list-style: none !important;
padding: 0 !important;
margin-bottom: 10px;
margin-right: 10px;
width: 48.4%;
float: left;
}
.sidebar .PopularPosts ul li.odd {
margin-right: 0;
}
.sidebar .PopularPosts .item-thumbnail {
height: 190px;
margin: 0;
overflow: hidden;
width: 100%;
position: relative;
}
.sidebar .PopularPosts .item-title {
display:block;
clear:both;
}
.sidebar .PopularPosts img {
height: 100%;
width: 100%;
object-fit: cover;
}
.sidebar .PopularPosts .item-thumbnail:before {
content: "\f02d";
font-family: FontAwesome;
line-height: 32px;
width: 32px;
height: 32px;
font-size: 18px;
color: #fff;
text-align: center;
font-weight: 400;
position: absolute;
top: 45%;
left: 40%;
opacity: 1;
padding: 0;
z-index: 2;
border: 2px solid #fff;
border-radius: 50%;
transition: all 0.25s ease-in-out 0s;
}
.sidebar .PopularPosts .item-title a {
display: block;
margin: 0 auto;
padding: 5px 0;
font-size:15px;
line-height: 20px;
width: 100%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
cursor: pointer;
}
.sidebar .PopularPosts .item-snippet {
color: #333333;
margin: 0px auto;
}
.sidebar .PopularPosts .item-content {
position: relative;
}
.PopularPosts .img-overlay {
position: absolute;
left: 0;
top: 0;
z-index: 1;
width: 100%;
height: 100%;
background-color:#d86843;
opacity:0.5;
}
.PopularPosts .item-thumbnail:hover a .img-overlay {
background-color: rgba(40,35,40,0.3);
opacity:1;
}
.sidebar .PopularPosts .widget-content ul li:first-child,
.sidebar .custom-widget li:first-child {
padding-top: 0;
border-top: 0;
}
.sidebar .PopularPosts .widget-content ul li:last-child,
.sidebar .custom-widget li:last-child {
padding-bottom: 0;
}

Style-3



.PopularPosts .item-thumbnail {
margin: 0 10px 0 0 !important;
width: 80px;
height: 60px;
float: left;
overflow: hidden;
}
.PopularPosts .item-thumbnail a {
position: relative;
display: block;
overflow: hidden;
line-height: 0;
}
.PopularPosts ul li img {
padding: 0;
width: 80px;
height: 60px;
}
.PopularPosts .widget-content ul li {
overflow: hidden;
border-bottom: 1px solid #F5F5F5;
padding: 10px 0;
}
.sidebar .PopularPosts .widget-content ul li:first-child,
.sidebar .custom-widget li:first-child {
padding-top: 0;
border-top: 0;
}
.sidebar .PopularPosts .widget-content ul li:last-child,
.sidebar .custom-widget li:last-child {
padding-bottom: 0;
}
.PopularPosts ul li a {
color: #222222;
font-weight: 400;
font-size: 13px;
line-height: 1.6em;
}
.PopularPosts ul li a:hover {
color: #0277bd;
}
.PopularPosts .item-title {
margin: 0;
padding: 0;
line-height: 0;
}
.item-snippet {
font-size: 12px;
padding-top: 3px;
font-weight: 400;
color: #999;
}

Style-4



.PopularPosts .item-thumbnail{margin:0 15px 0 0 !important;width:90px;height:65px;float:left;overflow:hidden;    position: relative}
.PopularPosts .item-thumbnail a{position:relative;display:block;overflow:hidden;line-height:0}
.PopularPosts ul li img{width:90px;height:65px;object-fit:cover;padding:0;transition:all .3s ease}
.PopularPosts .widget-content ul li{overflow:hidden;padding:10px 0;border-top:1px solid #f2f2f2}
.sidebar .PopularPosts .widget-content ul li:first-child,.sidebar .custom-widget li:first-child,.tab-widget .PopularPosts .widget-content ul li:first-child,.tab-widget .custom-widget li:first-child{padding-top:0;border-top:0}
.sidebar .PopularPosts .widget-content ul li:last-child,.sidebar .custom-widget li:last-child,.tab-widget .PopularPosts .widget-content ul li:last-child,.tab-widget .custom-widget li:last-child{padding-bottom:0}
.PopularPosts ul li a{color:#333333;font-weight:400;font-size:14px;line-height:1.4em;transition:color .3s}
.PopularPosts ul li a:hover{color:#FF4400}
.PopularPosts .item-title{margin:0 0 4px;padding:0;line-height:0}
.item-snippet{display:none;font-size:0;padding-top:0}
.PopularPosts ul {
counter-reset: popularcount;
margin: 0;
padding: 0;
}
.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;
}
.PopularPosts .item-thumbnail::after {
color: rgba(255,255,255, 0.63);
content: counter(popularcount, decimal);
counter-increment: popularcount;
font-size: 70px;
list-style-type: none;
position: absolute;
left: 5px;
top: -5px;
z-index: 4;
}

Style-5



.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;
max-height: 180px;
}
.sidebar .PopularPosts .item-thumbnail {
width: 100%;
height: 100%;
max-height: 190px;
overflow: hidden;
margin-bottom: 10px;
}
.sidebar .PopularPosts .item-thumbnail:after {
content: counter(popularcount, decimal);
counter-increment: popularcount;
float: left;
font-size: 14px;
list-style-type: none;
padding:10px;
position: absolute;
top: 0;
z-index: 4;
background: #e84c4c;
color: #fff;
}
.sidebar .PopularPosts .item-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
}
.sidebar .PopularPosts .item-title {
position: relative;
}
.sidebar .PopularPosts .item-title a {
color: #FFFFFF;
font: 15px 'Playfair Display', 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: 80px;
width: 80%;
background-color: rgba(0,0,0,0.5);
overflow: hidden;
z-index: 2;
}
.sidebar .PopularPosts .item-snippet {
padding: 10px 15px;
font-size: 13px;
text-align: center;
background: #e84c4c;
color:#fff;
}

Step-2 ( Adding SCRIPT ) - Resizing Thumbnail !!

Now this is the extra part for this widget basically blogger generates 72px width images which is not suitable in some cases, so we will change it with original size of the image for better quality. In the template, search for the </body> tag  and just above it paste the following HTML Coding.

<script type='text/javascript'>
//<![CDATA[ 
function resizeThumbarlina(e,t){for(var s=document.getElementById(e),r=s.getElementsByTagName("img"),c=0;c<r.length;c++)r[c].src=r[c].src.replace(/\/s72\-c/,"/s"+t),r[c].width=t,r[c].height=t}resizeThumbarlina("PopularPosts1",400);
$(document).ready(function(){
 $('.PopularPosts img').each(function(){
  var srcUrl = $(this).attr('src');
  $(this).attr('src', srcUrl.replace('default', 'maxresdefault'));
 });

});
//]]>
</script>

Kesimpulan

Selamat !! Anda telah berhasil. sekarang Anda telah belajar bahwa Cara menambahkan widget posting populer di blog blogger. Kunjungi blog Anda dan periksa widget live in action yang mengagumkan, semoga Anda menyukai tutorial ini, jika Anda menikmatinya, silakan bagikan dengan teman-teman Anda, kami bekerja keras untuk mengembangkan lebih banyak widget keren seperti itu, tetap ikuti kami. Au Revoir!!
Tags:
Pksaimadiunkota1

Posted by: Pksaimadiunkota1

Posting Komentar

0 Komentar