Blogger CSS Filtre ile resimlere zoom efekti verin!

Sitenizdeki resimlerinize zoom efekti verin, güzel duruyor tavsiye ederim.

Hemen anlatıma geçelim:

Şablon / HTML Düzenle / CTRL-F yardımı ile ]]></b:skin> kodunu bulun aşağıdaki kodu üzerine ekleyin.

.post-body img { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .post-body img:hover { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); }

İlgili Aramalar: blogger eklentileri,blogger zoom efekti,blogger css filtre ile zoom efekti

Blogger'a Google Plus Yorumlarını Ekleme

İlk önce yapmanız gereken Blogger panelinin sol tarafdaki Google+'a tıklayıp.Seçeneklerden "Bu blog'da Google+ Yorumlarını kullan" tıklayarak google plus'a geçiş yapıyoruz.

Eğer blogger temaları dışında bir tema kullanıyorsanız yapmanız gereken 1 işlem var.

Aşağıdaki Kodu Bulun.

<b:includable id='comment-form' var='post'>

Kodu bulduktan sonra ▶ konuna tıklayın ve yukarıdaki kodun hemen yanına aşağıdaki kodların ekleyin.

<div class='cmt_iframe_holder' expr:data-href='data:post.canonicalUrl' expr:data-viewtype='data:post.viewType'/>

İlgili Aramalar: Blogger eklentileri,Blogger'a Google Plus Yorumlarını Ekleme

Blogger Etiketine Sahip Kayıtlar Gösteriliyor Yazısını Kaldırmak

Merhaba uzun bir süre sonra tekrardan blogger paylaşımları yapmaya karar verdim.Daha çok teknoloji haberi paylaşıyordum blogda fakat pek uygun olmadı artık tam olarak teknoloji sitesine dönüştürdüm siteyi malesef büyük bir hataydı ecanblog'a ilk başladığım gibi devam ettirmek istiyorum artık.
Evet biliyorsunuz ki bir etikete tıkladığımızda aşağıdaki gibi "..." etiketine sahip kayıtları gösteriliyor yazısını çıkıyor karşımıza bunu bir kod değişimi sonucunda kaldıracağız.

Aşağıdaki kodları temamızdan arayıp buluyoruz.

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

Yukarıda bulduğunuz kodları aşağıdaki kodlar ile değiştiriyoruz ve Etiketine Sahip Kayıtlar Gösteriliyor Yazısını Kaldırıyoruz.

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

İlgili Aramalar:blogger etiketine sahip kayıtlar gösteriliyor yazısını kaldırmak, blogger eklentileri, blogger ipuçları

Blogger Sayfa ile Kayan Sosyal Ağlar Eklentisi

Eklenti, sayfa ile birlikte kayıyor ve  her konunun adresini paylaşıyor.

Öncelikle temanızdan Aşağıdaki kodu bulun.

<b:widget id='Blog1' locked='true' title='Blog Kayıtları' type='Blog'>

Bulduğunuz kodun üstüne aşağıdakı kodları yerleştirin.Facebook ve Twitter adreslerini düzenlemeyi unutmayın.

<style>
#sosyalpaylasim {
text-decoration: none;
text-align: center;
display: block;
float: left;
margin: -10px 0 0 -115px;
position: fixed;
width: 90px;
background: #F9F9F9;
border: 1px solid #ddd;
border-radius: 3px;
}
#sosyalpaylasim ul{ margin:0; padding:0px;}
#sosyalpaylasim ul li{ list-style:none; border:0px; padding:10px 0 2px 0; border-bottom:1px solid #ddd;  }
</style>
<div id='sosyalpaylasim'>
<ul>
<li>
<div id='fb-root'></div>
<div id='fb-root'></div>
<div id="fb-root"></div>
<script>undefinedfunctionundefinedd, s, id) {
  var js, fjs = d.getElementsByTagNameundefineds)[0];
  if undefinedd.getElementByIdundefinedid)) return;
  js = d.createElementundefineds); js.id = id;
  js.src = "//connect.facebook.net/tr_TR/all.js#xfbml=1";
  fjs.parentNode.insertBeforeundefinedjs, fjs);
}undefineddocument, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="https://www.facebook.com/ADRES" data-send="false" data-layout="box_count" data-width="450" data-show-faces="false"></div></li>
<li>
<a class='twitter-share-button' data-count='vertical' data-text='' data-url='' data-via='ADRES href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>
</li>
<li>
<script src='https://apis.google.com/js/plusone.js' type='text/javascript'></script>
<g:plusone href='' size='tall'></g:plusone>
</li>
</ul>
</div>

İlgili Aramalar:blogger eklentileri,sayfa ile sosyal ağlar eklentisi,sosyal ağlar eklentisi

Kopyalanan Yazıya Kaynak Linki Verme

Evet bu eklentimiz, sitenizde kopyalanan yazıya otomatik kaynak link vermeye yarıyor.Yazılarınız kopyalanıyorsa bu eklentiyi yapmanız faydalı olabilir kişi eğer kaynak link silmezse tabi.
Aşağıdaki kodların temanızın <head> kodunun altına yerleştirmeniz yeterli.

<script type="text/javascript">
function addLink() {
    var body_element = document.getElementsByTagName('body')[0];
    var selection;
    selection = window.getSelection();
    var pagelink = "<br /><br /> Kaynak Linki : <a href='"+document.location.href+"'>"+document.location.href+"</a><br />"; // 
    var copytext = selection + pagelink;
    var newdiv = document.createElement('div');
    newdiv.style.position='absolute';
    newdiv.style.left='-99999px';
    body_element.appendChild(newdiv);
    newdiv.innerHTML = copytext;
    selection.selectAllChildren(newdiv);
    window.setTimeout(function() {
        body_element.removeChild(newdiv);
    },0);
}
document.oncopy = addLink;
</script> 

.css('color', '#444444') bu kod ile kendi yazar yazılarını ayarlabilirsiniz.
.css('font-size', '12px') bu kod yazar yazılarının büyüklüğünü ayarlayabilirsiniz
1px solid #FFA500 burdaki ayar ise kenar rengi ayarı istediğiniz renkte ayarlayabilirsiniz.

İlgili Aramalar:blogger eklentileri,kopyalanan yazıya kaynak linki verme,kopyalanan yazıya otomatik kaynak linki verme,blogger ipuçları

Blogger Yazar Yorumlarını Özelleştirme

Merhaba bu blogger eklentisi sayesinde yazarın yorumlardaki fontlarını, renkini, boyutunu ve yorumları çerceve içine alma durumuna getirecek.
Evet başlıyalım.Temanızın Şablon kısmına gelin ve aratarak </body> kodunu bulun, aşağıdaki kodu da hemen üstüne yerleştirin.

<script src='http://code.jquery.com/jquery-latest.js'/>
<script>
$(function() {
function highlight(){
$('.user.blog-author').closest('.comment-block')
.css('border', '1px solid #FFA500')
.css('background','#F1F1F2 url("http://www.blogblog.com/1kt/transparent/white80.png")')
.css('color', '#444444')
.css('font-size', '12px')
.css('padding', '10px');
}
$(document).bind('ready scroll click', highlight);
});
</script>

.css('color', '#444444') Yazar yazılarını ayarlabilirsiniz.
.css('font-size', '12px') Yazıların büyüklüğünü ayarlayabilirsiniz
1px solid #FFA500 Çerceva rengi ayarı.

İlgili Aramalar:blogger eklentileri,blogger yazar yorumlarını özelleştirme,blogger yazar yorumlarını değiştirme

Blogger Breadcrumb Navigasyon Eklentisi

SEO açısından önemli bir Blogger Eklentisi.Breadcrumbs arama motorlarının ve ziyaretçilerin sitede rahat gezmesi için oluşturulmuş başlık linkleridir. Böylece kullanıcı alt kategorileri inse de bulunduğu içeriğe nereden geldiğini görüntüleyebilir.
Breadcrumbs’ın Türkçe karşılığı ekmek kırıntısıdır.

Örnek Breadcrumb - Ana sayfa » kategori » konu ismi

Breadcrumb Nasıl Kurulur?

Alttaki kod bu kodun <b:includable id='main' var='top'> hemen öncesine eklenmeli.

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl' rel='tag'><data:blog.title/></a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'> &#187; <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
<b:else/>
&#187;Kategorisiz
</b:if>
&#187; <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl'><data:blog.title/></a> &#187; <data:blog.pageName/> Arşivi
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<a expr:href='data:blog.homepageUrl'><data:blog.title/></a> &#187; Tüm Yazılar
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:blog.title/></a> &#187; <data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

Şimdi </b:skin> kodunu aratıp aşağıdaki CSS kodlarını hemen öncesine eklemelisiniz.

.breadcrumbs{background-color:#fff; 
border-radius:5px;  
-webkit-border-radius:5px;  
-moz-border-radius:5px;  
border:1px solid #ddd; margin-top:5px; padding:10px; border-bottom:2px solid #ddd;
text-align:left;
font-size:11px}

Son olarak <div class='blog-posts hfeed'> kodunu arayıp bulduktan sonra üstüne aşağıdaki kodu ekleyin.

<b:include data='posts' name='breadcrumb'/>

SEO için çok iyi bir eklenti.Arama motoru sonuçlarında gözükmesi için ise biraz zaman alacaktır.