Blogger emoji ekleme işi aslında önceden de vardı, birkaç kod ekleyerek bu işi yapabiliyordunuz. Şimdi ise blogger yazı yayınlama alanına eklenen bir buton sayesinde kodla uğraşmadan blogunuza emoji ekleyebilirsiniz. Sadece emoji değil, bunun yanında binlerce karakteride sadece bir tıkla blogunuza ekleyebilirsiniz. Blogger emoji ekleme için yapmanız gereken işlem çok basit, sadece iki dakikanızı ayırarak aşağıdaki video izleyin ve blogger emeoji ekleme, yada blogger karakter ekleme işi nasıl oluyor birlikte görelim.

Blogger bloglarının zamanla optimizasyona daha açık bir hale geldiğini, blogger gelişim sürecini takip eden kişiler de mutlaka farketmişlerdir. Bugün de  sizlere bu gelişim dalgasının bir ürünü olan "Blogger 404 Sayfa Bulunamadı" sayfasını blogunuza nasıl ekleyip, optimizasyonunu nasıl yapabileceğinizi anlatacağız. Peki nedir bu Blogger 404 sayfa bulunamadı sayfası ? Blogunuzda kırık bir link yada olmayan bir link tıklandığında diğer platformlardaki sitelerde veya scriptlerde açılan "404 page Not Found" sayfası yani sayfa bulunamadı sayfası; bu sayfada aradığınız şeyi sitemde bulamadınız, yada tıkladığınız link kırık, isterseniz sizi ana sayfaya tekrar geri götürelim, yada bizimle iletişim kurun, gibi linkler ekleyip ziyaretçinizi yönlendirebileceğiniz ve gelen ziyaretçiyi sayfanızda tutup, link kırık yada sayfa bulunamadı deyip, çıkıp gitmesine engel olmak için düşünülmüş ve tasarlanmış bir sayfa oluşturuyorsunuz.İşin özü bu aslında.Sizde blogunuza ait Blogger 404 sayfa bulunamadı sayfası nasıl görünüyor merak ediyorsanız aşağıdaki linki sitenize uyarlayıp kontrol edebilirsiniz.

http://www.siteadresiniz.com/404/

Blogger 404 Sayfa Bulunamadı Sayfası Nasıl Düzenlenir?

1-Blogger hesabınızla giriş yapıyorsunuz.
2-Aşağıdaki resim de de gördüğümüz gibi Ayarlar>Arama Tercihleri linklerini tıklıyoruz ve ardından Hatalar ve Yönlendirmeler kısmından "Sayfa Bulunamadı Sayfası için Özel İçerik" açıklamasının karşısında bulunan (Resimde 3 Numara) Düzenle Linkine tıklıyoruz.


3-Aşağıdaki resimde açılan kutu içerisine aşağıdaki kodu kopyalayıp yapıştırıyoruz.

<!-- www.blogokulu.org 404 Sayfa Bulunamadı -->
<div class='blogokulu-404-box'>
<p style='line-height: 30px'>
<strong>
<font color='#ff0000' size='5'>
Üzgünüz!!!
</font> <font color='#666666'>
Aradığınız sayfa ile ilgili yaşadığınız problemi giderebilmek için lütfen aşağıdaki seçeneklerden birini seçiniz:
</font></strong></p>
<ol style='line-height: 25px'>
<li>Yaşadığınız Problemi Rapor Etmek İçin <a href='http://www.blogokulu.org/p/iletisim.html'>TIKLAYINIZ...</a>&#160;&#160;&#160; <em>En kısa sürede sorunun çözümü için çalışacağımıza söz veriyoruz.</em>) </li>
<li>Ana Sayfaya Dönmek için <a href='http://www.blogokulu.org'>TIKLAYINIZ...</a>

</li>
</ol>
<p>
</p>
<p align='center'>
<font color='#0080ff' style='font-size: 150px'><strong>404</strong></font></p>
<p>
&#160;</p>
<p align='center'/>
<p align='center'>
<font size='5'>Sayfa Bulunamadı!</font></p>
</div>

Yukarıdaki kod içerisinde;
-Kırmızı renkle verdiğimiz http://www.blogokulu.org adresini kendi site adresiniz ile değiştirin, ve iletişim sayfa linkini de kendi sitenize ait iletişim sayfa linki ile değiştirin.
-Eğer mavi 404 sayısının rengini değiştirmek istiyorsanız kodlar içerisinde mavi renkle verdiğimiz #0080ff renk kodunun yerine istediğiniz renk kodunu yazın.(HTML renk kodları için Tıklayınız)
-Eğer isterseniz yukarıda kodlar içerisinde pembe renkle yazdığımız 404 yazısını silip yerine istediğiniz güzel bir resmi de koyabilirsiniz,(internetten "free 404 page not found images" diye aratırsanız çok güzel resimler bulabilirsiniz) bunun için yapmanız gereken;
404 yazısını silip yerine aşağıdaki kodu eklemek;
<img src="Eklemek istediğiniz Resmin URL Adresi"> 
-Eğer ekleediğiniz resme tıklandığında ana sayfaya tekrar yönlenmesini istiyorsanız aşağıdaki kodu ekleyin;
<a href="/"><img src="Eklemek istediğiniz Resmin URL Adresi"></a>

Kod içerisindeki gerekli değişiklikleri yaptıktan sonra ve kodu ekledikten sonra "Değişiklikleri Kaydet" butonuna tıklıyoruz. (resimde 2 numaralı kısım)

4-Şimdi de Blogger 404 Sayfa bulunamadı sayfası için CSS kodlarımızı ekliyelim ve Şablon HTMLyi Düzenle yolunu takip ederek HTML kodları içerisinde Ctl+F yardımı ile ]]></b:skin> kodunu aratıp bulalım.

5-Aşağıdaki kodu kopyalayıp bulduğumuz ]]></b:skin> kodunun üst satırına yapıştıralım.

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<style type='text/css'>
.status-msg-wrap {
    font-size: 100%;
    margin: none;
    position: static;
    width: 100%;
}
.status-msg-border {
    display:none
}
.status-msg-body {
    padding: none;
    position: static;
    text-align: inherit;
    width: 100%;
    z-index: auto;
}
.status-msg-wrap a {
    padding: none;
    text-decoration: inherit;
}
.blogokulu-404-box {
  background:#FFFFFF;
  width:98%;
  margin:10px 0px;
  padding:20px 10px;
  border:1px solid #ddd;
  -moz-border-radius:6px;
  -webkit-border-radius:6px;
  border-radius:6px;
  box-shadow: 5px 5px 5px #CCCCCC;
}
</style>
</b:if>

Yukarıda kodlar içerisinde kırmızı renkle verdiğimiz #FFFFFF renk kodunu değiştirip, Blogger 404 sayfa bulunamadı sayfanızın arka plan rengini değiştirebilirsiniz.(HTML renk kodları için Tıklayınız)
 6-CSS kodumuzu ekledikten sonra Şablonu Kaydet butonuna tıklıyoruz ve çıkıyoruz.

Yukarıda anlattığımız 6 basamaklı işlme sonunda özelleşmiş bir blogger 404 Sayfa bulunamadı (Page Not Found) sayfamız olacak.

Sizde 404 Sayfa bulunamadı sayfanızı test etmek istiyorsanız aşağıdaki gibi site adresiniz sonuna abuksubuk şeyler yazıp deneyebilirsiniz.
http://www.siteadresiniz/ıvırzıvır
http://www.siteadresiniz/abafadffee gibi :)

Etiketlerinizin çarşaf liste gibi çok yer kaplamasından mı şikayetçisiniz, yada blogunuza özel bir görünümmü kazandırmak istiyorsunuz, işte aradığınız blogger için açılır etiket menü eklentisi burada.Bu ekleni sayesinde etiketleriniz daha düzenli bir hal alacak ve sayfanızda çok az bir yer kaplayarak bir çok etiketi-kategoriyi ana sayfada yada istediğniz bir yerde göstermenizi sağlayacak.
DEMO GÖRÜNÜM

Blogger Açılır Etiket Menüsünü Blogunuza Eklemek için;

1-Blogger hesabımızla giriş yapıyoruz.
2-Yerlerşim>Gadget Ekle yolunu takip edip bir adet Etiketler Gadgeti ekliyoruz. Açılır etiketler menüsünün nerede görünmesini istiyorsak gadgeti ekledikten sonra göünmesini istediğimiz yere sürükleyip bırakıyoruz.

3-Şablon>HTMLyi düzenle Yolunu takip edin.

4-Ctrl+F yardımıyla aşağıdaki kodu aratıp bulun.

<b:widget id="Label1" locked="false" title="Labels" type="Label"></b:widget>

5-Yukarıda bulduğunuz kodun yerine aşağıdaki kodu yapıştırın.

<b:widget id="Label1" locked="false" title="Categories" type="Label"> 
<b:includable id="main"> 
<b:if cond="data:title"> 
<h2>
<data:title></data:title></h2>
</b:if> 
<div class="widget-content">
<select onchange="location=this.options[this.selectedIndex].value;" style="width: 100%;"> 
<option>Bir Kategori Seçin</option> 
 
<option expr:value="data:label.url"> 
() 
</option> 
 </select> <b:include name="quickedit"> </b:include></div>
</b:includable> 
</b:widget>

Yukarıda verdiğimiz Açılır Etiket Menüsü Kodları içerisindeki;
*width:100% değeri genişliği,
*Bir Kategori Seçin yazan yer Açılır Etiket menüsü içerisinde başlık olarak görünecek kısmı,
* () kodu da etikettten sonra gösterilecek olan bu etikete sahip yazı adedini belirtir, bu kısmı silerseniz yazı adedi görünmeyecektir.
Kodları ekledikten sonra şablonumuzu kaydedip çıkıyoruz ve Blogger Açılır Etiket Menüsünün görünümünü kontrol edip kullanmaya başlıyoruz.

Blogger öne çıkan yayın gadgeti anlatımına geçmeden önce bloggerin ilk çıktığı zamandan bugüne kadar kat ettiği mesafeye baktığımda, "vay be" diyorum kendi kendime :), zaman ilerledikçe teknoloji gelişiyor ve web ortamında yeni çıkan platformlarda çoğalıyor, bu platformların kullanılabilirliği ve ihtiyaçlara cevap verebilirliği bakımından incelediğimizde blogger zirvede gibi duruyor.Peki blogger bunu nasıl yapıyor? tabiki kendini yenileyerek ve ihtiyaçları tespit edip bunları en verimli ve kolay şekilde bloggerlerin kullanımına sunarak yapıyor.İşte bloggerde kesinlikle bir ihtiyaç olan öne çıkan yayın gadgeti blogger tarafından kullanıcılarına sunuldu.Uygulaması çok basit olan ve istediğiniz bir yazıyı seçerek başlık,açıklama ve resim de dahil olmak üzere bir yazınızı öne çıkan yayın olarak blogunuzda istediğiniz bir yerde görüntülemenize olanak sağlayan eklenti bloggerde yayınlandı.

Blogger Öne Çıkan Yayın Gadetini Blogunuza eklemek için:

1-Blogger Hesabınızla giriş yapın.
2-Yerleşim>Gadget Ekle yolunu takip edin.Aşağıdaki resimde görüldüğü gibi.Gadget Ekle linkini blogunuzda blogger öne çıkan yayınları nerede göstermek istiyorsanız oradaki linke tıklayın, yada ekleme işlemi bittikten sonra istediğiniz alana sürükleyip bırakın.
3-Gadget Ekle Linkine tıkladığınızda aşağıdaki gibi bir pencere açılacak.

Bu pencerede resimde gördüğünüz ve Blogger Öne Çıkan Yayın linkine yada okun olduğu yerdeki .+  işaretine tıklayın.
4-Öne Çıkan Yayın linkine tıkladığınızda aşağıdaki gibi bir pencere açılacak.
Bu penceredeki işlemleri resimde de gördüğünüz gibi 5 basamak halinde sizlere anlatmaya çalışalım.
1-Blogger Öne Çıkan Yayın gadgetinizin blogunuzda görünen başlık kısmını buradan giriyoruz.Örneğin Günün Yazısı,Ayın Tavsiyesi,Günün Yemeği,Bizden Bir Öneri veya Öne Çıkan Yayın gibi istediğinizi bu kısıma yazabilirsinz.
2-Blogger öne çıkan  yayın gadgetinde snippet kısmında iki seçenek görünüyor, yayın başlığını göster ve resmi göster,eğer bunların görünmesini istiyorsanız kutucukları işaretleyin, istemiyorsanız kutu içerisindeki işaretleri maus ile tıklayıp kaldırın.
3-Blogger Öne çıkan yayın gadgeti için göstermek istediğiniz yazıyı buradan seçiyoruz.Sağ tarafta yazı başlığını aratıp yada sol taraftaki etiketler kısmından bir etiket seçip bu etikete ait yazıların liste şeklinde 4 numara ile gösterdiğimiz kısımda açılmasını sağlayabilirsiniz.Size tavsiyem öne çıkan yayın olarak belirlemek istediğiniz yazının başlığını direk yazın ve aratın.
4-Blogger öne çıkan yayın gadgeti içerisinde görüntülemek istediğiniz yazı hangisi ise onu bir kere tıklayın.Tıkladığınızda arka tarafı resimdeki gibi hafif turuncu olacak (4 numara).
5-Blogger öne çıkan yayın gadgeti için yapmış olduğunuz seçim sağ tarafta ön izleme kısmında görünecektir, eğer öne çıkarmak istediğiniz yayın doğru ise 5 numarada gösterdiğimiz kaydet butonuna basın ve çıkın.
Artık blogger öne çıkan yayın gadgeti blogunuzda aşağıdaki gibi görünecektir.
Hayırlı olsun.

Blogger İlk Paragraftan sonra Adsense Reklam Yerleştirme işini blogumuza adım adım uygulayalım;

1-Blogger Hesabınızla giriş yapın.
2-Şablon>HTML'yi Düzenle yolunu takip edip,HTML kodları içerisinde ctrl+F yardımı ile <data:post.body/> kodunu aratıp bulun ve bu kodu aşağıda kırmızı renkle gördüğümüz kısımları ekleyin.
<div id='adsense-target'><data:post.body/></div>
3-Yazı içerisinde görüntülemek istediğiniz reklam kodunu kopyalayın ve aşağıdaki kutu içerisine yapıştırıp convert edin.

 Blogger Adsense Kod Converter

Convert edilmiş şekildeki adsense kodunuzu kopyalayın ve aşağıdaki kodda ADSENSE KODU BURAYA yazan yere yapıştırın.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='adsense-content' style="display:block;text-align: center">ADSENSE KODU BURAYA</div></b:if>

son olarak kodlarımzın görüntüsü aşağıda resimde gördüğünüz şekilde olacak.(Resmi büyütmek için üzerine tıklayın

4-Blogger yazı içerisindeki adsene reklamını sağa yada sola hizalamak için;

Yukarıda uyguladığımız üç madde neticesinde adsense reklamı blogger yazı içerisindeki ilk satırdan sonra ortalı olarak görünür.Eğer blogger yazı içierisine reklam yerleşiminde reklam sağa yada sola yaslı olsun ve etrafı devam eden yazı metni ile çevrelensin istiyorsanız bu yazının devamını okumaya devam edin.
a- Reklamı sola yaslamak için, 3. adımda verdiğimiz <div id = 'adsense-content' style = "display: block; text-align: center"> kodunun yerine <div id='adsense-content' style="display: inline-block;float: left;margin:15px 15px 15px 0px"> kodunu kullanın.Bu uygulama sonrasında reklamınız aşağıdaki gibi görünecektir.


b- Eğer reklamın sağ tarafa yaslanmış şekilde görünmesini istiyorsanız 3. adımda verdiğimiz <div id = 'adsense-content' style = "display: block; text-align: center"> kodu yerine <div id='adsense-content' style="display:inline-block;float:right;margin:15px 0px 15px 15px"> kodunu kullanın.

4-Son olarak yukarıda eklediğimiz <div id='adsense-target'><data:post.body/></div> kodunun hemen altına aşağıdaki script kodunu yapıştırıyoruz.

<script type='text/javascript'>
function insertAfter(addition,target) {
var parent = target.parentNode;
if (parent.lastChild == target) {
parent.appendChild(addition);
} else {
parent.insertBefore(addition,target.nextSibling);
}
}
var adscont = document.getElementById(&quot;adsense-content&quot;);
var target = document.getElementById(&quot;adsense-target&quot;);
var linebreak = target.getElementsByTagName(&quot;br&quot;);
if (linebreak.length &gt; 0){
insertAfter(adscont,linebreak[0]);
}
</script>

-Yukarıda kırmızı renkle verdiğimiz adscont,linebreak[0] kodunda sıfır [0] değerini değiştirip 1,2,3 gibi sayılardan birini yazarsanız reklam; 1.paragraftan sonra,2.paragraftan sonra yada 3. paragraftan sonra buraya yazdığınız rakama göre görünecektir.

5-Son olarak şablonunuzu kaydedin ve çıkın.Artık başarılı bir şekilde Blogger İlk Paragraftan sonra Adsense Reklam Yerleşimini yapmış olmanız gerekiyor.Takıldığınız yer olursa yorumlara yazı elimden geldiğince cevaplamaya çalışışırım.Bol kazançlar...

Blogger Devamını Oku eklentisini, ana sayfadaki yazılarınızın tümüne tek kodla uygulamayı daha önceden anlatmıştık, bu yazımızın yorumlar kısmına, yazı içerisinde de istediği noktada yazıyı kısaltıp sonuna bir link koyup devamını oku özelliğini eklemek istediğini söyleyen @ebrarn isimli arkadaşımızın talebi üzerine kaleme alıyorum.Uygulayacağımız eklentinin nasıl çalıştığını merak ediyorsanız aşağıdaki demo görünüm butonuna basarak kontrol edebilirsiniz.
Demo Görünüm

Yazı İçerisine Blogger Devamını Oku linki Eklemek İçin;

1-Blogger hesabımızla giriş yapıyoruz.
2-Şablon>Html'yi Düzenle yolunu takip ediyoruz.
3-Html kodları içerisinde Ctrl+F yardımı ile ]]></b:skin> kodunu aratıp buluyoruz ve aşağıdaki kodu kopyalayıp bulduğumuz ]]></b:skin> kodunun hemen üst satırına yapıştırıyoruz.

.toggle-box {
  display: none;
}

.toggle-box + label {
  cursor: pointer;
  display: block;
  font-weight: bold;
  line-height: 21px;
  margin-bottom: 5px;
}

.toggle-box + label + div {
  display: none;
  margin-bottom: 10px;
}

.toggle-box:checked + label + div {
  display: block;
}

.toggle-box + label:before {
  background-color: #4F5150;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  color: #FFFFFF;
  content: "+";
  display: block;
  float: left;
  font-weight: bold;
  height: 20px;
  line-height: 20px;
  margin-right: 5px;
  text-align: center;
  width: 20px;
}

.toggle-box:checked + label:before {
  content: "\2212";
}

4-Şablonumuzu kaydedip çıkıyoruz.
5-Yazı İçerisinde Blogger Devamını Oku eklentisini kullanmak istediğimiz yere de aşağıdaki kodu Yazı yazdığımız alanda HTML modundayken yapıştırıyoruz.

<input class="toggle-box" id="identifier-1" type="checkbox" >
<label for="identifier-1">Devamını Oku!</label>
<div>Buraya Devamını Oku Linkine tıklayınca açılan pencerede görünmesini iztediğiniz yazı resim v.b şeyleri HTML modundayken HTML kodlarını ekleyin.</div>

Sonuç olarak aşağıdaki bir pencere içerisinde devamını oku eklentisini blogunuza uygalamış olacaksınız.

Yazınızı yayınlayın ve yazı içerisinde Blogger Devamını Oku eklentinizi test edin.

Kişisel blog yazarken platform olarak Blogger kullanıyorsanız, muhtemelen blogunuzu kendinize özgü ve şekil olarak güzelleştirmek içinde bir çaba sarf ediyorsunuzdur.Blogunuza eşsiz güzellik katacak olan Blogger Popüler yazılar widgetini görünüm olarak CSS kodları ile değiştirip blogunuzu göz alıcı yapmak ve internetteki birçok blog sayfalarından görünüm olarak bir adım önde olmanızı sağlayacak eklentiyi sizlerle paylaşacağız.Blogger Popüler yazılar eklentisi, görünüm farklılığı sayesinde sitenizi sürekli ziyaret eden takipçilerinde dahi dikaktini çekerek hedef kitlenizi arttırmaya yönelik bir çalışma olacak diye tahmin ediyorum.Bu eklentide anlatacaklarımızı blogunuzda Blogger Popüler yayınlar widgeti kurulu olanlar 5.Adımdan başlayarak takip edip uygulamaya başlayabilirler.Blogunda blogger popüler yayınlar eklentsisi hiç olmayanlar 1. maddeden başlasınlar.

Blogger Popüler Yayınlar Eklentsi Kurulumu

1-Blogger Hesabınızla giriş Yapın.
2-Yerleşim>Gadget Ekle Yolunu Takip Edin.
3-Açılan Pencerede Popüler Yayınlar Gadgetini tıklayın, aşağıda resimde görüldüğü gibi.

4-Popüler Yayınlar Gadgeti Ekle Butonuna tıkladığınızda aşağıdaki gibi bir pencere açılacak, bu pencerede ilgili kısımlardaki ayarlamalar Türkçe olarak verilmiştir,bunları kendinize göre ayarlayın.(Snippet yazan kısım, ilgili yazıdan kısa bir özet alarak görüntülensin/görüntülenmesin)

5-Bundan sonra anlatacaklarımız ise Blogger Popüler Yayınlar Eklentisini şekil olarak değiştirmenize yarayacak bilgilerdir.

 Aşağıda yer alan 5 farklı şekildeki blogger popüler yayınlar eklenti şekli için önce script kodu ekliyeceğiz ve ardından beğendiğimiz bir görünümün CSS kodunu alıp blogumuza uygulayacağız.

Blogger Popüler Yayınlar Eklentisini şekil olarak değiştirmek için ekliyeceğimiz scrip kodu:

Blogger>Şablon>Htmlyi Düzenle Yolunu takip edip HTML kodları içeriisnde Ctrl+F yardımı ile </head> kodunu aratıp bulun ve aşağıdaki kodu kopyalayıp bulduğunuz </head> kodundan önceki kısma yapıştırın.

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/>
<script type='text/javascript'>
$(&#39;.popular-posts img&#39;).attr(&#39;src&#39;, function(e, t) {
return t.replace(&#39;/s72-c/&#39;, &#39;/s350-c/&#39;)
});
$(&#39;.popular-posts ul li .item-snippet&#39;).each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(&#39; &#39;);
if(j&gt;10)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,&#39;...&#39;));
});
$(&#39;.popular-posts ul li .item-content a&#39;).each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(&#39; &#39;);
if(j&gt;=6)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,&#39;...&#39;));
});
</script>
<link href='https://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'/>

6-Şimdi ise aşağıdaki Popüler yazılar stilinden hangisini beğeniyorsak onun kodunu alıp, Şablon>HTML'yi Düzenle yolunu takip edip HTML kodları içerisinde Ctrl+F yardımı ile ]]></b:skin> kodunu bulup ilgili stilin altında bulunan CSS kodunu kopyalayıp bulduğumuz ]]></b:skin> kodunun üst satırına yapıştırıyoruz.

Blogger Popüler Yayınlar Eklentyisi Stil 1: (Resim Üzerinde Kutu Şeklinde Başlık)

<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: 100%;
width: 100%;
object-fit: cover;
}
.sidebar .PopularPosts .item-title a {
color: #FFFFFF;
font: 15px &#39;Oswald&#39;, sans-serif;
text-transform: uppercase;
font-size: 20px;
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 &quot;Times New Roman&quot;,Times,FreeSerif,serif;
text-align: center;
top: 35px;
width: 60%;
z-index: 1;
}
.sidebar .PopularPosts .item-content {
position: relative;
}
</style>

Blogger Popüler Yayınlar Eklentisi Stil 2:(Resim Altında Başlık ve Açıklama)

<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;
}
.sidebar .PopularPosts .item-thumbnail a {
clip: auto;
display: block;
height: auto;
height: 120px;
}
.sidebar .PopularPosts .item-thumbnail {
width: 100%;
position: relative;
margin-bottom: 15px;
}
.sidebar .PopularPosts .item-thumbnail::before {
background: rgba(0, 0, 0, 0) none repeat scroll 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;
text-align: center;
margin: 0px auto;
left: 0px;
right: 0px;
z-index: 4;
}
.sidebar .PopularPosts .item-thumbnail img {
position: relative;
width: 100%;
height: 120px;
object-fit: cover;
}
.sidebar .PopularPosts .item-title {
font: 15px &#39;Oswald&#39;, sans-serif;
text-transform: uppercase;
text-align: center;
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;
text-align: center;
}
</style> 

Blogger Popüler Yayınlar Eklentyisi Stil 3:(Renkli Kututlar içinde Açıklama)

<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: 100%;
width: 100%;
object-fit: cover;
}
.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>

Blogger Popüler Yayınlar Eklentyisi Stil 4:(Kare Kutucuk Şeklinde)

<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 {
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%;
}
.sidebar .PopularPosts ul li img {
box-sizing: border-box;
width: 100%;
height: 100%;
object-fit: cover;
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>

Blogger Popüler Yayınlar Eklentyisi Stil 5:(Numaralı Kutucuklar Halinde)

<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: 100%;
width: 100%;
object-fit: cover;
}
.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>

Son olarak Şablonu kaydet deyip çıkıyoruz.
Eğer verilen kodları doğru yerleştirdiyseniz seçtiğiniz Blogger Popüler Yayın Eklenti Stili sitenizde görünecektir.

CSS ile hazırlanmış resim efektlerinden blogunuza uygulaması oldukça basit olan toplam onbir adet blogger image hover effectini blogunuza uygulamayı anlatacağız. Kodlama CSS ile yapıldığından site açılış hızında negatif yönde etki kesinlikle yok. Görsellik olarak blogunuza yada sitenize uyguladığınızda farklı ve güzel bir görünüm kazandıracak blogger resim efekti eklentisi ile blogunuz daha hoş bir görünüme kavuşacak.Blogger resim efekti kodları için aşağıda verdiğimiz kodlardan istediğinizi blogunuza ekleyerek daha önce eklediğiniz bütün resimler dahil olmak üzere bundan sonra ekliyeceğiniz resimlerde blogger resim efekti ile görünecektir.İşlem çok basit bir kaç satırlık kodu blogunuza ekliyorsunuz ve resimlerinizbundan sonra efektli oluyor.
Blogger CSS Resim Efektini Blogunuza eklemek için;
1-Blogger Hesabınızla giriş yapın.
2-Şablon>HTML'yi Düzenle yolunu takip edip,HTML kodları içerisinde ctrl+F yardımı ile ]]></b:skin> kodunu aratıp bulun ve aşağıda uygulamak istediğiniz efekte ait kodları bulduğunuz ]]></b:skin> kodunun hemen üst satırına yapıştırmanız gerekiyor.

1-Blogger CSS Resim Efekti Ekleme (Grow)
Grow css resim efektinini demo görünümü için maus ile resmin üzerine geliniz.
Blogger sayfanızdaki bütün resimlerde bu efekti kullnmak isterseniz, aşağıdaki kodu kopyalayıp 2. maddede bahsettiğimiz yere yapıştırın.

.post-body img {
height: 300px;
width: 300px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.post-body img:hover {
width: 400px;
height: 400px;
} 

2-Blogger CSS Resim Efekti Ekleme (Shrink)
shrink için css kodları:

.post-body img {
  height: 400px;
  width: 400px;

  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

.post-body img:hover {
  width: 300px;
  height: 300px;
}

3-Blogger CSS Resim Efekti Ekleme (Sidepan)

sidepan için css kodları:

.post-body img {
  margin-left: 0px;
  -webkit-transition: margin 1s ease;
     -moz-transition: margin 1s ease;
       -o-transition: margin 1s ease;
      -ms-transition: margin 1s ease;
          transition: margin 1s ease;
}
.post-body img:hover {
  margin-left: -200px;
}

4-Blogger CSS Resim Efekti Ekleme (Vertical pan)
Vertical Pan için css kodları:

.post-body img {
  margin-top: 0px;
  -webkit-transition: margin 1s ease;
     -moz-transition: margin 1s ease;
       -o-transition: margin 1s ease;
      -ms-transition: margin 1s ease;
          transition: margin 1s ease;
}
.post-body img:hover {
  margin-top: -200px;
}

5-Blogger CSS Resim Efekti Ekleme (Tilt)
Tilt Pan için css kodları:

.post-body img {
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}

.post-body img:hover {
  -webkit-transform: rotate(-10deg);
     -moz-transform: rotate(-10deg);
       -o-transform: rotate(-10deg);
      -ms-transform: rotate(-10deg);
          transform: rotate(-10deg);
}

6-Blogger CSS Resim Efekti Ekleme (Morph)
Morph için css kodları:

.post-body img {
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}

.post-body img:hover {
  border-radius: 50%;
  -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
       -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);
}

7-Blogger CSS Resim Efekti Ekleme (Focus)
Focus için css kodları:

.post-body img {
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

.post-body img:hover {
  border: 70px solid #000;
  border-radius: 50%;
}

8-Blogger CSS Resim Efekti Ekleme (Grayscale)


Grayscale için css kodları:

.post-body img{
filter: url("data:image/svg+xml;utf8,grayscale"); /* Firefox 3.5+ */filter: gray; /* IE6-9 */-webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */;}
.post-body img:hover {filter: none;-webkit-filter: grayscale(0%);} 

Blogger için hazırlanmış CSS Resim Efektlerinden istediğinizi blogunuza uygulayın ve güle güle kullanın.