Cara Membuat Kotak Berlangganan Keren di Blog

5

Cara Membuat Subscibe Box atau Kotak Berlangganan Keren di Blog , - Sebelumnya saya pernah membagikan cara membuat Kotak Berlangganan Box di Blog Seperti EVO Magz dan kali ini saya masih akan memberikan cara membuat berlangganan kotak di blog seperti template desain arlina. Dimana kotak berlangganan tersebut sangat bagus dan keren menurut saya makanya disini saya akan membagikanya.

Berlangganan KOTAK atau Kotak yang membantunya digunakan untuk memasukan email yang biasanya ada di web atau blog yang dimaksudkan agar pengunjung dapat menemukan pembaruan artikel melalui email mereka. seperti yang disetujui Tombol Berlangganan di situs youtube kotak berlangganan juga memiliki cara yang sama namun sekarang kita perlu memasukan email yang lalu kirimkan untuk berlanggan artikel dari web / blog.

Pastinya Anda pernah melihat Berlangganan Kotak / kotak berlanggganan ini di sebuah blog, karena sudah banyak blog yangmemasang kotak panggil ini baik blog besar atau blog kecil. Meskipun banyak yang memasangnya namun setiap kotak menampilkananya berbeda-beda. yah itu juga tergantung modifikasi dan dilakukan oleh pemilik blog.

Kotak Berlangganan Memasang ini untuk membantu pemilik situs, karena jika pengunjung memiliki artikel blog Anda pengunjung akan tahu jika ada artikel baru dari blog Anda dan otomatis juga akan menambah pengunjung blog. Namun sebelum memasang kotak berlangganan ini, terlebih dahulu blog harus didaftarkan ke Feedburner , Jika sudah punya ID feedburner baru bisa memasang ID tersebut ke Kotak Langganan.

Nah buat tampilan Kotak Berlangganan pada tutorial kali ini seperti gambar di atas, dan kotak sesuai tersebut saya pasang di footer. Jika Anda tertarik dengan Langganan KOTAK seperti gambar diatas dapat langsung dilihat dengan cara di bawah ini.

Cara Memasang Berlangganan Box keren di Blog

1. Pertama masuk ke Blogger - Templat dan Edit HTML

2. Kemudian Cari kode  ]]> </ b: skin> gunakan (Ctrl + F) untuk kemudahan pencarian, jika sudah ketemu, salin kode yang ada di sini dan tempel di atas kode tersebut.

/ * Kotak Berlangganan * / 
# berlangganan-css {posisi: relatif; padding: 20px 0; latar belakang: # 444; melimpah: tersembunyi; batas-atas: 4px padat # lihat: tidak ada} 
.subscribe-wrapper {color: #fff; font-size: 16px; line-height: normal; margin: 0; text-align: center; text-transform: none; font-weight: 400; lebar: 100%} 
.subscribe-form {clear: both; display: blok; melimpah: tersembunyi} 
form.subscribe-form {clear: keduanya; tampilan: blok; margin: 0; lebar: otomatis; melimpah: tersembunyi} 
.subscribe-css-email-field {background: # 555; warna: #ccc ; margin: 10px 0; padding: 15px 20px; lebar: 35%; batas: 0} 
.subscribe-css-email-button {background: # E73037; warna: #fff; kursor: pointer; font-berat: 700; padding : 14px 30px; margin-kiri: 15px; transformasi teks: tidak ada; ukuran font: 16px; batas: 0; radius batas: 3px; transisi: semua .6s}
.subscribe-css-email-button: hover {background: # E73037;} 
# subscribe-css p.subscribe-note {margin: 16px; text-align: center; warna: rgba (255.255.255, .6); ukuran font : 180%; font-weight: 400; tinggi-line: normal;} 
# subscribe-css p.subscribe-note span {position: relative; overflow: tersembunyi; font-weight: 700; transisi: all .5s} 
#scribe -css p.subscribe-note span.itatu {font-weight: 400; font-style: italic; warna: rgba (255.255.255, .6); transformasi teks: huruf kecil} 
# berlangganan-css p.subscribe-note span. itatu: sebelumnya, # subscribe-css p.subscribe-note span.itatu: after {display: none} 
# subscribe-css p.subscribe-note span: before {content: "; position: absolute; bawah: -2px; left : 0; lebar: 0; tinggi: 3px; margin: 10px 0 0; latar belakang: rgba (255.255.255, .1); transisi: semua .5s}
# subscribe-css: hover p.subscribe-note span: before {width: 100%;}

3. Selanjutnya, salin kode CSS di bawah ini lalu tempel ditempat yang Anda inginkan semisal jika ingin memasang diatas footer tempelkan di atas kode <footer>

<div id = 'berlangganan-css'> 
<p class = 'berlangganan-note'> <span> Berlangganan </span> <span class = 'itatu'> KE </span> NEWSLETTER KAMI </p> 
<div class = 'subscribe-wrapper'> 
<div class = 'subscribe-form'> 
<form action = 'http: //feedburner.google.com/fb/a/mailverify? uri = EspadaBlog ' class = metode 'subscribe-form' = 'post' onsubmit = 'window.open (& apos; http: //feedburner.google.com/fb/a/mailverify? uri = EspadaBlog & apos ;, & apos; popupwindow & apos ;, & apos; scrollbars = ya, width = 550, height = 520 & apos;); mengembalikan true 'target =' popupwindow '> 
<input name =' uri 'type =' hidden 'value =' EspadaBlog'/> <input name =' loc 'type =' hidden 'value =' en_US '/> <input autocomplete =' off 'class =' ​​berlangganan-css-email-bidang 'name =' email 'placeholder =' Masukkan Anda Email '/> <input class =' ​​berlangganan-css-email-button 'title = ”type =' kirim 'nilai =' kirim '/> </form> 
</div> 
</div>

Catatan:  Silakan Ganti EspadaBlog Dengan ID Feedburner Blog Anda.

4. Dan terakhir disetujui, kotak berlangganan lebih responsif pada tampilan seluler, harap tambahkan kode Layar media CSS berikut ini tepat diatas kode </style>

Layar @ media dan (max-width: 768px) { 
# subscribe-css p.subscribe-note {margin: 0 0 20px 0; width: 100%;} 
.subscribe-wrapper {width: 100%;} 
} 
layar @media dan (max-width: 640px) { 
# subscribe-css p.subscribe-note {font-size: 140%} 
form.subscribe-form {padding: 0 10px} 
.scribe-css-email-field, .subscribe-css -email-button {padding: 15px 0; text-align: center; margin: 10px 0; lebar: 100%} 
}

5. Terakhir tinggal simpan template dan lihat hasilnya.

Dan buat cara membuat Kotak Berlangganan di blog keren seperti desain blog arline, untuk warna sekaligus tampilanya bisa sesuaikan sendiri. sekian tips blogging yang dapat saya bagikan dan selamat mencoba.