Blogger Breadcrumbs Navigasyonu Ekleme

Blogger Breadcrumbs Navigasyonu Ekleme

2/28/2017 Yorumlar
Blogger Breadcrumbs Navigasyonu Ekleme

Blogger Breadcrumbs Navigasyonu Ekleme - Bu yazımızda blog sitelerine breadcrumbs navigasyonu nasıl ekleneceği konusunda küçük ipuçları hakkında bilgi vereceğim. Peki bu breadcrumbs nedir, blog sitelerinde ne işe yarar? Öncelikle bu soruları kısaca cevaplayalım;

Blogger breadcrumbs, blog sitelerinin alt kategorilerinden oluşan yapının daha hızlı gezinme sağlaması için bir veri işaretleyicisidir. Breadcrumbs işlevlerinde blog SEO yapısı için önemli bir işlevi bulunuyor. Bu blogcular ve kullanıcılar tarafından görülmeyen ve blogun yapısını hakkında Google botlarına yol tarif eden bir görevi olduğunu söyleyebiliriz. Böylece blogunuzun daha düzenli indeks alması ile ziyaretçilerin gezinme alışkanlığı da o kadar basitleşmektedir. Tabi bu da Google botları tarafından artı olarak işaretlenir ve Google blogunuza bir ödül daha vermiş olur.

E-ticaret sitesi olanlar breadcrumbs özelliğinden çok faydalanırlar. Çünkü çok sayıda kategori ve alt kategori içeren e-ticaret sitelerinde gezinme yerlerini göstermesi ile kullanıcılara çok yardımcı olur. Bu sadece e-ticaret yada Web siteleri için değil blog siteleri için de çok faydalı olduğunu söylemek için bu açıklamayı yaptım.

Blogger Breadcrumbs Nasıl Kullanılır?


Ana Sayfa » Kategori Adı (Yani Etiket) » Sayfa Adı

Blog sayfa ve yayınlarını bu şekilde kategorize edildiğinde, Google arama sonuçlarında da bu şekilde görünecektir. Kullanıcılar blog yayınlarınızın bulunduğu kategoriye de ulaşmak istemesi durumunda, breadcrumbs veri işaretleyicisini blogunuzda kullandığınızda yayınların bulunduğu kategoriye ulaşmak için de bu navigasyonu kullanabilir. Bu nedenle blogger breadcrumbs blogunuzda çok kullanışlı olacaktır.

Blogger Breadcrumbs Faydaları


Blogunuza breadcrumbs eklemenin avantajları, blogunuzun sayfa görüntülenme sayısını artırır ve blogunuzdaki dahili bağlantıları geliştirir. Breadcrumbs blogunuzun iç stratejisini oluşturur; kategorileri, yayınları, arşiv bağlantılarını ve ilgili yayınları yayınlara bağlayan yapısal veri aracıdır. Bu nedenle breadcrumbs özelliğini blogunuza eklemeniz gerekiyor.

Blogger Breadcrumbs Nasıl Eklenir?


Blogger hesabınıza giriş yapın ve blogunuzun kumanda panelinde bulunan Şablon > HTML'i Düzenle yolunu takip ederek blogunuzun şablon editör (şablon kodları) sayfasını açın.

1- Aşağıdaki CSS kodları eklemek için, şablon kodları sayfasında CTRL+F yardımı ile ]]></b:skin> yada </style> kodunu bulun ve CSS kodlarını ]]></b:skin> yada </style> kodunun bir satır üzerine ekleyin.

/* Blogger Breadcrumbs */
.breadcrumbs {
    background: #fff;
    color: #444;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 12px;
    padding: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    font-weight: 700;
}
.breadcrumbs a {
    color: #000;
    margin: 0 2px;
    line-height: normal;
}
.breadcrumbs .breadhome a {
    margin: 0 5px 0 0
}
.breadcrumbs .breadlabel:last-child {
    margin: 0 0 0 4px
}
.breadcrumbs a:hover {
    color: #2e9fff;
}

2- Blogger breadcrumbs navigasyonunu eklemek için aşağıdaki HTML kodu bulun ve bu koddan sonraki bölüme blogger breadcrumbs HTML kodunu ekleyin.

<b:includable id='main' var='top'>...</b:includable>

Aşağıdaki HTML kod örneğinde olduğu gibi blogunuzda bu HTML kod aralığını bulun.

<b:includable id='backlinks' var='post'>...</b:includable>
<b:includable id='breadcrumb' var='posts'>...</b:includable>
<b:includable id='comment-form' var='post'>...</b:includable>

Eklemeniz gereken breadcrumbs HTML kodları aşağıdadır. Bu kodları yukarıdaki örnekte olduğu gibi blogunuza ekleyin.

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span class='breadhome'><a expr:href='data:blog.homepageUrl' rel='tag'>Ana Sayfa</a>&amp;#187;</span><span class='breadlabel'><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span class='breadhome' typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Ana Sayfa</a>&amp;#187;</span>
<b:loop values='data:post.labels' var='label'>
<span class='breadlabel' typeof='v:Breadcrumb'><a expr:href='data:label.url + &quot;?&amp;amp;max-results=7&quot;' property='v:title' rel='v:url'><data:label.name/></a> &amp;#187;</span>
</b:loop>
<span class='breadlabel'><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span class='breadhome'><a expr:href='data:blog.homepageUrl' rel='tag'>Ana Sayfa</a>&amp;#187;</span><span class='breadlabel'/><span class='breadlabel'><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<div class='breadcrumbs'>
<span class='breadhome'><a expr:href='data:blog.homepageUrl'>Ana Sayfa</a>&amp;#187;</span><span>Arşiv<data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span class='breadhome'><a expr:href='data:blog.homepageUrl'>Ana Sayfa</a>&amp;#187;</span><span class='breadlabel'>Tüm yayınlar</span>
<b:else/>
<span class='breadhome'><a expr:href='data:blog.homepageUrl'>Ana Sayfa</a>&amp;#187;</span><span class='breadlabel'>Yayınlar yayınlandı.<data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

3- Şablonu kaydedin ve breadcrumbs blogunuza düzgün eklendiğinden emin olmak için Google Yapısal Veri Test Aracı'nı kullanabilirsiniz.

Blog sitesine breadcrumbs navigasyonu ekleme ile ilgili bilgileri sizinle paylaşmaya çalıştım, bu anlattığım bilgilerin blog sitenize çok faydalı olduğunu blogunuzda görebilirsiniz. Bu yayın ile ilgili görüş ve önerileriniz için yorum bırakabilirsiniz.
Material Tasarımlı Blogger Slim Teması

Material Tasarımlı Blogger Slim Teması

2/27/2017 Yorumlar
Material Tasarımlı Blogger Slim Teması

Material Tasarımlı Blogger Slim Teması - Blog sitelerinin hızlı ve basit olması hem kullanıcı deneyimi hem de Google indeks açısından çok önemlidir. Bu yazımızda yazı ve kısa bilgiler paylaşan blogcular için muhteşem bir blog temasını paylaşacağım. Material tasarımlı blog temalarının tam da istenilen seviyede olduğunu söylemek erken olsa da görünümü itibariyle blog sitelerine canlılık katmaktadır.

Material Tasarımlı Blogger Slim Teması Özellikleri


Slim temanın en büyük özelliği kısa kodlaması ile masaüstü ve mobil ekranlarda yüklenme ve sayfa geçişlerinin son derece hızlı olmasıdır. Adsense reklam politikalarına uygun reklam alanları ile gelirlerini en üst seviyede tutabilirsiniz. İnce ve zarif görünümünün yanı sıra kullanıcı deneyimi açısından da oldukça kullanışlıdır.
ÖZELLİKLERİKULLANILABİLİRKİK
Mobil Uyumluluk TestiVar Kontrol
Google Mobil Uyumluluk TestiVar Kontrol
Google Yapısal Veri Test AracıVarKontrol
SEO UyumluEvet
Dinamik BaşlıklarEvet
Adsense UyumluEvet
Schema.orgEvet
Kişisel Blog TemasıEvet
2 SütunEvet
Otomatik DevamıEvet
Duyarlı Reklam AlanıEvet
BreadcrumbsEvet
İlgili Yayınlar Widget'iEvet
Arama KutusuEvet
Özel Sosyal Paylaşım ButonlarıEvet
NavigasyonEvet
Başa Dön ButonuEvet
Kısa KodlamaEvet
Material TasarımEvet

Kısa Bilgiler


Temayı blogunuza kurduktan sonra tema kodları arasında bulunan <!-- [ADSENSE REKLAM KODU] --> bu alanlara Adsense ve diğer reklam kodlarını ekleyebilirsiniz. Yine tema kodları arasında bulunan <!-- [ADSENSE SAYFA DÜZEYİ REKLAM KODU] --> alana Adsense sayfa düzeyi reklam kodunu ekleyebilirsiniz.

Windows 10 Yükseltme Yardımcısı

Windows 10 Yükseltme Yardımcısı

2/27/2017 Yorumlar
Windows 10 Yükseltme Yardımcısı

Windows 10 Yükseltme Yardımcısı - Microsoft, ücretsiz Windows 10 yükseltmesini durdurdu. Microsoft'un sitesindeki yükseltme linki hala bulunmakta ve Windows 10'u hala ücretsiz olarak indirebilirsiniz.

Microsoft, windows 10'u ücretsiz yükseltme imkanı sunmuştu. Windows 7, Windows 8 ve Windows 8.1 sürümlerine sahip olan kullanıcılar ücretsiz olarak Windows 10 yükseltme yardımcısından güncelleme işlemini yaptı. windows 10 yükseltme ve güncelleme işlemi sona erdi.

Ücretsiz Windows 10 yükseltme ve güncelleme işlemi 29 Temmuz 2017 tarihde sona ermesi ile bazı kullanıcıların bu bu güncellemeden faydalanamadığından dolayı, sizlere Windows 10 yükseltme bağlantısı sizinle paylaşıyoruz.

Windows 10 Kurulum Gereksinimleri


İşlemci – 1GHz veya daha hızlı
Bellek – 32-bit için minimum 1GB veya 64-bit için minimum 2GB
Boş disk alanı –  16GB veya daha fazla
Grafik kartı – Microsoft DirectX 9 destekli (WDDM driver ile)
Giriş hesabı – Bir Microsoft Account ve internet bağlantısı (veya yerel bir hesap)

Windows 10'u İndirin


Windows 10 yükseltme yardımcısını indirmek için buraya tıklayın. Açılan sayfada Upgrade Now (Şimdi Yükselt) yazan yere tıklayın.

Windows 10 Kurulum


Kurulum tamamen Türkçe ve oldukça kolaydır. İndirdiğiniz yükseltme yardımcısına sağ tıklayarak yönetici olarak "Yönetici olarak çalıştır" seçeneğini tıklayın. Kurulum başlıyor, Windows 7 kurulumu ile aynıdır.

Kurulum bitikten sonra sadece yapmanız gereken uyumluluk sorununu giderme işlemi yapmak.

Program Uyumluluğu Sorunu Gidericisi'ni Çalıştır


1- Arama kutusuna, programları çalıştır yazın.
2- Windows'un önceki sürümleri için geliştirilen programları çalıştır seçeneğini seçin, ve sonra da ileri seçeneğini seçin.
3- Düzeltmek istediğiniz programı seçin. Programı listede görmüyorsanız Listelenmemiş seçeneğini seçin.
4- İleri seçeneğini seçin ve sonrasında sorun gidericideki talimatları takip edin.

Sorun giderici sorunu düzeltmezse, uyumluluk ayarlarını el ile değiştirmeyi deneyin.


Uyumluluk ayarlarını el ile değiştir

Windows'un önceki sürümleri için oluşturulan çoğu program Windows'un bu sürümünde de çalışır, ancak daha eski bazı programlar düzgün ya da hiç çalışmayabilir. Sık karşılaşılan uyumluluk sorunlarını algılanmasına ve çözmeye yardım etmesi için, çoğu programda Program Uyumluluğu Sorun Gidericisi'ni çalıştırabilirsiniz.

Bu adımlar, Windows ile birlikte gelen veya Windows Mağazası'ndan aldığınız uygulamalarla çalışmaz.

1- Arama kutusuna programın adını yazın, arama sonucunu sağ tıklayın ve Dosya konumunu Aç seçeneğini seçin.
2- Program simgesine sağ tıklayın Özellikler'i seçin, ve sonrasında Uyumluluk sekmesini seçin.
3- Ayarların birini veya birden çoğunu seçin (daha fazla bilgi için aşağıdaki tabloya bakın).
4- Söz konusu programın ayarlarını bilgisayardaki tüm hesaplara uygulamak istiyorsanız, Tüm kullanıcıların ayarlarını değiştir seçeneğini seçin.
5- Yönetici izni gereklidir Yönetici izni gereklidir. Bir yönetici parolası girmeniz veya seçiminizi onaylamanız istenebilir.
6- İşiniz bittiğinde Tamam'ı seçin.

Kaynak: https://support.microsoft.com
Blog Yayınları İçerisine İlgili Yayınlar Eklentisi Kurulumu

Blog Yayınları İçerisine İlgili Yayınlar Eklentisi Kurulumu

2/23/2017 Yorumlar
Blog Yayınları İçerisine İlgili Yayınlar Eklentisi Kurulumu

Blog Yayınları İçerisine İlgili Yayınlar Eklentisi Kurulumu - Blog sayfalarında kullanılan ilgili yayınlar (makale) widget'ini biliyorsunuz. Bu widget ile blog yayınlarınızın içerisinde sadece link vererek küçük bağlantılar şeklinde blog yayınlarınızın arasında etikete uygun yayın başlıklarının bir dizi şeklinde görünmesi özelliğini paylaşıyoruz.

Bir önceki yazımızda buna benzer faklı bir yayın paylaşmıştık "Blog Yayınları İçerisine Adsense Reklemları Ekleme" fakat bu biraz daha farklı bir eklenti.

Bu yazımızda blog yayınları arasında ilgili yayın bağlantıların görünmesini sağlayarak hem blogunuzun iç bağlantılarının kalitesini artırarak blogunuzun bağlantılarını iyileştirme amaçlanmıştır. Böylece blogunuz güçlü iç bağlantılara sahip olarak blogunuzun ziyaretçi sayını da artırmış oluyorsunuz. Şim bu özellikleri blogunuzda uygulamak için aşağıdaki adımları takip edin.

Blog Yayınları İçerisine İlgili Yayınlar Eklentisi Nasıl Kurulur?


1- Blogger hesabınıza giriş yapın ve blogunuzun kumanda panelinde Şablon > HTML'i Düzenle yolunu takip ederek blogunuzun şablon kodları sayfasını açın. Şablon kodları sayfasında CTRL+F yardımı ile </head> kodunu bulun ve aşağıdaki javaScript kodunu </head> kodunun bir satır üzerine ekleyin.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
var rtdstrm = new Array(); var rtdstrmNum = 0; var rtdUrls = new Array(); function rtd_results_labels(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; rtdstrm[rtdstrmNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {rtdUrls[rtdstrmNum] = entry.link[k].href; rtdstrmNum++; break;}}}} function removertdDuplicates() { var tmp = new Array(0); var tmp2 = new Array(0); for(var i = 0; i < rtdUrls.length; i++) { if(!contains(tmp, rtdUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = rtdUrls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = rtdstrm[i];}} rtdstrm = tmp2; rtdUrls = tmp;} function contains(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false;} function printrtdLabels() { var r = Math.floor((rtdstrm.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < rtdstrm.length && i < 20) { document.write('<li><a href="' + rtdUrls[r] + '">' + rtdstrm[r] + '</a></li>'); if (r < rtdstrm.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');}
//]]>
</script>
</b:if>

2- Aşağıdaki CSS kodunu ]]></b:skin> yada </style> kodunun bir satır üzerine ekleyin.

Blog Yayınları İçerisine İlgili Yayınlar Eklentisi Kurulumu

Örnek Widget İlgili Yayınlar Stil 1
/* İlgi Yayınlar Widget CSS */
.rtd-str{position:relative;padding:0;margin:15px auto;width:100%;}
.rtd-str h4{background:#9e9e9e;padding:8px 12px;margin:0;font-size:15px;font-weight:400;color:#fff;border:1px solid #9e9e9e}
.rtd-str ul{margin:0;padding:0}
.rtd-str ul li{background:#f6f6f6;position:relative;list-style:none;padding:9px;margin:auto;line-height:1.4em;border:1px solid rgba(0,0,0,0.1);border-bottom:0;transition:all .3s}
.rtd-str ul li:nth-child(odd){background:#fefefe}
.rtd-str ul li:last-child{border-bottom:1px solid rgba(0,0,0,0.1)}
.rtd-str ul li:before{content:'\f138';font-family:fontawesome;position:absolute;margin:0 9px 0 4px;color:#ff5722;overflow:hidden;transition:all .3s}
.rtd-str ul li:hover:before{content:'\f138';font-family:fontawesome;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}
.rtd-str a{color:#00bcD4;font-size:13px;margin:0 0 0 30px;}
.rtd-str a:hover{color:#03a1b5;text-decoration:underline}
.rtd-str ul li:nth-child(n+4) {display:none;}
@-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}
@keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}

Blog Yayınları İçerisine İlgili Yayınlar Eklentisi Kurulumu

Örnek Widget İlgili Yayınlar Stil 2


/* İlgi Yayınlar Widget CSS 2 */
.rtd-str{position:relative;padding:20px 12px 12px 12px;margin:32px auto 24px auto;width:93%;border:4px double rgba(0,0,0,0.2)}
.rtd-str h4{background:#fff;padding:8px 10px;position:absolute;margin:0;font-size:17px;font-weight:700;color:#000;top:-21px;left:2.5%}
.rtd-str ul{margin:0;padding:0}
.rtd-str ul li{position:relative;list-style:none;padding:9px 0;margin:auto;line-height:1.4em;transition:all .3s}
.rtd-str ul li:before{content:'\f0c8';font-family:fontawesome;position:absolute;margin:0 5px 0 2px;color:#ff5722;overflow:hidden;font-size:60%;left:10px;transition:all .3s}
.rtd-str ul li:hover:before{content:'\f0c8';font-family:fontawesome;color:#0383d9;}
.rtd-str a{color:#00bcD4;font-size:14px;margin:0 0 0 30px;}
.rtd-str a:hover{color:#03a1b5;}
.rtd-str ul li:nth-child(n+4) {display:none;}
@media only screen and (max-width:768px){
.rtd-str{padding:15px 0 10px 0;width:100%;border:2px solid #e74c3c;border-left:0;border-right:0}
.rtd-str h4{color:#e74c3c;padding:8px;font-size:15px;top:-18px;left:3.5%}
.rtd-str a{font-size:14px;margin:0}.rtd-str a:hover{color:#03a1b5}
.rtd-str ul li{padding:5px 0}
.rtd-str ul li:before,.rtd-str ul li:hover:before{display:none}}
Blogunuzda Font Awesome icon yazı simgesinin kurulu olduğunu kontrol edin.
3- Aşağıdaki HTML kodu eklemek için blogunuzun şablon kodları sayfasında <data:post.body/> kodunu bulun ve aşağıdaki HTML kod ile bu kodu değiştirin. Blogunuzda birden fazla <data:post.body/> kodu olabilir, doğru kodu bulmak için tek tek deneyin.

<div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='rtd-str'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=rtd_results_labels&amp;max-results=3&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<h4>Benzer Konular</h4>
<script type='text/javascript'>
removertdDuplicates();
printrtdLabels();
</script>
</div>
<div expr:id='&quot;post2&quot; + data:post.id'><p><data:post.body/></p></div>
<script type='text/javascript'>
var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;);
var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;);
var s=obj1.innerHTML;
var t=s.substr(0,s.length/2);
var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);
if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
</script>

4- Son olarak blogunuzu kontrol ederek şablonu keydedin.


Bu yayınımızda ilgili yayın bağlantılarını blog yayınları arasında gösterilmesini anlattık. Bu uyguluma blog okuyucularını asla rahatsız etmez, diğer yayın bağlatılarının da ziyaretçilere görünmesi ile blog içi dolaşımını artırır. Böylece bir blog için faydalı olan bir eklentiyi daha sizlerle paylaştık ve bu bilgilerin blogunuz için çok faydalı olacağını düşünüyorum.
Blog Popüler Yayınlar Yeni Widget Tasarımı

Blog Popüler Yayınlar Yeni Widget Tasarımı

2/23/2017 Yorumlar
Blog Popüler Yayınlar Yeni Widget Tasarımı

Blog Popüler Yayınlar Yeni Widget Tasarımı - Blog popüler yayın widget'i yani tasarı ile sayfanızın canlılık kazanmasını ve yayınlarınıza olan ilginin artmasını sağlamaktadır. Blogunuzun popüler yayın widget'ini yeniden tasarlamak için aşağıdaki adımları takip edin. Bunun için sizlere CSS hakkında ipuçları vereceğim.

Blog Popüler Yayın Widget'ini Yeniden Tasarlama


1- Blogger hesabınıza giriş yapın ve blogunuzun kumanda panelinden Şablon > HTML'i Düzenle yolunu takip ederek blogunuzun editör sayfasını yani şablon kodları sayfasını açın. CTRL+F yardımı ile ]]></b:skin> veya </style> kodunu bulun ve aşağıdaki CSS kodlarını ]]></b:skin> veya </style> kodunun bir satır üzerine ekleyin.

Eğer kodları ekledikten sonra popüler yayın resminde bozulma oluyorsa, daha önce paylaşmış olduğumuz "Blog Popüler Yayınlar Resimlerini Yeniden Boyutlandırma" yayını gözden geçirin.

Stil 1 Turuncu

/* Popular Yayınlar */
#PopularPosts1{padding:0;}
#PopularPosts1 h2{background:#dd8231}
#PopularPosts1 ul{padding:0;background:#dd8231;counter-reset:popcount}
#PopularPosts1 ul li{margin:0;padding:15px 10px 15px 45px;position:relative;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.3);transition:all .3s}
#PopularPosts1 ul li:last-child{border-bottom:none}
#PopularPosts1 ul li .item-title{color:#fff;padding:0 10px 0 0}
#PopularPosts1 ul li:hover{background:rgba(0,0,0,0.06)}
#PopularPosts1 ul li .item-title a{font-size:14px;font-weight:700;color:#fff}
#PopularPosts1 ul li img{width:300px;height:auto;}
#PopularPosts1 ul li:first-child{border-bottom:none;padding:0}
#PopularPosts1 ul li:first-child .item-thumbnail{margin:0;width:100%;height:180px;overflow:hidden;display:block}
#PopularPosts1 ul li:first-child .item-title{position:absolute;left:0;right:0;bottom:0;top:0;text-align:left;padding:15px 20px 15px 45px;background:rgba(44,62,80,.6);z-index:1;transform:translate(0,105px);transition:all .3s}
#PopularPosts1 ul li:hover:first-child .item-title{background:rgba(44,62,80,1);transform:translate(0,0)}
#PopularPosts1 ul li:first-child .item-title a{font-size:15px;color:#fff}
#PopularPosts1 ul li .item-thumbnail,#PopularPosts1 .item-snippet{display:none}
#PopularPosts1 ul li:first-child .item-snippet{display:block;position:absolute;bottom:0;left:0;right:0;top:0;padding:15px 20px 15px 45px;color:#fff;opacity:0;visibility:hidden;transform:translate(0,180px);font-size:13px;overflow:hidden;text-overflow:ellipsis;height:7.5em;transition:all .3s}
#PopularPosts1 ul li:first-child .item-snippet:after{content:'';text-align:right;position:absolute;bottom:0;right:0;width:70%;height:1.2em;background:linear-gradient(to right,rgba(44,62,80,0),rgba(44,62,80,1) 50%)}
#PopularPosts1 ul li:hover:first-child .item-snippet{opacity:1;visibility:visible;transform:translate(0,55px);z-index:2;}
#PopularPosts1 ul li .item-title:before{list-style-type:none;padding:0;counter-increment:popcount;content:counter(popcount);position:absolute;left:5%;top:61%;margin-top:-19px;color:rgba(255,255,255,.65);font-size:24px;line-height:1;z-index:2;text-align:center;font-weight:700;transition:all .3s}
#PopularPosts1 ul li:first-child .item-title:before{top:25%}
#PopularPosts1 ul li:first-child .item-title:before{color:#fff}
#PopularPosts1 ul li:hover .item-title:before{color:rgba(255,255,255,1)}

Blog Popüler Yayınlar Yeni Widget Tasarımı

Stil 2 Mavi

/* Popular Yayınlar */
#PopularPosts1{padding:0;}
#PopularPosts1 h2{background:#54a5db}
#PopularPosts1 ul{padding:0;background:#54a5db;counter-reset:popcount}
#PopularPosts1 ul li{margin:0;padding:15px 10px 15px 45px;position:relative;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.3);transition:all .3s}
#PopularPosts1 ul li:last-child{border-bottom:none}
#PopularPosts1 ul li .item-title{color:#fff;padding:0 10px 0 0}
#PopularPosts1 ul li:hover{background:rgba(0,0,0,0.06)}
#PopularPosts1 ul li .item-title a{font-size:14px;font-weight:700;color:#fff}
#PopularPosts1 ul li img{width:300px;height:auto;}
#PopularPosts1 ul li:first-child{border-bottom:none;padding:0}
#PopularPosts1 ul li:first-child .item-thumbnail{margin:0;width:100%;height:180px;overflow:hidden;display:block}
#PopularPosts1 ul li:first-child .item-title{position:absolute;left:0;right:0;bottom:0;top:0;text-align:left;padding:15px 20px 15px 45px;background:rgba(44,62,80,.6);z-index:1;transform:translate(0,105px);transition:all .3s}
#PopularPosts1 ul li:hover:first-child .item-title{background:rgba(44,62,80,1);transform:translate(0,0)}
#PopularPosts1 ul li:first-child .item-title a{font-size:15px;color:#fff}
#PopularPosts1 ul li .item-thumbnail,#PopularPosts1 .item-snippet{display:none}
#PopularPosts1 ul li:first-child .item-snippet{display:block;position:absolute;bottom:0;left:0;right:0;top:0;padding:15px 20px 15px 45px;color:#fff;opacity:0;visibility:hidden;transform:translate(0,180px);font-size:13px;overflow:hidden;text-overflow:ellipsis;height:7.5em;transition:all .3s}
#PopularPosts1 ul li:first-child .item-snippet:after{content:'';text-align:right;position:absolute;bottom:0;right:0;width:70%;height:1.2em;background:linear-gradient(to right,rgba(44,62,80,0),rgba(44,62,80,1) 50%)}
#PopularPosts1 ul li:hover:first-child .item-snippet{opacity:1;visibility:visible;transform:translate(0,55px);z-index:2;}
#PopularPosts1 ul li .item-title:before{list-style-type:none;padding:0;counter-increment:popcount;content:counter(popcount);position:absolute;left:5%;top:61%;margin-top:-19px;color:rgba(255,255,255,.65);font-size:24px;line-height:1;z-index:2;text-align:center;font-weight:700;transition:all .3s}
#PopularPosts1 ul li:first-child .item-title:before{top:25%}
#PopularPosts1 ul li:first-child .item-title:before{color:#fff}
#PopularPosts1 ul li:hover .item-title:before{color:rgba(255,255,255,1)}

Stil 3 Siyah

/* Popular Yayınlar */
#PopularPosts1{padding:0;}
#PopularPosts1 h2{background:#222}
#PopularPosts1 ul{padding:0;background:#222;counter-reset:popcount}
#PopularPosts1 ul li{margin:0;padding:15px 10px 15px 45px;position:relative;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.3);transition:all .3s}
#PopularPosts1 ul li:last-child{border-bottom:none}
#PopularPosts1 ul li .item-title{color:#fff;padding:0 10px 0 0}
#PopularPosts1 ul li:hover{background:rgba(0,0,0,0.06)}
#PopularPosts1 ul li .item-title a{font-size:14px;font-weight:700;color:#fff}
#PopularPosts1 ul li img{width:300px;height:auto;}
#PopularPosts1 ul li:first-child{border-bottom:none;padding:0}
#PopularPosts1 ul li:first-child .item-thumbnail{margin:0;width:100%;height:180px;overflow:hidden;display:block}
#PopularPosts1 ul li:first-child .item-title{position:absolute;left:0;right:0;bottom:0;top:0;text-align:left;padding:15px 20px 15px 45px;background:rgba(44,62,80,.6);z-index:1;transform:translate(0,105px);transition:all .3s}
#PopularPosts1 ul li:hover:first-child .item-title{background:rgba(44,62,80,1);transform:translate(0,0)}
#PopularPosts1 ul li:first-child .item-title a{font-size:15px;color:#fff}
#PopularPosts1 ul li .item-thumbnail,#PopularPosts1 .item-snippet{display:none}
#PopularPosts1 ul li:first-child .item-snippet{display:block;position:absolute;bottom:0;left:0;right:0;top:0;padding:15px 20px 15px 45px;color:#fff;opacity:0;visibility:hidden;transform:translate(0,180px);font-size:13px;overflow:hidden;text-overflow:ellipsis;height:7.5em;transition:all .3s}
#PopularPosts1 ul li:first-child .item-snippet:after{content:'';text-align:right;position:absolute;bottom:0;right:0;width:70%;height:1.2em;background:linear-gradient(to right,rgba(44,62,80,0),rgba(44,62,80,1) 50%)}
#PopularPosts1 ul li:hover:first-child .item-snippet{opacity:1;visibility:visible;transform:translate(0,55px);z-index:2;}
#PopularPosts1 ul li .item-title:before{list-style-type:none;padding:0;counter-increment:popcount;content:counter(popcount);position:absolute;left:5%;top:61%;margin-top:-19px;color:rgba(255,255,255,.65);font-size:24px;line-height:1;z-index:2;text-align:center;font-weight:700;transition:all .3s}
#PopularPosts1 ul li:first-child .item-title:before{top:25%}
#PopularPosts1 ul li:first-child .item-title:before{color:#fff}
#PopularPosts1 ul li:hover .item-title:before{color:rgba(255,255,255,1)}


CSS kodlarını ekledikten sonra blog şablonunu kaydedin. Şablonu kaydettikten sonra blogunuzu kontrol edin, muhtemelen popüler yayınlar resim düzeninden başka sorun olmayacaktır. Yukarıda bilgi amaçlı eklediğimiz sayfada yeterli bilgiler bulamadıysanız ve sorunu gideremiyorsanız bu yayına yorum yaparak sorunlarınızı belirtebilirsiniz.