Blogger için ‘E-Posta ile takip et’ eklentisi

Herkese yeni bir blogger dersinden merhabalar. Bu dersimizdeWordPress‘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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmb2dB3iv8znAyCMZdcwj27wKendP1yfk5jxNFvOwUY-k7JqCGaQN_T83d2iCt7n8xjLUug32jMjrEuKr60fTbocDKSmzCp1marS4ZaUFoOuBghAPAZHizq8lJMHQ020KjGkwzQml0pGY/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijd2ngQUJBew7kw7uhz5hFmqvBPLRQ4JS2o0UhnEB4zNarzmhWmN2ucWAP1rym7B2nfQnzl-C5e6BDULYTP3OOMH6udtiMkkMugvrnT5rfe_U79bnlRKCGqne9MfNosBbNFuc6FBvBKJc/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj542lO7GyKh3Vsop0gNTjO55UGqoUVjXm6lBDetvg2Gki3Fy7jk6hIckVg9S5mbYkSLnIoZEU_xLKj45YOl0zvpBdqovqLPt5AWeguxh5d9jhiBnu4wjMH6ie2nVyHzZK4h-3BGl2H5TY/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhxCTbqFrPXi1xin8Hp_pyUpensRbClj335DyZfXIs2XX2Xzhu_XyDhWlatnZYf_HXLqrcYLw4VQWiBwVON7d1R74OJ0zaqM1rB9m5qX5APVxNMyepZGiIlsUDpDhONjfW4GNMpynRNG0/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 nofollow nofollow nofollow">Facebook</a></div><div class="twittericon"><a href="http://twitter.com/twitterhesabinizinadi" target="_blank" rel="nofollow nofollow nofollow 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.