Cara Membuat Kotak Berlangganan (Subscription Box) Seperti Arlina Design

Tutorial blog yang akan saya bagikan kali ini adalah cara membuat kotak berlangganan (subscription box) di blog seperti yang bisa Anda lihat pada blog Arlina Design. Pentingnya memasang kotak berlangganan sudah pernah saya jelaskan pada tutorial kotak berlangganan yang pernah saya bagikan sebelumnya. Jadi, nggak perlu saya jelaskan kembali ya.

Baca juga : Membuat Kotak Berlangganan (Subscription Box) di Bawah Posting Blog

Untuk demo tampilan kotak berlangganan seperti pada blog Arlina Design bisa Anda lihat pada link demo atau gambar di bawah ini.

Cara Membuat Kotak Berlangganan (Subscription Box) Seperti Arlina Design

Kotak berlangganan ini dapat Anda pasang di segala tempat, entah itu sidebar, footer, di bawah postingan, dll. Jika Anda tertarik untuk menerapkan atau memasang kotak berlangganan ini di blog Anda, silahkan ikuti tutorialnya berikut.

Cara Membuat Kotak Berlangganan (subscription box) di Blog

1. Buka Blogger > Template > Edit HTML
2. Letakkan kode di bawah ini di atas kode ]]></b:skin> atau </style>

/* Subscribe Box */
#subscribe-css{position:relative;padding:20px 0;background:#222;overflow:hidden;border-top:4px solid #eee;}
.subscribe-wrapper{color:#fff;font-size:16px;line-height:normal;margin:0;text-align:center;text-transform:none;font-weight:400;width:100%}
.subscribe-form{clear:both;display:block;overflow:hidden}
form.subscribe-form{clear:both;display:block;margin:0;width:auto;overflow:hidden}
.subscribe-css-email-field{background:#333;color:#ccc;margin:10px 0;padding:15px 20px;width:35%;border:0}
.subscribe-css-email-button{background:#ff675c;color:#fff;cursor:pointer;font-weight:700;padding:14px 30px;margin-left:15px;text-transform:none;font-size:16px;border:0;border-radius:3px;transition:all .6s}
.subscribe-css-email-button:hover{background:#ea5a50;}
#subscribe-css p.subscribe-note{margin:16px;text-align:center;color:rgba(255,255,255,.6);font-size:180%;font-weight:400;line-height:normal;}
#subscribe-css p.subscribe-note span {position:relative;overflow:hidden;font-weight:700;transition:all .5s}
#subscribe-css p.subscribe-note span.itatu {font-weight:400;font-style:italic;color:rgba(255,255,255,.6);text-transform:lowercase}
#subscribe-css p.subscribe-note span.itatu:before,#subscribe-css p.subscribe-note span.itatu:after{display:none}
#subscribe-css p.subscribe-note span:before{content:'';position:absolute;bottom:-2px;left:0;width:0;height:3px;margin:10px 0 0;background:rgba(255,255,255,.1);transition:all .5s}
#subscribe-css:hover p.subscribe-note span:before{width:100%;}

3. Kemudian, salin dan letakkan kode berikut ini di tempat Anda ingin menampilkan kotak berlanggannya.

<div id='subscribe-css'>
<p class='subscribe-note'><span>SUBSCRIBE</span>
<span class='itatu'>TO</span> OUR NEWSLETTER</p>
<div class='subscribe-wrapper'>
<div class='subscribe-form'>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=wahyupratama/blog' class='subscribe-form' method='post' onsubmit='window.open (&#39;http://feedburner.google.com/fb/a/mailverify?uri=wahyupratama/blog&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=550,height=520&#39;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='Wahyu Pratama'/><input name='loc' type='hidden' value='en_US'/><input autocomplete='off' class='subscribe-css-email-field' name='email' placeholder='Enter your Email'/><input class='subscribe-css-email-button' title='' type='submit' value='submit'/></form>
</div>
</div>
</div>

Ganti wahyupratama/blog dengan id feedburner Anda.

4. Setelah itu simpan template dan lihat hasilnya.

Demikian tutorial tentang cara membuat kotak berlangganan (subscription box) di blog seperti pada blog Arlina Design. Silahkan ikuti tutorialnya jika Anda ingin menerapkannya pada blog Anda. Semoga bermanfaat.

Sumber script : Arlinadzgn.com

Leave a Reply