Selasa, 07 Februari 2017

Cara Membuat Widget Subscriber Box Ala Arlina Design

Subscriber Box Ala Arlina Design

Cara Membuat Widget Subscriber Box Ala Arlina Design - Kalian yang pernah berkunjung ke blog mbak Arlina Design pasti pernah menscroll ke bawah dan melihat subscriber box yang keren dan menarik. Tetapi kalian ingin membuatnya sendiri tetapi tidak tahu dan pada artikel saya kali ini saya akan share cara membuat widget subscriber box ini kepada kalian.

Untuk melihat detail seperti apa tampilan widget subscriber box ini kalian bisa berkunjung ke blognya mbak arlina aja di www.arlinadzgn.com.

Cara Membuat Widget Subscriber Box

1. Seperti biasa pertama kalian " Buka Blogger > Template > Edit HTML ".
2. Kalian letakan kode CSS dibawah ini tepat diatas </style> atau terserah kalian mau taruh dimana jika sudah sensei.

/* 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 kalian salin kode HTML dibawah ini yang fungsinya sebagai penampil widget subscriber boxnya.
<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=AlfinMedia' class='subscribe-form' method='post' onsubmit='window.open (&#39;http://feedburner.google.com/fb/a/mailverify?uri=AlfinMedia&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=550,height=520&#39;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='AlfinMedia'/><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 AlfinMedia dengan id feddburner kalian yah jangan lupa.
4. Setalah selesai semua langkah di atas simpanlah template kalian dan tes dengan membuka blog kalian.
Sekian tutorial tentang Cara Membuat Widget Subscriber Box Ala Arlina Design barangkali ada kekurangan mohon maafnya. Dan saya akan mengupdate artikel tentang blogger lagi dipertemuan berikutnya.

Sumber : www.arlinadzgn.com

Artikel Terkait

Saya ini seorang blogger dari Indonesia yang masih nubie :v , salam kenal dan sehat selalu.