Bu sitedeki her şey Sevgi ile kodlanmıştır.

Kategori Listesini Göster

Blogger için 'E-Posta ile takip et' eklentisi


FacebookTwitterPinterestTumblrYazdır


Herkese yeni bir blogger dersinden merhabalar. Bu dersimizde WordPress'te de yer alan E-Posta ile takip etme eklentisini kurmayı ve kullanmayı öğreneceğiz. Belki önceden Blogger için bu tarz eklentiler paylaşılmış olabilir. Fakat bu eklentinin diğer eklentilerden olan farkı şu ki; tasarım ve ilgi çekme bakımından daha iyi. Yani eklentide, RSS adresinin yanı sıra Facebook ve Twitter gibi bağlantılar da yer alıyor. Ve dolayısı ile tasarım konusunda da sağlıklı bir eklenti olması da eklentiyi diğer benzerlerinden ayıran bir eklenti olmasını sağlıyor. Herneyse, hemen eklentinin kurulum aşamasını anlatmaya geçelim.

Tasarım > Sayfa Öğeleri > Gadget Ekle bölümünden HTML/JavaScript Ekle seçeneceğini seçerek aşağıdaki kodları ekliyoruz ve kaydediyoruz..

<style>
.mbtbar{width: 100%; float: left;}
.mbtbar .count{color:#333; font-size: 14px; font-weight: bold; font-family: Helvetica, Arial; background: #fff; height: 45px; line-height: 45px; vertical-align: middle; width: 100%; padding: 0 10px 0 4px;}
.mbtbar .count span.bigcount{color:#F17C18; font-size: 24px; font-family: Helvetica, Arial; line-height: 39px; vertical-align: top; padding-right:3px;}
.mbtbar .subicons{border-bottom: 1px solid #e6e6e6; margin: 0px 0 0px 0; float: left; width: 300px; font-family: Helvetica, Arial; font-size: 14px;}
.mbtbar .subicons a{text-decoration: none; color:#333333;}
.mbtbar .subicons a:hover{text-decoration: underline; color:#333333;}
.mbtbar .subicons .rssicon{border-right: 1px solid #e6e6e6; background: url(http://2.bp.blogspot.com/-39kJ8qyqrVs/TdpYPqKjAhI/AAAAAAAADf8/FDkLDuCwF7E/s400/rss.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}
.mbtbar .subicons .fbicon{border-right: 1px solid #e6e6e6; background: url(http://4.bp.blogspot.com/-6_H2QDYGHpI/TdpYPF7LYmI/AAAAAAAADf0/wBev_aveLGw/s400/facebook.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}
.mbtbar .subicons .twittericon{background: url(http://3.bp.blogspot.com/-rbsZjAPUA2c/TdpYQO7m2zI/AAAAAAAADgE/VLRVbnICkZA/s400/twitter.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}
.mbtbar .emailsub{border-bottom: 1px solid #e6e6e6; padding: 15px 0 20px 0; float: left; width: 100%; font-family: Helvetica, Arial;}
.mbtbar .emailsub .emailicon{background: url(http://2.bp.blogspot.com/-h72a-fyDTWw/TdpYO0gOhRI/AAAAAAAADfs/s-5_Ckdp-bQ/s400/email.png) no-repeat left center; float: left; padding: 5px 15px 0px 35px; margin: 0 0 0 5px; width: 300px; height: 28px; line-height: 28px; vertical-align: middle; font-size: 14px; color: #333; }
.mbtbar .emailsub .emailupdatesform{margin: 15px 0 5px 5px; width: 300px; float: left;}
.mbtbar .emailsub .emailupdatesform input.emailupdatesinput{background: #fff !important; float: left; border: 1px solid #d2d2d2; padding: 0px 8px 0px 8px; color: #a19999; font-size: 12px; height: 25px; width: 200px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
.mbtbar .emailsub .emailupdatesform input.joinemailupdates{background:-moz-linear-gradient(top,#57ABFE 0%,#0080ff 100%); background:-webkit-gradient(linear,left top,left bottom,from(#57ABFE),to(#0080ff)); border: 1px solid #0080ff; text-transform: uppercase; color: #fff; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
</style>
<!--[if IE 7]>
<style>
.mbtbar .count span.bigcount{color:#F17C18; font-size: 24px; font-family: Helvetica, Arial; line-height: 34px; vertical-align: middle; }
.mbtbar .emailsub .emailupdatesform input.joinemailupdates{background:#0080ff; border: 1px solid #0080ff; text-transform: uppercase; color: #ffffff; font-weight:bold; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; }
</style>
<![endif]-->
<div class="mbtbar"><div class="count">Blogumu <span class="bigcount">+1000</span> kişi takip ediyor!</div><div class="subicons"><div class="rssicon"><a href="http://blogunuzunadi.blogspot.com/feeds/posts/default" target="_blank">RSS</a></div><div class="fbicon"><a href="http://www.facebook.com/facebookhesabinizinadi" target="_blank" rel="nofollow">Facebook</a></div><div class="twittericon"><a href="http://twitter.com/twitterhesabinizinadi" target="_blank" rel="nofollow">Twitter</a></div></div>
<div class="emailsub">
<div class="emailicon">E-Posta ile takip et</div>
<div class="emailupdatesform">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=feedburnerhesabinizinadi', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput-" name="email" value="E-Posta adresinizi yazınız..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;E-Posta adresinizi yazınız...&#39;;}" onfocus="if (this.value == &#39;E-Posta adresinizi yazınız...&#39;) {this.value = &#39;&#39;;}" type="text" /><input value="feedburnerhesabinizinadi" name="uri" type="hidden" /><input value="TAKİP!" class="joinemailupdates-" type="submit" /></form></div></div></div>

Not 1: Yukarıdaki kırmızı renkli yazıları kendinize göre düzenlemeyi unutmayınız.
Not 2: Yukarıda kalın harflerle yer alan kodların en sonunda yer alan "-" işaretini kaldırmayı unutmayınız.


    • cordyup
    • 29 Ağustos 2011, 19:15

    resimler gösterilmiyor bi görsellik yok nerde yanlış yaptım acaba ?

    • Doğan Gezici
    • 29 Ağustos 2011, 19:39

    Merhaba,

    Eklenti güncellenmiştir. Lütfen eklentiyi tekrar kurmayı dener misiniz?

    İyi Çalışmalar

    • cordyup
    • 29 Ağustos 2011, 23:13

    teşekkürler eklentideki resimler geldi fakat bu sefer eklenti sığmıyor e-posta yazılan yerde sıkıntı var gibi vaktinizi çalıyorsam kusura bakmayın lütfen

    • Doğan Gezici
    • 30 Ağustos 2011, 00:17

    Merhaba,

    Eklentinin standart CSS kodları temadan temaya farklılık gösterebilir. Bunun için CSS kodları içerisinde yer alan ".mbtbar .emailsub .emailupdatesform input.emailupdatesinput" adlı kodlar içerisindeki "width:200px" değerini istediğiniz herhangi bir değer ile değiştirebilirsiniz.

    İyi Çalışmalar

    • Hasan Ekşi
    • 3 Ocak 2013, 21:56

    Blogunuz çok faydalı fakat keşke eklentilerin demosunu koysaydınız :) Sitenizde ki kodların ön izlemeseni göremediğimizden denemekte biraz zorlanıyoruz

    • Doğan Gezici
    • 3 Ocak 2013, 22:51

    @Hasan Ekşi;

    Merhaba,

    İlgi ve alâkanız için teşekkür ederiz. Önerinizi göz önünde bulunduracağımıza emin olabilirsiniz.

    İyi Çalışmalar

    • Murat
    • 20 Mayıs 2021, 08:47

    tesekrler

Bu yazıya yorum göndermek ister misiniz?

Dikkat: Her yorum gönderen kişi, kendi gönderdiği yorumdan sorumlu olmaktadır.
Not: Yazı ile herhangi bir ilgisi bulunmayan yorumların onaylanmadığını belirtmek isteriz.
Yukarı Çık