Cara membuat subscribe box responsive di blog
Cara membuat subscribe box responsive di blog

Cara membuat subscribe box responsive di blog

Cara membuat subscribe box responsive di blog

Cara Membuat Subscribe Box Responsive Di Blog

Subscribe box atau kotak berlangganan artikel cukup penting untuk dipasang diblog atau situs website anda. Tujuannya adalah agar orang lain dan pengunjung anda dapat berlangganan postingan terbaru situs sehingga mereka selalu mendapatkan artikel baru dari anda. Tapi, bagaimana cara memasang kotak subscribe box yang responsive, keren, dan ringan?


Tulisanpanda.com,sumbar – ditulisan ini saya mencoba memberikan tutorial mudah dan singkat bagaimana cara memasang subscribe box keren ala/mirip arlinadzgn, dan bagaimana cara mengedit nya sesuai dengan keinginan anda sendiri. Silahkan ikuti tutorial dibawah ini

Cara membuat kotak berlangganan ala arlinadzgn responsive


  • Buka Template > Edit HTML > cari </style> atau </b:skin> dan letakkan kode CSS subscribe box berikut diatas salah satu kode tersebut

/* Subscribe Box */
#subscribe-css{position:relative;padding:20px 0;background:#263138;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:#f1f1f1;color:#444;margin:10px 0;padding:15px 20px;width:35%;border:0}
.subscribe-css-email-button{background:#2C97DD;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:#4d90fe;}
#subscribe-css p.subscribe-note{margin:16px;text-align:center;color:#f1f1f1;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%;}
.subscribe-css-email-field::-webkit-input-placeholder,.subscribe-css-email-field::-moz-placeholder,.subscribe-css-email-field:-ms-input-placeholder,.subscribe-css-email-field:-moz-placeholder{color:rgba(255,255,255,.7)}

  • Pasang Script HTML subscribe box mirip arlinadzgn berikut terserah anda dimana ditempatkan. Bisa dipasang diatas Footer

<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="https://feedburner.google.com/fb/a/mailverify?uri=Tulisanpanda" class="subscribe-form" method="post" onsubmit="window.open (&#39;https://feedburner.google.com/fb/a/mailverify?uri=Tulisanpanda&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=550,height=520&#39;);return true" target="popupwindow">
<input name="uri" type="hidden" value="Tulisanpanda"><input name="loc" type="hidden" value="en_US"><input autocomplete="off" class="subscribe-css-email-field" name="email" placeholder="Enter your Email"><input class="ripplelink subscribe-css-email-button" title="Submit Email" type="submit" value="Submit"></form>
</div>
</div>
</div>


  • Terakhir edit alamat feedburner email yang sudah ditandai dengan alamat feed burner situs kamu, dan Simpan termplate

Kesimpulan memasang subscribe box
Wah, mudah sekali bukan memasang kotak berlangganan responsive dan bagus di blog kamu? Nah, jika ada yang ingin didiskusikan silahkan berkomentar dibawah. Kamu juga bisa mengkostumisasi bentuk dari subscribe box diatas seperti merubah warnanya, caranya mudah sekali, cari kode warna kotak tersebut di kode CSS yang baru saja dipasang dan ubah menjadi warna yang kamu inginkan.

Blogger
Disqus
Pilih Sistem Komentar

Tidak ada komentar

Advertiser