Blogger Blogspor Site Haritası Neden 20 Sayfa ve 3000 URL Sınırlı?

Blogger Blogspor Site Haritası Neden 20 Sayfa ve 3000 URL Sınırlı?

3/25/2017 5 Yorumlar
Blogger'da site haritası.xml dosyası nasıl oluşturulur ve barındırılır?

Blogger Blogspor Site Haritası Neden 20 Sayfa ve 3000 URL Sınırlı? - Blogger sitemap.xml (site haritası) teknik önbellek sorunu nedeniyle 20 alt sayfa ile sınırlı olduğundan her sayfa için 150 bağlantı içeriyor. Blogger Blogspot site haritası dizin dosyası bu teknik hatadan dolayı, Google Web Yöneticisi Arama Konsoluna en fazla 3000 URL gönderiyor. Blogger dizin dosyasındaki site haritası sayfa organizasyonu (ana site sitemap.xml) 20 sayfa blog kayıtlarını başarılı bir şakilde site haritası dizininde sıralı olarak gösteriyor. 20 sayfalık blog kayıt oluştuktan sonra, ana sayfaya ping yapılmıyor veya yenilenmiyor.

Bu yazı yeni başlayan blog yazarları için biraz kafa karıştırıcı olabilir. Bu sorunu gidermek için aşağıdaki illüstrasyonlar ve çözümler, blog kullanıcılarının webmaster'ın yalnızca 3000 URL'yi dizine eklediğini ve blog yayınlarının kalan kısmını dizine eklenmememisi sorununu analamaları ve çözmelerine yardımcı olacaktır.

Blogunuzun Site Haritası İçin Sayfa Sayısını Hesaplayın


Blogger site haritası dizin dosyası, blog yayınlarının her sayfasında toplam 150 bağlantı içerir ve alt sayfalarda gruplandırır. Böylelikle her bir sayfada bulunan bağlantı sayının 150'yi aşması durumunda yeni bir sayfa oluşturur.

Bir örnek vererek daha detaylı anlatalım;

Blogunuzda toplam 750 yayın olduğunu varsayalım, site haritası dizin dosyası her sayfa için 150 bağlantı içerdiğinden toplam 5 sayfa oluşturur (750/150 = 5 sayfa).

Eğer blogunuzda toplam 675 yayın olsaydı, yine aynı şekilde dizin dosyasında 5 sayfa oluşacaktı (675/150 = 4,5). Her sayfa 150 bağlantı içermesinden dolayı 5. sayfa da 150 bağlantıyı aştığında 6. sayfa oluşacaktır.

Blogger site haritası dizin dosyasının "blog-adi.blogspot.com/sitemap.xml" adresinde bulunduğunu anlatmıştık.

Blog sayfalarının sitemap.xml dizin dosyasında sıralanma listesi;

http://blog-adi.blogspot.com/sitemap.xml?page=1
http://blog-adi.blogspot.com/sitemap.xml?page=2
http://blog-adi.blogspot.com/sitemap.xml?page=3
http://blog-adi.blogspot.com/sitemap.xml?page=4
.
.
.
http://blog-adi.blogspot.com/sitemap.xml?page=20

Blog yayın sayısının 3000'i geçmediği sürece site haritası dizini bu sayfaları otomatik olarak sıralı bir şekilde oluşturacak. Yayın sayısı 3000'i geçtiğinde site haritası dizini 20 sayfadan oluştuğu için (20X150 = 3000) buna uygun olacak şekilde sıralanır. Kalan sayfalar sunucu tarafından oluşturulmuş olsa bile site haritası dizininde yer almaz ve listelenmez. Bu fazladan sayfaları manuel olarak oluşturulmasını ve Google arama konsoluna ayrı ayrı nasıl gönderileceğini anlatacağım.

Blogger'da site haritası.xml dosyası nasıl oluşturulur ve barındırılır?


Blogger site haritası oluşturma ve gönderme işlemini daha önce anlatmıştık, aşağıdaki yayınları da okuyarak daha fazla bilgi sahibi olabilirsiniz.

Bknz: Blogger Sitesini Google Search Console Ekleme

Bknz: Blogger Sabit Sayfalar İçin Site Haritası Oluşturma

Blogger blogspot dinamik sayfa site haritasını aşağıdaki iki yolla göndermeliyiz:

1- Blog yayınlarınız 3000'den az olması durumunda aşağıdaki site haritasını Google ve Bing arama konsoluna göndermeniz yeterli olacaktır.

2- Blog yayınlarınız 3000'i geçtiğinde aşağıdaki site haritanızı manuel olarak oluşturarak Google ve Bing arama konsoluna göndermeniz yeterli olacaktır.

Blogunuzda 3375 yayın olduğunu varsayarsak, bakkal hesabı dediğimiz basit matematik kuralları ile blogunuzun sayfa sayısını bulabilirsiniz. 3375 yayın bulunan blogun sayfa sayısı (3375/150 = 22,5) yani blogun sayfa sayısı 23 olacaktır.

Yukarıda anlatığımız gibi Blogger sitemap.xml dizin dosyasında 20 sayfanın ekli olduğunu biliyoruz. Blogun dizin dosyasında ihtiyacı olan sayfalar için oluşturmamız gerek site haritası aşağıdaki gibi olmalıdır.

http://blog-adi.blogspot.com/sitemap.xml
http://blog-adi.blogspot.com/sitemap.xml?page=21
http://blog-adi.blogspot.com/sitemap.xml?page=22
http://blog-adi.blogspot.com/sitemap.xml?page=23

Aşağıdaki resim bir arkadaşımızın blog sitesine ait site haritası görüntüsüdür. Umarım biz de bu seviyede bir blog sahibi oluruz inşallah.

Blogger'da site haritası.xml dosyası nasıl oluşturulur ve barındırılır?

Blogger Blogspot site haritası alt sayfalarınızın hesaplanmasında daha fazla bilgi ve yardım için yorum sistemini kullanarak bize gönderebilirsiniz. Bu öğretici blog yayınımız site haritası endeksleme sorunu nedeniyle trafik sorunu yaşayan blogcular için çok yararlı olacaktır.
Blogger'da Yinelenen Meta Açıklama Hatalarını Düzeltme

Blogger'da Yinelenen Meta Açıklama Hatalarını Düzeltme

3/22/2017 Yorumlar
Blogger'da Yinelenen Meta Açıklama Hatalarını Düzeltme

Blogger'da Yinelenen Meta Açıklama Hatalarını Düzeltme - Blog yayınlarında ve ana sayfada yenilenen meta açıklama hataları, blogcular için sorunlara neden olan bir tarama hatasıyla ilgili bilgiler paylaşacağız. Uzun süredir blog yazarları Blogger'ın ana sayfa ve yayın sayfaları için neden iki meta açıklaması gösterildiğini soruyorlardı. Bu sorun daha önce çözülmüştü fakat yeni fark eden arkadaşlar için yazmak istedim.

Bu sorunu yaşayan blogcular Web yöneticisi araçları, blog yazarı ana sayfası ve yayın olan tek tek öğe sayfaları için yenilenen açıklama hatası görüntülemektedir. Blogunuzun kaynak dosyasını görüntülerseniz, aynı sayfa için iki meta açıklaması olduğunu göreceksiniz. Biri etiketinin altında diğeri etiketinin hemen bir satır üzerinde görünecektir. Bu etiketlerin yerlerini değiştirmiş olabilirsiniz. Meta etiketlerinin iki kez görülmesi daha önceki senelerde blogspot'a eklenen Arama tercihleri meta açıklaması ile ortaya çıkmıştı. Bu özellik blogspot yayın editör sayfasında Arama açıklaması olarak bulunuyor. Bu sorun özel şablonlarda bile görülmektedir. Tabi bu özellik blogspot siteleri için çok önemli ve yayınlara dinamik açıklama eklenmesini sağlamaktadır.

Blogger Sayfalarında Yenilenen Meta Açıklama Hatası Nasıl Düzeltilir?


1- Blogger hesabınıza giriş yapın ve blogunuzun kumanda panelinden Tema > HTML'i Düzenle yolunu takip ederek blogunuzun şablon kodları sayfasını açın. Açılan sayfada aşağıdaki kodu bulun.

<b:if cond='data:blog.metaDescription != &quot;&quot;'> 
<meta expr:content='data:blog.metaDescription' name='description'/> 
</b:if>

2- Yukarıdaki bulduğunuz kodu aşağıdaki kodlarla değiştirin. Eğer bulamıyorsanız panik yapmanıza gerek yok. Yukarıdaki kod blogunuzda bulunmuyorsa aşağıdaki kodları kopyalayarak <head> kodunun hemen altına ekleyin.

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot; and data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.metaDescription != &quot;&quot;'> 
<meta expr:content='data:blog.metaDescription' name='description'/> 
</b:if> 
</b:if>
</b:if>

  • Mavi ile işaretli kodun görevi ana sayfa, arama sonuçları / arşiv sayfalarında yenilenen öğeleri devre dışı bırakmaktır. 
  • Kırmızı ile işaretli kodun görevi yayın sayfaları ve sabit (static) sayfalarda yenilenen öğeleri devre dışı bırakmaktır. 

3- Kodu ekledikten sonra şablonu (tema) kaydedin ve blogunuzun ana sayfasını yada herhangi bir öğe sayfasını ziyaret ederek kaynak dosyasını kontrol edin. Kaynak dosyasını görüntülemek için CTRL+U tuşlarına basın ve açılan sayfada tek bir meta açıklaması olduğunu kontrol edin. Kontrol etmeniz gereken meta etiketi adı 'description' olarak görünecektir.

Konu ile ilgili başlıklar;

Bknz: Blogspot Sitesinde Neden İki Açıklama Alanı Bulunuyor?

Bknz: HTML5 Seo Uyumlu Meta Etiketleri

Bknz: Arama Motorları için Blogger Meta Etiketleri Optimizasyonu

Bknz: Blogger Meta Etiketlerine Açıklama ve Anahtar Kelime Desteği

Bknz: Blogger Temel Bilgi ve Arama Açıklaması Ekleme

Bu öğretici ipucu, blogspot sitenizin meta kod yapısını optimize ederek arama motoru robotlarının içeriklerinizi daha iyi taramasına ve dizine eklenmesine yardımcı olur. Bu yayın ile ilgili soru ve görüşleriniz için bize ulaşabilirsiniz.
Blogspot Sitesinde Neden İki Açıklama Alanı Bulunuyor?

Blogspot Sitesinde Neden İki Açıklama Alanı Bulunuyor?

3/22/2017 Yorumlar
Blogspot Sitesinde Neden İki Açıklama Alanı Bulunuyor?

Blogspot Sitesinde Neden İki Açıklama Alanı Bulunuyor? - Blogger kumanda paneli ayarlarında iki ayrı açıklama kutusu var. Blog kullanıcıları bu iki açıklama alanını da düzenlemeleri gerekiyor.

Peki neden blogspot sitelerinde iki farklı açıklama alanı bulunuyor?

Bu soru çoğu zaman blog kullanıcılarının kafasını karıştırıyor. Çünkü bu açıklama kutularının her birinin amacının ne olduğu bilinmemektedir. Şimdi bu açıklama kutuları arasındaki temel farkı ayrıntılı olarak tartışalım.

Blogspot Temel Açıklama Kutusu


Blogger kumanda panelinde Ayarlar > Temel yolunu takip ederek bu açıklama alanını düzenleyebilirsiniz. Bu açıklama blog başlığının hemen altında bulunan temel açıklama alanıdır.

Bu açıklama blogunuzun ön uç açıklamasını oluşturuyor. Blog sloganı da dediğimiz bu açıklama kısa ve keskin olmalıdır. Hedeflediğiniz anahtar kelimelerden oluşabilecek 2 - 3 kelimeden uzun olmamalıdır.

Blog temel açıklaması arama motorları sonuçlarında görüntülenen meta açıklaması değildir. Blog ziyaretçilerine gösterilen ön uç metinsel blog açıklamasıdır. Bu açıklamayı seçebilir veya gizleyebilirsiniz. Bu yazımızın ilerleyen bölümlerinde tartışacağımız blog meta açıklamalarına kıyasla SEO değeri yok denecek kadar azdır.

Girişimci bir blog için "Blogcuların Girişimciliğe Dönüştürülmesi" gibi kısa blog sloganı oluşturabilirsiniz. Ben bu sloganı örnek olarak ekledim aynısını eklemeyin lütfen. Daha önceki yazılarımda paylaştıklarımı arkadaşlar yayın içerisindeki metinleri kullanmışlar, buna dikkat edelim lütfen.

Arama Tercihleri Meta Etiketleri Açıklaması


Blogunuzun kumanda panelinden Ayarlar > Arama Tercihleri > Meta Etiketleri açıklamasını düzenleyebilirsiniz.

Meta Tags dediğimiz en fazla 150 karakterden oluşan bu meta açıklama kutusunun görevi arama robotlarının blogunuzu tanıması ve blogunuzun ne olduğunu anlamasını sağlamaktadır. Blogunuzun şablon kaynak dosyasının içerisine eklenen bu açıklama blog ziyaretçilerine gösterilmemektedir. Bu açıklamayı görüntülemek için blogunuzun ana sayfasını açın ve CTRL+U tuşlarına basın. Açılan sayfada "description" için arama yapın ve aşağıdaki gibi HTML meta açıklama etiketini göreceksiniz.

Blogspot Sitesinde Neden İki Açıklama Alanı Bulunuyor?

Blogunuzda meta açıklaması etiketi bulunmuyorsa aşağıdaki kodu blogunuzun meta etikeleri arasına ekleyebilirsiniz.

<meta expr:content='data:blog.metaDescription' name='description'/>

Daha önce yayınladığımız "HTML5 Seo Uyumlu Meta Etiketleri" blog için en uygun sıralı meta etikelerinden de faydalanabilirsiniz.

Arama açıklaması olarak da bilinen meta açıklaması varsayılan olarak, blog yayınlarnda, sabit (static) sayfalarda ve arşiv / arama sonuç sayfalarında gösterilir. Bu nedenle kaynak dosyasına (sayfasına) 1 meta açıklama etiketi eklenir. Bu meta etiketi blog ana sayfası için ve diğer sayfalar için kullanılan meta açıklama etiketidir. Burası kafanızı karıştırabilir. Yukarıda arama tercileri menüsünde bulunan meta açıklaması ana sayfa için oluşturulan açıklamadır. Diğer sayfalar için yada yayınlar için oluşturulan meta açıklaması blogunuzda yeni bir yayın yada sayfa oluştururken Arama açıklaması olarak eklenen metinler için eklenen meta etiketleridir. Yani yukarıda paylaştığım meta etiketi hangi sayfaya giderseniz o sayfanın açıklamasını göstermektedir.

Yayınlarınız ve sayfalarınız için de eklediğiniz meta etiketlerini görüntülemek için sabit sayfa yada yayını sayfasını açın ve CTRL+U tuşalarına basın. Açılan sayfada "description" için arama yapın ve yukarıdaki resimde olduğu gibi sayfa veya yayınlarınız için HTML meta açıklama etiketini göreceksiniz. Bu açıklamalar da blogunuza eklediğiniz sayfalar ve yayınlar hakkında arama motorlarına yardımcı olarak bu sayfa ve yayınların tanınması, indekslenmesi ve dizine eklenmesini sağlar.

Blog sayfalarınız ve yayınlarınız bu şekilde arama motorlarına ne olduğunu bildirerek bu konu ile ilgili arama sonuçlarında daha iyi bir sonuç almayı sağlamaktadır.

Bu yayın ile blogger sitelerinde bulunan meta açıklama kutuları arasındaki farkın tam olarak ne olğunu anlatarak karışıklılığını gidermiş olduk. Bu konu ile ilgili bir sorunuz varsa bize ulaşabilirsiniz.
Blogger Sabit Sayfalar İçin Site Haritası Oluşturma

Blogger Sabit Sayfalar İçin Site Haritası Oluşturma

3/21/2017 Yorumlar
Blogger Sabit Sayfalar için Site Haritası Oluşturma

Blogger Sabit Sayfalar için Site Haritası Oluşturma - Blogger blog sitelerinde sitemap.xml dosyası oluşturmayı ve Google Search Console eklemeyi anlatmıştık. Bu yazımızda blog sitenizde oluşturduğunuz sabit sayfalar için site haritası oluşturma ve sabit sayfa site haritalarını Google Search Console'a ekleme hakkında ipuçları vereceğim.

Daha önce anlattığımız blogger sitemap yazılarında sabit sayfalar için sitemap oluşturmayı anlatmamıştık. Şuana kadar yayınlanan atom.xml ve rss.xml dosylarında mevcut olmayan blogspot sabit sayfalar için, bir sitemap oluşturmak için aşağıdaki adımları takip edin.

Blogger blogspot static sayfalar için site haritası ...sitemap-pages.xml gibidir. Blog sayfalarınızın arama motorunda düzgün bir şekilde taranması ve dizine eklenmesi için blog sayfalarınızın site haritasını Google Search Console'a kolayca ekleyebilirsiniz.

Bknz: Blogger Sitesini Google Search Console Ekleme

Blogger Sabit Sayfalar Site Haritasını Görüntüleme


Blogunuzda bulunan sabit sayfaların site haritasını görüntülemek için, aşağıdaki URL'ye blogunuzun adını yazın ve URL'yi tarayıcınızın adres çubuğuna ekleyerek erişebilirsiniz.

http://blog adi.blogspot.com/sitemap-pages.xml

Blogger özel alan adı uzantısı için yine aynı şekilde sayfalarınızın site haritasını oluşturabilirsiniz.

http://www.alan adi.com/sitemap-pages.xml

Blog sabit sayfalarının Google robotları tarafından dizininesi ve SERP'lerde görüntülenmesi için sabit sayfalarınızı Google'a gönderin.

1- Blogger blogspot sabit sayfalarını Google'a göndermek için Google web yöneticisi araçları (Google Search Console)'a giriş yapın.

2- Blogunuzu yada sağlanan listeden blogunuzu seçin. Seçtiğiniz blog için açılan sayfanın sol tarafında bulunan Kontrol panelinden Tarama > Site Haritaları seçeneğini tıklayın.

Açılan sayfanın sağ üst köşesinde bulunan Site Haritası Ekleme/Test Etme butonuna tıklayın ve aşağıdaki resimde olduğu gibi blog sayfalarınızın site haritasını ekleyin ve gönder butonuna tıklayın.

Blogger Sabit Sayfalar İçin Site Haritası Oluşturma

Sayfayı yenile yazısına tıklayın ve hemen alt bölümde blogunuzun sabit sayfalarınızın site haritası dosyasını görebilirsiniz.

Bing / Yahoo ve Yandex gibi diğer tüm arama motorları için de aynı yöntem geçerlidir.

Site haritası dosyasının beklemede olduğunu göreceksiniz, en fazla 48 saat içerisinde blogunuzun sabit sayfaları dizine eklenecektir.

Blog sayfalarınız "noindex" olarak etiketlenmemiş ise sayfaları dizine ekler. Bunu kontrol etmek için blogunuzun sabit sayfalarının sağ tarafında bulunan Sayfa Ayarları > Özel Robot Etiketlerinden "noindex" seçeneğini seçtiyseniz, bu sayfa site haritasına göre Google'a gönderilecektir. Ancak bu "noindex" kutusunun işaretini kaldırmadıkça bu sayfa dizine eklenmeyecektir.

Blogger siteleri için önemli bir ipucu daha sizinle paylaştık, bu yayının bloglar için çok faydalı olacaktır. Bizi ziyaret ettiğiniz için teşekkürler.
Renkli Son Yayınlanan Yayınlar Widget Tasarımı

Renkli Son Yayınlanan Yayınlar Widget Tasarımı

3/20/2017 Yorumlar
Renkli Son Yayınlanan Yayınlar Widget Tasarımı

Renkli Son Yayınlanan Yayınlar Widget Tasarımı - Bu yazımızda blog sitenizde renkli widget tasarımı ekleme hakkında öğretici ipuçları paylaşıyoruz. Oldukça kullanışlı ve ilginç olan renkli widget tasarımı ekran boyutuna duyarlıdır. Öncelikle widget tasarımlarına göz atmak için aşağıdaki butonlara tıklayın.

Renkli widget renk sürümü 1
Renkli widget renk sürümü 2

Renkli widget tasarımını blogunuza eklemek istiyorsanız aşağıdaki adımları takip edin.

Renkli Son Yayınlanan Yayınlar Widget Tasarımı


1- Blogger hesabınıza giriş yapın ve blogunuzun kumanda panelinden Tema > HTML'i Düzenle yolunu takip ederek blogunuzun şablon editör (kodları) sayfasını açın. CTRL+F yardımıyla ]]></b:skin> veya </style> kodunu bulun ve aşağıda eklemek istediğiniz stil 1 veya stil 2 CSS kodlarını ]]></b:skin> veya </style> kodunun bir satır üzerine ekleyin.

Renkli widget renk sürümü 1 CSS


/* Renkli Widget Stil 1 */
.uxfeatured{display:flex;margin:0 auto 20px auto;width:100%;overflow:hidden;max-width:970px}
.uxfeatureditem{background:rgba(0,0,0,0.02);display:block;position:relative;float:left;overflow:hidden;height:220px;width:25%}
.uxfeatureditem .uxcontent{background:#3498db;display:block;position:absolute;z-index:6;bottom:0;left:0;right:0;transform:translate(0,60px);opacity:0;visibility:hidden;transition:all .3s}
.uxfeatureditem:hover .uxcontent{opacity:1;visibility:visible;transform:translate(0,0)}
.uxfeatureditem .uxcontent h3{font-size:14px;color:#fff;padding:15px;margin:0;text-align:center}
.uxfeatureditem .feat-img{width:100%;height:100%;background-size:cover;background-position:50%}
.uxfeatureditem a{display:block;color:rgba(255,255,255,1);position:relative;vertical-align:bottom;z-index:5;height:100%;transition:all .3s}
.uxfeatureditem a:before{content:'';background:#3498db;width:100%;height:100%;position:absolute;z-index:3;top:0;opacity:0.9;transition:background 0.3s linear,opacity 0.3s linear}
.uxfeatureditem.first a:before,.uxfeatureditem.first .uxcontent{background:#56a8df}
.uxfeatureditem.second a:before,.uxfeatureditem.second .uxcontent{background:#e49148}
.uxfeatureditem.third a:before,.uxfeatureditem.third .uxcontent{background:#5bccb6}
.uxfeatureditem.fourth a:before,.uxfeatureditem.fourth .uxcontent{background:#f5b44c}
.uxfeatureditem a:hover:before{opacity:0.1;}
.uxfeatureditem a:after{content:'textsms';font-family:Material Icons;position:absolute;z-index:3;font-size:3rem;top:32%;left:0;right:0;bottom:0;color:#fff;text-align:center;transform:translate(0,0);animation:jellygrav .6s linear;opacity:1;visibility:visible;transition:all .3s}
.uxfeatureditem:hover a:after{opacity:0;visibility:hidden;transform:translate(0,-60px)}
@media screen and (max-width:826px){
.uxfeatureditem{width:50%}
.uxfeatureditem.third,.uxfeatureditem.fourth{display:none}}
@media screen and (max-width:641px){
.uxfeatureditem{width:100%}
.uxfeatureditem.second,.uxfeatureditem.third,.uxfeatureditem.fourth{display:none}}

Renkli widget renk sürümü 2 CSS


/* Renkli Widget Stil 2 */
.uxfeatured{display:flex;margin:0 auto 20px auto;width:100%;overflow:hidden;max-width:970px}
.uxfeatureditem{background:rgba(0,0,0,0.02);display:block;position:relative;float:left;overflow:hidden;height:220px;width:25%}
.uxfeatureditem .uxcontent{background:#3498db;display:block;position:absolute;z-index:6;bottom:0;left:0;right:0;transform:translate(0,0);opacity:1;visibility:visible;transition:all .3s}
.uxfeatureditem:hover .uxcontent{opacity:0;visibility:hidden;transform:translate(0,60px)}
.uxfeatureditem .uxcontent h3{font-size:14px;color:#fff;padding:15px;margin:0;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.uxfeatureditem .feat-img{width:100%;height:100%;background-size:cover;background-position:50%}
.uxfeatureditem a{display:block;color:rgba(255,255,255,1);position:relative;vertical-align:bottom;z-index:5;height:100%;transition:all .3s}
.uxfeatureditem a:before{content:'';background:#3498db;width:100%;height:100%;position:absolute;z-index:3;top:0;opacity:0;transition:background 0.3s linear,opacity 0.3s linear}
.uxfeatureditem.first a:before,.uxfeatureditem.first .uxcontent{background:#56a8df}
.uxfeatureditem.second a:before,.uxfeatureditem.second .uxcontent{background:#e49148}
.uxfeatureditem.third a:before,.uxfeatureditem.third .uxcontent{background:#5bccb6}
.uxfeatureditem.fourth a:before,.uxfeatureditem.fourth .uxcontent{background:#f5b44c}
.uxfeatureditem a:hover:before{opacity:0.9;}
.uxfeatureditem a:after{content:'textsms';font-family:Material Icons;position:absolute;z-index:3;font-size:3rem;top:32%;left:0;right:0;bottom:0;color:#fff;text-align:center;transform:translate(0,-60px);animation:jellygrav .6s linear;opacity:0;visibility:hidden;transition:all .3s}
.uxfeatureditem:hover a:after{opacity:1;visibility:visible;transform:translate(0,0)}
@media screen and (max-width:826px){
.uxfeatureditem{width:50%}
.uxfeatureditem.third,.uxfeatureditem.fourth{display:none}}
@media screen and (max-width:641px){
.uxfeatureditem{width:100%}
.uxfeatureditem.second,.uxfeatureditem.third,.uxfeatureditem.fourth{display:none}}

2- Renkli widget tasarımında material simgeler bulunduğundan aşağıdaki material simge CSS bağlantısını </head> kodunun bir satır üzerine ekleyin.

<link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet' type='text/css'/>

Eğer blogunuzda Fontawesome simge CSS bağlantısı kullanıyorsanız, CSS kodları arasında bulunan aşağıda belirtilen yerleri değiştirin.

.uxfeatureditem a:after{content:'textsms';font-family:Material Icons;position:absolute;z-index:3;font-size:3rem;top:32%;left:0;right:0;bottom:0;color:#fff;text-align:center;transform:translate(0,0);animation:jellygrav .6s linear;opacity:1;visibility:visible;transition:all .3s}

3- Aşağıdaki jQuery kodunu </body> kodunun bir satır üzerine ekleyin.

<script type='text/javascript'>
//<![CDATA[
// Renkli Widget jQuery
function getPostUrl(a){for(var b=0;b<a.link.length;b++)if("alternate"==a.link[b].rel){var c=a.link[b].href;return c}}function getPostPublishDate(a){var b=a.published.$t,c=b.split("-")[2].substring(0,2),d=b.split("-")[1],e=b.split("-")[0],f=["January","February","March","April","May","June","July","August","September","Octobor","November","December"],g=f[d-1],h=g+" "+c+", "+e;return b?h:""}function getPostCategory(a){var b=a.category;b&&(b=a.category[0].term);var c='<div class="category-wrapper"><a class="category" href="/search/label/'+b+'?max-results=10">'+b+"</a></div>";return b?c:""}function Slider(a){for(var c=(new Array,""),d=a.feed.entry.length,e=0;e<d;e++){var f=a.feed.entry[e],g=f.title.$t,h=getPostUrl(f),l=(f.author[0].name.$t,getPostPublishDate(f),getPostCategory(f),f.category[0].term),m=a.feed.entry[e].content.$t,n=$("<div>").html(m);if(m.indexOf("//www.youtube.com/embed/")>-1)var o=a.feed.entry[e].media$thumbnail.url,p=o;else if(m.indexOf("<img")>-1)var q=n.find("img:first").attr("src"),p=q;else var p=no_image;0==e&&(c=c+'<div class="uxfeatureditem first"><div class="uxcontent"><h3>'+g+'</h3></div><a href="'+h+'"><div class="feat-img" style="background-image:url('+p+');"></div></a></div>'),1==e&&(c=c+'<div class="uxfeatureditem second"><div class="uxcontent"><h3>'+g+'</h3></div><a href="'+h+'"><div class="feat-img" style="background-image:url('+p+');"></div></a></div>'),2==e&&(c=c+'<div class="uxfeatureditem third"><div class="uxcontent"><h3>'+g+'</h3></div><a href="'+h+'"><div class="feat-img" style="background-image:url('+p+');"></div></a></div>'),3==e&&(c=c+'<div class="uxfeatureditem fourth"><div class="uxcontent"><h3>'+g+'</h3></div><a href="'+h+'"><div class="feat-img" style="background-image:url('+p+');"></div></a></div>')}slider.html('<div class="uxfeatured">'+c+"</div>"),$(".uxfeatured").find(".feat-img").each(function(){$(this).attr("style",function(a,b){return b.replace("/default.jpg","/mqdefault.jpg")}).attr("style",function(a,b){return b.replace("s72-c","s1600")}).attr("style",function(a,b){return b.replace("s320","s1600")}).attr("style",function(a,b){return b.replace("s400","s1600")}).attr("style",function(a,b){return b.replace("s640","s1600")})})}var slider=$("#uxfeatured .widget-content"),sliderContent=slider.text().trim();"no"!==sliderContent.toLowerCase().trim()&&'"no"'!==sliderContent.toLowerCase()&&""!==sliderContent?"[son]"!==sliderContent?$.ajax({url:"/feeds/posts/default/-/"+sliderContent+"?alt=json-in-script&max-results=4",type:"get",dataType:"jsonp",success:function(a){Slider(a)}}):$.ajax({url:"/feeds/posts/default?alt=json-in-script&max-results=4",type:"get",dataType:"jsonp",success:function(a){Slider(a)}}):$("#slider").remove();
//]]>
</script>

4- Son olarak aşağıdaki widget kodunu blogunuzda görünmesini istediğiniz alana ekleyin.

<b:section class='uxfeatureds' id='uxfeatured' showaddelement='yes'>
  <b:widget id='HTML97' locked='false' title='' type='HTML' version='1'>
    <b:includable id='main'>
  <div class='widget-content'>
    <data:content/>
  </div>
<div class='clear'/>
</b:includable>
  </b:widget>
</b:section>

Yukarıdaki widget kodunu ekledikten sonra blogunuzu kaydedin. Blogunuzun kumanda panelinde bulunan Yerleşim menüsünden yukarıda eklediğiniz widget içerisine aşağıdaki kodu ekleyin ve kaydedin.

[son]

Blogunuzu kontrol ederek renkli son yayınlanan yayınlar widget'inin nasıl çalıştığını görebilirsiniz. Bir blogger eğitici ipucu daha sizinle paylaştık, bizi ziyaret ettiğiniz için teşekkürler.