Cara Membuat Subscribe Box Ala Arlina Design

KANGDAMAI.COM - Okeh kali ini saya akan membagikan script yang di gunakan mbak arlina yang cantik dalam membuat subscribe box dibawah halaman websitenya. Salah satu tujuan adanya subscribe box email adalah kemudahan bagi pembaca untuk mendapatkan info artikel yang di update oleh sebuah website.

Subscribe Ala Arlina ini memiliki fitur responsive yang dapat menyesuaikan pada perangkan yang digunakan dalam mengakses blog. jadi sobat nggak perlu bingung soal tampilan blog anda akan rapi atau tidak.

nah langsung saja ya biar nggk kelamaan dan nggak bikin jenuh.

• Buka Blogger.com
• Pilih menu Template - Edit Template
• Copy Script dibawah ini dan letakkan diatas code ]]></b:skin> 

/* SUBSCRIBER BOX */
#subscribe-css{position:relative;padding:20px 0;background:#374760;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:#415471;color:#ccc;margin:10px 0;padding:15px 20px;width:35%;border:0}
.subscribe-css-email-button{background:#3cc091;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:#33333;}
#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%;}
iframe#comment-editor {height:240px;}
@media screen and (max-width:640px){
#subscribe-css p.subscribe-note{font-size:140%}
form.subscribe-form{padding:0 10px}
.subscribe-css-email-field,.subscribe-css-email-button{padding:15px 0;text-align:center;margin:10px 0;width:100%}
}

• Selanjutnya salin code tersebut dan letakkan atas code </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='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>

Namun soal peletakan script kedua sih terserah agan mau diletakkan dimana ya. Mau atas postingan atau mau disamping artikel terserah sobat masing masing. Sekian dulu ya bahas Cara Membuat Subscribe Box Ala Arlina Design semoga bermanfaat dan berhasul.