Cara Membuat Subscription Box di Footer Full - Kali ini yang akan saya bagikan adalah bagaimana cara membuat kotak berlangganan / subscription box yang bisa dipasang di blog.
Tutorial ini saya buat karna saya membaca komentar teman-teman sahabat blogger yang ingin memasang Subscription Box seperti yang dipasang di blog Arlina Design. Sebenarnya untuk mendapatkan widget ataupun kode yang terpasang di blog milik orang itu sangat mudah bagi yang mengerti dan paham dengan coding blog. Untuk melakukan hal itu tidaklah sesulit yang sobat pikirkan, karna hanya dengan Inspect Elements atau Page Source dari halam blog maka kita sudah bisa mendapatkan kode yang kita mau. Namun saya juga tetap akan membagikan tutorial ini agar sobat blogger bisa memasangnya dengan mudah di blog sobat.
Cara Membuat Subscription Box di Footer Full
Langsung saja sobat ikuti langkah-langkahnya.
1. Buka Blogger > Template > Edit HTML
2. Tambahkan kode di bawah ini di atas kode ]]></b:skin> atau </style>
/* Subscribe 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:#37b185;}
#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%;}Catatan : Untuk warna dan sebagainya bisa sobat edit sesuai selera.
3. Selanjutnya tambahkan markup di bawah ini bebas diantara tag pembuka <body> dan tag penutup </body>.
<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=kedia-soft' class='subscribe-form' method='post' onsubmit='window.open ('http://feedburner.google.com/fb/a/mailverify?uri=kedia-soft', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input name='uri' type='hidden' value='kedia-soft'/><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>Catatan : Ganti semua kode yang ditandai kedia-soft dengan id feedburner blog milik sobat.
4. Setelah itu simpan template dan lihat hasilnya.
Demikian tutorial tentang Cara Membuat Subscription Box di Footer Full.
Terima kasih dan semoga bermanfaat.
Referensi : www.arlinadzgn.com/2016/04/cara-membuat-subscription-box-di-blog.html
0 komentar:
Posting Komentar