Cara Membuat Subscribe Box Large Banner

Tutorial kali ini adalah membuat subscribe box large banner seperti gambar diatas. Keren bukan? , terlihat tambah professional kalau blog  kalian pasang widget ini. Posisi widget ini biasanya di bawah menubar atau di atas wrapper.Untuk demo silahkan klik link ini

Demo Click here

 Langsung saja kita praktik cara membuatnya.

• Seperti biasa masuk ke Blogger kalian kemudian edit HTML dan tambahkan kode berikut di atas </b:skin>

.bloggersstand-subscribe-form{clear:both;display:block;overflow:hidden}
form.bloggersstand-subscribe-form{background-color: rgba(0, 0, 0, 0.20);clear:both;display:block;margin:0;width:auto;border-radius:5px;overflow:hidden}
.bloggersstand-subscribe-css-email-field{background:transparent;color:rgba(255,255,255,2);margin:10px 0;padding:15px 20px;width:99%;max-width:250px;border:2px solid;}
.bloggersstand-subscribe-css-email-button{width:99%;max-width:150px; background:transparent;color:rgba(255,255,255,2);cursor:pointer;font-weight:710;padding:13px 30px;margin-left:15px;text-transform:none;font-size:17px;border:2px solid;transition:all .6s}
.bloggersstand-subscribe-css-email-button:hover{background:rgba(0,0,0,0.8);border:1px solid rgba(65, 84, 113, 0.3)}
.newsletter-box{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcHkK6Kxd0XACVGAwXbfWR249t4AEbUU0z1X5w3osYaMS1DZw368NX5IiDBnWDuQZCneVfteVrKSgSKH76-cXeM-ADefDeRKsOU7uJL8YPMqBgEdveQ6LktscnUADPTDnnpPuSrO5VDMo/s1600/perampokgoogle-blogger-tutorial.jpg);background-size:cover;background-position:30% 10%;padding:100px;color:#fff;border-radius:5px;text-align:center}.newsletter-box__title,.newsletter-box__subtitle{text-shadow:1px 1px 1px rgba(0,0,0,0.3)}.newsletter-box__title{margin-top:0;font-size:2.9em}.newsletter-box__subtitle{font-size:1.2em}.newsletter-box__form{margin:25px auto 0 auto;max-width:380px;font-size:1.3rem}.newsletter-box__input{font-size:1rem}.text-page{max-width:800px;padding-bottom:40px;font-size:18px}.text-page h1{margin-top:50px;margin-bottom:20px;text-align:center;font-size:30px;font-weight:bold}.text-page h2{font-size:24px;margin-top:30px}.text-page h3{font-size:22px}.text-page li{margin-bottom:10px}.text-page pre{padding:15px;background:#eee;border-radius:3px;font-size:16px;overflow:scroll}.text-page table{margin:20px 0 10px 0}.text-page th{text-align:left}.text-page td,.text-page th{padding-right:20px;padding-bottom:10px;vertical-align:top}.page-wrap{min-height:100%;margin-bottom:-255px}.page-wrap:after{content:"";display:block;height:255px}

• Lalu letakan kode berikut ini di atas <div id='main-wrapper'> atau di bawah </nav>

<div class='newsletter-box'><div class='l-container-center'><h3 class='newsletter-box__title'><span style='background-color: rgba(0, 0, 0, 0.16)'>INSPIRING YOUR CREATIVITY !</span></h3><p class='newsletter-box__subtitle'><span style='background-color: rgba(0, 0, 0, 0.16)'>GET EXCLUSIVE CONTENT BY SUBSCRIBING TO OUR DAILY NEWSLETTER !</span></p><div class='bloggersstand-subscribe-form'><form action='URL FEED BURNER KALIAN' class='bloggersstand-subscribe-form' method='post' onsubmit='window.open (&#39;URL FEED BURNER KALIAN&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=550,height=520&#39;);return true' target='popupwindow'><input name='uri' type='hidden' value='zkrip'/><input name='loc' type='hidden' value='en_US'/><input autocomplete='off' class='bloggersstand-subscribe-css-email-field' name='email' placeholder='Enter your Email..'/><input class='bloggersstand-subscribe-css-email-button' title='SIGN UP' type='submit' value='SIGN UP!'/></form></div></div></div><br /></div></div></div><div class='clear'></div>

• Silahkan isi kode yang berwarna dengan url feed burner kalian. Belum daftar feed burner? Kunjungi dulu postingan ini ; http://www.zkrip.com/2016/11/cara-daftar-feed-burner-dengan-mudah.html
• Simpan template dan lihat hasilnya.

Tweet

Postingan terkait:

Ditulis Tarsisius — Juni 13, 2017 — 7 Comments — Tutorial