Ana içeriğe atla

Blogger Benzer Yazılar Widget’i Stil 4

Blog yazılarınızın altında Linkwithin benzeri (Related Posts) Bunlarda ilginizi çekebilir posts yazılarınızı imleç üzerine geldiğinde ters çevirerek yazı başlık ismini resmin arkasında gösteren Related Posts İlgili mesajların farklı versiyonu. 2015 senesine çok kısa bir süre kaldı. Bu süre içinde birçok site Benzer yazılar eklenti kendilerine yük getirmesinden dolayı uygulamalarını kaldırmaya başlayarak okuyucu pörtföyüne e-posta yolu ile mesaj göndererek Aralık 2014 tarihinden itibaren Benzer yazılar Related Posts App’lerinin artık çalışmayacağını bildiriyor. Dolayısı ile artık blog yazılarınızın altında Linkwithin benzeri farklı uygulamalar çalışmayacak. Maalesef üzülerek sizlere belirtmek isterim ki! Birkaç gündür bu konuda yazı yazıyorum. Böyle önemli bir konuya yaklaşım gösterip de soru soran, Sevdaninsokagi.blogspot yemek kategorisinde yazı yazan ve admin yazar arkadaşımız Sn. +Sevda Şen Ünsev hanfendiye, göstermiş oldukları araştırmacı ruh ve ilgisi için çok teşekkür ederim.
Tüm yazar arkadaşlara bir kez dah hatırlatmak istediğim konu ; Related Posts ilgili mesajlar eklentisi tüm özel tema tasarım ve Blogger varsayılan şablonlarında kullanılmakta olduğudur. DEMO

Related Posts  eklenti kurulum aşamaları :

Öncelikle her türlü hatalara karşı önlem olarak blog’unuzun bir yedeğini alın. Blogger yedek alma ile ilgili konuyu ;

Related Posts Widget Stil 4 kullanımı :

1. Blogger kumanda paneline giriş yapın.
2. Şablon kodlarınızı açın. İmlecinizi kod içinde bir yere tıklayın ve CTRL + F arama özelliği ile şu etiketi bulun.(  ]]></b:skin> )
]]></b:skin>
3. Bulduğunuz bu etiketin hemen üstüne aşağıda verilen CSS kodlarını kopyalayıp yapıştırın.
CSS kodlarını yapıştırdıktan sonra blog’u kaydedin.
/* ==== Related Post Widget Start ==== */

.related-post {
  margin:2em auto 0;
  font:normal normal 11px/1.4 Arial,Sans-Serif;
}
.related-post h4 {
  font-size:150%;
  margin:0 0 .5em;
}

/* Style 5 */
.related-post-style-5,
.related-post-style-5 li {
  margin:0;
  padding:0;
  list-style:none;
  word-wrap:break-word;
  overflow:hidden;
}
.related-post-style-5 .related-post-item {
  display:block;
  float:left;
  width:110px;
  height:auto;
  padding:10px;
  border-left:1px solid #eee;
}
.related-post-style-5 .related-post-item:first-child {border-left:none}
.related-post-style-5 .related-post-item-wrapper {
  display:block;
  position:relative;
  overflow:hidden;
}
.related-post-style-5 .related-post-item-thumbnail {
  display:block;
  margin:0;
  width:110px;
  height:110px;
  max-width:none;
  max-height:none;
  background-color:transparent;
  border:none;
  padding:0;
}
.related-post-style-5 .related-post-item-tooltip {
  display:block;
  background-color:black;
  background-color:rgba(0,0,0,.9);
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  padding:10px;
  line-height:normal;
  font-style:italic;
  color:white;
  overflow:hidden;
  display:none;
}
.related-post-style-5 .related-post-item:focus .related-post-item-tooltip,
.related-post-style-5 .related-post-item:hover .related-post-item-tooltip {display:block}

/* ==== Related Post Widget End ==== */
4. Blog şablanlarında arayacağımız 2. kod birkaç tane olduğundan dolayı sizin bulduğunuz kodun hemen üst kısmında şu etiket ve kodlar vardır. Bu kodları görüyorsanız doğru yerdesiniz.
“ post.hasJumpLink ”
5. Şimdi aşağıda verilen etiketi aratın.
<div class='post-footer'>
6. Bulduğunuz etiketin üst kısmında 4. maddede anlatılan (post.hasJumpLink) etiketi varsa doğru yerdesiniz. Arama sonucu bulduğunuz etiketin hemen üstüne aşağıdaki kodları ekleyin ve blog’u kaydedin.
<!-- Related Post Widget Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div id='related-post' class='related-post'/>
  <script type='text/javascript'>
  var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
          &quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
      </b:loop></b:if>];
  var relatedPostConfig = {
      homePage: &quot;<data:blog.homepageUrl/>&quot;,
      widgetTitle: &quot;&lt;h4&gt;Bunlarda ilginizi çekebilir :&lt;/h4&gt;&quot;,
      numPosts: 4,
      summaryLength: 370,
      titleLength: &quot;auto&quot;,
      thumbnailSize: 110,
      noImage: &quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,
      containerId: &quot;related-post&quot;,
      newTabLink: false,
      moreText: &quot;Read More&quot;,
      widgetStyle: 5,
      callBack: function() {}
  };
  </script>
  <script type='text/javascript' src='http://blogger-json-experiment.googlecode.com/svn/resources/related-post/related-post.min.js'/>
</b:if>
<!-- Related Post Widget End -->

Related Posts Widget Stil 1 kodların özelleştirilmesi :

1. widgetTitle : “Bunlarda ilginizi çekebilir” farklı bir yazı ile değişebilirsiniz.
2. numPosts : Yazı altında görülmesini istediğiniz link sayısı.
3. summaryLength : Özet yazı uzunluğu
4. titleLength : Mesaj başlığı otomatik ayarlıdır.
5. thumbnailSize : Resminizin ebadını belirler. Değerleri temanızın genişliğine göre değiştirin.
Not: Resim ebadını değiştirdiğinizde, CSS kodlarında bulunan width:110px; iki yerde mevcut,  height:110px; değerlerini de değiştirin. Bu değerleri değiştirmezseniz CSS doğru çalışmaz.
6. noImage : Yazınızda görülmeyen resimlerin yerine çıkan otomatik resimdir.
7. containerId : Bu ayarı ellemeyin. Kod taşıyıcı ıd.
8. newTabLink : Yazı linkini yeni sekmede açan kod bağlantısıdır. False : Linki yeni sekmede açar. True : Linki ana sayfa içinde açar. Tercih sizin. false ve true küçük harfle yazın.
9. moreText : Yazının, ⇒ Devamı, olarak değiştirilmiştir. Kod içinde Türkçe yazılı olduğundan siz istediğiniz bir isim ile değiştirebilirsiniz. Bu anlatım için geçerli değildir.
Anlatımlar devam edeceğinden yukarıda açıklanan konular Genel olarak yazılmıştır. Siz eklentide kullanabileceğiniz kısımları değerlendirin.
NOT: Kodlar üzerinde değişiklik yaparken lütfen tırnak işaretlerinin silinmemesine dikkat edin. Eklediğiniz kod çalışmıyorsa silin ve tekrar kaydedin. Ana sayfanızda kontrol ederken birkaç dk. bekleyin. Kısa bir süre sonra kodlar çalışmaya başlayacaktır.
İlgili Konular ⇒ Related Posts hakkında ilgili diğer yazılar.

Bu blogdaki popüler yayınlar

Paint Net ile Resim arka plan Görüntüyü Şeffaf Yapma

Paint Net Resim editörü ile, Web sitenize yükleyeceğiniz resmin arka plan görüntüsünü görülmez şeffaf, transparan yaparak kullanabilirsiniz. Site başlık resmi, arka plan resmi, banner, logo, transparan resim ve çeşitli efekt araçlarını Paint.NET ücretsiz resim editörünü kullanarak yapmanız mümkün. Bilgisayarınıza Paint.NET ücretsiz resim editör programını kurmadı iseniz aşağıda verilen bağlantı linki ile programı indirip ücretsiz kullanın. 
Paint.NET resim editör programını zip sıkıştırmasından çıkardıktan sonra kurdugunuzda, program Ingilizce olarak karşınıza çıkacaktır. Diğer zip dosyasını da kurarak Türkçe’e çevrilmiş olarak göreceksiniz. Paint.NET ücretsiz bir program olmasına rağmen çok fazla seçeneği sizlere sunuyor. Resimlerinizi istediğiniz gibi tanzim edebileceğiniz ücretsiz bir resim editörü.

NOT: Programın kurulum ve çalışması için işletim sisteminizde, NET Framework 4.5 yüklü olması gerektiğini unutmayın.

Lisans: Ücretsiz, İşletim Sistemi: Win8/Win7/Vista/WinXP/Win8.1
Kurulu…

Windows İşletim Sistemi 32 Bit ve 64 Bit Arasındaki Fark

Windows İşletim Sistemi kullanan, bilgisayar kullanıcısı 64 bit işletim sistemlerini kullanmayı düşünerek bir çoğu bu sisteme geçmiş, ancak oyun ve performans deneyiminde sıkıntı yaşayarak tekrar 32 bit işletim sisteme geri dönmek durumunda kalmıştır. 32 Bit ve 64 Bit arasındaki sorunlar devam ederken ister istemez insan bu iki sitemi merak etmektedir. Bu iki sitem arasındaki fark, 32 bit ve 64 bit terimleri bir bilgisayarın işlemcisinin (CPU) veri bilgilerini işleme şekilleriyle ilgilidir. Windows’un 32 bit ve 64 bit sürümleri sırasıyla 32 bit ve 64 bit işlemciye sahip bilgisayarlar için tasarlanmıştır. Windows’un 64 bit sürümü 32 bit sürümüne nazaran daha fazla bellek (Ram) kullanımına sebep olur. Bu da performansı olumsuz yönde etkiler. O yüzden bilgisayarınızın performansına göre 32 bit veya 64 bit işletim sistemi seçmenizde fayda vardır. Örneğin, sahip olduğunuz RAM 4 GB ve altındaysa 32 bit sistem kullanmalısınız. Bu değerler üstündeyse 64 bit kullanmanızda bir sakınca yoktur ki…

Windows 10 Denetim Masası Komutlarına Kısa Yoldan Ulaşma

Windows 10 işletim sistemi arama penceresine tıklayarak bulmak istediğiniz komut dosyalarını kısa yoldan bir tıklama ile erişim ve kullanma ile ilgili açıklamalar. Bilgisayarınıza Windows 10 işletim sistemini yeni kurdu iseniz denetim masasını bulmak için zorlanıyor olabilirsiniz. Denetim masasını arama çubuğuna yazarak bulabileceğiniz gibi daha kolay bir şekilde de ulaşmanız mümkündür. Denetim masasında bulunan komut dosyalarına kısa yoldan ulaşmak için ilgili adımları inceleyin.
Windows 10 Denetim masası kısayol komut dosyalarını açma :1. Sol köşede bulunan 4 ad. kareden oluşan Windows 10 İcon’una maus'unuzu getirin ve sağ düğmesine tıklayarak çalıştırın.
2. Karşınıza Windows 10 Denetim masası komut seçenekleri çıkacaktır.
3. Denetim masasında mevcut olan birçok komutları artık bir tıklama ile açıp kullanabilirsiniz.

Paint ile Resim Boyutlandırma Seo

Windows yazılımında bulunan ücretsiz Paint resim proğramı ile blog resimlerini boyutlandır. Her bilgisayarda Windows işletim sistemi yüklü olduğundan windows’un ücretsiz resim proğramı Paint bulunmaktadır. Dinamik blogger yazı çubuğuna resim yazı ekleme , Blogger Favicon’unu kendin tasarla ve Blogger özel tema şablonuna slayt resmi yükleme ile ilgili yazımda ücretsiz resim proğramı Paint kullanımından sizlere bahsetmiştim.Google, Seo (Arama motoru optimizasyonu) sistemine haddinden fazla önem vermektedir.




Çünki Google bu sistem içinde gelişimini devam ettirmektedir.Bizlere düşen en büyük görev, kullanmakta olduğumuz ücretsiz Google ürünü Blogger’u en iyi şekilde optimize ederek hem kendimize hemde Google destek vermektir.Blog’unuzu optimize etmeniz gereken birçok uygulama mevcuttur.Biz bugün yazı içeriklerimize eklediğimiz ve blog hızını etkileyen resimlerin boyutlandırılması konusunu inceleyeceğiz.
Resim uzantıları ve resim boyutlandırılması neden önemlidir?

1. Blog yazı tasarımınında

Facebook Candy Crush Saga Oyunu Çalışmıyor Çözüm

Candy Crush Saga, Facebook oyun platformunda 64 milyon kişinin beğenisini kazanmış ilgi çekici oyunu mutlaka biliyor ve oynuyorsunuzdur. Kişisel olarak oyunları pek sevmesem de aile içerisinde, Facebook oyunları çok sıkça oynanır. Sebeb her nedense 2 gündür Facebook Candy Crush oyunu açılmıyor Adobe Flash Player yüklenmesi gerektiği uyarısı veriyor. Evde mobil olarak açılan Candy Crush oyunu, farklı 2 bilgisayar da denendiğinde çalışmıyordu. IE, Firefox, Google Chrome tüm tarayıcılar da denendi mümkün değil oyunu açamadık.
Tarayıcılar silinip tekrar kuruldu, Adobe Flash Player 12 son sürüm yüklendi hayır oyun açılamıyor ısrarla Flash yüklenmesi gerektiği ekranda yazıyordu. Geliştirici sitesine yardımcı olmaları için yorum ve ileti yazdım. Yardımcı olabileceklerini düşündüm. Yazdığım yoruma verilen cevapta konunun en ilginç tarafıydı. Verilen cevapta dil desteklerinin olmadığı ve forumlara bakmam isteniyordu. Böyle bir cevaba güldüm. Google1998 senesinde arama motorlarına başladığında …