Membuat Kotak Berlangganan Simple & Keren Dibawah Posting

Saya sudah lama mempelajari cara membuatnya, namun ilmu saya belum seberapa, namun saya hanya bermodalkan nekat dan kemauan, dan akhirnya saya sedikit demi sedikit mengerti cara membuatnya sobat. Walaupun sebenarnya saya tidak membuatnya melainkan mengeditnya.

Untuk kode aslinya saya dapatkan di template Mas Sugeng 2015, dan saya edit hingga menjadi lebih mirip dengan style pada template Evomagz. Jadi untuk sobat yang menginginkan kotak berlangganan ini yang telah saya buat lebih simple dan lumayan keren, sobat bisa mengikuti tutorial berikut ini.

Tambahkan CSS berikut di atas </head> pada edit HTML sobat.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
.berlangganan-box {
  font-family:Arial;
  color:#fff;
  background:#38424B;
  padding:15px;
  border:1px solid #ededed;
  margin:10px 0 0;
  text-align:center;
}

.berlangganan-box input.email-address[type=&
  quot;
  text&
  quot;
  ] {
  width:80%;
  padding:10px;
  border:1px solid #ddd;
  text-align:center;
  border-radius:4px;
  outline:none;
}

.berlangganan-box input.submit-email[type=&
  quot;
  submit&
  quot;
  ] {
  transition:all 0.5s;
  -moz-transition:all 0.5s;
  -webkit-transition:all 0.5s;
  padding:10px;
  background:#2db2eb;
  border-radius:4px;
  color:#fff;
  border:none;
  font-weight:normal;
  outline:none;
  width:80%;
}

.berlangganan-box input.submit-email[type=&
  quot;
  submit&
  quot;
  ]:hover {
  background:#0099cc;
  cursor:pointer;
}

.button {
  transition:all 0.5s;
  -moz-transition:all 0.5s;
  -webkit-transition:all 0.5s;
  text-align:center;
  position:relative;
  vertical-align:top;
  width:148px;
  height:32px;
  padding:0;
  font-size:13px;
  color:#fff;
  font-weight:normal;
  text-align:center;
  background:#07ACEC;
  border:0;
  cursor:pointer;
  border-bottom:3px solid #0D9AD0;
  border-radius:4px;
  outline:none;
}

.button:active {
  top:1px;
  outline:none;
}

.button:hover {
  background:#0D9AD0;
}
</style>
</b:if>

CSS tersebut telah dilengkapi dengan tag kondisional agar hanya terload dibagian posting, dan dengan begitu tidak akan menambah beban dari home page sobat, nah selanjutnya cari kode yang sama persis seperti berikut.

<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Selanjutnya letakkan kode berikut ini tepat dibawah kode tersebut.

<div class='berlangganan-box'>
<form action='https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;https://feedburner.google.com/fb/a/mailverify?uri=Competitiv&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
  <p>Sign up here with your email address to receive updates from this blog in your inbox.</p><p><input class='email-address' name='email' placeholder='Your Email Address...' type='text'/></p><input name='uri' type='hidden' value='Competitiv'/>
<input name='loc' type='hidden' value='en_US'/>
<p><input class='submit-email' type='submit' value='Subscribe'/></p>
</form>
</div>

Pengaturan pada widget ini hanya perlu sobat perhatikan pada kata yang saya beri tanda blok kuning, ganti dengan id feedburner sobat. Setelah itu sobat Simpan Template, dan coba lihat hasilnya.

Sebenarnya untuk kode yang terakhir tidak musti sobat letakkan pada bagian yang saya berikan, namun bisa juga sobat sesuaikan, semisalnya sobat tahu letak tag html related post, maka sobat bisa letakkan kode yang terakhir itu tepat dibawah kode html related post. Semoga bermanfaat. :)