Bu yazımızda blogcular için, Blogger blog sitelerinde kullandıkları popüler yayınlar Widget tasarımını nasıl değiştirecekleri ile ilgili ipuçlarını ve birbirinden farklı 11 adet Popüler Yayınlar Widget tasarımını paylaşacağım.
Blogger'ı kişisel veya iş blogunuz platformu olarak kullanıyorsanız, muhtemelen blogunuzun görünümünü değiştirmenin yollarını da arıyorsunuzdur. Blog sitenizi ve sayfalarınızı eşsiz ve dikkat çekici hale getirmek ve diğer blog sitelerinden daha farklı olması için bazı düzenlemeler yapabilirsiniz.
Blogger blog'unuzu kişiselleştirmenin birçok yolu var, bunlardan biri Popüler Yayınlar Widget'ınızı kişiselleştirmektir. Öncelikle Widget ekleme ile ilgili küçük bir bilgi paylaşmak istiyorum.
Blogger Popüler Yayınlar Widget'ı Nasıl Eklenir?
Blogger blog sitenize Popüler Yayınlar Widget'ı eklemek için, blog'unuzun kumanda panelinin sol tarafında bulunan menüde Yerleşim'e tıklayın. Popüler Yayınlar Widget'ının eklemeden önce widget'ın nerede (Sidebar veya Footer) görünmesini istediğinizi belirleyin ve Gatget Ekle'ye tıklayarak Widget'ler arasında bulunan Popüler Yayınlar Widget'ını ekleyin.
Popüler Yayınlar Widget'ını ekledikten sonra veya varolan Widget'ınızı yapılandırmanız gerekebilir. Widget yapılandırma ve diğer için aşağıdaki yazılarımıza göz atın.
Bknz: Blogger Popüler Yayınlar Widget Yapılandırma Bilgileri
Bknz: Blog Popüler Yayınlar Yeni Widget Tasarımı
Bknz: Blog Popüler Yayınlar Resimlerini Yeniden Boyutlandırma
Blogger Popüler Yayınlar Widget'ı İçin En Popüler Tasarımlar
Blogger blog sitenizde bulunan Popüler Yayınlar Widget'ına yeni bir görünüm kazandırmak için sadece CSS stil kodlarından faydalanabilirsiniz. Blog'unuzda bulunan Widget'lara yeni bir görünüm kazandırarak ziyaretçilerinizin dikkatini çekebilirsiniz.
Blog sitenizde bulunan Popüler Yayınlar Widget'ına yeni bir stil dosyası eklemek için, öncelikle blog'unuzun şablon kodları arasında bulunan CSS kodlarını kaldırmanız gerekir. Varolan CSS kodlarını şablon editör sayfanızdan tamamen silmeyin, bilgisayarında bulunan not defterine kaydedin.
Popüler Yayınlar Widget tasarımlarını aşağıdaki videodan izleyebilirsiniz. Widget'ları ayrıntılı incelemek için, aşağıdaki CSS stil kodları altında bulunan ön izleme butonuna tıklayarak inceleyebilirsiniz.
Aşağıda Popüler Yayınlar Widget'ı için 11 farklı stil dosyası var. CSS stil dosyalarını blog'unuza eklemek için, bog'unuzun kumanda panelinin sol tarafında bulunan menüden Tema>HTML' Düzenle yolunu takip ederek blog'unuzun şablon editör sayfasını açın. Şablon editör sayfasından bulunan kodunu CTRL+F yardımıyla bulun ve eklemek istediğiniz CSS kodlarını kodunun bir satır üzerine ekleyin ve şablonu kaydedin.
Popüler Yayınlar Widget'ı Stil 1: Numaralandırılmış liste görünümünde olan Widget içerisinde bulunan yayınlar otomatik olarak numaralandırılır. Küçük resim ve yayın başlıklarını içeren minimalist bir görünüme sahiptir.
#PopularPosts1{width:100%;margin:auto;border:1px solid #eee;padding:20px}
#PopularPosts1 h2{font-size:18px;margin:0;padding:0 0 10px 0}
#PopularPosts1 ul{counter-reset:popularcount;margin:0;padding:0}
#PopularPosts1 .widget-content ul li{border-top:1px solid #ddd;overflow:hidden;padding:10px 0;position:relative;list-style:none}
#PopularPosts1 li:last-child>.item-content{padding:0 0}
#PopularPosts1 .item-thumbnail::after{background:#ff3c37;border:3px solid #eee;border-radius:50%;color:#fff;content:counter(popularcount,decimal);counter-increment:popularcount;height:30px;left:80px;font-weight:bold;list-style-type:none;position:absolute;text-align:center;top:-5px;width:30px;z-index:4}
#PopularPosts1 .item-thumbnail{background:#222;border-radius:3px;float:left;width:100px;height:100px;margin:0 15px 0 0;position:relative}
#PopularPosts1 .item-thumbnail a{clip:auto;display:block;height:auto;overflow:hidden}
#PopularPosts1 .item-thumbnail img{border-radius:3px;height:100px;padding-right:0;object-fit:cover;opacity:0.9;position:relative;width:100%;object-fit:cover}
#PopularPosts1 .item-thumbnail img:hover{opacity:1;transition:all 0.25s ease 0s}
#PopularPosts1 .item-title{font-weight:bold;padding:5px 0}
#PopularPosts1 .item-title a{color:#222;text-decoration:none}
#PopularPosts1 .item-title a:hover{color:#ff3c37}
#PopularPosts1 .item-snippet{display:none}Popüler Yayınlar Widget'ı Stil 2: Mevcut Widget stillerinden farklı bir görünüme sahiptir. Widget içerisinde ilk sırada bulunan yayının resmi diğerlerinden daha büyük ve başlık ile snippet resmin hemen altında yer almaktadır. Diğer yayınların resimleri ve yayın başlıkları ile liste görünümünde alt alta yer almaktadır.
.PopularPosts{background:#fff}
.PopularPosts h2{line-height:20px;text-transform:capitalize;color:#444;text-align:left;padding-bottom:10px;text-transform:uppercase;border-bottom:2px solid #F44336;display:inline-block;bottom:-2px}
.PopularPosts .widget-content ul li{list-style:none;padding:0;margin-bottom:10px}
.PopularPosts .widget-content ul li:last-child{margin-bottom:0;border-bottom:none!important;padding-bottom:0!important}
.PopularPosts img{width:75px;object-fit:cover;height:75px;padding-right:0!important;transition:all .3s ease;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-o-transition:all .3s ease}
.popular-first .item-thumbnail{float:none!important;height:150px!important;width:100%!important}
.PopularPosts .item-thumbnail{float:left;height:75px;width:75px;background:#222;overflow:hidden;margin:0 10px 0 0!important;transition:all .3s ease;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-o-transition:all .3s ease}
.popular-first .item-thumbnail img{width:100%;object-fit:cover;height:150px}
.popular-first .item-title{background:#fff;position:relative!important;text-align:center!important;width:85%!important;margin:auto!important;margin-top:-29px!important;display:block!important;height:100%!important}
.popular-first .item-title{text-align:center!important;width:100vw;padding:10px!important;font-size:15px!important}
.popular-first .item-snippet{background:#fff;text-align:center!important;width:85%!important;margin:auto!important;display:block!important}
.popular-first .item-snippet:before{content:"";width:40px;border-top:1px solid #f44336;position:relative;left:50%;top:0;margin-left:-22px;padding-bottom:10px;display:block}
.item-title a{font-weight:600;color:#555;line-height:20px}
.item-title a:hover{color:#F44336!important}
.popular-posts .item-snippet{font-size:12px;line-height:19px;color:#777;text-align:center;display:none;padding-bottom:10px}Bu Widget'daki resimlerin düzgün çalışması için aşağıdaki javaScipt kodunu blogunuzun şablon editör sayfasında bulunan </body> kodunun bir satır üzerine ekleyin.
<script>
//<![CDATA[
$( ".popular-posts ul li" ).first().addClass( "popular-first" );
$(".PopularPosts img").attr('src', function(i, src) {return src.replace('w72-h72', 'w280-h220-p-k-nu');});
//]]>
</script>Popüler Yayınlar Widget'ı Stil 3: Widget içerisinde bulunan resimlerin tamamı büyük ve yayın başlıkları ve snippet alt alta yer almakta. Özellikle moda blogcularının yayınlarında bulunan resimleri öne çıkarmak için kullanabileceği en ideal Widget stillerinden biridir.
.PopularPosts h2{padding:20px;line-height:19px;text-transform:capitalize;font-weight:600;color:#000;text-align:center;text-transform:uppercase;margin:0;border-bottom:2px solid #fd4508}
.PopularPosts .widget-content ul li{margin-bottom:10px;padding-bottom:10px!important;border-bottom:1px solid #eee}
.PopularPosts .widget-content ul li:last-child{margin-bottom:0;border-bottom:none!important;padding-bottom:0!important}
.PopularPosts img{width:100%;height:150px!important;padding-right:0!important;object-fit:cover;transition:all .3s ease;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-o-transition:all .3s ease}
.item-title a{font-weight:600;color:#444;margin-bottom:5px}
.item-title a:hover{color:#fd4508}
.popular-posts ul{padding:0;margin:0;list-style:none}
.PopularPosts .item-thumbnail{float:none;height:150px;width:100%;background:#222;overflow:hidden;margin:0 10px 0 0!important;transition:all .3s ease;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-o-transition:all .3s ease}
.popular-posts .item-snippet{font-size:12px;line-height:19px;color:#777;text-align:center}
.popular-posts .item-snippet:before{content:"";width:40px;border-top-width:1px;border-top-style:solid;border-color:#fd4508;position:relative;left:50%;top:0;margin-left:-22px;padding-bottom:10px;display:block}
.popular-posts .item-title{background:#fff;line-height:22px;font-size:14px;text-align:center;padding:10px}
.PopularPosts .item-thumbnail img:hover{opacity:.7}Widget içerisinde bulunan yayın resimlerini tasarıma uygun boyuta getirmek için; aşağıdaki javaScript kodunu </body> kodunun bir satır üzerine ekleyin.
<script>
//<![CDATA[
$(".PopularPosts img").attr('src', function(i, src) {return src.replace('w72-h72', 'w300-h150-p-k-nu');});
//]]>
</script>Popüler Yayınlar Widget'ı Stil 4: Yine moda blogcularının kullanabileceği Widget stillerinden biridir. Widget içerisinde bulunan resimlerin tamamı büyük ve yayınların popülerliğine göre yıldız değerlendirmelidir. Başlıklar resimlerin üzerinde ve snippet resimlerin hemen altında yer almaktadır.
#PopularPosts1 img,#PopularPosts2 img{margin:0;float:left;width:100%;height:auto;min-height:72px}
.PopularPosts .item-thumbnail{margin:0;width:100%;height:180px;overflow:hidden;position:relative}
#PopularPosts1 .item-title{position: relative;line-height:1.2em}
.PopularPosts .widget-content ul li{list-style-type:none;margin:0}
.PopularPosts .widget-content{padding-bottom:5px}
.PopularPosts .item-control{display:none}
.PopularPosts .widget-content li .item-title a{font-weight:bold;color:#fff;width:80%;position:absolute;line-height:1.2em;bottom:120px;left:15px;text-shadow:1px 1px 0 rgba(0,0,0,0.9)}
.PopularPosts .item-thumbnail>a:before{content:'';display:block;background:rgba(0,0,0,0.3);position:absolute;top:0;left:0;width:100%;height:100%;-webkit-transition-duration:1.0s;-moz-transition-duration:1.0s;-o-transition-duration:1.0s}
.PopularPosts .item-thumbnail a:hover:before{background:none}
.PopularPosts .item-thumbnail{width:100%;height:180px;position:relative}
.PopularPosts .widget-content ul li:hover .item-title a,.PopularPosts .item-thumbnail:hover{color:#ffcc00;text-shadow:1px 1px 0 rgba(0,0,0,0.9)}
.PopularPosts .item-snippet{display: -webkit-box;color:#555;padding:15px;font-size:12px;line-height:1.5em;font-weight:normal}
.PopularPosts .widget-content ul li{background:#fff;margin-top:15px;padding:0;position:relative;-moz-box-shadow:1px 1px 2px #ccc;-webkit-box-shadow:1px 1px 2px #ccc;-o-box-shadow:1px 1px 2px #ccc;-ms-box-shadow:1px 1px 2px #ccc}
.PopularPosts .widget-content ul li:nth-child(1){margin-top:0}
.PopularPosts .widget-content ul li:before{font-family:fontawesome;content:'\f005\f005';display:inline-block;position:absolute;top:3px;left:12px;margin:9px 0;color:#fc0;text-align:center;font-size:16px;padding:0;font-weight:normal;line-height:normal;transition:all .3s;z-index:1}
.PopularPosts ul li:nth-child(1):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f005'}
.PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f006'}
.PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'\f005\f005\f005\f006\f006'}
.PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f005\f005\f006\f006\f006'}
.PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'\f005\f006\f006\f006\f006'}Aşağıdaki javaScript kodunu </body> kodunun bir satır üzerine ekleyin.
<script>
//<![CDATA[
$(".PopularPosts img").attr('src', function(i, src) {return src.replace('w72-h72', 'w300-h180-p-k-nu');});
//]]>
</script>Popüler Yayınlar Widget'ı Stil 5: Bu Widget stili diğerlerine göre daha sade bir görünüme sahip ve tüm blogcuların kullanabileceği bir Widget tasarımıdır. Widget içerisinde bulunan yayınların resimleri büyük ve yayın başlıkları belirgin bir şekilde resimlerin hemen altında yer almaktadır.
.PopularPosts h2{font-size:17px;color:#222;font-weight:normal;text-transform:uppercase;border-bottom:4px solid #222;background-position:0 50%;background-repeat:repeat-x;margin-bottom:5px;margin-top:0;padding:0 0 10px 0;text-transform:uppercase}
.PopularPosts .item-thumbnail img{padding:0;height:150px;width:100%;display:block;object-fit:cover}
.PopularPosts .item-thumbnail{margin:0 5px 0 0}
.PopularPosts .item-title{font-weight:normal;padding-bottom:.2em;text-shadow:0 1px 0 #fff}
#side .PopularPosts .widget-content{padding:10px 20px}
.PopularPosts li{display:block;padding:10px 0!important;border-bottom:1px solid #eee}
.PopularPosts li:last-child{border-bottom:none}
.PopularPosts li .item-thumbnail{width:100%;height:150px;margin-bottom:10px}
.PopularPosts li .item-title{font-size:15px}
.PopularPosts li .item-title a:hover{color:#555}
.PopularPosts li .item-snippet{font-size:12px;line-height:1.5em;margin:10px 0 0 0;display:none}
.PopularPosts li .item-title a{color:222}Aşağıdaki javaScript kodunu </body> kodunun bir satır üzerine ekleyin.
<script>
//<![CDATA[
$(".PopularPosts img").attr('src', function(i, src) {return src.replace('w72-h72', 'w300-h150-p-k-nu');});
//]]>
</script>Popüler Yayınlar Widget'ı Stil 6: Otomatik numaralandırma ile Widget özel başlık tasarımı ile blog sitelerine farklı bir görünüm kazandıran Widget'lardan biri. Yine liste görünümünde ve Widget içerisinde bulunan ilk yayının resmi büyük ve yayın başlığı resim üzerinde harika bir efekt ile birlikte yer almakta. Benim de en çok beğendiğim Popüler Yayınlar Widget tasarımları arasında yer almakta.
.PopularPosts h2{background:#fff;font-size:20px;font-weight:600;border-bottom:4px solid #fbc701;color:#eb1914;display:inline-block;letter-spacing:-0.8px;line-height:21px;margin-bottom:10px;margin-left:15px;padding:3px 0;text-align:left;word-spacing:3px}
.PopularPosts .widget-content{color:#333;font-size:15px;padding-left:15px;padding-right:15px;padding-bottom:13px;margin-top:0}
.PopularPosts .item-thumbnail img{padding-right:0!important;width:120px;height:auto}
.PopularPosts ul li:first-child .item-thumbnail{position:relative;float:none;margin:0}
.PopularPosts ul li:first-child .item-title a{color:white!important;font-size:20px;font-weight:600;bottom:17px;line-height:22px;padding:0 14px;position:absolute}
.PopularPosts .widget-content ul li:last-child .item-thumbnail{margin-bottom:0!important}
.PopularPosts ul li:first-child .item-thumbnail img{width:100%}
.PopularPosts .widget-content ul li{padding:14px 0 6px!important;counter-increment:popularcount;display:grid;position:relative;border-bottom:1px solid #eee}
.popular-posts ul li a{font-size:13px;color:#222;font-weight:600;line-height:17px;display:block;position:relative;text-decoration:none}
.PopularPosts .widget-content ul li:first-child{padding-top:5px!important;border-bottom:none}
.PopularPosts ul li:first-child .item-thumbnail:before{background:rgba(0,0,0,0) linear-gradient(to bottom,transparent 0,rgba(13,13,13,0.93) 100%) repeat scroll 0 0;bottom:0;content:"";display:block;height:100px;position:absolute;right:0;width:100%;left:0;z-index:9}
.PopularPosts .item-title{position:relative;z-index:9}
.PopularPosts .widget-content ul li:first-child:before{content:counter(popularcount);font-size:60px;padding:10px 12px}
.PopularPosts .widget-content ul li:before{font-size:40px;font-weight:600;border-radius:2px;color:rgba(255,255,255,0.52);content:counter(popularcount);line-height:5px;padding:12px;position:absolute;top:28px;z-index:9}
.PopularPosts .item-thumbnail{float:left;margin:0 5px 5px 0}
.PopularPosts .item-thumbnail{margin:0 15px 5px 0}
.PopularPosts .item-snippet{display:none}
.PopularPosts .widget-content ul li:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0!important}Aşağıdaki javaScript kodunu </body> kodunun bir satır üzerine ekleyin.
<script>
//<![CDATA[
$(".PopularPosts img").attr('src', function(i, src) {return src.replace('w72-h72', 'w300-h180-p-k-nu');});
//]]>
</script>Popüler Yayınlar Widget'ı Stil 7: Hem görüntüsü hem de sadeliği ile belki de en çok tercih edilen Widget stillerinden biri diyebilirim. Uzun zaman önce bir müşterim için özel olarak tasarlamış olduğum WordPress temasında buna benzer bir menü tasarımı yapmıştım. Şimdi Blogger blogları için biraz CSS kodlarında düzenleme yaptım. Widget sıralı numaralandırma özelliği ve animasyon efekti ile şık bir görünümü var.
.PopularPosts{position:relative;overflow:visible;box-sizing:border-box;margin:auto}
.PopularPosts.widget{background:#fff;width:100%;box-shadow:2px 2px 3px rgba(0,0,0,.05)}
.PopularPosts .widget-content{padding:0 20px 20px 20px}
.PopularPosts h2{font-size:20px;font-weight:400;letter-spacing:1px;color:#222;-ms-box-shadow:0 3px 7px rgba(0,0,0,.07);-o-box-shadow:0 3px 7px rgba(0,0,0,.07);-webkit-box-shadow:0 3px 7px rgba(0,0,0,.07);box-shadow:0 3px 7px rgba(0,0,0,.07);padding:15px 20px;margin:0;border-bottom:1px solid #eee;z-index:2;position:relative}
.PopularPosts .item-thumbnail {float:none;margin:0}
#PopularPosts1 .item-thumbnail::after{background:#ff3c36 none repeat scroll 0 0;border:0;border-radius:0;color:#f6f6f6;content:counter(popularcount,decimal);counter-increment:popularcount;height:2.5em;line-height:2.5em;left:0;font-weight:bold;list-style-type:none;position:absolute;text-align:center;top:0;width:1.5em;z-index:4}
#PopularPosts1 ul{counter-reset:popularcount;margin:0;padding:0}
.PopularPosts ul{margin:0;padding:0;list-style:none}
.PopularPosts ul li{position:relative;margin:20px 0 0;padding:0!important}
.PopularPosts ul li img{display:block;width:100%;height:170px}
.PopularPosts .item-title{position:absolute;bottom:0;padding:30px}
.PopularPosts .item-title{padding:0 20px 15px}
.PopularPosts .item-title{background:-webkit-linear-gradient(top,rgba(255,255,255,0) 0,rgba(0,0,0,.8) 100%);background:linear-gradient(to bottom,rgba(255,255,255,0) 0,rgba(0,0,0,.8) 100%);width:100%;box-sizing:border-box}
.PopularPosts .item-title a{font-size:18px;color:#fff;text-decoration:none}
.PopularPosts .item-thumbnail a:before{content:'';transition:opacity .4s ease;position:absolute;bottom:0;left:0;right:0;top:0;background:-webkit-linear-gradient(top,rgba(255,255,255,0) 0,rgba(0,0,0,.8) 100%);background:linear-gradient(to bottom,rgba(255,255,255,0) 0,rgba(0,0,0,.8) 100%);opacity:.8}
.PopularPosts .item-thumbnail a:hover:before{opacity:.6}
.PopularPosts .item-snippet{font-size:14px;line-height:1.5em;padding:20px 0;border-bottom:1px solid #ddd;display:none}Aşağıdaki javaScript kodunu </body> kodunun bir satır üzerine ekleyin.
<script>
//<![CDATA[
$(".PopularPosts img").attr('src', function(i, src) {return src.replace('w72-h72', 'w300-h170-p-k-nu');});
//]]>
</script>Popüler Yayınlar Widget'ı Stil 8: Animasyon efekti ile Widget tasarımına farklı bir stil boyutu kazandıran ve renkli görsellerin daha belirgin olarak ön plana çıkmasını salayan Widget tasarımıdır. Dergi, magazin ve haber blogları için en uygun Widget tasarımlarından biridir.
.PopularPosts h2{line-height:20px;color:#fff;font-size:14px;text-transform:capitalize;background:#333;border:2px solid #333;margin:0 0 0.3em 0;padding:0 10px;display:table;font-weight:normal}
.PopularPosts ul{position:relative;padding:0;list-style:none;display:block;margin:auto;height:auto}
.PopularPosts img{width:100%;object-fit:cover;padding:0!important;height:100%!important}
.PopularPosts .item-thumbnail{float:left;width:100%;height:100px;min-width:75px;min-height:75px;border-radius:100%;margin-right:0!important;margin:0!important}
.PopularPosts .item-snippet{height:31px;overflow:hidden;font-size:12px;line-height:16px;margin-top:2px;color:#777;display:none!important}
.PopularPosts .item-title{background:rgba(0,0,0,0.43);position:absolute;text-align:start;margin-top:0;height:100px;width:100%;display:table-cell;vertical-align:middle;transition:all .3s ease;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-o-transition:all .3s ease;line-height:22px;font-size:15px;padding:0;height:100px;color:#fff;margin:auto;text-align:center;display:table-cell;vertical-align:middle}
.PopularPosts .item-thumbnail img:hover{opacity:.8}
.PopularPosts{transition:all .3s ease;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-o-transition:all .3s ease}
.PopularPosts .widget-content ul li{position:relative;display:-webkit-box;padding:0.3em 0!important}
.PopularPosts .widget-content ul li:last-child{margin-bottom:0;border-bottom:none;padding-bottom:0!important}
.PopularPosts .widget-content ul li:hover .item-title{background:rgba(0,0,0,0.85)}
.PopularPosts .item-title a{font-weight:600;color:#fff;padding:28px;text-align:center;display:block}
.PopularPosts .item-title a:hover{color:#fff}Aşağıdaki javaScript kodunu </body> kodunun bir satır üzerine ekleyin.
<script>
//<![CDATA[
$(".PopularPosts img").attr('src', function(i, src) {return src.replace('w72-h72', 'w300-h150-p-k-nu');});
//]]>
</script>Popüler Yayınlar Widget'ı Stil 9: Popüler yayınların otomatik numaralandırılmış başlıklarını liste halinde görüntülenen Widget tasarımıdır.
.PopularPosts h2{font-size:18px;margin:0 0 20px 0;padding:0}
.popular-posts ul{margin:0;padding:0}
.popular-posts ul li{border-bottom:1px solid #eee;list-style:none outside none!important;margin-left:0!important;overflow:hidden;padding:10px 0!important;transition:all 0.25s linear 0s;counter-increment:trackit}
.PopularPosts ul li:before{content:counters(trackit,".");padding:0 .1em 0 0;font-size:20px;font-weight:bold;color:#949494;float:left;margin-right:10px}
.PopularPosts li:first-child{border-top:1px solid #eee}
.PopularPosts li:nth-child(odd){background:#f5f5f5}
.PopularPosts .item-thumbnail,.PopularPosts .item-snippet{display:none!important}
.PopularPosts a,.PopularPosts a:hover{color:#444;display:table;font-size:.9rem}
#PopularPosts1 li{padding-right:1em!important;padding-left:1em!important;text-transform:none}Popüler Yayınlar Widget'ı Stil 10: Widget içersinde bulunan yayınlar otomatik numaralandırmış büyük resimler ve başlıklar liste görünümündedir. Dergi ve haber yayınları paylaşan bloglar için en uygun Widget tasarımlarından biridir.
.PopularPosts h2{font-size:16px;letter-spacing:normal;font-weight:600;text-transform:uppercase;display:block;overflow:hidden;margin:0;padding-bottom:15px}
.popular-posts ul{margin:0;padding:0;counter-reset:count}
.popular-posts li{display:block;overflow:hidden;margin-bottom:15px;position:relative}
.popular-posts li:before{counter-increment:count;content:counter(count);width:25px;height:32px;font-size:13px;line-height:25px;background:#69ad46;color:#fff;text-align:center;position:absolute;left:10px;margin-top:0;z-index:2;-webkit-clip-path:polygon(0 0,100% 1%,100% 100%,48% 78%,0 100%);clip-path:polygon(0 0,100% 1%,100% 100%,48% 78%,0 100%)}
.popular-posts li:last-child{border:0;margin:0;padding:0}
.item-thumbnail-only{position:relative}
.popular-posts li .item-thumbnail{height:180px;background-color:#111}
.PopularPosts ul li img{box-sizing:border-box;width:100%;height:100%;object-fit:cover;padding:0}
.popular-posts li .item-content{margin:0;padding:0;border:1px solid #eee;border-top:0}
.popular-posts li .item-title{font-size:15px;padding:15px;padding-bottom:5px;font-weight:600;line-height:21px;max-height:42px;overflow:hidden}
.popular-posts li .item-title a{color:#222}
.popular-posts li .item-snippet{display:inline-block;font-size:13px;font-weight:300;color:#222;padding:15px;padding-top:5px;letter-spacing:.02em;line-height:24px;margin-top:5px}Aşağıdaki javaScript kodunu </body> kodunun bir satır üzerine ekleyin.
<script>
//<![CDATA[
$(".PopularPosts img").attr('src', function(i, src) {return src.replace('w72-h72', 'w300-h180-p-k-nu');});
//]]>
</script>Popüler Yayınlar Widget'ı Stil 11: Diğer Widget tasarımlarında tamamen farklı bir stile sahip. Alış-veriş ve moda blogları için en ideal Widget tasarımıdır. Otomatik numaralandırılmış ızgara tarzı bir görünüme ve harika bir hover efektine sahiptir.
#PopularPosts1{display:inline-block}
#PopularPosts1 h2{background:#222;color:#fff;letter-spacing:2px;margin:0 0 20px;padding:13px 0;text-transform:uppercase;text-align:center;font-size:12px}
#PopularPosts1 h2:after{border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #222;content:"";display:block;height:0;left:50%;margin:0 0 0 -5px;position:relative;top:18px;width:0;z-index:10}
#PopularPosts1 ul{counter-reset:popularcount;padding:0;margin:0}
#PopularPosts1 ul li:first-child{width:100%;max-height:100%}
#PopularPosts1 ul li:nth-child(even){}
#PopularPosts1 ul li{list-style:outside none none;box-sizing:border-box;position:relative;width:50%;margin:0;padding:0;overflow:hidden;float:left;transition:all 0.31s ease 0s}
#PopularPosts1 ul li:hover{opacity:1}
#PopularPosts1 .item-thumbnail{margin:0;width:100%}
#PopularPosts1 .item-thumbnail a{display:block}
#PopularPosts1 .item-thumbnail:after{background:#222;color:#fff;font-size:18px;font-weight:bold;content:counter(popularcount,decimal);counter-increment:popularcount;height:30px;line-height:30px;left:0;list-style-type:none;position:absolute;text-align:center;top:0;width:30px;z-index:4}
#PopularPosts1 ul li img{box-sizing:border-box;width:100%;height:100%;object-fit:cover;padding:0}
#PopularPosts1 .item-content:hover .item-title a,#PopularPosts1 .item-thumbnail-only:hover .item-title a{background:rgba(0,0,0,0.1) none repeat scroll 0 0;visibility:visible;opacity:1}
#PopularPosts1 .item-title a{bottom:0;color:#fff;left:0;font-weight:bold;opacity:0;padding:10px;position:absolute;right:0;text-align:center;visibility:hidden}
#PopularPosts1 .item-snippet{display:none}
#PopularPosts1 img:hover{filter:saturate(250%)}Aşağıdaki javaScript kodunu </body> kodunun bir satır üzerine ekleyin.
<script>
//<![CDATA[
$(".PopularPosts img").attr('src', function(i, src) {return src.replace('w72-h72', 'w300-h180-p-k-nu');});
//]]>
</script>Bu yazımızda blogcular için, Blogger bloglarında bulunan Popüler Yayınlar Widget tasarımlarını paylaştım. Yazı içerinde Widget ile ilgili birkaç ipucu ile bilgilere de yer vererek blogcular için kapsamlı bir bilgi yazısı paylaşmış oldum.
Aslında bu yazıyı uzun zaman önce yayınlamayı düşünüyordum. Blogger üzerinde çok önemli 3 tasarım üzerinde çalışıyorum, bugüne kadar web üzerinde paylaşılmış olan tema ve eklentilerden biraz daha farklı ve blogcuların tüm isteklerini karşılayabilecek tasarımları en kısa sürede sitemizden yayınlayacağım. Tasarımalar dışında blog siteleri için Google, SEO ve reklam gibi çok önemli yazıları da yine blog sitemizden paylaşacağım.
Yukarıdaki Widget tasarımları ile ilgili olarak görüş ve sorularınız için, aşağıdaki yorum formunu kullanarak bize iletebilirsiniz.
0 komentar: