Kullandığım E-Posta Aboneliği Eklentisi

Blogumun kenar çubuğunda gördüğünüz e-posta aboneliği kutusu ilk yaptığm günden beri çok beğenildi ve çok kişi tarafından istendi.Sanırım bu eklentiyi siznle paylaşmanın zamanı geldi.

 

Tasarımı ve kodları bana ait olan bu eklentiyi blogunuzda kullanmak isterseniz değiştirmeniz gereken yerleri değiştirdikten sonra kodları HTML/Java Script gadget olarak eklemeniz yeterli.

 

<style>
#subscribe {
  float:right;
  width:258px;
  padding:10px;
  margin:0 0 20px 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBqPcbeDUlyskF2uBcsj1aAbKhnfyorphnN_7tSCr7y2FLHcc432ukNg-Q-24CrBzx8YxV149zClfmiDjr-LMbMGZp_1wJtpk53YFP4EiGTU1bxCc7TbM9ktssSE5hA1sOjC2K-4WAFoAR/s266/e-posta.png)  no-repeat 0px 0px;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px
  height:auto;
border:1px solid #656E75;
color:#000;
font-weight:bold;

}

#subscribe h {
font-size:12px;
color:#F1921A;
}

.feed {
  width:260px;
  min-height:60px;
  margin:0 0 10px 0;
  padding:0;
}
.input{
  margin:10px 7px 0 0;
  float: left;
  width: 175px;
  padding: 4px 5px;
  -webkit-border-radius:4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
border:1px solid #656E75
}

.sbutton {
  background:#F1921A;
  margin:10px 0 0;
  float: left;
  height:26px;
  border: 1px solid #656E75;
  color: #fff;
  width:65px;
  -webkit-border-radius:4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

.sbutton:hover {
  background:#E6E7E8;
color:#669900;
}
</style>
<div id='subscribe'>
<div class='feed'>
         <br/>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=bloghocam&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><input class='input' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;E-Mail Adresiniz...&quot;;}' onfocus='if (this.value == &quot;E-Mail Adresiniz...&quot;) {this.value = &quot;&quot;;}' type='text' value='E-Mail Adresiniz...'/>
<input name='uri' type='hidden' value='bloghocam'/><input name='loc' type='hidden' value='en_US'/><input class='sbutton' type='submit' value='Abone Ol'/></form>
       </div>
       <div>
       Blog Hocam&#39;da yayınlanacak yeni yazılar e-mail adresinize gelsin.
       </div></div>

 

Değiştirmeniz gereken yerleri kırmızı renkle gösterdim.

• bloghocam yerine kendi FeedBurner ID’nizi yazın.
• Blog Hocam&#39;da yayınlanacak yeni yazılar e-mail adresinize gelsin.
  yerine kutunun altında olmasını istediğini yazıyı yazın.

Son olarak bu eklentiyi kendi blogum için hazırladığımdan dolayı genişlikler sizin temanıza uygun olmayabilir.Bu durumda genişlikleri düşürmek yetmez.Arkaplan olarak kullandığım resmi de değiştirmeniz gerekebilir.

Ο τυφώνας Σαόλα πλησιάζει τις βόρειες περιοχές της Ταϊβάν. 

Στην Α.Τ.Ε. να δεις

Pinterest “Pin It” Butonu

Bazılarına göre Pinterest balonu sönmüş gibi durabilir ama ben, kendim kullanmasam da Pintrerest’in sağlam bir kullanıcı kitlesi olduğunu gözlemliyorum.Önümüzdeki bir kaç gün içinde sosyal paylaşım butonlarım arasına Pin It butonuna ekleyeceğim ama bu kez bir deişiklik yapıp kullanmaya başlamadan önce paylaşayım dedim.

 

 

Öncelikle kodu nereye ekleyeceğinizden bahsedeyim.Ben sosyal paylaşım butonlarını yazının sonuna yerleşirmenin daha doğru olduğunu düşündüğüm için size de şablonunuzdaki <div class='post-footer'> kodunun hemen altına eklemenizi öneririm.Eklemeniz gereken kodlar ise şunlar:

 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<a class='pin-it-button' count-layout='horizontal' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It Now!</a>
<a href='javascript:void(run_pinmarklet())' style='margin-left:-93px; width:43px; height:20px; display:inline-block;'/>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>
function run_pinmarklet() {
var e=document.createElement(&#39;script&#39;); e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);
document.body.appendChild(e);
}
</script>
</b:if>

 

Buton kayıt sayfasının içine girdiğinide gözükecektir.Butona basınca eğer yazıda bir görsel varsa o görsel otomatik olarak tanınacak ve pinterest hesabınızla bağlantı kurularak seçmiş olduğunuz bir panoya pinlenecektir.

Tüm Zamanların En Özellikli Blogger Teması

Bu güne kadar gördüğünüz en orjinal Blogger temasıyla tanışmaya hazır mısınız? Giriş cümlesi size çok iddialı gelmiş olabililr ama temayı test edip özelliklerini görünce bana hak vereceksiniz.

 

Aslında premium olan bu tema ilk kodlandığında yanlış hatırlamıyorsam $20 civarında bir fiyata satılıyordu.Sonra ne oldu bilmiyorum temanın yapımcısı ücretsiz dağıtmaya karar verdi.İşte bu temanın özellikleri:

• ThumbCropper: Bildiğiniz gibi normal temalarda ana sayfada yazıya ait resmin thumbnail şeklinde küçültülmüş haki gözükür.Bu temada kullanılan ThumbCropper aracı sayesinde yazının içerisindeki resim kırpılarak ana sayfada gözükür.
• Sonsuz Scroll: Twitter2da ve bazı sitelerde sayfanın altında daha fazla diye bir buton yer alır ve o butona tıkladığınızda sayfaya yeni öğeler eklenerek saşağı doğru ayar.İşte bu temada da ileri-geri veya numaralı sayfa geçişleri yerine bu özellik kullanılmış.
• 2 Renk Seçeneği: Temayı indirdiğinizde zip dosyasının içinde açık ve koyu renk seçenekleri için 2 adet .xml dosyası bulacaksınız.Eğer beyaz versiyonunu tercih etmiyorsanız gri versiyonunu da kullanabilirsiniz.
• Tarayıcı uyumluluğu: Temalarda yaşanan en büyük sorulardan biridir farklı tarayıcılarda düzgün çalışmaması.Bu tema tarayıcı uyumlu olduğu için tüm tarayıcılarda sorunsuz çalışmaktadır.

 

 

 

         

 

Demosuna da baktıysanız bu temayı neden bu kadar övdüğümü anlamışsınızdır.Fotoğraf ağırlıklı blog yazanlar veya blogunu portföy gibi kullananlar için bu şiddetle tavsiye ediyorum bu temayı.Gördüüm tek zayıf tarafı ise sanırım yorum bölümü.

Blog Yazıları İçin Sosyal Paylaşım Kutuları

Burada paylaşacağım eklentide Twitter, Facebook ve Google’a ait paylaşım düğmelerini CSS srprite özelliğinden faydalanarak ayrı ayrı kutulara koyarak blog yazılarımızın sonuna yerleştireceğiz.Oldukça şık ve dikkat çekici olduğunu düşündüğüm bu sosyal paylaşım kutularını yazılarınızın sosyal medyada paylaşım sayısını arttıracaktır.

 

 

Eklentiyi blogunuza eklemek için şablonunuzdan  <div class='post-footer'> kodunu bulun ve hemen altına aşağıdaki kodları ekleyin.

 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
.promote_post_bg {
    height: 103px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhIFxPnGks-fHbyBf5FbeNkghYnU77B471XE8b2r2xkDrj1bIFcrCfYw-xMP44JLO_XlnD1iLDaeUfiPpUsejFDJnBUFEMYki25I9dUau67QTME4KiMzn36xngQqFVb-qBdWLGywdGSNs/s516/paylas.png) 0 -7px no-repeat;
    width: 500px;
    margin-left: 65px;}
.promote_twitter {
    width: 130px;
    height: 38px;
    float: left;
    margin: 0 39px 0 0;
    padding: 65px 0 0 13px;
    text-align: center;}
.promote_facebook {
    width: 115px;
    height: 40px;
    float: left;
    margin: 0 39px 0 0;
    padding: 63px 0 0 28px;
    text-align: center;}
.promote_google {
    width: 65px;
    height: 40px;
    float: left;
    margin: 0 39px 0 0;
    padding: 65px 0 0 28px;
    text-align: center;
}
</style>
</b:if>
<div class='promote_post_bg'>
<div class='promote_twitter'>
<a class='twitter-share-button' data-via='helperblogger' href='https://twitter.com/share'>Tweet</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>
<div class='promote_facebook'>
<fb:like action='like' colorscheme='light' expr:href='data:post.canonicalUrl' font='verdana' layout='button_count' send='false' show_faces='false'/>
<div>
<b:if cond='data:post.isFirstPost'>
<script>
                        (function (d) {
                            var js, id = &#39;facebook-jssdk&#39;;
                            if (d.getElementById(id)) {
                                return;
                            }
                            js = d.createElement(&#39;script&#39;);
                            js.id = id;
                            js.async = true;
                            js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;
                            d.getElementsByTagName(&#39;head&#39;)[0].appendChild(js);
                        }(document));
                   
</script>
</b:if></div>
</div>
<div class='promote_google'>
<g:plusone annotation='none' size='medium'/>
<script type='text/javascript'>
                (function () {
                    var po = document.createElement(&#39;script&#39;);
                    po.type = &#39;text/javascript&#39;;
                    po.async = true;
                    po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
                    var s = document.getElementsByTagName(&#39;script&#39;)[0];
                    s.parentNode.insertBefore(po, s);
                })();
           
</script></div>
</div>

 

Alternatif sosyal paylaşım butonları için şu yazılarıma göz atabilirsiniz:

• Açılan Kalp Şeklinde Sosyal Paylaşım Butonları
• Blog Yazılarınızda En Popüler Sosyal Paylaşım Butonlarını Gösterin
• Blogunuza Sosyal Paylaşım Butonları Ekleyin