Blogger Tema Nasıl Yedeklenir?


Blogger neredeyse tüm kodları kolayca düzenlememize izin veren bir sistem. Benim gibi sürekli tasarımıyla uğraşan veya kod ekleyip silen kullanıcılar bazen elinin altındaki kodları kaybedebiliyor. Anlatımlarımda "Her ihtimale karşı temanızın yedeğini almayı unutmayın" uyarısını yapıyorum ama maalesef bunu kendim uygulayamıyorum. Sonuç olarak önceleri kullandığım bazı özellikleri temaya aktarmaya kalktığımda ise kendime "Acaba nasıl yapmıştım?" gibi sorular sorabiliyorum.

Geçen yıl yapılan arayüz güncellemesiyle eskiye oranla tema indirip geri yükleme işi oldukça kolaylaştırılmış. Bu yazıdada yeni başlamış kullanıcılar için bu işlemi nasıl gerçekleştirebileceğimizden ve eski tekniklerden birini anlatacağım.

Tema nasıl yedeklenir?

Blogger hesabınıza giriş yapın.
Blog ismine tıkladıktan sonra açılan sol menüden Şablon kısmına gelin.
Sağ üst köşede Google Plus veya Blogger profilinizin hemen altındaki Yedekle/Geri Yükle butonuna tıklayın. Karşınıza aşağıdaki gibi bir sayfa açılacak.


Geriye tek bir adım kalıyor o da Tam şablonu indir deyip xml uzantılı temanızı kaydetmek.

Canlı bahis oyna.

Daha Pratik Yöntem

Çok fazla tema editliyorsanız ve yukarıdaki işlemleri sürekli tekrar etmek istemiyorsanız sizler için daha pratik bir yöntem var.

Yine blogunuzun Şablon kısmına gelerek HTML'yi Düzenle dedikten sonra açılan bölümdeki kodların tamamını seçip kopyaladıktan sonra bilgisayarınızın uygun bir bölümünde .xml uzantılı bir metin belgesi oluşturun. Daha sonra oluşturduğunuz belgenin içerisine kodları yapıştırıp kaydedin.

Hit Adam 

Blogunuzdaki Yazıların Alıntılanmasını Engelleyin

Her birimiz saatlerimizi harcayıp araştırarak bilgi edindiğimiz konularda makaleler yazıyoruz. 300 kelimelik bir makalenin saatlerinizi alabildiği bir ortamda birde ne-nasıl yapılır? gibi konularda anlatımlar hazırlıyorsanız ya da kodlarla ilgili paylaşımlar yapıyorsanız normal makale yazmanın dışına çıktığınızdan harcadığınız emek bir hayli artıyor.

Bu kadar çabanın içinde günler geçerken zaman ayırıp uzun uzadıya yazdığımız makalemizi yayınladıktan sonra yazılarım alıntılanmış mı? yazımın googledaki sıralaması nasıl? gibi soruları sormadan edemiyoruz. Hele birde yazılarımızı alıntılayan site aramalarda bizden üst sıralarda çıkıyorsa algoritmalara etmediğimiz hakareti bırakmıyoruz :)



Blogunuzda yayınladığınız özgün yazınızı başka bloglarda görünce tepkiniz ne oluyor bilmiyorum ama ben oldukça kızıyorum. Son yıllarda telif hakkı olayı her yerde gündeme gelse de bu konu için ne kadar yaptırım uygunlandığı ve yaptırımların ne kadar caydırıcı olduğu tartışılır, neyse.

Burada sizlere vereceğim kod, sayfanızda sağ ve sol tuşun tıklanmasını engelleyip yazıların çalınma olasılığını azaltmış olacak. Bu yöntemin bir diğer artısı javascript kodları gibi sayfa hızınıza etki etmiyor oluşu.
Çok kısa bir anlatım olacak, dilerseniz başlayalım.

Blogger kumanda paneli ➜ Blog adı ➜ Şablon ➜ HTML'yi düzenle kısmına gelin ve aşağıdaki kodu aratın. wikipediada ara 

<body>

Yukarıda bulmuş olduğunuz kodu aşağıdaki kodla değiştirip temanızı kaydedin

<body oncontextmenu='return false' onmousedown='return false' onselectstart='return false'>

Tüm işlem bu kadar. Artık sayfanızda sağ ve sol tuş tıklanamayacak.
Hepinize iyi bloglamalar...Tüm bu işlerden sıkıldıysanız canlı bahis oynayabilirsiniz.

Blogger Responsive Paylaşım Butonları


Responsive (Duyarlı) tasarım, kısaca farklı ekran boyutlarıyla uyumlu tasarıma verilen isimdir. Bu tasarımlar sayesinde masaüstü, tablet ve mobil cihazlarda okunaklılığın sürekliliği sağlanmış olur. Bu yazıda ise tasarımın tamamıyla değil yalnızca tek bir eleman üzerinde çalışacağız: Paylaşım Butonu. Bu paylaşım butonları sayfa genişleyip daralsa ya da farklı cihazlarla sitenize giriş yapılsa bile uygun pozisyonda yerini alacak.

Önceki gün jquery plugins sayfasında karşılaştığım bu butonlar çok hoşuma gitti ve bloggera uyarlamak istedim. Aşağıda yapmanız gereken tüm işlemleri olabildiğince basit şekilde anlatmaya çalıştım, umarım işinize yarar. Blogger'da daha önce paylaşılmamış, tamamı pop-up şeklinde çalışan ve ek hiçbir ayar gerektirmeyen oldukça kullanışlı butonlara sahip olmak isterseniz aşağıdaki adımları takip etmeniz yeterli olacaktır.

------------------------------ ÖNİZLEME ------------------------------


Responsive paylaşım butonlar nasıl kurulur?

› Blogger paneline giriş yapın.
› Blogunuzu seçip sol menüden Şablon kısmına gelin.
› Açılan sayfada Ctrl+F komutu ile aşağıdaki kodu bulun.

<head>

<head> kodunun hemen altına aşağıdaki kodu yerleştirin. Bu kod sayesinde butonlarımız responsive yani duyarlı hale gelecek.

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

› İkinci adımda ise stil kodlarını yerleştireceğiz. Bunun için aşağıdaki kodu bulun.

]]></b:skin>

› Ve yukarıdaki kodun hemen üzerine aşağıdaki stil kodlarını yerleştirin.

#share-wrapper {margin-top: 0px;position:fixed;left: 0;}
#share-wrapper ul.share-inner-wrp{list-style: none;margin: 0px;padding: 0px;}
#share-wrapper li.button-wrap {background: #E4EFF0;padding: 0px 0px 0px 10px;display: block;width: 140px;margin: 0px 0px 1px -117px;}
#share-wrapper li.button-wrap > a {padding-right: 60px;height: 32px;display: block;line-height: 32px;font-weight: bold;color: #444;text-decoration: none;font-family: Arial, Helvetica, sans-serif;font-size: 14px;}
#share-wrapper .facebook > a{background: url(http://1.bp.blogspot.com/-Gv3BqqUhRTM/UlPMggT1K9I/AAAAAAAAAUE/7ZEezzkdDXg/s1600/facebook.jpg) no-repeat right;}
#share-wrapper .twitter > a{background: url(http://4.bp.blogspot.com/-QpCtqnyo614/UlPONyfPYMI/AAAAAAAAPFs/XaZIowsEnkI/s1600/twitter.jpg) no-repeat right;}
#share-wrapper .digg > a{background: url(http://3.bp.blogspot.com/-VrVVbdEdM8w/UlPMgFIcjjI/AAAAAAAAAUc/ZYcbYMl7ueU/s1600/digg.jpg) no-repeat right;}
.stumbleupon > a{background: url(http://3.bp.blogspot.com/-7sQ6VpTdwpY/UlPMhBwJBWI/AAAAAAAAAUU/RGkjWIb3WDk/s1600/stumbleupon.jpg) no-repeat right;}
#share-wrapper .delicious > a{background: url(http://2.bp.blogspot.com/-7stGcE_YlgE/UlPMgAc8_4I/AAAAAAAAATw/kYSqFKivyqo/s1600/delicious.jpg) no-repeat right;}
#share-wrapper .google > a{background: url(http://3.bp.blogspot.com/-AkssGGH8cdQ/UlPMg1hevxI/AAAAAAAAAUA/DTHkjobgm_g/s1600/google.jpg) no-repeat right;}
#share-wrapper .email > a{background: url(http://4.bp.blogspot.com/-iUozBwNj_K8/UlPMgeCv8RI/AAAAAAAAAT0/Eems0xwo6W0/s1600/email.jpg) no-repeat right;}

@media all and (max-width: 699px) {
#share-wrapper {bottom: 0;position: fixed;padding: 5px 5px 0px 5px;background: #EBEBEB;width: 100%;margin: 0px;-webkit-box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.15);-moz-box-shadow: 0 -1px 4px rgba(0,0,0,0.15);-o-box-shadow: 0 -1px 4px rgba(0,0,0,0.15);box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.15);}
#share-wrapper ul.share-inner-wrp {list-style: none;margin: 0px auto;padding: 0px;text-align: center;overflow: auto;}
#share-wrapper li.button-wrap {display: inline-block;width: 32px!important;margin: 0px;padding: 0px;margin-left:0px!important;}
#share-wrapper li.button-wrap > a {height: 32px;display: inline-block;text-indent: -10000px;width: 32px;padding-right: 0;float: left;}
}

› Daha sonra yine Ctrl+F komutu ile aşağıdaki kodu bulun.

</head>

</head> kodunun hemen üzerine aşağıdaki kodları yerleştirin.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
    var pageTitle = document.title; //HTML page title
    var pageUrl = location.href; //Location of the page

    
    //user hovers on the share button    
    $(&#39;#share-wrapper li&#39;).hover(function() {
        var hoverEl = $(this); //get element
        
        //browsers with width &gt; 699 get button slide effect
        if($(window).width() &gt; 699) { 
            if (hoverEl.hasClass(&#39;visible&#39;)){
                hoverEl.animate({&quot;margin-left&quot;:&quot;-117px&quot;}, &quot;fast&quot;).removeClass(&#39;visible&#39;);
            } else {
                hoverEl.animate({&quot;margin-left&quot;:&quot;0px&quot;}, &quot;fast&quot;).addClass(&#39;visible&#39;);
            }
        }
    });
        
    //user clicks on a share button
    $(&#39;.button-wrap&#39;).click(function(event) {
            var shareName = $(this).attr(&#39;class&#39;).split(&#39; &#39;)[0]; //get the first class name
            
            switch (shareName) //react to different class name
            {
                case &#39;facebook&#39;:
                    var openLink = &#39;https://www.facebook.com/sharer/sharer.php?u=&#39; + encodeURIComponent(pageUrl) + &#39;&amp;title=&#39; + encodeURIComponent(pageTitle);
                    break;
                case &#39;twitter&#39;:
                    var openLink = &#39;http://twitter.com/home?status=&#39; + encodeURIComponent(pageTitle + &#39; &#39; + pageUrl);
                    break;
                case &#39;digg&#39;:
                    var openLink = &#39;http://www.digg.com/submit?phase=2&amp;url=&#39; + encodeURIComponent(pageUrl) + &#39;&amp;title=&#39; + encodeURIComponent(pageTitle);
                    break;
                case &#39;stumbleupon&#39;:
                    var openLink = &#39;http://www.stumbleupon.com/submit?url=&#39; + encodeURIComponent(pageUrl) + &#39;&amp;title=&#39; + encodeURIComponent(pageTitle);
                    break;
                case &#39;delicious&#39;:
                    var openLink = &#39;http://del.icio.us/post?url=&#39; + encodeURIComponent(pageUrl) + &#39;&amp;title=&#39; + encodeURIComponent(pageTitle);
                    break;
                case &#39;google&#39;:
                    var openLink = &#39;https://plus.google.com/share?url=&#39; + encodeURIComponent(pageUrl) + &#39;&amp;title=&#39; + encodeURIComponent(pageTitle);
                    break;
                case &#39;email&#39;:
                    var openLink = &#39;mailto:?subject=&#39; + pageTitle + &#39;&amp;body=Found this useful link for you : &#39; + pageUrl;
                    break;
            }
        
        //Parameters for the Popup window
        winWidth     = 650;    
        winHeight    = 450;
        winLeft       = ($(window).width()  - winWidth)  / 2,
        winTop        = ($(window).height() - winHeight) / 2,    
        winOptions   = &#39;width=&#39;  + winWidth  + &#39;,height=&#39; + winHeight + &#39;,top=&#39;    + winTop    + &#39;,left=&#39;   + winLeft;
        
        //open Popup window and redirect user to share website.
        window.open(openLink,&#39;Share This Link&#39;,winOptions);
        return false;
    });
});
</script>

Burada dikkat etmeniz gereken kısım yukarıdaki kodda bulunan <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' type='text/javascript'/> uzantılı js dosyasının temanızda daha önceden eklenmiş olup olmadığınız kontrol etmek. Eklenmişse silip bununla değiştirebilirsiniz.

Dördüncü ve son adımda ise aşağıdaki kodu bulun.

<b:section class='main1' id='main1' showaddelement='no'>

Yukarıdaki kodun hemen üzerine aşağıda kodları ekleyin ve temanızı kaydetmeden bir önizleme yapın.

<div id='share-wrapper'>
    <ul class='share-inner-wrp'>
        <!-- Facebook -->
        <li class='facebook button-wrap'><a href='#'>Facebook</a></li>
        
        <!-- Twitter -->
        <li class='twitter button-wrap'><a href='#'>Tweet</a></li>
        
         <!-- Digg -->
        <li class='digg button-wrap'><a href='#'>Digg it</a></li>
        
        <!-- Stumbleupon -->
        <li class='stumbleupon button-wrap'><a href='#'>Stumbleupon</a></li>
      
         <!-- Delicious -->
        <li class='delicious button-wrap'><a href='#'>Delicious</a></li>
        
        <!-- Google -->
        <li class='google button-wrap'><a href='#'>Plus Share</a></li>
        
        <!-- Email -->
        <li class='email button-wrap'><a href='#'>Email</a></li>
    </ul>
</div>

Eğer hata almadıysanız ve önizlemede temanızın sol kısmında butonları görüntülediyseniz işlem tamamdır temanızı kaydedebilirsiniz. Güle güle kullanın...

Bir önceki yazımız olan "Blogger Resimli Benzer Yazılar Eklentisi" başlıklı makalemizde resimli benzer yazılar eklentisinin kurulumu hakkında bilgi edinebilirsiniz.

Blogger Resimli Benzer Yazılar Eklentisi

Merhaba blogger severler... Benzer yazılar eklentisinin ne amaçla kullanıldığı ve ne işe yaradığı hakkındaki bilgileri Blogger Benzer Yazılar Eklentisi başlıklı makalemde anlatmıştım. O makalede paylaştığım eklentide yalnızca benzer yazıların başlıklarını sıralıyorduk. Burada vereceğim kodlarda ise hem başlık bağlantıları hemde yazılara ait resimler bir arada görüntülecek. Ayrıca eklenti içerisinde resim eklemediğiniz yazılar için otomatik tanımlanmış bir görsel de bulunuyor. Bu da kötü görüntü oluşmasını engelleyecektir.
Eklentiyi blogumda bende kullanıyorum. Önizleme için bu yazının en alt kısmına bakabilirsiniz. Ben direk anlatıma geçiyorum.

Resimli benzer yazılar eklentisi nasıl kurulur?

Blogger paneline giriş yapın.
Blogunuzu seçip sol menüden Şablon kısmına gelin.
Açılan sayfada Ctrl+F komutu ile aşağıdaki kodu bulun.

</head>

</head> kodunun hemen üzerine aşağıdaki kodları ekleyin.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {float:center; text-transform:none; height:100%; min-height:100%; padding-top:5px; padding-left:5px;} 
#related-posts h2{font-size: 16px; font-weight: bold; color: #5D5D5D; font-family: Verdana; margin-bottom: 15px;} 
#related-posts a{border-right: 1px dotted #DDDDDD; color:#5D5D5D;} 
#related-posts a:hover{color:black; background-color:#EDEDEF;} 
</style> 
<script type='text/javascript'> var defaultnoimage=&quot;http://4.bp.blogspot.com/-cQQoD4MoTpA/Uk1z0LXdNuI/AAAAAAAAATY/V4T2xOaRBRs/s1600/resim-yok.jpg&quot;; var maxresults=4; var splittercolor=&quot;#DDDDDD&quot;; var relatedpoststitle=&quot;Benzer Yazılar&quot;; </script> <script src='http://hitadam.googlecode.com/files/ayni.js' type='text/javascript'/></b:if> 

Şimdi tekrar Ctrl+F ile bir arama yapın ve aşağıdaki kodları bulun.

<div class='post-footer'>

Bu kodun hemen üzerine aşağıdaki kodları kopyalayıp yapıştırın ve bir önizleme yapıp hata alıp almadığınızı kontrol edin. Hata almadıysanız devam edin temanızı kaydedin.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'></b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=4&quot;' type='text/javascript'/></b:loop> 
<script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;); </script>
</div><div style='clear:both'/>
</b:if>

Düzenlemeler

Resim eklenmeyen yazılarda görünün önizleme resmi: http://4.bp.blogspot.com/-cQQoD4MoTpA/Uk1z0LXdNuI/AAAAAAAAATY/V4T2xOaRBRs/s1600/resim-yok.jpg
Gösterilecek yazı adedini arttırıp azaltmak için: maxresults=5;

Hepinize iyi bloglamalar...

Bir önceki yazımız olan "Blogger Seo Dostu Breadcrumb Navigasyon Eklentisi" başlıklı makalemizde breadcrumb seo eklentisi hakkında bilgi edinebilirsiniz.

Blogger Seo Dostu Breadcrumb Navigasyon Eklentisi

Blogger
Breadcrumb, botların ve ziyaretçilerin sayfanızda daha rahat gezinebilmesi için genelikkle yazı başlığının üst kısmında oluşturulmuş etiket linkleri ve başlıkların bulunduğu eklentinin ismidir. Türkçe karşılığı "Ekmek Kırıntısı" olan bu eklentide hiyerarşi düzeni hakim olduğundan Ana sayfa » etiket linki » başlık şeklinde görüntüleme yaparak hem botlar hem de ziyaretçiler için kaynağın ne olduğunu ve nereden geldiklerini bilmelerinde yardımcıdır.

Breadcrumb Eklentisinin Seo Açısından Faydaları

  • Ziyaretçilere kategoriyi bulmalarında yardımcı olur.
  • Ana sayfaya linki ile geriye dönüş kolaylaşır.
  • Ziyaretçiler sitenizde daha fazla gezineceğinden blogun hemen çıkma oranı azalır.
  • Botlara kategoriyi tanımlamada yardımcı olur.

Blogger Breadcrumb Eklentisi Nasıl Kurulur?

Blogger paneline giriş yapın.
› Blogunuzu seçip sol menüden Şablon kısmına gelin
› Açılan sayfada klavyenizin Ctrl+F komutu ile aşağıdaki kodu bulun.

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

Bu kodu aşağıdaki kodlarla değiştirin.

<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><a expr:href='data:blog.homepageUrl' rel='tag'>Anasayfa</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Anasayfa</a></span>
<b:loop values='data:post.labels' var='label'>
&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
&#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Anasayfa</a></span> &#187; <span>Etiketi yok</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Anasayfa</a></span> &#187; <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><a expr:href='data:blog.homepageUrl'>Anasayfa</a></span> &#187; <span>Tüm Yazılar</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Anasayfa</a></span> &#187; <span><data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>

Bir önizleme yapın ve hata alıp almadığınızı kontrol edin. Eğer hata vermediyse yerleşim kısmını tamamladınız demektir. Temayı kaydetmeden devam edin.

Şimdi ise aşağıdaki kodu bulun.

]]></b:skin>

Yukarıdaki kodun hemen üzerine aşağıdaki stil kodlarını ekleyin ve temanızı kaydedin.

.breadcrumbs {
font-size :13px;
font-style :italic;
border : 1px solid #d1d1d1;
border-radius : 5px;
margin-bottom :5px;
padding : 8px 6px 10px 6px;
}

Eklentiyi deneme amaçlı 5 farklı bloga ekledim ve tamamında sorunsuz çalıştı. Hem seo açısından fayda sağlaması hemde demo olması amacıyla yazıyı yazmadan hemen öncede kendim kullanmaya başladım. Arama sonuçlarında canlı olarak görmek isterseniz adres çubuğundaki linki alıp google arama kısmına yapıştırıp ararsanız bu yazıya ait breadcrumbu görebilirsiniz.
Bir sorun yaşayacak olursanız bildirmek için yorum formunu kullanabilirsiniz.

Bir önceki "Blogger Yorumlardaki Avatarları Küçülterek Sayfanızı Hızlandırın" başlıklı makalemizde sayfa hızınızı nasıl arttırabileceğiniz konusunda bilgi edinebilirsiniz.

Blogger Yorumlardaki Avatarları Küçülterek Sayfanızı Hızlandırın

Blogger
Blogger sistemini kullanan bir blogdaki herhangi bir yazıya yapılan yorumlara ait avatarları görüntülediğinizde avatar boyutunun 512x512 boyutunda olduğunu görürsünüz. Bu yüksek sayılabilecek boyuttaki avatarlar sayfa hızınızı yavaşlatabilir. Örnek olarak kendi blogunuzaki bir avatara Chrome tarayıcı ile Resmi yeni sekmede aç, Firefox tarayıcısı ile Resme bak diyerek görüntüleyin. Resimlerin tamamının 512x512 boyutunda olduğunu göreceksiniz. Resme bak dedikten sonra adres çubuğunda oluşan linktede bunu görebilirsiniz.

Blogger
Gerekli düzenlemeleri yaptıktan sonra resimler 65x65 boyutunda görüntülenecek. Aşağıda yorum avatarlarını nasıl boyutlandırabileceğinizi anlattım.

› Kumanda paneline giriş yapın.
› Blog ismine tıklayın ve açılan sol menüden Şablon'u seçin.
› Daha sonra Html'yi düzenle yolunu izleyerek şablon kodlarınıza erişin.

Açılan sayfada klavyenizin Ctrl+F komutu ile </body> kodunu bulun ve hemen üzerine aşağıdaki kodu kopyalayıp yapıştırın.

<script type='text/javascript'>
//<![CDATA[
var avatar=$("#comments");
avatar.find('.avatar-image-container img').each(function() {
        var ava = $(this).attr('longdesc') ? $(this).attr('longdesc') : $(this).attr('src');
        $(this).show().attr('src', ava.replace(/\/s[0-9]+(\-c)?\//,"/s65-c/")).removeAttr('longdesc width height');
});
//]]>
</script>

Ardından temanızı kaydedin ve rastgele bir konuya girerek avatarı görüntülemeyi deneyin. Boyutun 65x65 olduğunu göreceksiniz. Eğer avatarı daha büyük veya daha küçük yapmak isterseniz 2. koddaki s65 değerini değiştirebilirsiniz.

Blogger'da Belirlenen Etikete Sahip Yazı Nasıl Gizlenir

BloggerÖzellikle bloglarında tanıtım yazısı yayınlayan kullanıcıların işine yarayacak bir yöntemin anlatımını yapacağım. Bu sayede istediğimiz etikete sahip yazıların ana sayfada görüntülenmesini engelleyebileceğiz. Yalnızca ana sayfada gizlenen yazı yine index almaya, blogger panelinden görünmeye ve rss servisleri tarafından okunmaya devam edecek. Hem bizler kategori dışında bir yazı yayınlıyorsak genel düzenimizi bozmayacağız hem de reklam verenin hakları korunmuş olacak.

Nasıl yapabileceğiniz aşağıda detaylı şekilde anlattım. Çok basit bir şekilde yapabileceğinizi biliyorum artık birçoğumuz bu kodlara aşina olduk.

Blogger kumanda paneline giriş yapın.
› Blog ➜ Şablon ➜ Html'yi Düzenle yolunu izleyin ve blog kodlarına erişin.
› Açılan sayfada klavyenizin Ctrl+f komutu ile aşağıdaki kod bulun.

<b:include data='post' name='post'/>

Yukarıdaki kodu aşağıdaki kodlarla değiştirin.

<b:if cond='data:post.labels == &quot;&quot;'>
<b:include data='post' name='post'/>
</b:if>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast'>
<b:if cond='data:label.name != &quot;etiketadı&quot;'>
<b:include data='post' name='post'/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='post'/>
</b:if>
</b:if>
</b:if>
</b:loop>

İşlem tamamdır. Şimdi bir önizleme yapın ve hata almadıysanız Şablonu kaydet deyip sayfadan çıkın.

Notlar: Sistemi temiz şekilde kullanmak için yazılara yalnızca 1 etiket girmek en basit yöntemdir ancak daha fazla etiket girecekseniz alfabetik olarak sonda olan etiketi girmeniz gerekir.
2. kodda kırmızı ile belirtilen kısıma gizlemek istediğiniz etiket ismi gelecek.

Hit Adam

Blogger Benzer Yazılar Eklentisi

BloggerBenzer yazılar eklentisi, yazılarınıza eklediğiniz etiketleri baz alarak okuduğunuz yazıyla aynı etikete sahip yazıları sıralı şekilde gösterme temeline dayanır.
Bir şekilde blogunuzdaki herhangi bir yazıya ulaşmış kullanıcıyı benzer yazılar eklentisi ile aynı kategorideki diğer yazılara yönlendirme sitenize oldukça olumlu katkı yapacaktır.
Bu yazıda sizlere içinde bulunduğu yazıyı tekrar etmeyen, başlıkların üzerine geldiğinizde yazının yayınlanma tarihini gösteren ve aynı etikete sahip başka bir yazı bulunamadığında ise belirleyeceğiniz notu düşen bir eklenti paylaşacağım. Aşağıdaki adımları uygulayarak benzer yazılar eklentisine sahip olabilirsiniz.

---------------------------------- Demo ----------------------------------

Benzer yazılar eklentisi nasıl kurulur?

Blogger.com'a giriş yapın.
› Eklentiyi kurmak istediğiniz blogun ismine tıklayın.
› Açılan sol menüden Şablonu seçin ve Html'yi Düzenle Deyin. Aşağıdaki gibi bir görüntü gelecek.

Blogger

› Html'yi düzenle kısmında klavyenizin Ctrl+F komutu ile aşağıdaki kodu bulun.

<div class='post-footer'/>

Yukarıdaki kodun hemen üzerine aşağıdaki kodları ekleyin. Bu koddan temanızdan birden fazla olabilir, tek tek deneyerek ekleyin.

<b:if cond='data:blog.pageType != &quot;static_page&quot;'> 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>//<![CDATA[
var titles=new Array();var titlesNum=0;var urls=new Array();var time=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;time[titlesNum]=d.published.$t;titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);var c=new Array(0);e=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=time[a]}}titles=c;urls=b;time=e}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){var y=a.indexOf('?m=0');if(y!=-1){a=a.replace(/\?m=0/g,'')}for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);time.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;document.write("<ul>");if(titles.length==0){document.write("<li>Maalesef, benzer yazı bulamadık.</li>")}else{while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}document.write('<li><a href="'+urls[c]+'" title="'+time[c].substring(8,10)+"/"+time[c].substring(5,7)+"/"+time[c].substring(0,4)+'">'+titles[c]+"</a></li>");if(c<titles.length-1){c++}else{c=0}b++}}document.write("</ul>");urls.splice(0,urls.length);titles.splice(0,titles.length)};
//]]></script>
    <div class='related-posts'>
<h3>Buna benzer diğer yazılar :</h3>
<ul><b:loop values='data:post.labels' var='label'>
   <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;' type='text/javascript'/>
        </b:loop>
        <script type='text/javascript'>var maxresults=10;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script></ul><div class='clear'/>
</div>
</b:if></b:if>

› Ardından bir önizleme yapın ve hata olup olmadığını kontrol edin. Yok ise devam edin ve aşağıdaki kodu bulun

]]></b:skin>

Yukarıdaki kodu hemen üzerine aşağıdaki css kodlarını ekleyin.

.related-posts{width:560px;border:1px solid #ddd;border-radius:4px;margin-top:5px;color:#666;background:#fff;padding:5px}
.related-posts h3{font-weight:700;font-family:Tahoma,sans-serif;font-size:14px;padding:5px 0 0}
.related-posts ul{width:560px;margin:0;padding:6px 4px 6px 1px}
.related-posts li{float:left;width:277px;list-style-position:inside;list-style-type:none;list-style-image:url(http://1.bp.blogspot.com/-IzoxOS8c7r0/UhHdVWC3-fI/AAAAAAAAANM/Cq93stBpmbo/s1600/resim.png);overflow:hidden;margin:0;padding:3px 0}

İşlem tamamdır. Eklenti blogunuzla uyum sağlamazsa width:560px; değerini değiştirerek uzunluğunu ayarlayabilirsiniz. Yapamadığınız bir yer olursada yorum formunu kullanın.

Hit Adam

Blogger Yorum Formunun Görünümü Güncellendi

Blogger
Son zamanlarda güncellemelerine sıkça şahit olduğumuz Blogger bir yeniliğe daha imza attı. Son olarak gadget kısmına gayet kullanışlı bir iletişim formu eklenmiş, Google+ yorum özelliği ve yazıları Google+'da otomatik paylaşma özelliği duyurulmuştu. Tüm bu yeniliklerinden ardından Blogger'in neredeyse kuruluşundan beri aynı olan yorum formunun tasarımıda tarihe karışmış oldu.

Blogger
Bu özelliğe sevindiğimi açık bir şekilde ifade etmeliyim. Daha 2 gün önce Zafer Zent ile yorum formunun ne kadar kullanışsız olduğundan bahsediyorduk ve hemen ardından bu güncelleme gerçekleşti.

Özelliği kullanabilmek için ek bir şey yapmanız da gerekmiyor. Klasik google butonları ile desteklenmiş ve kendiliğinden aktif olan bir özellik. Ayrıca düzenleme gerektirmeden tasarımla uyuşması da cabası.
Ne diyelim hepimize hayırlı uğurlu olsun.

Henüz resmi bir açıklamanın yapılmadığını bu yeni gelişme ile ilgili bildiklerinizi bizimle paylaşabilirsiniz.

Blogger İletişim Formunu Sabit Sayfaya Ekleme

Blogger İletişim Formu Sabit Sayfaya Nasıl Eklenir?
Eminim birçoğunuz bloggerin geçenlerde duyurduğu iletişim formu gadgeti hakkında bilgi sahibisinizdir. Bu, sistemin hızlı bir şekilde geliştiğinin ve gelişmeleri takip eden kullanıcı sayısının artmasının bir sonucu. Her neyse yayınlanan bu gadget blog sayfanızın sidebar denilen diğer adıyla kenar çubuğu kısmına panelden kolayca eklenebiliyor ve isim, mail, mesaj gibi bilgilerinizi alarak blog sahibine pratik şekilde mesaj göndermenize yarıyor.

Bende kendi iletişim sayfamda bu gadgeti kullanıyorum. Yalnız sabit sayfaya bu özelliği eklemek kenar çubuğuna eklemek kadar kolay değil bunun için 1-2 işlem daha yapmanız gerekiyor.
Aşağıdaki adımları takip ederek sizlerde blogunuzdaki sabit sayfalara iletişim gadgetini kolayca ekleyebilirsiniz.

İletişim formu sabit sayfaya nasıl eklenir?

Blogger panelini açın - Gadgeti eklemek istediğiniz bloga tıklayın - Sol menüden yerleşim kısmına gelin - Gadget ekle deyin, aşağıdaki gibi popup bir pencere açılacak.

Diğer gadgetlar
› İletişim Formu Yeni! ögesini seçip biraz bekledikten sonra açılan yeni sayfadaki Kaydet butonuna tıklayın ve gadgeti ekleyin.

Bu kısım iletişim formunun blogla bağlantısını sağlamaktan ibaretti. Direk olarak gadget kodlarını sabit sayfaya eklediğimizde form görüntüleniyor ancak etkin olmuyordu. Bundan sonraki adımda bağlantısını sağlamış olduğumuz formun bir kısım kodlarını kullanarak gadgeti sabit sayfada çalıştıracağız.

› Şimdi tekrar kumanda paneline gelerek Blog ➜ Şablon ➜ Html'yi Düzenle yolunu izleyin.
› Açılan kod sayfasında Şablonu Kaydet butonunun yanındaki Widget'a Atla butonuna tıklayın, ContactForm1 seçin.

Widget'a atla
Daha sonra aşağıdaki resimde olduğu gibi <b:includable id='main'> ile </b:includable> kodları arasındaki tüm kodları silin.
Sıkıştırılmış kodları yanlarındaki ▶ işaretine tıklayarak genişletebilirsiniz.

Blogger
Şablonu kaydet deyip çıkın.

› Daha sonra Sayfalar ➜ Yeni Sayfa ➜ Boş Sayfa yolunu takip ederek bir sabit sayfa oluşturun ve Html kısmına aşağıdaki kodları yapıştırın.

<div class="widget ContactForm" id="ContactForm1">
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
İsim *
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
E-Posta *
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
Mesaj*
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Gönder" />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>
</div>
</div>
<style>
.contact-form-widget{width:350px;max-width:300%;padding:10px}
.contact-form-name,.contact-form-email,.contact-form-email-message{max-width:350px}
.contact-form-button-submit{width:100px;height:28px}
#ContactForm1_contact-form-email-message{width:350px;border-radius:4px;margin-bottom:10px;padding:15px 10px 15px 5px}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{width:250px;height:30px;border-radius:4px;margin-bottom:10px;padding-left:5px}
</style>

Sayfa ismini de belirleyip Yayınla dedikten sonra iletişim formunuz aktif olacaktır. Önizleme için linke tıklayabilirsiniz.

Hit Adam

Css Sprite İle Sosyal Ağ Butonları Yapalım

Css Sprite İle Sosyal Ağ Butoları Oluşturmak
Css sprite blogunuzda hem profesyonel görünümler kullanmanızı sağlar hemde tüm resimlerinizi bir araya toplayarak blog açılış hızınızı olumlu yönde etkiler. Son google güncellemelerinde sayfa hızına verilen önem son derece artmışken bu yöntemi kullanmak bloguza artı puan kazandıracaktır.
Bende kendi blogumun sağ tarafında bu yöntemi kullanarak bir sosyal ağ alanı oluşturdum. Resmi bu linke tıklayarak inceleyebilirsiniz.

Bu yazıda anlatacağım menü içerisinde Feedburner, Facebook, Google+, Twitter, Youtube ve Linkedin butonları yer alıyor. En sık kullanılan sosyal platformlar seçilmiş.

Menüyü canlı olarak görmek isterseniz:

Menü önizleme

Eklentiyi blogunuza kurmak için Kumanda Paneli ➜ Blogunuz ➜ Şablon ➜ Html'yi Düzenle yolunu izleyin

Hmtl'yi Düzenle kısmından Ctrl+F komutu ile aşağıdaki kodu bulun

]]></b:skin>

Yukarıdaki kodun hemen üzerine aşağıdaki kodları yapıştırın

.sosyalmenu {
 }
.sosyalmenu a{
    background-image     : url(http://1.bp.blogspot.com/-Jx253mpITbY/T5u14T16d6I/AAAAAAAADsI/IX50RQLoqTk/s1600/sosyalmenu.png);
    background-color      : transparent;
    background-repeat    : no-repeat;
    height                        : 48px;
    width                        : 48px;
    float                          : left;
    display                      : block;
    margin                       : 0 5px 0 0;
 }

 #feedburner_png {
    background-position  : 0px -48px;
 }

 #feedburner_png:hover {
    background-position  : 0px 0px;
 }

 #googleplus_png {
    background-position  : -240px -48px;
 }

 #googleplus_png:hover {
    background-position  : -240px 0px;
 }

 #facebook_png {
    background-position  : -48px -48px;
 }

 #facebook_png:hover {
    background-position  : -48px 0px;
 }

 #twitter_png {
    background-position  : -144px -48px;
 }

 #twitter_png:hover {
    background-position  : -144px 0px;
 }

 #youtube_png {
    background-position  : -96px -48px;
 }

 #youtube_png:hover {
    background-position  : -96px 0px;
 }

 #linkedin_png {
    background-position  : -192px -48px;
 }

 #linkedin_png:hover {
    background-position  : -192px 0px;
 }

Şablonu kaydet deyin ve devam edin.

Kumanda Paneli ➜ Blogunuz ➜ Yerleşim ➜ Gadget Ekle ➜ HTML/JavaScript içerik kısmına aşağıdaki kodları ekleyin.

<div class='sosyalmenu'>
<a id='feedburner_png' href='FEEDBURNER URL' target='_blank' title='Suscribirse'></a>

<a id='googleplus_png' href='GOOGLE+ URL' target='_blank' title='Google+'></a>

<a id='facebook_png' href='FACEBOOK URL' target='_blank' title='Facebook'></a>

<a id='twitter_png' href='TWITTER URL' target='_blank' title=Twitter'></a>

<a id='youtube_png' href='YOUTUBE URL' target='_blank' title='Youtube'></a>

<a id='linkedin_png' href='LINKEDIN URL' target='_blank' title='Linkedin></a>
</div>

FEEDBURNER URL, FACEBOOK URL gibi kısımlara kendi sosyal ağ linkinizi eklemeyi unutmayın.

İyi bloglamalar...

Blogger Son Yazı ve Yorumlar Widgeti

Blogger Son Yazı ve Yorumlar WidgetiTemayı değiştirdikten sonra sayfa hızına daha fazla önem vermeye başladım. Başta farklı eklentilerle sağ menüde son yazı ve yorumları görüntüleyebiliyordum ama eklentilerin içerdiği javascript kodları az da olsa blogun hızına olumsuz etki ediyordu. Bende uzun zamandır bildiğim bir yöntemi denedim ve ve hiç kod kullanmadan basit şekilde son yorumları ve yazıları ekledim.

Daha önce anlatımına denk geldiniz mi bilmiyorum ama benim baktığım blogların çoğunda bu olay eklentilerle yapılıyordu, bende buraya eklemek istedim.

Zaten Blogger'in yazı ve yorumlar için widget desteği varken fazladan kod kullanmaya gerek yok diyerek anlatıma geçiyorum.

Nasıl yapılır?

  • Blogger hesabınıza giriş yapın
  • Blogunuzu seçin "Yerleşim" kısmına gelin ve Gadget Ekle'yin
  • Açılan sayfanın hemen aşağısındaki "İçerik Takibi" widgetini tıklayın ve aşağıdaki resimde gösterildiği gibi linkleri uygun yere yapıştırın.

İçerik takbini yapılandır

Son yazıları çekmek için;

http://blogadi.blogspot.com/feeds/posts/default

Son yorumları çekmek için;

http://blogadi.blogspot.com/feeds/comments/default

kodlarını kullanabilirsiniz. Hepinize iyi çalışmalar...

Blogger Otomatik Devamını Oku Eklentisi

Blogger Otomatik Devamını Oku EklentisiBu anlatımın benzerlerine daha önce bir çok kez denk geldiğinize eminim. Hatta Hit Adam'ın önceki yayın döneminde bu konuya bende değinmiştim. Yalnız benimki de dahil anlatımların hiçbirinde resime tıklandığında yazıya gitme gibi bir özellik yoktu. Yani ya "yazının devamını oku" gibi bir bağlantı oluşturuyordunuz ya da başlığa tıklıyordunuz. Bu sefer tüm özellikleri içeren bir eklenti kuracağız.

Devamını oku eklentisi yerine < !--more-- > etiketini kullanarakta yazınızın belli kısmını gizlyebilirsiniz ancak bu kullanacağımız eklenti kadar düzenli bir görüntü yaratmayacaktır. Yani eklentimiz bütün yazıları ve yazılara ait resimler aynı ölçülerde görüntüleyecek ve her yazı için ayrı ayrı etiket girmemize gerek kalmayacak.

Eklenti Özellikleri

1. Statik sayfalarda etkili değildir bu sayede
2. Anasayfada görüntülenecek karakter sayısını ve resim boyutunu ayarlayabilirsiniz.
3. Blog anasayfasını optimize ederek sayfa hızını olumlu etkiler.
4. Anasayfada görütülenen resimlerdeki bağlantıya tıklayarak yazı sayfasına gidebilirsiniz.

Kuruluma başlamadan her ihtimale karşı temanızın yedeğini almayı unutmayın.

Devamını oku eklentisi nasıl kurulur?

Tema kodlarınız arasında aşağıdaki etiketi bulun

</head>

Hemen üzerine aşağıdaki kodları ekleyin

<script type='text/javascript'>
//<![CDATA[
  function removeHtmlTag(strx,chop){if(strx.indexOf("<")!=-1){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}strx=s.join("")}chop=(chop<strx.length-1)?chop:strx.length-2;while(strx.charAt(chop-1)!=' '&&strx.indexOf(' ',chop)!=-1)chop++;strx=strx.substring(0,chop-1);return strx+'...'}function masSummaryAndThumb(mas1,mas2){var div=document.getElementById(mas1);var imgtag="";var img=div.getElementsByTagName("img");var summ=250;if(img.length>=1){imgtag='<a href="'+mas2+'"><span style="float:left;margin-right:10px"><img src="'+img[0].src+'" width="220px" height="130px"/></span></a>';summ=250}var summary=imgtag+'<div class="entry">'+removeHtmlTag(div.innerHTML,summ)+'</div>';div.innerHTML=summary}
//]]>
</script>

Kaydetmeden devam edin Ctrl+F ile aşağıdaki kodu bulun

<data:post.body/>

Yukarıda kodu aşağıdakilerle değiştirin ve şablonu kaydedin.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>
masSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;);
</script>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

Resim boyutunu değiştirmek için 1. kod içerisindeki: width="220px" height="130px" değerlerini
Görüntülenecek karakter sayısını belirlemek için yine 1. kod içerisindeki: summ=250 (2 tane var siz 2.sini değiştirin) değerleri kullanabilirsiniz.

Hit Adam

Blog Yazılarınız Twitter Hesabınızda Otomatik Yayınlansın

Blog Yazılarınız Otomatik Olarak Twitter'da Yayınlansın
Twitter, her geçen gün kullanıcı sayısını arttıran bir platform ve Facebook'dan çok daha fazla aktif blogcunun olduğu bir ortam. Hal böyle olunca blog yazılarını şöyle bol takipçili bir twitter hesabında yayınlamak bize oldukça iyi trafik kazandırabilir. Ancak blog yazılarımızı manuel olarak eklediğimizden her yazı için twit atmak mümkün olmuyor. Özellikle blogunu sık güncelleyen blogcular için bir çare bulunması şarttı.

Bugün sizlere bu sorunu ortadan kaldırıp blog yazılarınızı twitter hesabınızda nasıl otomatik olarak yayınlayabileceğinizi anlatacağım.
Google'ın ücretsiz rss servisi olan Feedburner'ı kullanacağız. Bu soruna çözüm getiren birkaç yöntem daha bulmuştum ama hiçbiri Feedburner kadar kullanışlı ve basit değildi.

Öncelikle bu işlemi yapabilmeniz için bir Google ve Feedburner hesabınızın olması gerekiyor. Ben hesabınızın olduğunu varsayarak bu kısmı atlayıp direk anlatıma geçiyorum.

İlk olarak Google Feedburner adresine gidin ve yayın yaptığınız rss linkinin üzerine tıklayın;

My feed
Daha sonra açılan sayfada üst kısımdan "Publicize" yi seçin

Publicize
Publicize kısmına gelin ve sol menüden "Socialize" yi seçin.

Socialize
Publicize ➜ Socialize kısmına geldikten sonra aşağıdaki gibi ayarları uygulayın.
Buradaki "Add a twitter account" kısmından twitter hesabınızı bağlayın.

Add a twitter account
Ayarlayı yaptıysanız alt kısma inin ve "Save" butonuna tıklayın.

Twitter hesabınıza gönderilen yazı linkleri yine bir Google servisi olan Google Url Shortener tarafından kısaltılıyor bu da twitterda karakter sınırlaması olduğu için bize avantaj sağlıyor.

Hepinize iyi bloglamalar...

Alıntılanan Yazılara Otomatik Kaynak Link Ekleme

Alıntılanan Yazılara Otomatik Kaynak Link Ekleme
Bu konuyla alakalı "Blogunuzdaki Yazıların Alıntılanmasını Engelleyin" adlı yazımda verdiğim kod ziyaretçinin sayfanızda gezinirken sağ veya sol tuşa tıklamasını engelliyordu.
Şimdiki anlatımda ise kullanıcılardan çok botları hedef alarak yazılara otomatik kaynak link eklemeyi göreceğiz.

Basit bir javascript kodu ile, hiçbir siteye üye olmadan, izinsiz alıntılanan yazılarınıza aktif linkler ekleyerek hem bloglarımıza backlink sağlayacak hem de yazımızı alıntılayan blogları daha gerilerde bırakacağız.

1. Blogger'a giriş yapın
2. Blog adı ✈ Şablon ✈ Html'yi Düzenle
3. Ctrl+F komutu ile kodunu bulun ve hemen altına aşağıdaki kodu ekleyin

<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> 

5. Yukarıdaki kodu eklediyseniz şablonu kaydet deyip çıkın.

Tüm işlem bu kadar. Bundan sonra blogunuzdaki herhangi bir yazı sizden izinsiz alıntılandığı zaman Kaynak Link: http://www.siteadresi.com/yazi-ismi şeklinde otomatik bir link oluşacak.

Hepinize iyi bloglamalar...

Blogger'da Adsense Reklamları Nasıl Yayınlanır?

Blogger'da Adsense Reklamları Nasıl Yayınlanır?
Yine Google'ın bir servisi olan Adsense, website sahiplerinin Adwords aracılığıyla ekledikleri site reklamlarını sizin sitelerinizde görüntülemenizi sağlayan ve bu sayede para kazanmanıza olanak tanıyan ücretsiz bir reklam servisidir.

Çoğu blog yazarı belli dönemlerden sonra daha profesyonel adımlar atarak bloglarından para kazanmak ister ki buna ben de dahilim. Şu an benim de aktif olarak görüntülenen reklamlarım mevcut.

Yalnız bazı sorunlar var ki reklamların görüntülenmesine engel oluyor.
Blogger'in html paneli adsense kodlarını direk eklemeye izin versede reklamlarınız görüntülenmiyor. Ya da bir çok kullanıcı başlarda karışık gelen kumanda paneline kodları eklemekte zorlanıyor.
Burada anlatacağım birkaç adımla bloglarınıza adsense kodlarını nasıl kolay bir şekilde ekleyebileceğinizi göstereceğim.

Google adsense kodlarının elinizde hazır olduğunu varsayarak anlatıma başlıyorum.

1. Adım : Blogger Adsense Kod Çevirici Araç ile adsense panelinden aldığınız kodları aşağıda gösterildiği gibi kolayca çevirin.
Kodlar üst kısımdaki alana yapıştırdığınız anda kendiliğinden çevirilecektir. Eğer çevirme işlemi gerçekleşmezse alttaki boş alana bir kere tıklamanız gerekebilir.

Adsense kodları nasıl çevirilir?

2. Adım : Blogger'a gidin ve kodları ekleyeceğiniz blogun html panelini açın (html paneline; kumanda paneli ➜ blog adı ➜ şablon ➜ html'yi düzenle kısmından ulaşabilirsiniz). Burada sizlere kodları yazı başlığının altına ve konu sonuna nasıl ekleyebileceğiniz anlatacağım.

Adsense reklamlarını yazı başlıklarının altına eklemek için aşağıdaki kodu bulun ve hemen altına 1. adımda çevirdiğiniz kodları ekleyin.

<div class='post-header'>

Adsense reklamlarını yazılarınızın sonuna eklemek için aşağıdaki kodu bulun ve hemen üzerine çevirdiğiniz kodları ekleyin.

<div class='post-footer'/>

Reklamları sağa, sola veya merkeze konumlandırmak içinse aşağıdaki gibi bir yerleşim yapmanız gerek.

Sola;
<div style="float:left;">
Adsense kodları buraya gelecek
</div>

Sağa;
<div style="float:right;">
Adsense kodları buraya gelecek
</div>

Merkeze;
<div style="text-align:center;">
Adsense kodları buraya gelecek
</div>

Reklamların ana sayfada görüntülenmemesini istiyorsanız sadece yazı sayfalarında görüntülenecek şekilde düzenlemeniz de mümkün. Bunun için kodlarınızı aşağıdaki gibi ekleyebilirsiniz.

<b:if cond='data:blog.pageType == &quot;item&quot;'> 
Adsense kodları buraya gelecek
</b:if>

Yerleşimler hakkında örnek isterseniz bu konunun en üst kısmına bakabilirsiniz. Konu resmi ve hemen sağında adsense reklamı bulunuyor. Adsense reklamını gösterdiğim gibi sağa yasladım ve konu resmini sola aldım. Sizlerde bu şekilde yerleşim şekillerini araştırarak hem kazancınızı arttırabilirsiniz hemde blogunuzun görüntüsünü bozmamış olursunuz.

Konuyla ilgili hazırladığım kısa anlatım videosu ise aşağıdadır. İyi seyirler, bol kazançlar...

Blogger Resmi Paylaşım Butonları Nasıl Çalıştırılır?

Blogger Resmi Paylaşım Butonları Nasıl Çalıştırılır?
Paylaşım butonları, bloggerin 2010 haziran ayında buzz üzerinden duyurduğu bir özellik. Blogunuzda farklı eklentilere yer vermeden hızlı bir şekilde yazı gönderip paylaşmayı sağlayan kullanışlı ve küçük bir araç.
Elbette şu an kullanıyor olabilir veya temanızı düzenlerken bu kodları silmiş/değiştirmiş olabilirsiniz.
Ben hem kullanan arkadaşların ilerde sorun yaşamamaları hem de butonları aktifleştiremeyen kullanıcıların isteklerini karşılamak adını bu yazıyı yazma ihtiyacı hissettim.
Bugün sizlere vereceğim kodlar sayesinde eklentinizi birkaç adımda çalışır duruma getirip yazılarınızda kullanabileceksiniz.

Örnek görünüm;

blogger resmi paylaşım butonu, blogger

Kumanda Paneli ➜ Blog Adı ➜ Yerleşim ➜ Blog Kayıtları (düzenle) ➜ Paylaşım Düğmelerini Göster tikinin işaretli olduğundan eminseniz başlayalım...

Kurulum;


1. İlk olarak temanızda aşağıdaki kodları Ctrl + F ile bulun(kodları parça parça aratın).

<b:includable id='shareButtons' var='post'>
  <b:if cond='data:post.sharePostUrl'>
      <a class='share-button sb-email' expr:href='data:post.sharePostUrl + &quot;&amp;target=email&quot;' expr:title='data:top.emailThisMsg' target='_blank'>
        <span class='share-button-link-text'><data:top.emailThisMsg/></span></a>
      <a class='share-button sb-blog' expr:href='data:post.sharePostUrl + &quot;&amp;target=blog&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' target='_blank'>
        <span class='share-button-link-text'><data:top.blogThisMsg/></span></a>
      <a class='share-button sb-twitter' expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' target='_blank'>
        <span class='share-button-link-text'><data:top.shareToTwitterMsg/></span></a>
      <a class='share-button sb-facebook' expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' expr:title='data:top.shareToFacebookMsg' target='_blank'>
        <span class='share-button-link-text'><data:top.shareToFacebookMsg/></span></a>
      <a class='share-button sb-buzz' expr:href='data:post.sharePostUrl + &quot;&amp;target=buzz&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=415,width=690\&quot;); return false;&quot;' expr:title='data:top.shareToBuzzMsg' target='_blank'>
        <span class='share-button-link-text'><data:top.shareToBuzzMsg/></span></a>
  </b:if>
</b:includable>

2. Daha sonra bu kodları silip yerine aşağıdaki kodları yerleştirin

<b:includable id='shareButtons' var='post'>
  <b:if cond='data:top.showEmailButton'><a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + &quot;&amp;target=email&quot;' expr:title='data:top.emailThisMsg' target='_blank'><span class='share-button-link-text'><data:top.emailThisMsg/></span></a></b:if><b:if cond='data:top.showBlogThisButton'><a class='goog-inline-block share-button sb-blog' expr:href='data:post.sharePostUrl + &quot;&amp;target=blog&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' target='_blank'><span class='share-button-link-text'><data:top.blogThisMsg/></span></a></b:if><b:if cond='data:top.showTwitterButton'><a class='goog-inline-block share-button sb-twitter' expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToTwitterMsg/></span></a></b:if><b:if cond='data:top.showFacebookButton'><a class='goog-inline-block share-button sb-facebook' expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' expr:title='data:top.shareToFacebookMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToFacebookMsg/></span></a></b:if><b:if cond='data:top.showOrkutButton'><a class='goog-inline-block share-button sb-orkut' expr:href='data:post.sharePostUrl + &quot;&amp;target=orkut&quot;' expr:title='data:top.shareToOrkutMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToOrkutMsg/></span></a></b:if><b:if cond='data:top.showDummy'><div class='goog-inline-block dummy-container'><data:post.dummyTag/></div></b:if>
</b:includable>

3. Önizleme yapın, hata almadıysanız doğru yoldasınız demektir.

4. Bu adımda ise yine Ctrl + F komutu ile aşağıdaki kodu aratın

<div class='post-footer'>

5. Yukarıda bulduğunuz kodun hemen üzerine aşağıdaki kodu yerleştirin.

<div class="post-share-buttons"><b:include data="post" name="shareButtons">
</b:include></div>

Butonlar yazılarınızın en alt kısmında görüntülenecektir.

Özelleştirilmiş Temalardaki Lightbox Sorunu ve Çözümü

blogger lightbox
Blogger'ın bizlere sunduğu onlarca hizmetten yalnızca biri, Türkçesi ile "Işık Kutusu". Ayarlar --> Yayınlar ve Yorumlar kısmından ayarlayabildiğimiz bu özellik bizlere resimleri sayfadan ayrılmadan siyah bir çerçeve içerisinde görüntüleme olanağı sunuyor.

Kimi zaman görüntüleme için gerekli ayarlamayı yapsak bile lightbox özelliği aktif olmuyor. Bunun nedeni tema sırasında gereksiz görülüp silinen temel kodlar.

Sorunun çözümü içi aşağıdaki adımları takip edin.

Adım -1


1- Ayarlar ➜ Yayınlar ve Yorumlar kısmına gelin ve Resimleri Lightbox ile gösterin ? şıkkına 'Evet' deyip kaydedin.

2- Kumanda Paneli ➜ Blog Adı ➜ Şablon ➜ Html'yi Düzenle (Devam et) yolunu izleyin
    ve daha sonra aşağıdaki kodu Ctrl+F komutu ile bulun

<data:post.body/>

Yukarıdaki kodu bulduysanız onu aşağıdaki kodlarla değiştirin

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'><data:post.body/></div>

Adım -2


1- Tekrar Kumanda Paneli ➜ Blog Adı ➜ Şablon ➜ Html'yi Düzenle (Devam et) yolunu izleyin ve Ctrl+F komutu ile aşağıdaki kodun tema kodlarınız arasından olup olmadığını kontrol edin.

<b:include data='blog' name='all-head-content'/>

Bu kod bir tür bağlantı görevi görüyor diye tahmin ediyorum. Çünkü temanızda olmadığı takdirde lightbox ve arama açıklaması özellikleri çalışmıyor.

Eğer bu koddan varsa müdahale etmeden sayfayı kapatabilirsiniz. Yok bulamadım diyorsanız, kodu, <head> etiketinin hemen altına eklemeniz gerekiyor.

Blogger tema yükleme nasıl yapılır?

Blogger Tema Yükleme
Blogger temalarını blogunuza nasıl yüklemeniz gerektiğini bilmiyorsanız bu mini rehber oldukça işinize yarayacaktır.

1. İlk olarak tema indirme sitelerinin herhangi birinden kullanmak istediğiniz .xml formatındaki temanızı bilgisayarınıza indirin.

2. Blogger kumanda paneline gidin.

3. İndirdiğiniz temayı yüklemek istediğiniz blogu panelden açıp sol menüden "Şablon" u seçin.

4. Ne olur ne olmaz şablon kısmında sağ üst köşedeki "Yedekle/Geri Yükle" butununa tıklayın ve "Tam Şablonu İndir" deyin. Bu sayede tema yüklerken oluşabilecek herhangi bir hatada eski temamızı geri yükleyebiliriz.

5. Şablonunuzu yüklemek için de 4. adımda açtığınız ekranda bu sefer tam şablonu indir yerine "Yükle" butonunu kullanın. Aşağıdaki resim sizlere yardımcı olacaktır.

blogger tema yükleme

Yükle dedikten sonra 1-2 sn kadar bekleyin ve "Başarıyla yüklendi" yazısını göreceksiniz ardından yeni tasarımınızın tadını çıkarabilirsiniz.

Blogger En Çok Yorum Yapanlar Eklentisi

Blogger En Çok Yorum Yapanlar Eklentisi
Sizler de biliyorsunuz ki yorumcular bloga hayat verenlerdir. Kimi zaman yön gösterici kimi zaman yanlışlarınızı düzeltici kimi zamanda tartışmalara yol açarak farklı bakış açıları oluşturucu. Kısaca onlar blogların yapıtaşları :)

Yorum yapanlar bloglarda bu kadar önemli bir yere sahipken onlar için blogunuzda bir yer ayırmamanız haksızlık olurdu.

Aşağıda vereceğim kodlar sayesinde blogunuzun istediğiniz bir yerinde (blogunuzun kuruluşundan itibaren) en çok yorum yapan kullanıcıları avatar ve yorum sayıları ile birlikte görüntüleyebilirsiniz.

Önizleme olarak aşağıdaki görüntüyü inceleyebilirsiniz;

Yorumcular

Eklentiyi bloguma nasıl eklerim?

Kumanda paneli → Blog adınız → Yerleşim → Gadget ekle → Html/Javascript kısmına gelerek aşağıdaki kodları boş alana yerleştirin.

<style type="text/css">
.top-commenter-line {margin: 3px 0;}
.top-commenter-line .profile-name-link {padding-left:0;}
.top-commenter-avatar {vertical-align:middle;}
</style>
<script type="text/javascript">
// CONFIG:
var maxTopCommenters = 8;   // how big a list of top commentators
var minComments = 1;        // how many comments must top commentator have at least
var numDays = 0;            // from how many days (ex. 30), or 0 from "all the time"
var excludeMe = true;       // true: exclude my own comments
var excludeUsers = ["Anonymous", "someotherusertoexclude"];     // exclude these usernames
var maxUserNameLength = 42; // 0: don't cut, >4: cut usernames
//
var txtTopLine = '<b>[#].</b> [image] [user] ([count])';
var txtNoTopCommenters = 'No top commentators at this time.';
var txtAnonymous = '';      // empty, or Anonymous user name localized if you want to localize
//
var sizeAvatar = 28;
var cropAvatar = true;
//
var urlNoAvatar = "http://lh4.googleusercontent.com/-069mnq7DV_g/TvgRrBI_JaI/AAAAAAAAAic/Iot55vywnYw/s"+sizeAvatar+"/avatar_blue_m_96.png"; // http://www.blogger.com/img/avatar_blue_m_96.png resizeable
var urlAnoAvatar = 'http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=' + sizeAvatar;
var urlMyProfile = ''; // set if you have no profile gadget on page
var urlMyAvatar = '';  // can be empty (then it is fetched) or url to image
// config end
// for old IEs & IE modes:
if(!Array.indexOf) {
 Array.prototype.indexOf=function(obj) {
  for(var i=0;i<this.length;i++) if(this[i]==obj) return i;
  return -1;
}}
function replaceTopCmtVars(text, item, position)
{
  if(!item || !item.author) return text;
  var author = item.author;

  var authorUri = "";
  if(author.uri && author.uri.$t != "")
    authorUri = author.uri.$t;

  var avaimg = urlAnoAvatar;
  var bloggerprofile = "http://www.blogger.com/profile/";
  if(author.gd$image && author.gd$image.src && authorUri.substr(0,bloggerprofile.length) == bloggerprofile)
    avaimg = author.gd$image.src;
  else {
    var parseurl = document.createElement('a');
    if(authorUri != "") {
      parseurl.href = authorUri;
      avaimg = 'http://www.google.com/s2/favicons?domain=' + parseurl.hostname;
    }
  }
  if(urlMyProfile != "" && authorUri == urlMyProfile && urlMyAvatar != "")
    avaimg = urlMyAvatar;
  if(avaimg == "http://img2.blogblog.com/img/b16-rounded.gif" && urlNoAvatar != "")
    avaimg = urlNoAvatar;
  var newsize="s"+sizeAvatar;
  avaimg = avaimg.replace(/\/s\d\d+-c\//, "/"+newsize+"-c/");
  if(cropAvatar) newsize+="-c";
  avaimg = avaimg.replace(/\/s\d\d+(-c){0,1}\//, "/"+newsize+"/");

  var authorName = author.name.$t;
  if(authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar)
    authorName = txtAnonymous;
  var imgcode = '<img class="top-commenter-avatar" height="'+sizeAvatar+'" width="'+sizeAvatar+'" title="'+authorName+'" src="'+avaimg+'" />';
  if(authorUri!="") imgcode = '<a href="'+authorUri+'">'+imgcode+'</a>';

  if(maxUserNameLength > 3 && authorName.length > maxUserNameLength)
    authorName = authorName.substr(0, maxUserNameLength-3) + "...";
  var authorcode = authorName;
  if(authorUri!="") authorcode = '<a class="profile-name-link" href="'+authorUri+'">'+authorcode+'</a>';

  text = text.replace('[user]', authorcode);
  text = text.replace('[image]', imgcode);
  text = text.replace('[#]', position);
  text = text.replace('[count]', item.count);
  return text;
}

var topcommenters = {};
var ndxbase = 1;
function showTopCommenters(json) {
  var one_day=1000*60*60*24;
  var today = new Date();

  if(urlMyProfile == "") {
    var elements = document.getElementsByTagName("*");
    var expr = /(^| )profile-link( |$)/;
    for(var i=0 ; i<elements.length ; i++)
      if(expr.test(elements[i].className)) {
        urlMyProfile = elements[i].href;
        break;
      }
  }

  if(json && json.feed && json.feed.entry && json.feed.entry.length) for(var i = 0 ; i < json.feed.entry.length ; i++ ) {
    var entry = json.feed.entry[i];
    if(numDays > 0) {
      var datePart = entry.published.$t.match(/\d+/g); // assume ISO 8601
      var cmtDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]);

      //Calculate difference btw the two dates, and convert to days
      var days = Math.ceil((today.getTime()-cmtDate.getTime())/(one_day));
      if(days > numDays) break;
    }
    var authorUri = "";
    if(entry.author[0].uri && entry.author[0].uri.$t != "")
      authorUri = entry.author[0].uri.$t;

    if(excludeMe && authorUri != "" && authorUri == urlMyProfile)
      continue;
    var authorName = entry.author[0].name.$t;
    if(excludeUsers.indexOf(authorName) != -1)
      continue;

    var hash=entry.author[0].name.$t + "-" + authorUri;
    if(topcommenters[hash])
      topcommenters[hash].count++;
    else {
      var commenter = new Object();
      commenter.author = entry.author[0];
      commenter.count = 1;
      topcommenters[hash] = commenter;
    }
  }
  if(json && json.feed && json.feed.entry && json.feed.entry.length && json.feed.entry.length == 200) {
    ndxbase += 200;
    document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&start-index='+ndxbase+'&alt=json-in-script&callback=showTopCommenters"></'+'script>');
    return;
  }

  // convert object to array of tuples
  var tuplear = [];
  for(var key in topcommenters) tuplear.push([key, topcommenters[key]]);

  tuplear.sort(function(a, b) {
    if(b[1].count-a[1].count)
        return b[1].count-a[1].count;
    return (a[1].author.name.$t.toLowerCase() < b[1].author.name.$t.toLowerCase()) ? -1 : 1;
  });

  // list top topcommenters:
  var realcount = 0;
  for(var i = 0; i < maxTopCommenters && i < tuplear.length ; i++) {
    var item = tuplear[i][1];
    if(item.count < minComments)
        break;
    document.write('<di'+'v class="top-commenter-line">');
    document.write(replaceTopCmtVars(txtTopLine, item, realcount+1));
    document.write('</d'+'iv>');
    realcount++;
  }
  if(!realcount)
    document.write(txtNoTopCommenters);
} 
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&alt=json-in-script&callback=showTopCommenters"></'+'script>');
</script>

Tamamdır. Geriye yalnızca göstermek istediğiniz kullanıcı sayısı ve avatar boyutlarınızı düzenlemek kaldı.

var maxTopCommenters = 8; kodu ile göstermek istediğiniz kullanıcı sayısını
var sizeAvatar = 28; kodu ile kullanıcı avatarlarının boyutlarını belirleyebilirsiniz.

Blogunuzu yapılan yorumlara cevap vermeyi unutmayın, iyi bloglamalar...