Hayata bakışınızı değiştirir...

  • Gündem Notları:

    25 May 2014

    Blogger E-Posta Abonelik Kutusu Yapımı

    Önizleme için Tıklayın >>>
    E-posta aboneliği dünya çapında pek çok blog yazarının hayat kaynaklarından biridir aslında. Ülkemizde E-Posta istendiğinde ziyaretçide ev adresini istemişsin izlenimi bıraktığı için bu özellik ülkemizde yeterince kullanılmamakta. Ama yine de blogunuzu takip etmek isteyenler her yazınızdan anında haberdar olsun istiyorsanız gayet kullanışlı bir özellik.

    Zaten kısıtlı imkanlara sahip olduğumuz Blogger alt yapısına sahip blog sitelerimizde bu gibi her türlü imkanı değerlendirip ziyaretçilerimizi blogumuza bağlamamız gerektiği düşüncesindeyim. Bu sayede hem daha fazla okunursunuz, hem de okurlarınıza en hızlı ve kolay şekilde ulaşmış olursunuz. Neyse fazla uzatmadan anlatıma geçelim.

    Kodunu vereceğim E-Posta aboneliği kutusunun görünüşü resimdeki gibidir ve sayfanın sağ alt köşesinde sabit olarak kalır. Küçültülebilme özelliği olduğu için hem kullanıcıyı rahatsız etmeyen, hem de dikkat çeken bir yapısı bulunuyor. Bu yönüyle size inanılmaz yararı olacaktır diye düşünüyorum.

    Blogger > Yerleşim > Gadget Ekle

    Yolunu takip ederek HTML/JavaScript Ekle seçeneğine tıklıyoruz. Açılan sayfadaki boş alana aşağıdaki verdiğim kodları yapıştırın ve Masivaname-KiiselBlog kısmını kendi feedburner hesabınızın uzantısı ile değiştirin.
    <style type="text/css">
    /*<![CDATA[*/
     #w2bfollowSubscribe {background-color: #464646;width: 220px;color: #fff;position: fixed;z-index: 999999;right: 10px;bottom: 0;}
     .followOpened {-webkit-border-radius: 2px 0 0;-moz-border-radius: 2px 0 0;border-radius: 2px 0 0;-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);}
     .w2bfollowButton {background: #EB2B2B;color: #FFF !important;font-size: 13px;line-height: 28px;padding: 0 10px;text-decoration: none;position: absolute;top: -28px;right: 80;display: block;-webkit-box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);-moz-box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);-webkit-border-radius: 2px 2px 0 0;-moz-border-radius: 2px 2px 0 0;border-radius: 2px 2px 0 0;height: 28px;}
     .w2bfollowButton span {background: url("http://4.bp.blogspot.com/-cojt7gQfz4Q/TztYuq2TltI/AAAAAAAABcE/OTwMxjnwak8/s1600/follow-w2b.png") no-repeat scroll 0 3px transparent;padding-left: 15px;}
     .w2bfollowButton:hover,.followActive {color: #fff !important;}
     .w2bfollowButton:hover span,.followActive span {background-position: 0 -37px !important;}
     .followactive {background-color: #333;}
     .w2bfollowForm {padding: 15px;}
     .w2bfollowForm h3 {font-size: 18px;margin: 0 0 10px;font-weight: normal;}
     .w2bfollowForm p {margin: 0 0 10px;}
     .w2bfollowForm .emailInput {width: 95%;padding: 2px 4px;margin: 0 auto;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;font-size: 15px;border: 1px solid #444;color: #888;display: block;clear: both;}
     .w2bfollowForm form {text-align: center;}
     .w2bfollowForm .emailInput:focus {color: #000;border-color: #000;}
     .w2bfollowForm .emailSubmit {cursor:pointer;padding: 2px 20px;background: #333;background: -webkit-linear-gradient(top, #333 0%, #111 100%);background: -moz-linear-gradient(top, #333 0%, #111 100%);background: -o-linear-gradient(top, #333 0%, #111 100%);background: -ms-linear-gradient(top, #333 0%, #111 100%);background: linear-gradient(top, #333 0%, #111 100%);color: #ccc;text-shadow: 0 1px 0 #000;border: 1px solid #282828;-webkit-border-radius: 11px;-moz-border-radius: 11px;border-radius: 11px;-webkit-box-shadow: inset 0 1px 0 #444;-moz-box-shadow: inset 0 1px 0 #444;box-shadow: inset 0 1px 0 #444;text-decoration: none;-webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;-ms-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out;margin: 1em 0 1em 0;}
     .emailSubmit:hover {background: #222;background: -webkit-linear-gradient(top, #333 0%, #222 100%);background: -moz-linear-gradient(top, #333 0%, #222 100%);background: -o-linear-gradient(top, #333 0%, #222 100%);background: -ms-linear-gradient(top, #333 0%, #222 100%);background: linear-gradient(top, #333 0%, #222 100%);color: #fff;-webkit-box-shadow: inset 0 1px 0 #4f4f4f;-moz-box-shadow: inset 0 1px 0 #4f4f4f;box-shadow: inset 0 1px 0 #4f4f4f;text-decoration: none;}
     .emailSubmit:active {background: #111;background: -webkit-linear-gradient(top, #111 0%, #222 100%);background: -moz-linear-gradient(top, #111 0%, #222 100%);background: -o-linear-gradient(top, #111 0%, #222 100%);background: -ms-linear-gradient(top, #111 0%, #222 100%);background: linear-gradient(top, #111 0%, #222 100%);color: #aaa;-webkit-box-shadow: inset 0 -1px 0 #333;-moz-box-shadow: inset 0 -1px 0 #333;box-shadow: inset 0 -1px 0 #333;text-decoration: none;}
     .w2bFollowFooter {text-align: center;font: normal 11px "Helvetica Neue", sans-serif;padding: 7px 0;margin: 0 0 -15px !important;border-top: 1px solid #3c3c3c;}
     .w2bFollowFooter a {color: #aaa;text-shadow: 0 1px 0 #262626;background: none;text-decoration: none;}
     .w2bFollowFooter a:hover {color: #fff;background: none;}
    /*]]>*/
    </style>
    <script type="text/javascript">
    /*<![CDATA[*/
    ;(function(w2b){w2b(document).ready(function(){w2b.extend(w2b.easing,{easeOutCubic:function(x,t,b,c,d){return c*((t=t/d-1)*t*t+1)+b}});var followBox=w2b("#w2bfollowSubscribe");var followHeight="-"+followBox.outerHeight()+"px";followBox.hide().css({bottom:"-500px"});setTimeout(function(){followBox.show().animate({bottom:followHeight})},500);w2b(".w2bfollowButton").click(function(e){if(followBox.hasClass("followOpened")){w2b(this).removeClass("followActive");followBox.removeClass("followOpened").stop().animate({bottom:followHeight},{duration:300,easing:"easeOutCubic"})}else{w2b(this).addClass("followActive");followBox.addClass("followOpened").stop().animate({bottom:"0"},{duration:500,easing:"easeOutCubic"})}e.preventDefault()})})})(jQuery);
    /*]]>*/
    </script>
    <div id="w2bfollowSubscribe" style="display:none;">
     <div class="w2bfollowForm">
      <a class="w2bfollowButton" href="#" title="Follow"><span>Mail ile Takip Et!</span></a>
      <h3>Bu Blogu Takibe Al!</h3>
      <p>Son yazılarımın mail adresine gelmesini istersen buradan mailin ile bloguma abone olabilirsin.</p>
      <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Masivaname-KiiselBlog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
       <input type="text" class="emailInput" name="email" placeholder="Mail Adresinizi Yazın..."/>
       <input type="hidden" value="Masivaname-KiiselBlog" name="uri"/>
       <input type="hidden" name="loc" value="en_US"/>
       <input type="submit" value="Takibe Al!" class="emailSubmit"/>
      </form>
      <p class="w2bFollowFooter">
       Takip Eden Herkese Teşekkürler.
      </p>
     </div>
    </div>

    Feedburner hesap uzantınızı bilmiyorsanız yine gatget ekle kısmından E-Posta ile Takip Et seçeneğine tıklayın ve açılan sayfada http://feeds.feedburner.com/ adresinden sonraki kısmı kopyalayarak koddaki ile değiştirin.

    Hepsi bu kadar güle güle kullanın...

    5 yorum:

    1. woldpressin abonelik kutusuna benziyor cok guzelmis

      YanıtlaSil
    2. güzel paylaşım . Emeğinize sağlık.

      YanıtlaSil
    3. Çıkıyor ama anasayfada çıkmıyor sadece yayınlarda.

      YanıtlaSil
      Yanıtlar
      1. Kodda bir sorun yok kendim de kullandım. Tüm sayfalarda görünüyor. Sizin eklediğiniz html kutusu ile alakalı olabilir. Şayet bir widgeti sadece yazı sayfalarında görünsün diye ayarlamışsanız ve bu kodu da o widgete eklemişseniz anasayfada görünmez. Lütfen bu kod için yeni bir HTML Java Script widgeti ekleyip kodu oraya yapıştırın...

        Sil
    4. Üstad kendin yaptıysan bi güncelle istersen çıkmıyor

      YanıtlaSil