twitter
blogger site kodları etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
blogger site kodları etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

SİTENİNİZ HIZINI ÖLÇÜN

SİTENİNİZ HIZINI ÖLÇÜN

Alan Adlarınız: Sitelerinizin adresini yazın.(Maksimum 10 site)
 
(örn. ysntasarim.blogspot.com)
5 Eylül 2015 Cumartesi | 0 yorum | Etiketler: , , , ,

Blogger Otomatik Devamını Oku Eklentisi

KURULUM HAKKINDA


Şablon > Html'yi düzenle deyin ve tema kodlarınız arasında Ctrl+F ile aşağıdaki kodu bulun.

</head>

Yukarıdaki kodun hemen üzerine aşağıdaki kodları ekleyin.

<script type='text/javascript'> 
summary_noimg = 500;
summary_img = 500;
img_thumb_height = 0;
img_thumb_width = 0;
</script>

<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 createSummaryAndThumb(pID, pURL, pTITLE){
    var div = document.getElementById(pID);
    var imgtag = "";
    var img = div.getElementsByTagName("img");
    var summ = summary_noimg;
    if(img.length>=1) {    
        imgtag = '<span style="float:left; padding:0 10px 5px 0;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img style="background:url() center center no-repeat ;" src="'+img[0].src+'" width="'+img_thumb_width+'200px" height="'+img_thumb_height+'165px"/></a></span>';
        summ = summary_img;
    }
    
    var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
    div.innerHTML = summary;
}

//]]>
</script>

Devam edin ve kodlarınız arasında aşağıdaki kodu bulun. Bu koddan temanızda birden fazla bulunabilir, hepsini tek tek deneyerek hangisinde çalıştığını bulabilirsiniz.DENEMEK LAZIM YANİ BİRAZ

<data:post.body/>

Yukarıdaki kodu silin ve yerine aşağıdaki kodları ekleyin. ÇOK GÜZEL GİDİYORSUNUZ DEVAM

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>
createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,
&quot;<data:post.url/>&quot;,&quot;<data:post.title/>&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>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div class='devamini-oku'>
<a expr:href='data:post.url'>Devamını oku</a>
</div>
</b:if>
</b:if>

İlk kodu detaylı incelediğinizde kırmızı ile işaretlediğim 4 kısım olduğunu göreceksiniz. Bunların ne işe yaradığını aşağıda anlattım.

summary_noimg = 500; : Yazıda resim olmadığında görülecek karakter sayısı
summary_img = 500; : Yazıda resim olduğunda görülecek karakter sayısı
200px : Resmin uzunluğunu belirler
165px : Resmin yüksekliğini belirler

İŞLEM BİTTİ DENEYİN BAKALIM ŞİMDİ NASIL OLMUŞ BAKIN
| 0 yorum | Etiketler: , , ,

Instagram widgeti Blogger'a nasıl eklenir?

Instagram widgeti Blogger'a nasıl eklenir?


1. Widgeti oluşturmamızı sağlayan http://snapwidget.com/#getstarted adresine gidelim.

2. Açılan sayfada bilgileri kendinize göre doldurun.

Username: Instagram kullanıcı adınız buraya gelecek.
Hashtag: Özellikle göstermek istediğiniz bir fotoğraf serisi varsa kullanabilirsiniz. Örneğin cmylmz adlı kullanıcının AliBabaVe7Cüceler hashtagli fotoğraflarını listelemek gibi. Eğer bir hesabınız yoksa belli hashtaglere ait fotoğrafları da bu sayede sergileyebilirsiniz.
Widget Type: Eklenti tipini seçmeniz isteniyor. Eğer eklentiyi yan menüde kullanmayı düşünüyorsanız Grid'iseçmenizi öneririm. Onun dışında Board, Scrolling, Slideshow ve Map stili bulunuyor. Kullanmak istediğiniz stile göre özellikler artıp azalıyor. Tüm özellikleri barındırdığı için anlatıma Grid üzerinden devam etmek istiyorum.
Thumbnail Size: Fotoğrafların boyutunu buradan belirleyebilirsiniz. Çok fazla büyütüp insanları rahatsız etmek veya çok küçültüp görülmeyecek hale getirmek yanlış olacağından 125px çok ideal bir boyut gibi duruyor.
Layout: Bu kısımdaki sayıları değiştirerek yan yana ve alt alta kaç adet resim görüntüleneceğini belirleyebilirsiniz. Resim boyutunu ve eklentiyi kullanacağınız alanın ölçülerini hesaba katarak yazmakta fayda var.
Photo Border: Resimlere çerçeve eklensin mi?
Background Color: Resimlerin arkaplan rengini değiştirir.

Photo Padding: Resimler arasındaki ne kadar boşluk olsun?
Hover Effect: Fade In seçeneğinde resimler bir miktar karartılıyor ve mouse ile üzerine gelindiğinde düzeliyor.Fade Out seçeneğinde ise tam tersi olarak resimler net gösterilip mouse ile üzerine gelindiğinde kararıyor.
Share Buttons: Fotoğrafların üzerinde mini paylaşım butonları çıkmasına yarıyor. Kesinlikle kullanılmasını öneriyorum.
Responsive: Bu seçenek özellikle responsive yani uyumlu tasarım kullananların çok işine yarayacak. Çünkü eklenti bu sayede çözünürlüğe göre boyutlanıyor. Responsive tasarım kullanmayan arkadaşların da aktifleştirmelerini öneririm.

Sayfanın altında yer alan gri Preview butonu ile eklentinizin blogunuza eklemeden önce önizlemesini yaparak nasıl durduğunu görebilirsiniz. Yeşil Get Widget butonu ile de size lazım olan kodları elde edebilirsiniz.

kodları blogumda nasıl kullanacağım?


Blog > Yerleşim > Gadget Ekle kısmına gelin. Gadget Ekle bağlantısına tıkladıktan sonra açılan sayfada biraz aşağı inerek HTML/Javascript'i seçin ve kodlarını buraya yapıştırıp kaydedin.
Fotoğraflarınıza özel bir sayfa oluşturmak isterseniz; Sayfalar > Yeni Sayfa > HTML bölümünden halledebilirsiniz.

Alternatif siteler


Genellikle tüm siteler aynı işi yapıyor ancak bir köşede dursun lazım olur diyerek kaydettiğim iki siteyi de sizinle paylaşmak istiyorum.
Instansive: Responsive Instagram Widget sloganıyla yayın yapan site ek olarak bizlere pinterest tarzını sunuyor birden fazla widgeti düzenleyebiliyorsunuz.
Intagme: Snapwidget'in biraz daha yalın hali denilebilir.
| 0 yorum | Etiketler: , , ,

BLOGGER SAYFA NUMARALANDIRMA EKLENTISI

Blogger'da ana sayfada ve sayfa başına gösterilecek konu sayısı Ayarlar > Yayınlar ve Yorumlar > En fazla şu kadar kayıt göster seçeneğinden ayarlanabiliyor. Fakat her ne kadar bu şekilde sayfa başına gösterilecek kayıtlar ayarlansa da sayfa navigasyonu arşivlere göreEski Kayıtlar ve Yeni Kayıtlar olmak üzere ikiye ayrılıyor. Blogger'da sayfa numaralandırma el ile kod eklenmediği sürece otomatik olarak ayarlanamıyor. Bu konumuzda sizlerle blogunuza sayfa numaralandırma eklentisi nasıl eklenir resimli bir şekilde anlatacağım.

 Blogger Sayfa Numaralandırma - Page Navigation Eklentisi 

Tam olarak 7 adet birbirinden farklı stillere sahip blogger sayfa numaralandırma kodlarından öncelikle bir stil seçin. Stil seçtikten sonra:

Adım 1: Blogger Yönetici > Şablon > HTML'yi düzenle butonuna tıklayın.
Adım 2: Blogger şablon kodlarının bulunduğu alana tıklayıp CTRL + F 'e basıp Blogger kod arama butonunu açın.
Adım 3:  ]]></b:skin> kodunu aratın ve hemen üstüne aşağıdan seçmiş olduğunuz blogger sayfa numaralandırma stillerinden birini yapıştırın.

  • Stil 1
     #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
    .blog-pager {background: none;}
    .displaypageNum a,.showpage a,.pagecurrent{padding: 3px 7px;margin-right:5px;background:#E9E9E9;color: #888;border:1px solid #E9E9E9;}
    .displaypageNum a:hover,.showpage a:hover,.pagecurrent{background:#CECECE;text-decoration:none;color: #000;}
     .showpageOf{display:none!important}
    #blog-pager .showpage, #blog-pager .pagecurrent{font-weight:bold;color: #888;}
     #blog-pager .pages{border:none;}

    blogger sayfa numaralandırma eklentisi
    •  Stil 2
     #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
    .blog-pager {background: none;}
    .displaypageNum a,.showpage a,.pagecurrent{padding: 5px 10px;margin-right:5px; color: #F4F4F4; background-color:#404042;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}
    .displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#EC8D04;text-decoration:none;color: #fff;}
    #blog-pager .showpage, #blog-pager, .pagecurrent{font-weight:bold;color: #000;}
     .showpageOf{display:none!important}
    #blog-pager .pages{border:none;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}

    blogger sayfa numaralandırma eklentisi

    • Stil 3
     #blog-pager{clear:both;margin:30px auto; padding: 7px; text-align:center;font-size: 11px;background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #000000),color-stop(1, #292929));background-image: -o-linear-gradient(top, #000000 0%, #292929 100%);background-image: -moz-linear-gradient(top, #000000 0%, #292929 100%);background-image: -webkit-linear-gradient(top, #000000 0%, #292929 100%);background-image: -ms-linear-gradient(top, #000000 0%, #292929 100%);background-image: linear-gradient(to top, #000000 0%, #292929 100%); padding: 6px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
    .blog-pager {background: none;}
    .displaypageNum a,.showpage a,.pagecurrent{padding: 3px 10px;margin-right:5px; color: #fff;}
    .displaypageNum a:hover,.showpage a:hover,.pagecurrent{background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #59A2CF),color-stop(1, #D9EAFF));background-image: -o-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -moz-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -webkit-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -ms-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: linear-gradient(to top, #59A2CF 0%, #D9EAFF 100%);text-decoration: none;color: #000;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
    .showpageOf{display:none!important}.blog-pager-older-link, .home-link, .blog-pager-newer-link {background: transparent;}
    a.blog-pager-older-link, a.home-link, a.blog-pager-newer-link {color: #fff;}
    #blog-pager .pages{border:none;background: none;}

    blogger sayfa numaralandırma eklentisi


    • Stil 4

      #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
    .blog-pager {background: none;}
    .displaypageNum a,.showpage a,.pagecurrent{font-size: 14px;padding: 5px 12px;margin-right:5px; color: #666; background-color:#eee;}
    .displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#359BED;text-decoration:none;color: #fff;}
    #blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#359BED;}
     .showpageOf{display:none!important}
    #blog-pager .pages{border:none;}

    blogger sayfa numaralandırma eklentisi

    • Stil 5
     #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
    .blog-pager {background: none;}
    .displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #3E5801; background-color:#E0EDC1;}
    .displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#FEF6DF;text-decoration:none;color: #E16800;}
    #blog-pager .pagecurrent{font-weight:bold;color: #D25E71;background:#FFDEDF;}
     .showpageOf{display:none!important}
    #blog-pager .pages{border:none;}

    blogger sayfa numaralandırma eklentisi
    • Stil 6
      #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
    .blog-pager {background: none;}
    .displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #AD0B00; background-color:#FAB001;}
    .displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#DB4920;text-decoration:none;color: #fff;}
    #blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}
     .showpageOf{display:none!important}
    #blog-pager .pages{border:none;}

    blogger sayfa numaralandırma eklentisi

    • Stil 7
      #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
    .blog-pager {background: none;}
    .displaypageNum a,.showpage a,.pagecurrent{font-size: 12px;padding: 5px 12px;margin-right:5px; color: #222; background-color:#eee; border: 1px solid #EEEEEE;}
    .displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#E5E5E5;text-decoration:none;color: #222;}
    #blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}
     .showpageOf{display:none!important}
    #blog-pager .pages{border:none;}

    blogger sayfa numaralandırma eklentisi

    Page navigation stil kodlarından birini şablonlara ekledikten sonra sıra geldi gerekli Script kodlarını eklemeye.

    Adım 4: </body> kodunu aratın.
    Adım 5: Aşağıda ki scripti </body> 'nin üstüne yapıştırın

     <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <script type='text/javascript'>
      /*<![CDATA[*/
        var perPage=5;
        var numPages=6;
        var firstText ='İlk Sayfa';
        var lastText ='Son Sayfa';
        var prevText ='« Önceki';
        var nextText ='Sonraki »';
        var urlactivepage=location.href;
        var home_page="/";
      /*]]>*/
    </script>
      <script src="https://blogkaynagi-sayfa-numaralandirma.googlecode.com/svn/blogkaynagi-numaraland%C4%B1rma.js"/>
    </b:if>
    </b:if>

    Eklenti Ayarları 
    Eklentiyi blogunuza ekledikten sonra isterseniz Mavi ile renklendirilmiş alanları değiştirebilirsiniz.
        var perPage=5;  -Sayfa başına gösterilecek konu sayısı
        var numPages=6; 
        var firstText ='İlk Sayfa';
        var lastText ='Son Sayfa';
        var prevText ='« Önceki';
        var nextText ='Sonraki »';


    • var perPage=5; Sayfa başına gösterilecek konu sayısı. Bu ayar ana sayfada gösterilecek kayıt sayısı ile aynı olmalıdır. Ayarlar > Yayınlar ve Yorumlar > En fazla şu kadar kayıt göster seçeneğinin den ana sayfada gösterilecek kayıtları ayarlayabilirsiniz.
    • var numPages=6; Sayfa numaralandırma da gösterilecek sayfa sayısı.
    Adım 6: Şablonu Kaydet butonuna tıklayıp eklentinin keyfini çıkarabilirsiniz!
| 0 yorum | Etiketler: , , ,
Kaydol: Kayıtlar (Atom)