Contoh Cara Membuat Tombol Subscribe Feedburner Blog Pada Halaman Posting

Tombol Subscribe memang bukan sesuatu yang sangat penting banget dalam meningkatkan visitor untuk membaca artikel yang ditulis dalam sebuah halaman blog, namun dengan hadirnya tombol ini, akan mempermudah untuk berlangganan artikel baru yang di posting pada blog yang tentunya akan berdampak pada peningkatan jumlah visitor yang sudah berlangganan.

Subscribe box yang dibagikan ini mempunyai tampilan sederhana dan sangat cocok ditempatkan dibawah posting, karena bentuknya yang memanjang dengan balutan warna merah serta pada bagian tombol submit dihiasi efek blink.

Penempatannya juga sangat mudah yaitu dengan cara meletakkan CSS/style dibawah ini sebelum ]]></b:skin> atau </style>.

/* Subscribe Box */

#share_btnper{

  margin:20px auto;

  padding:0

}

#subscribe-box{

  background:#f4f5f6;

  display:block;

  overflow:hidden;

  margin:20px auto;

  padding:30px 20px;

  border-radius:3px;

  width:600px}

#subscribe-box p{

  font-size:15px;

  margin:0 auto 20px auto;

  color:rgba(255,255,255,.7);

  padding:0;text-align:center

}

#subscribe-box .emailfield{

  margin:auto

}

#subscribe-box .emailfield form{

  margin:0

}

#subscribe-box .emailfield input{

  background:rgba(0,0,0,0.05);

  padding:12px;

  color:#7f8c8d;

  font-size:14px;

  width:70%;

  float:left;

  text-indent:10px;

  border:0;

  border-radius:3px

}

#subscribe-box .emailfield input:hover{

  background:#FFCDD2

}

#subscribe-box .emailfield input:focus{

  color:#222;outline:none;

}

#subscribe-box .emailfield .submitbutton{

  background:#e74c3c;

  color:#fff;

  width:24.1%;

  margin:0 0 0 10px;

  font-size:14px;

  letter-spacing:.5px;

  cursor:pointer;

  border:0;

  text-indent:initial;

  text-transform:uppercase;

  border-radius:3px;

  transition:all .3s

}

#subscribe-box .emailfield .submitbutton:focus,#subscribe-box .emailfield .submitbutton:hover{

  background:#c0392b;

  color:#fff;

  -webkit-animation:flash 1.5s linear 1.5s infinite normal;

  animation:flash 1.5s linear 0.5s infinite normal

}

@-webkit-keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}

@keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}

}

/* Subscribe Responsive */

@media screen and (max-width:640px){

#subscribe-box .emailfield input{

  width:100%;

  float:none;

  text-indent:10px;

}

#subscribe-box .emailfield .submitbutton{

  width:100%;

  margin:15px auto 0 auto;

  }

}

Kemudian letakkan kode dibawah ini pada kerangka template tepatnya diatas related post, contoh kodenya: <div id='related-post'> atau yang sejenis.

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

<div class='share-wrapper' id='share_btnper'>

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

</div>

<div id='subscribe-box'>

<div class='emailfield'>

<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=SkinDesign&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>

<input name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Email address&quot;;}' onfocus='if (this.value == &quot;Email address&quot;) {this.value = &quot;&quot;;}' type='text' value='Email address'/>

<input name='uri' type='hidden' value='SkinDesign'/>

<input name='loc' type='hidden' value='en_US'/>

<input class='submitbutton' type='submit' value='Submit'/>

</form>

</div>

</div>

Pada teks box SkinDesign ganti dengan kode feedburner anda.
Apabila semua selesai tinggal klik SAVE tempalate da lihat hasilnya, sepertinya sangat mudah...?

Result

Penulis selalu siap menerima kritik, keluhan dan juga saran dari anda, kerena dengan begitu berarti keberadaan saya sudah dianggap bagian dari teman-teman semua, terima kasih.