Cara Membuat Kotak Subscribe Form Di Bawah Post Seperti Arlina

Cara Membuat Kotak Subscribe Form Di Bawah Post Seperti Arlina - Jika Sebelumnya saya pernah membahas mengenai Cara Membuat Widget Subsribe Form Keren Dan Responsive . Maka Kali ini saya akan membuat tutorial mengenai Cara Membuat Kotak Subscribe Form Di Bawah Post Seperti Arlina.
Memang Soal design blog arlina adalah yang terbaik menurut saya. Saya penasaran bagaimana cara Arlina membuat kotak subscribe form nya, hingga saya tahu walaupun memiliki warna yang berbeda dari yang dimiliki oleh arlinadesign. Jika kotak subscribe form arlina berwarna biru gelap, kotak subscribe form yang saya berikan ini berwarna hitam. Tapi Saya rasa kalian dapat menyesuaikan warnanya.

Cara Membuat Kotak Subscribe Form Di Bawah Post Seperti Arlina

1.) Buka Blogger > Tamplate > Edit HTML

2.) Letakkan Kode dibawah ini tepat di atas atau sebelum 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 Letakkan Kode dibawah ini di tempat yang kalian inginkan

 
<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=ClickUnduh/blog' class='subscribe-form' method='post' onsubmit='window.open (&#39;http://feedburner.google.com/fb/a/mailverify?uri=ClickUnduh/blog&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=550,height=520&#39;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='ClickUnduh'/><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>

4.) Ganti Tulisan ClickUnduh nya Dengan ID Feed Burner kalian. Setelah Itu klik Simpan Tamplate


Itulah Tutorial Mengenai Cara Membuat Kotak Subscribe Form Di Bawah Post Seperti Arlina. Silahkan Kalian ikuti tutorialnya jika kalian tertarik dengan tutorial diatas. Semoga Bermanfaat.
Baca Juga  Cara Membuat Widget Featured Post Berdasarkan Label Keren Dan Responsive