Blogger tarafından desteklenmektedir.

Kişisel Blog

30 Nisan 2012 Pazartesi

Blogger Resimli SonYorumlar Eklentisi

Hiç yorum yok :

 

Birbirinden güzel temalar ve faydalı eklentiler yapan Harish, yine çok şık bir eklenti yapmış.Harish’in yaptığı bu eklenti ile blogunuzda yapılan son yorumları, yorumu yazanın avatarı gözükecek şekilde, blogunuzun kenar çubuğunda gösterebiliyorsunuz.

 

Blogger Resimli SonYorumlar Eklentisi

 

Resimli son yorumlar eklentisini blogunuza eklemek için aşağıdaki kodları HTML/JavaScript olarak eklemeniz yeterli.

 

<style type="text/css">
ul.w2b_recent_comments {
    list-style: none;
    margin: 0;
    padding: 0;
}
 
.w2b_recent_comments li {
    background: none !important;
    margin: 0 0 6px !important;
    padding: 0 0 6px 0 !important;
    display: block;
    clear: both;
    overflow: hidden;
    list-style: none;
}
 
.w2b_recent_comments li .avatarImage {
    padding: 3px;
    background: #fefefe;
    -webkit-box-shadow: 0 1px 1px #ccc;
    -moz-box-shadow: 0 1px 1px #ccc;
    box-shadow: 0 1px 1px #ccc;
    float: left;
    margin: 0 6px 0 0;
    position: relative;
    overflow: hidden;
}
 
.avatarRound {
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
}
 
.w2b_recent_comments li img {
    padding: 0px;
    position: relative;
    overflow: hidden;
    display: block;
}
 
.w2b_recent_comments li span {
    margin-top: 4px;
    color: #666;
    display: block;
    font-size: 12px;
    font-style: italic;
    line-height: 1.4;
}
</style>
<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
 numComments  = 10,
showAvatar  = true,
avatarSize  = 40,
roundAvatar = true,
 characters  = 40,
showMorelink = false,
moreLinktext = "Git »",
defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://dl.dropbox.com/u/60346665/bloghocam-resimli-son-yorumlar.js"></script>
<script type="text/javascript" src="http://bloghocam.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=10"></script>

 

Düzenlemeniz gereken yerler şu şekilde:

  • numComments = 10 : gösterilecek yorum adedi
  • characters = 40 : gösterilecek karakter sayısı
  • bloghocam.blogspot.com : blogunuzun adresi
  • 28 Nisan 2012 Cumartesi

    Otomatik Thumbnail ve Devamını Oku Eklentisi

    Hiç yorum yok :

    Otomatik Thumbnail ve Devamını Oku Eklentisi

    Bir çok kişinin kullandığı Otomatik Thumbnail ve Devamını Oku Eklentisinde , blogunuzda yazdığınız yazılara otamatik olarak konu içerisindeki resim ve devamını oku bağlantısının nasıl ekleneceğini bu yazımızda bulabilirsiniz...

    Görüntü açısından da kullanışlı olan Otomatik Thumbnail ve Devamını Oku Eklentisi , Blogunuzda konuların uzayıp gitmesini engeller..Ana sayfada ve diğer sayfalarda daha iyi bir görüntü sağlar..

    Hemen anlatıma geçelim..

    Widget Şablonlarını Genişlet kutucuğunu işaretlediğinizden emin olun ve aşağıdaki kodu bulun..
    </head>
    Bulduğumuz kodun hemen üstüne , aşağıda yer alan kodları ekleyelim..
    <script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
    summary_noimg = 400;
    summary_img = 400;
    img_thumb_height = 140;
    img_thumb_width = 140;

    </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){
    var div = document.getElementById(pID);
    var imgtag = "";
    var img = div.getElementsByTagName("img");

    if(img.length<=0) {
    imgtag = '<span style="float:left;margin-right:5px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3_LlVCNNEQB8TVYqPA9v1wH5muULrmqnWtsPhfRjg6DENtZ7dZnPVkOoRVyRpX_rNeUDGomJQ4xBpLNZ1ma5X7FkH_2nCYUwXRfd4g2LbDsvZT50lWQlcdzB_I0u17ZSM0upZSE70Gjn3/s0/2nrklth.jpg" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
    var summ = summary_noimg;
    }

    if(img.length>=1) {
    imgtag = '<span style="float:left;margin-right:5px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
    summ = summary_img;
    }

    var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
    div.innerHTML = summary;
    }

    //]]>
    </script>
    Şimdi ise aşağıdaki kodumuzu bulalım..
    <data:post.body/>
    Bu kodumuzu aşağıdaki kod ile değiştirelim..( Daha detaylı olarak , bu kodu silin ve yerine aşağıdaki kodları ekleyin )
    <!-- eklentileri.blogspot.com thumbnail devamını oku başlangıcı -->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <data:post.body/>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <data:post.body/>
    <b:else/>
    <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
    <script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
    </script>
    <a class='more' expr:href='data:post.url'>Devamını oku...</a>
    </b:if>
    </b:if>
    <!-- eklentileri.blogspot.com thumbnail devamını oku bitişi -->
    Yukarıdaki işlemleri yaptıysanız Otomatik Thumbnail ve Devamını Oku Eklentisini artık blogger blogunuzda kullanabileceksiniz..

    Yukarıda eklemeniz gereken ilk kod içinde yer alan ;

    img_thumb_height = 140;

    img_thumb_width = 140;
    Değerlerini değiştirerek , thumbnail yani ana sayfanızda görünecek resmin boyutunu ayarlayabilirsiniz..



    <<< Bu Yazı için Arama Sonuçları  >>>

    Otomatik Thumbnail ve Devamını Oku Eklentisi , Blogger Otomatik Thumbnail ve Devamını Oku Eklentisi , Blogger Thumbnail ekleme , Blogger Devamını oku Eklentisi , Blogger Devamını Oku ekleme , Blogger Thumbnail ve Devamını Oku


    Blogunuza Not Kağıtları Ekleyin

    Hiç yorum yok :

    Çoğumuzun eviminde veya ofisinde mantar pano vardır.Küçük raptiyeler kullanarak aldığımız kısa notları mantar panolara tuttururuz.Buna benzer benzer br uygulamayı bloglarınızda nasıl kullanacağınızı anlatamak istiyorum bu yazıda.

     

    Not

     

    Blogunuzda resimde gördüğünüz not kağıtlarını 2 şekilde kullanabilirsiniz.Birincisi yazınızın içerisinde yazı ile ilgili önemli bir hatırlatma vs yapmak istediğinizde, ikincisi ise kenar çubuğunda ziyaretilerinize yine bir hatırlatma, duyuru vs yapmak istediğinizde.

     

    Bu not kağıtlarını blogunuzda kullanmak için önce şablonunuzdan ]]></b:skin> kodunu bulun ve üstüne aşağıdaki stil kodlarını ekleyin.

     

    .not {
    padding: 0 20px 20px 20px;
    border: 1px solid #DDD;
    border-top: none;
    border-left: none;
    width: 160px;
    min-height:150px;
    float: right;
    margin: 15px 0 15px 15px;
    background-color: yellow;
    font-size:14px;
    font-style:italic;
    line-height:1.5em;
    color: #000;
    }
    .not div{
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc-O7pjugFAqNWzgr2Ih5KgS07NwRLihYse-dclVmaPYri4ew_DFKdHPVjuPxpYLCPNHE2g-glOMWV5_KP_KL7iYRBboUpcCZ5eUiyelyTVCIQyQJyU62LKLFHjHjxY9wD8qeE31rlBTLP/s47/pin.png) no-repeat;
    width: 47px;
    height: 41px;
    margin: -20px auto 10px auto;
    }

     

    Şimdi blogunuzda yeni bir kayıt oluşturmak için yazı editörünü açın ve HTML’yi Düzenle kısmına şu aşağıdaki kodları ekleyin.

     

    <div class="not">
    <div>
    </div>
    Bu not Serdar Kara tarafından Blog Hocam okuyucuları için yazılmıştır.
    </div>

     

    Kırmızı renkte olan yer not kağıdında gözükecek kısımdır.Not kağıdında gözükmesini istediğiniz yazıyı oraya yazın.

     

    Denediğinizde sizin de farkedeceğiniz şey not kağıdınız sağ tarafa yaslanmış olması.Notları yazının kendisinden ayırmak için böyle bir stil kullanımış.Not kağıdını kenar çubuğuna eklemek isterseniz sağa yaslanması kötü duracağı için ilk verdiğim kodlardaki float: right; satırını silebilirsiniz.

    27 Nisan 2012 Cuma

    Sadece Konu Başlıklarını Gösterme Eklentisi

    Hiç yorum yok :

    Sadece Konu Başlıklarını Gösterme Eklentisi

    Bu eklentimizde, ziyaretçileriniz blogunuzda arama yaptığında yada gerekli etikete tıkladığında, konularınız sadece başlık halinde listelenecektir..

    Blogunuzda Sadece Konu Başlıklarını Gösterme Eklentisini kullanmak için aşağıda anlatılan adımı takip edin..

    Hemen anlatıma geçelim..

    Aşağıdaki kodumuzu buluyoruz..
    <b:include data='post' name='post'/>
    Bulduğumuz bu kodun yerine aşağıdaki kodlarımızı ekleyelim..( Daha net anlatmak gerekirse, üstte yer alan kodu silin ve aşağıdaki kodu sildiğiniz yere ekleyin.. )
    <b:if cond='data:blog.homepageUrl
    != data:blog.url'>

    <b:if cond='data:blog.pageType != "item"'>

    <h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>

    <b:else/>

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

    </b:if>

    <b:else/>

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

    </b:if>
    Anlatılan adımı doğru yaptıysanız , Sadece Konu Başlıklarını Gösterme Eklentisini blogunuzda artık kullanabileceksiniz.. << DEMO >>


    <<< Bu Yazı için Arama Sonuçları  >>>

    Sadece Konu Başlıklarını Gösterme Eklentisi , Konu Başlıklarını Gösterme Eklentisi , Blogger Konu Başlıkları Gösterme , Blogger Sadece Başlıklar Görünsün , Bloggerda Başlıkları Gösterme


    Blogger Resimli Benzer Yazılar Eklentisi v.2

    Hiç yorum yok :

    Blogger Resimli Benzer Yazılar Eklentisi v.2

    Blogger blogunuz için Resimli benzer yazılar eklentisi istermisiniz ?

    Daha önce BU yazımızda , resimli benzer yazılar eklentisinin nasıl yapılacağını anlatmıştık , farklı olarak bu eklentimizde , benzer yazılarınız , alt alta resimli şekilde listeleniyor..

    Ziyaretçilerinizin ilgisini çekmek için resimli benzer yazılar eklentisini blogunuza eklemek için aşağıdaki anlatımı takip edin.

    Öncelikle , Widget Şablonlarını Genişlet kutucuğunu işaretleyin ve Aşağıda yer alan kodumuzu bulun..
    </head>
    Hemen üstüne , altta yer alan kodlarımızı ekleyelim..
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style type='text/css'>
    #related-posts {
    text-transform:none;
    padding-left:5px;
    }
    #related-posts li {
    list-style:none;
    }
    #related-posts h2{
    font-size: 18px;
    font-weight: bold;
    color: #003300;
    }
    #related-posts a{
    font-size: 16px;
    color:#868686;
    }
    #related-posts a:hover{
    color:black;
    }
    a.hidden img{
    filter:alpha(opacity=70);
    -moz-opacity: 0.5;
    opacity: 0.5;
    }
    a.hidden:hover img{
    filter:alpha(opacity=100);
    -moz-opacity: 1.0;
    opacity: 1.0;}

    </style>
    <script src='http://yourjavascript.com/1124875421/benzer.js' type='text/javascript'/>
    </b:if>
    Şimdi ise bu kodumuzu buluyoruz..
    <data:post.body/>
    Hemen altına aşağıdaki kodlarımızı ekleyelim..
    <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>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <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=6&quot;' type='text/javascript'/></b:if></b:loop>
    <script type='text/javascript'>
    var currentposturl=&quot;<data:post.url/>&quot;;
    var maxresults=
    4;
    var relatedpoststitle=&quot;
    BENZER YAZILAR&quot;;
    removeRelatedDuplicates_thumbs();
    printRelatedLabels_thumbs();
    </script>
    </div><div style='clear:both'/>
    </b:if>
    Anlatılanları doğru yaptıysanız eklentimiz artık hazır... << DEMO >>


    <<< Bu Yazı için Arama Sonuçları  >>>

    Blogger Resimli Benzer Yazılar Eklentisi v.2 , Blogger Resimli Benzer Yazılar Eklentisi  , Blogger Resimli Benzer Yazılar  , Blogger Benzer Yazılar Eklentisi , Blogger Benzer Yazı Nasıl Eklenir


    TTNET Genç Yeteneklerin Yanında!

    Hiç yorum yok :

    TTNET’in “Yeteneğe Destek, Yaratıcı Ekonomiye Destek Projesi”yle, gençlerimiz yeni kariyer firsatlarını keşfediyor.

     

    TTNET Genç Yeteneklerin Yanında!
    Bilişim sektörüyle tanışan gençler, aldıkları eğitimlerle iş hayatına hazırlanıyor. TTNET, Türk ekonomisine destek oluyor. Siz de bu ücretsiz eğitimler hakkında bilgi almak için hemen tıklayın.

    Bir bumads advertorial içeriğidir.

    26 Nisan 2012 Perşembe

    Blogger Mause imleci Değiştirme ( 28 adet )

    Hiç yorum yok :

    Blogger Mause imleci Değiştirme ( 28 adet )

    Blogger blogunuzda kullandığınız mause ( fare ) imlecini değiştirmek istermisiniz ?

    Bu eklentimizle , blogger blogunuzda bulunan imleciniz, farklı şekillerde gösterebileceksiniz..

    Hemen anlatıma geçelim..

    Aşağıdaki kodu bulalım..
    </head>
    Hemen üstüne aşağıda yer alan kodu ekleyelim..
    <style type="text/css">body, a, a:hover {cursor: url(http://LİNK), progress;}</style>
    Kod içinde bulunan kırmızı ile yazılmış http://LİNK yerine aşağıdaki beğendiğiniz imlecin linkini ekleyiniz..

    http://www.fileden.com/files/2010/2/27/2776887/pen.jpg  http://www.fileden.com/files/2010/2/27/2776887/pen.cur

    http://www.fileden.com/files/2010/2/27/2776887/link.jpg http://www.fileden.com/files/2010/2/27/2776887/link.cur

    http://www.fileden.com/files/2010/2/27/2776887/dragon.jpg http://www.fileden.com/files/2010/2/27/2776887/dragon.cur

    http://www.fileden.com/files/2010/2/27/2776887/dragonn.jpghttp://www.fileden.com/files/2010/2/27/2776887/dragonn.cur

    http://www.fileden.com/files/2010/2/27/2776887/dragonnn.jpg http://www.fileden.com/files/2010/2/27/2776887/dragonnn.cur

    http://www.fileden.com/files/2010/2/27/2776887/dragonnnn.jpg http://www.fileden.com/files/2010/2/27/2776887/dragonnnn.cur

    http://www.fileden.com/files/2010/2/27/2776887/grndr.jpg http://www.fileden.com/files/2010/2/27/2776887/grndr.cur

    http://www.fileden.com/files/2010/2/27/2776887/grndr2.jpg http://www.fileden.com/files/2010/2/27/2776887/grndr2.cur

    http://www.fileden.com/files/2010/2/27/2776887/bilquer.png http://www.fileden.com/files/2010/2/27/2776887/bilquer.cur

    http://www.fileden.com/files/2010/2/27/2776887/bilquer2.png http://www.fileden.com/files/2010/2/27/2776887/bilquer2.cur

    http://www.fileden.com/files/2010/2/27/2776887/bilquer3.png http://www.fileden.com/files/2010/2/27/2776887/bilquer3.cur

    http://www.fileden.com/files/2010/2/27/2776887/bilquer4.png http://www.fileden.com/files/2010/2/27/2776887/bilquer4.cur

    http://www.fileden.com/files/2010/2/27/2776887/bilquer5.png http://www.fileden.com/files/2010/2/27/2776887/bilquer5.cur

    http://www.fileden.com/files/2010/2/27/2776887/bilquer6.png http://www.fileden.com/files/2010/2/27/2776887/bilquer6.cur

    http://www.fileden.com/files/2010/2/27/2776887/bilquer7.png  http://www.fileden.com/files/2010/2/27/2776887/bilquer7.cur

    http://www.fileden.com/files/2010/2/27/2776887/bilquer8.png http://www.fileden.com/files/2010/2/27/2776887/bilquer8.cur

    http://www.fileden.com/files/2010/2/27/2776887/bilquer9.png http://www.fileden.com/files/2010/2/27/2776887/bilquer9.cur

    http://www.fileden.com/files/2010/2/27/2776887/bilquer10.png http://www.fileden.com/files/2010/2/27/2776887/bilquer10.cur

    http://www.fileden.com/files/2010/2/27/2776887/bilquer11.png http://www.fileden.com/files/2010/2/27/2776887/bilquer11.cur

    http://www.fileden.com/files/2010/2/27/2776887/bilquer12.pnghttp://www.fileden.com/files/2010/2/27/2776887/bilquer12.cur

    http://www.fileden.com/files/2010/2/27/2776887/bilquer14.pnghttp://www.fileden.com/files/2010/2/27/2776887/bilquer14.cur

    http://www.fileden.com/files/2010/2/27/2776887/bilquer16.png http://www.fileden.com/files/2010/2/27/2776887/bilquer16.cur

    http://www.fileden.com/files/2010/2/27/2776887/bilquer17.png  http://www.fileden.com/files/2010/2/27/2776887/bilquer17.cur

    http://www.fileden.com/files/2010/2/27/2776887/bilquer18.png  http://www.fileden.com/files/2010/2/27/2776887/bilquer18.cur

    http://www.fileden.com/files/2010/2/27/2776887/bilquer23.png http://www.fileden.com/files/2010/2/27/2776887/bilquer23.cur

    http://www.fileden.com/files/2010/2/27/2776887/bilquer24.pnghttp://www.fileden.com/files/2010/2/27/2776887/bilquer24.cur

    http://www.fileden.com/files/2010/2/27/2776887/bilquer25.pnghttp://www.fileden.com/files/2010/2/27/2776887/bilquer25.cur

    http://www.fileden.com/files/2010/2/27/2776887/grgr.png http://www.fileden.com/files/2010/2/27/2776887/prfcto.cur


    <<< Bu Yazı için Arama Sonuçları  >>>

    Blogger Mause imleci Değiştirme , Blogger Fare imleci Değiştirme , Blogger fare imleçleri , blogger fare imleci nasıl değiştirilir , Blogger mause imleci ekleme , blogger mause imlecleri

    Yazı Altına Facebook Ve Twitter Paylaşım Kutusu Ekleyin

    Hiç yorum yok :

    Hemen her blog yazarı ve blog okuyucusunun bir Facebook ve Twitter hesabı var.Bu yüzden yazılarınızın altında en azından bu sosyal ağlara ait butonların yer aldığı bir kutu göstermek yazılarınızın paylaşım sayısını ve takipçi sayınızı arttıracaktır.

     

    Bu yazıda paylaştığım kodları blogunuza eklediğinizde yazılarınızın altında, resimde gördüğünüz gibi bir paylaşım kutusu çıkacak.Kutuda Facebook beğen ve gönder butonları ile Twitter tweetle ve takip et butonları var.

     

    Yazı Altına Facebook Ve Twitter Paylaşım Kutusu

     

    Bu Facebook ve Twitter paylaşım kutusunu blogunuza eklemek için şablonunuzda <div class='post-footer'> kodunu bulun ve bunun hemen altına aşağıdaki kodları ekleyin.

     

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div style=' height:80px; width:500px;  background:rgb(232, 240, 249); border: 1px solid rgb(171, 210, 233); padding: 10px; margin: 10px 0pt 10p 0px;'>
    <p style='color: rgb(59, 89, 152); margin: 5px 0pt 5px; font: bold 1.3em helvetica,arial,verdana;'>Bu yazıyı beğendiğiniz mi? Paylaşın!</p>
    <div id='fb-root'/><script src='http://connect.facebook.net/tr_TR/all.js#xfbml=1'/><fb:like send='true' show_faces='false' width='450'/>

    <a class='twitter-share-button' data-count='horizontal' href='http://twitter.com/share'>Tweetle</a>
    <script src='http://platform.twitter.com/widgets.js' type='text/javascript'/><a class='twitter-follow-button' data-lang='tr' data-show-count='false' href='https://twitter.com/bloghocam'>Takip Et</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script>
    </div>
    </b:if>

     

    Kırmızı renkle yazdığım bloghocam yerine kendi Twitter ID’nizi yazmayı unutmayın.Bu eklentiye alternatif olarak şunları da deneyebilirsiniz:

    25 Nisan 2012 Çarşamba

    Google+ Resmi Paylaş Butonu

    Hiç yorum yok :

    Ziyaretçilerinizin, yazılarınızı Google+ hesaplarında paylaşmalarını sağlayacak olan resmi paylaş butonu kullanıma açıldı.Hemen blogunuza nasıl ekleyeceğinizi anlatayım.

     

    Google+ Paylaş Butonu

     

    1.Adım: Öncelikle Script kodlarını ekleyin.Şablonunuzda </head> kodunu bulun ve bunun hemen üzerine aşağıda ki kodları ekleyin.

     

    <script type="text/javascript">
      window.___gcfg = {lang: 'tr', parsetags: 'onload'};

      (function() {
        var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
        po.src = 'https://apis.google.com/js/plusone.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
      })();
    </script>

     

    2.Adım: Şimdi butonu görüntüleyecek kodu ekleyin.Nerede görüntülenmesini istiyorsanız oraya ekleyeceksiniz.Örneğin yazının altında gözükmesini istiyorsanız <div class='post-footer'> kodunu bulun ve buınun hemen altına aşağıdaki kodu ekleyin.

     

     

    <div class="g-plus" data-action="share" data-annotation="bubble"></div>

     

    Paylaş butonunu farklı tarz ve boyutlarda da kullanabilirsiniz.Bunun için Google+ paylaş butonunun resmi sayfasına gidip istediğiniz tarzda ki butonu oluşturabilirsiniz.

    24 Nisan 2012 Salı

    Gazete Tarzı Yazı Yazma Eklentisi

    Hiç yorum yok :

    Gazete Tarzı Yazı Yazma Eklentisi

    Blogger Blogunuzda , Gazete Tarzı Yazı Yazma Eklentisi istermisiniz ?

    Bu eklentimizde, blogger blogunuzda yayınlamak istediğiniz yazılarınızı 2 sütun şeklinde yan yana gösterebileceksiniz , Görüntü açısından da kullanışlı olan bu eklentimizi kullanmak isterseniz aşağıdaki adımları takip ediniz..

    Öncelikle Demo için BURAYA tıklayınız..

    Blogger blogunuzda , Yeyi yayın oluştur butonuna basın...Yazı alanı içinde HTML seçeneğini şeçerek aşağıdaki kodları yapıştırın..
    <table cellpadding="10" cellspacing="10"><tbody>
    <tr><td align="justify" valign="top" width="320">Deneme Yazısı Sol Tarafı</td><td align="justify" valign="top" width="300">Deneme Yazısı Sağ Tarafı</td></tr>
    </tbody></table>
    Kodu eklediyseniz , HTML Seçeneği yerine Oluştur seçeneğine girip ordan düzenleyebilirsiniz..Yukarıdaki kod içinde , Kırmızı ile geçen yer sol taraftaki yazınız, mavi ile geçen yer ise sağ taraftaki yazınız , buna göre düzenlersiniz..


    Blogger Dişli Yorumlara Stil Verelim

    Hiç yorum yok :

    Blogger’ın bir süre önce dişli yorumlara geçtiğini ve yorumlara yanıtlama seçeneğinin geldiğini çok iyi biliyorsunuz.Birçok Blogger kullanıcısı bu dişli yorumların görünümünü beğenmediği için kullanmayı pek tercih etmiyor.O halde dişli yorumlara biraz stil katıp, daha güzel bir görünüme kavuşturalım.

     

    Blogger Dişli Yorumlara Stil Verelim

     

    Yapacağınız 2 küçük değişiklik ile bu resimde gördüğünüz gibi bir yorum bölümüne kavuşacaksınız.Ancak hemen belirteyim, bunu sadece Blogger’ın kendi şablonlarında denediğim için özel şablonlarda işe yarayıp yaramadığından emin değilim.

     

    Öncelikle şablonunuzun ]]></b:skin> kodunun üstüne aşağıdaki stil kodları ekleyin.

     

    .comments {
      clear: both;
      margin-top: 10px;
      margin-bottom: 0px;
      line-height: 1em;
    }
    .comments .comments-content {
      font-size: 12px;
      margin-bottom: 16px;
    font-family: Verdana;
    font-weight: normal;
    text-align:left;
    line-height: 1.4em;
    }
    .comments .continue a, .comments .comment .comment-actions a {
    display:inline;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    padding: 2px 5px;
    text-decoration: none;
    text-shadow:0 1px 1px rgba(0,0,0,.3);
    color:#FFF;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    margin-right: 10px;
    border: 1px solid #3079ED;
    background: #0066FF;
    background: -webkit-gradient(linear, left top, left bottom, from(#0099FF), to(#009999));
    background: -moz-linear-gradient(top, #0099FF, #009999);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#0099FF&#39;, endColorstr=&#39;#009999&#39;);
    }
    .comments .continue a:hover, .comments .comment .comment-actions a:hover {
      text-decoration: none;
    background:#0099FF;
    background: -webkit-gradient(linear, left top, left bottom, from(#009999), to(#0099FF));
    background: -moz-linear-gradient(top, #009999, #0099FF);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#009999&#39;, endColorstr=&#39;#0099FF&#39;);
    }
    .comments .continue a:active, .comments .comment .comment-actions a:active {
    position: relative;
    top:1px;
    background: -webkit-gradient(linear, left top, left bottom, from(#0066FF), to(#0099CC));
    background: -moz-linear-gradient(top, #0066FF, #0099CC);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#0066FF&#39;, endColorstr=&#39;#0099CC&#39;);
    }
    .comments .comments-content .comment-thread ol {
      list-style-type: none;
      padding: 0;
      text-align: none;
    }
    .comments .comments-content .inline-thread {
      padding: 0.5em 1em 0 1em;
    }
    .comments .comments-content .comment-thread {
      margin: 8px 0px 0px 0px;
    }
    .comments .comments-content .comment-thread:empty {
      display: none;
    }
    .comments .comments-content .comment-replies {
      margin-top: 1em;
      margin-left: 40px;   font-size:12px;
    }
    .comments .comments-content .comment {
      padding-bottom:8px;
      margin-bottom: 0px
    }
    .comments .comments-content .comment:first-child {
      padding-top:16px;
    }
    .comments .comments-content .comment:last-child {
      border-bottom:0;
      padding-bottom:0;
    }
    .comments .comments-content .comment-body {
      position:relative;
    }
    .comments .comments-content .user {
      font-style:normal;
      font-weight:bold;
    }
    .comments .comments-content .user a {
      color: #444;
    }
    .comments .comments-content .user a:hover {
      text-decoration: none;
    color: #555;
    }
    .comments .comments-content .icon.blog-author {
      width: 18px;
      height: 18px;
      display: inline-block;
      margin: 0 0 -4px 6px;
    }
    .comments .comments-content .datetime {
      margin-left:6px;
    color: #999;
    font-style: italic;
    font-size: 11px;
    float: right;
    }
    .comments .comments-content .comment-content {
    font-family: Arial, sans-serif;
    font-size: 12.5px;
    line-height: 19px;
    }
    .comments .comments-content .comment-content {
    font-family: Arial, sans-serif;
    font-size: 12.5px;
    line-height: 19px;
      text-align:none;
    margin: 15px 0 15px;
    }
    .comments .comments-content .owner-actions {
      position:absolute;
      right:0;
      top:0;
    }
    .comments .comments-replybox {
      border: none;
      height: 250px;
      width: 100%;
    }
    .comments .comment-replybox-single {
      margin-top: 5px;
      margin-left: 48px;
    }
    .comments .comment-replybox-thread {
      margin-top: 5px;
    }
    .comments .comments-content .loadmore a {
      display: block;
      padding: 10px 16px;
      text-align: center;
    }
    .comments .thread-toggle {
      cursor: pointer;
      display: inline-block;
    }
    .comments .comments-content .loadmore {
      cursor: pointer;
      max-height: 3em;
      margin-top: 3em;
    }
    .comments .comments-content .loadmore.loaded {
      max-height: 0px;
      opacity: 0;
      overflow: hidden;
    }
    .comments .thread-chrome.thread-collapsed {
      display: none;
    }
    .comments .thread-toggle {
      display: inline-block;
    }
    .comments .thread-toggle .thread-arrow {
      display: inline-block;
      height: 6px;
      width: 7px;
      overflow: visible;
      margin: 0.3em;
      padding-right: 4px;
    }
    .comments .thread-expanded .thread-arrow {
      background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC&quot;) no-repeat scroll 0 0 transparent;
    }
    .comments .thread-collapsed .thread-arrow {
      background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==&quot;) no-repeat scroll 0 0 transparent;
    }
    .comments .avatar-image-container {
      float: left;
      overflow: hidden;
    }
    .comments .avatar-image-container img {
      width: 36px;
    }
    .comments .comment-block {
      margin-left: 48px;
      position: relative;
    padding: 15px 20px 15px 20px;
    background: #F7F7F7;
    border: 1px solid #E4E4E4;
    overflow: hidden;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-image: initial;
    }

     

    Ardından şablonunudza <b:include data='post' name='comments'/> kodunu aratın.Birden fazla sonuç çıkacaktır.Bunlardan ilkini yani en üsttekini aşağıdaki kodlar değiştirin.

     

    <b:if cond='data:post.showThreadedComments'>
    <b:include data='post' name='threaded_comments'/>
    <b:else/>
    <b:include data='post' name='comments'/>
    </b:if>

     

    Şablonunuzu kaydettikten sonra kayıt sayfalarını açtığınızda yorum bölümüneki değişikliği farkedeceksiniz.

    23 Nisan 2012 Pazartesi

    Blogger Animasyonlu Etiket Eklentisi

    Hiç yorum yok :

    Blogger Animasyonlu Etiket Eklentisi

    Bu eklentimizde, Blogger blogunuza yer alan etiketlerin üstüne gelindiğinde , Etiketimiz Sağa doğru hareket ediyor...

    Demo için BURAYA tıklayın , açılan sayfada sağ taraftaki etiketlerin üstüne gelin.

    Blogger Animasyonlu Etiket Eklentisini blogger blogunuza eklemek için aşağıdaki adımı izleyin..

    Aşağıdaki kodu blogunuzun şablon kısmında bulun..
    </head>
    Hemen üstüne aşağıdaki kodları ekleyiniz..
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'>
    </script>
    <script type='text/javascript'>
    var dur = 450;
    $(document).ready(function() {
    $('a.linknudge, .Label ul li a').hover(function() {
    $(this).animate({
    paddingLeft: '20px'
    }, dur);
    }, function() {
    $(this).animate({
    paddingLeft: 0
    }, dur);
    });
    });</script>
    Yapmanız gereken bu kadar...


    <<< Bu Yazı için Arama Sonuçları  >>>

    Blogger Animasyonlu Etiket Eklentisi , Blogger Animasyonlu Etiket  , Blogger Etiket , Blogger Etiket Eklentisi , Blogger Etiket Ekleme

    22 Nisan 2012 Pazar

    Özel 404 Hata Sayfası Oluşturun

    Hiç yorum yok :

    Geçtiğimiz günlerde yazdığım Yeni Arama Tercihleri İle Blogger’da SEO Daha Kolay başlıklı yazıda Blogger’ın sunduğu yeni ayarlardan bahsetmiştim.Bunlardan biri 404 hata sayfalarını özelleştirebilmemizdi.Bir kullanıcı blogunuzda sdaha önce slinmiş bir yazıya ulaşmak istediğinde veya hatalı bir URL yazarak sayfalarınızdan birine ulaşmak istediğinde sayfanın bulunamadığını belirten bir hata sayfası ile karşılaşır.İsterseniz Blogger’ın klasik hata sayfasını aşağıda resimde gördüğünüz şekilde özelleştirebilirsiniz.

     

    Özel 404 Hata Sayfası Oluşturun

     

    1.Adım: Öncelikle şablonunuzun ]]></b:skin> kodundan önce aşağıdaki stil kodlarını ekleyin.

     

    #error {
    background-color: #F2F2F2;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbJokI00Ps0ALE6NBsqun-XLtHlwYW3o4GVMIeHWW6xi5ynP6sA9H53z68Hd9RmWSTEfCdpmuprdHGC0pd34DkXaRZu25dchMU16g76lThlHTIr_3i8rrZQEFGApc4LeggANPfr1YaVrAo/s200/bg_ku.png');
    background-repeat: repeat;
    color: #555555;
    height: 100%;
    left: 0;
    margin: 0;
    padding: 0;
    position: fixed;
    text-align: center;
    top: 0;
    width: 100%;
    z-index: 999;
    line-height: 170%;
    }
    #error #halaman {
    position: relative;
    height: auto !important;
    height: 100%;
    min-height: 99%;
    }
    #error #halaman h2 {
    margin: 1em 0;
    }


    #error #wadah {
    margin-top: 120px;
    }
    #error .tengah {
    margin: 0 auto;
    width: 920px;
    }
    #error .box-atas, #error .box-bawah {
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsSmKGWh4rd_Z_3PJnQ4qcHy0r_LvunVFgLk_UtWudM3f2AwAjc3j_BQoEZTqrd5dV4ocrxfIjPRchECqLfp1bgrwjwaxX8-odQiLK-3VhLAH0MVuRJuFxQs29638Bsjm-VcyZYOmD12TS/s944/box-sprite.png');
    background-repeat: repeat;
    background-position: 0 0;
    height: 43px;
    margin: 0 -12px;
    width: 944px;
    }
    #error .box-atas {
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsSmKGWh4rd_Z_3PJnQ4qcHy0r_LvunVFgLk_UtWudM3f2AwAjc3j_BQoEZTqrd5dV4ocrxfIjPRchECqLfp1bgrwjwaxX8-odQiLK-3VhLAH0MVuRJuFxQs29638Bsjm-VcyZYOmD12TS/s944/box-sprite.png');
    background-repeat: no-repeat;
    background-position: 0 -43px;
    }
    #error .box {
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq870OAvVJh-39OpmEayAfwJiACUbVV4meHgM75CHnL4nONbFkis09vWHZjFJVXtlhTI54_nHBLb1bw0oBnfGBDDJHS_PLEHzPNgyiVaDTllKnntygargHVTuvpvuSvq8aHlZoV1yRr7gN/s920/box-horizontal.png');
    background-repeat: repeat-y;
    background-position: 0 0;
    min-height: 200px;
    padding: 10px 50px;
    }

     

    2.Adım: Şimdi Ayarlar > Arama tercihleri > Sayfa Bulunamadı Sayfası İçin Özel İçerik > Düzenle diyerek kutuya aşağıdaki kodları kendinize göre düzenleyerek ekleyin ve değişiklikleri kaydedin.

     

    <b:if cond='data:blog.pageType == &quot;error_page&quot;'>

    <h1>SAYFA BULUNAMADI !</h1>
    <div id="error">
    <div id="wadah">
      <div class="tengah">
       <div class="box-atas"></div>
       <div class="box">
        <div id="halaman">
        <p><img style="background-image: none; border-bottom: 0px; border-left: 0px; padding-left: 0px; padding-right: 0px; border-top: 0px; border-right: 0px; padding-top: 0px" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4D_k69sRpAQRYq_r895EJ_Up_FvT_cyCRhNi7cGBVvMCu52Bur6qP9M5uN84FGhQJiQ1un-GmulebEYii6B8-DVlMNw-IqZ0Hh2ZH3pp7YTX9OmBbk0MgdmeFbhqZwcX4fiIv_Y1AjehR/s350/4041.jpg" /></p>
         <p>Ulaşmaya çalıştığınız sayfa bulunamadı.Lütfen ulaşmak istediğiniz sayfanın adresini doğru yazdığınızı kontrol edin.Eğer adresi doğru yazdığınızdan eminseniz ulaşmak istediğiniz sayfa silinmiş olabilir.  </p>
         <p> <h2><a href="http://bloghocam.blogspot.com/" title="Blog Hocam" >Ana Sayfa</a></h2></p>
        </div>
       </div>
       <div class="box-bawah"></div>
      </div>
    </div>
    </div>

    </b:if>

     

    Şimdi blogunuzda var olmayan her hangi bir sayfaya gitmye çalışın.Örneğin:

     

    http://blogunuz.blogspot.com/laylaylom.html

     

    Eski hata mesajının yerine tam ekran bir hata mesajı sayfası karşınıa çıkacaktır.Bu yöntemle çok daha yaratıcı hata sayfaları oluşturabilirsiniz.

    21 Nisan 2012 Cumartesi

    Blogger Blogunuz Daha Hızlı Açılsın

    Hiç yorum yok :


    Blogger Blogunuz Daha Hızlı Açılsın

    Öncelikle bu yazımız bir eklenti değildir , Sadece blogger blogunuzun daha hızlı açılması için ipuçları içerir..

    << Resim >>
    Blogger bloglarınızda , yazı içlerinde onlarca resim kullanmayın , mümkünse tek resim her zaman açılış hızı açısından önemlidir..Blogunuza eklediğiniz resimlerin boyutu büyük olmasın , büyük boyutlu resimler sayfanın yüklenme süresini geciktirir..

    << Eklenti >> 
    Blogger bloglarımızda kullandığımız eklentiler vazgeçilmez , olmazsa olmazlardandır..Blogunuzda Gereksiz eklentilerden kaçının , mümkünse , hareketli çok fazla eklenti kullanmayın , örneğin ; flash obje içeren eklentiler blogunuzun açılış hızına etki eder..

    << Javascript >> 
    Blogger blogumuzda , Hıza etki eden bir faktörde javascript dosyalarıdır , Bazen kullandığınız temanın içinde zaten varlardır, bazende kullandığınız eklentilerde de yer alırlar , bu javascript dosyaları başka kaynaklarda yüklü olduklarından , Blogger açılırken , kendi barındıkları sunuculara bağlanıp blogunuzun açılışını yavaşlatabilirler..

    Sonuç olarak , blogger blogunuzun daha hızlı açılmasını istiyorsanız , yazılarınıza onlarca resim eklemeyiniz, ve gereksiz eklentilerden kaçınınız..


    <<< Bu Yazı için Arama Sonuçları  >>>

    Blogger Blogunuz Daha Hızlı Açılsın , Blogger  Daha Hızlı Açılsın , Blogger Hzılandırma , Blogger Sayfam Nasıl Hızlı Açılır , Blogum Yavaş Açılıyor , Blogger Hızlandırma teknikleri , Blogunuz Daha Hızlı Açılsın


    20 Nisan 2012 Cuma

    Hello Bar: Bilgilendirme Çubuğu

    Hiç yorum yok :

    Hello Bar isimli popüler servis bizlere bloglarımızda kullanmak üzere bilgilendirme çubuğu oluşturma imkanı sunuyor.Ücretli ve ücretsiz seçenekleri bulunan bu servis çoğu blogcu tarafından tercih ediliyor.Neden mi?

    • Gradient ekleme özelliği sayesinde aynı renkte fakat farklı desenlerde çubuklar oluşturabiliyorsunuz.
    • Diğer çubuklardan farklı olarak kapattıktan sonra tekrar açabiliyorsunuz.
    • Kaç kez tıklandığına dair istatistikleri görebiliyorsunuz.

    İşte bu özellikleri Hello Bar’ı diğerlerinden farklı ve üstün kılıyor.Şimdi size Hello Bar’ı ücretsiz olarak blogunuza nasıl ekleyeceğinizi anlatmak istiyorum.

     

    Hello Bar

     

     

    1.Adım: Öncelikle ücretsiz üye olmak için Hello Bar ana sayfasına bulunan Free Sign Up butonuna bastığınızda açılan pencerede ki kutuya e-posta adresinizi yazdıktan sonra SIGN UP butonuna basın.

     

    Hello Bar

     

    2.Adım: ilk adımı tamamladıktan bir kaç saniye sonra e-posta adresinize Welcome to Hello Bar balıklı bir posta gelecek.Bu postada kullanıcı adınız ve şifreniz yazıyor.Hello Bar Login sayfasına giderek bu bilgilerle hesabınıza giriş yapın.

     

    Hello Bar

     

    3.Adım: Hesabınıza giriş yaptıktan sonra Hello Bar’ınızı oluşturmak için CREATE NEW butnuna basın.Settings bölümünden çubuğun ayarlarını yaptıktan sonra SAVE butonuna basın.

     

    Hello Bar

     

    4.Adım: Çubuğunuzun ayarlarını yapıp SAVE butonuna bastıktan sonra açılan penceredeki kodu kopyalayın ve şablonunuzun </head> kodundan önce yapıştırın.

     

    Hello Bar

     

    Bu paylaştığım üçüncü bilgilendirme çubuğu.Alternatifleri görmek isterseniz daha önce paylaştığım şeffaf kapatılabilir bilgilendirme çubuğuna ve Nedim Arabacı tarafından yapılan Noty bilgilendirme çubuğuna göz atabilirsiniz.