Blogge 5 Harika Populer Yayınlar Tasarımı

Paylaşan Admin

21 Temmuz 2019 Pazar

Resim yazısı ekle

Blogunuzda ki en çok okunan yazıların listelendiği Populer Yayınlar Gadgetini özelleştirmek ister misiniz? Bu yazıda birbirinden güzel görselliğe sahip 5 farklı populer yayınlar tasarımını göreceksiniz.Hoşunuza gideni seçip, adım adım uygulayarak başarılı bir şekilde bloğunuza ekleyebilirsiniz.

✅Blogger Populer Yayınlar Gadgeti Nasıl Eklenir?

1- Blogger Kontrol Paneli'ne giriyoruz ve hangi alanda görüntülenmesini istiyorsak "Yerleşim>Yeni Gadget Oluştur" diyoruz.
2- Açılan pencereden "Populer Yayınlar"ı seçtikten sonra kaydet diyip kapatıyoruz.
3- CSS Kütüphanesi, JavaScript kodları ve Tasarım kodlarının eklenmesi işlemlerini aşağıdan adım adım takip ederek yapınız ve kaydedip blogunuzda görüntüleyiniz.Olası bir hata veya yanlışta iletişimden veya konuya yorum yaparak yardım isteyebilirsiniz.

✅CSS Kütüphanesi Nasıl Eklenir?

1- Blogger Kontrol Paneli'ne giriyoruz ve "Tema>HTML'yi düzenle" diyoruz.
2- CTRL+F ile "<head>" kodunu aratıyoruz ve hemen altına aşağıdaki satırı kopyalayıp yapıştırıyoruz.

<link href='https://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'/>

✅JavaScript Kodları Nasıl Eklenir?

1- Blogger Kontrol Paneli'ne giriyoruz ve "Tema>HTML'yi düzenle" diyoruz.
2- CTRL+F ile "</body>" kodunu aratıyoruz ve aşağıdaki Javascript kodunu bir üst satıra ekliyoruz.

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/>
<script type='text/javascript'>
//<![CDATA[
$(".popular-posts 
img").attr("src",function(t,s){return 
s.replace("/w72-h72-p-k-no-nu/","/s350-c/")}),$(".popular-posts ul li 
.item-snippet").each(function(){var 
t=$(this).text().substr(0,60),s=t.lastIndexOf(" 
");s>10&&$(this).text(t.substr(0,s).replace(/[?,!\.-:;]*$/,"..."))}),$(".popular-posts
 ul li .item-content a").each(function(){var 
t=$(this).text().substr(0,60),s=t.lastIndexOf(" 
");s>=6&&$(this).text(t.substr(0,s).replace(/[?,!\.-:;]*$/,"..."))});
//]]>
</script>

✅Populer Yayınlar Tasarım Kodları Nasıl Eklenir?

1- Blogger Kontrol Paneli'ne giriyoruz ve "Tema>HTML'yi düzenle" diyoruz.
2- CTRL+F ile "</head>" kodunu aratıyoruz ve bir üst satıra aşağıdaki beğendiğiniz 5 farklı tasarımdan birisinin kodlarını kopyalayıp yapıştırıyoruz ve kaydediyoruz.

<style type='text/css'>
.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:auto;width:100%;padding:0;}.sidebar .PopularPosts .item-title
 a{color: #FFFFFF;font:20px 
Oswald;text-transform:uppercase;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;}
</style>

<style type='text/css'>
.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;text-align:center;}.sidebar
 .PopularPosts .item-thumbnail a{clip: 
auto;display:block;height:auto;height:120px;}.sidebar .PopularPosts 
.item-thumbnail{width:100%;height:120px;overflow:hidden;position:relative;margin-bottom:15px;}.sidebar
 .PopularPosts .item-thumbnail::before{background:rgba(0, 0, 0, 
0);border-bottom:29px solid #fff;border-left:29px solid 
transparent;border-right:29px solid 
transparent;bottom:0px;content:&quot;&quot;;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 &quot;Times New 
Roman&quot;,Times,FreeSerif,serif;list-style-type:none;position:absolute;bottom:0;margin:0px
 auto;left:0px;right:0px;z-index:4;}.sidebar .PopularPosts 
.item-thumbnail 
img{position:relative;width:100%;height:auto;padding:0;}.sidebar 
.PopularPosts .item-title{font:15px &#39;Oswald&#39;, 
sans-serif;text-transform:uppercase;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 &quot;Times 
New Roman&quot;,Times,FreeSerif,serif;}
</style> 

<style type='text/css'>
.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:auto;width:100%;padding:0;}.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 &#39;Oswald&#39;, 
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 &quot;Times New 
Roman&quot;,Times,FreeSerif,serif;padding-right:5px;}.sidebar 
.PopularPosts .widget-content ul li{padding:0px 5px 0px 0px!important;}
</style>

<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{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;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%;line-height:0;}.sidebar 
.PopularPosts ul li img 
{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing: 
border-box;width:100%;height:auto;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
 &#39;Oswald&#39;, 
sans-serif;left:0;right:0;bottom:0%;padding:100px 10px 
10px;opacity:0;visibility:hidden;}.sidebar .PopularPosts 
.item-snippet{display:none;}
</style>

<style type='text/css'>
.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 &#39;Oswald&#39;, 
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:&quot;&quot;;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:auto;width:100%;}.sidebar .PopularPosts 
.item-title{font:13px &#39;Oswald&#39;, 
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 &quot;Times New 
Roman&quot;,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;}
</style>

✅İşlem bu kadar arkadaşlar.Tekrar belirtiyorum.Herhangi yapamadığınız,hata aldığınız bir adım olursa yorum olarak veya iletişimden bildiriniz.Yardımcı olmaya hazırım.

Bunu Paylaş :