Blogger Populer Yazılar: Büyük Resimli (Stil 4) - Blogger Arşivim - Blogger, Blogspot, Blogger Template, Blogger Widget

Blogger Populer Yazılar: Büyük Resimli (Stil 4)

Yazı Boyutu Ayarla büyüt (A+) (A-) küçült

Popular Posts Style 4 :Posts in Grid Layout

Blogger kontrol panelinizdeyken sırasıyla " Tema » HTML'yi düzenle " tıklayın. CTRL+F kombinasyonu'nu kullanarak sayfada " </body> " aratın ve bu kodun üstüne aşağıda verilen kodu ekleyin.;

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

Tekrar aşağıda verilen kodu ise </head> kodunun üst satırına ekleyin.

<style type='text/css'>
.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;
}
</style>

İşlemler bu kadar. Takıldığınız yer olursa alt kısımda bulunan yorum panelinden sorabilirsiniz. Yazıyla alakalı etiketler; blogger, blogspot, blog, eklenti, widget, gadget, eklenti, eklentiler, eklentileri, eklentisi blogger eklenti, blogspot eklenti, blogger eklentisi, blogger eklentileri, blogger eklentiler, blogger widget, blogger widgets, blogger gadget, blogger 2018, blogger 2019, blogger eklenti indir, blogger kodu, blogger kodları,