Cara Membuat Kotak Berlangganan (Subscription Box) Responsive! Dibawah Postingan Blogger.

Cara Membuat Kotak Berlangganan (Subscription Box) Dibawah Postingan - Biasanya ketika  pengunjung membaca postingan anda berkualitas dan bermanfaat maka dari itu mereka selalu mengunjungi blog anda demi mendapatkan upadate. Salah satu untuk mendapatkan pengunjung setia adalah memasang kotak berlangganan (Subscription Box) di Blogger anda. Kotak berlangganan (Subscription Box) ini sangat penting untuk sebuah blog. Dengan begitu pengujung akan lebih mudah untuk berlangganan postingan atau artikel blog via email. Nantinya ketika sebuah blog upadate postingan, maka postingan atau artikel tersebut akan terkirim melalui inbox pelanggan.

Saat ini banyak para Blogger memasang Kotak Berlangganan (Subscription Box) di Blog mereka. Apalagi postingan dia yang sudah banyak melebihi 500 postingan, wajib pasang beginian tuh, diantaranya ada yang memasang dibagian footer, sidebar dan seperti tutorial kali ini memasang di bawah postingan. Oke langsung saja kita praktekan..


Demo Kotak Berlangganan dibawah Postingan

Cara Pertama :

1. Buka Blogger -> Login Blogger.
2. Dashboard -> Edit HTML
3. Temukan kode ]]></b:skin> atau kode </style>
4. Copy-paste kode dibawah ini, dan letakkan tepat Diatas kode ]]></b:skin> atau kode </style> 

/* Kotak berlangganan By MayCyber-Download */
.berlangganan-box {
border-top: 1px solid #E9E9E9;
border-bottom: 1px solid #E9E9E9;
padding: 15px;
margin:0;
text-align:center;
}
.berlangganan-box input.email-address[type="text"] {
width:60%;
padding:10px;
border:1px solid #ddd;
text-align:center;
border-radius: 4px;
outline:none;
background: #fff;
}
.berlangganan-box input.submit-email[type="submit"] {
transition:all 0.5s;-moz-transition:all 0.5s;-webkit-transition:all 0.5s;
padding:10px 15px;
background:#07ACEC;
border-radius: 4px;
color:#fff;
border:none;
font-weight:bold;
border-bottom: 3px solid #0D9AD0;
outline:none;
}
.berlangganan-box input.submit-email[type="submit"]:hover {
background:#0D9AD0;
cursor:pointer;
}
.berlangganan-box input.email-address[type="text"]:focus {
box-shadow:0 0 2px #106FE4;
}

5. Temukan kode <div style='clear: both;'/> Jika sudah?
6. Copy-paste kode berikut ini dan letakkan tepat dibawah kode <div style='clear: both;'/>
 

<div class='berlangganan-box'>
<form action='https://feedburner.google.com/fb/a/mailverify?uri=MayCyber-Download/HBiCa' method='post' onsubmit='window.open(&apos;https://feedburner.google.com/fb/a/mailverify?uri=MayCyber-Download/HBiCa&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<p>Berlangganan via email (gratis):</p><p><input class='email-address' name='email' placeholder='Masukan alamat email...' type='text'/></p><input name='uri' type='hidden' value='MayCyber-Download'/>
<input name='loc' type='hidden' value='en_US'/>
<p><input class='submit-email' type='submit' value='Berlangganan'/></p>
</form>

NB : Silakan Ganti Tulisan Berwarna Merah dengan ID Feed Anda.

Update !

Jika kode <div style='clear: both;'/> susah ditemukan/tidak ada kode tersebut? Silakan ikuti langkah-langkah berikut ini.

Silakan cari kode yang mirip dengan kode dibawah.

<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

Terakhir Tinggal Taro kode berikut ini dibawahnya..

<div class='berlangganan-box'>
<form action='https://feedburner.google.com/fb/a/mailverify?uri=MayCyber-Download/HBiCa' method='post' onsubmit='window.open(&apos;https://feedburner.google.com/fb/a/mailverify?uri=MayCyber-Download/HBiCa&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<p>Berlangganan via email (gratis):</p><p><input class='email-address' name='email' placeholder='Masukan alamat email...' type='text'/></p><input name='uri' type='hidden' value='MayCyber-Download'/>
<input name='loc' type='hidden' value='en_US'/>
<p><input class='submit-email' type='submit' value='Berlangganan'/></p>
</form>

</div>

Kesimpulan : Jika blog anda memasang Related Post. Taruh saja dibawahnya bisa lihat blog saya ko, tepat dibawah Related Post !

  Bila masih terjadi kesalahan? Luangkan waktu anda untuk berkomentar. Pasti saya akan membantu anda. Thank's For Reading. Thank's Visited. Semoga Bermanfaat!

Happy Blogging^.^

Share this post

Related Post