Cara Membuat Widget Subscribe

Ada banyak cara untuk menarik para pembaca, selain dari isi konten yang menarik dan terpercaya, tentu saja tampilan website harus cantik, agar pembaca bisa nyaman dan betah ingin kembali membaca lagi di website Anda, salah satunya dengan widget subscribe ini. Lalu bagaimana cara membuat widget subscribe yang menarik? Yuk simak !

Jangan meremehkan widget subscribe ini, jika kamu meremehkan hal kecil seperti ini bisa-bisa Anda akan kehilangan pelanggan pembaca di website milik Anda. Jika Anda sudah menggaet pembaca dengan isi konten yang bermanfaat bagi si pembaca dan dengan widget "Subscribe" yang menarik, tentunya si pembaca akan mengklik tombol "Subscribe" dan berlangganan di website Anda. Bagaimana cara membuatnya?

Artikel terkait: Cara Memasang Efek Preloader Di Blog

Untuk cara pemasangannya yaitu kalian harus login terlebih dahulu ke akun blogger > pilih TEMA > Untuk tampilan blog versi terbaru sobat klik Titik 3 berdiri > pilih Edit HTML. Cari kode HTML footer milik kalian, lalu paste-kan kode HTML berikut tepat di atas tag footer:

<!-- Subscribe -->

<div id='na-wrapper'>

<div class='invertsubs-content'>

<div id='invertsubs-subs'>

<p>Subscribe Our Newsletter</p>

<div class='emailfield'>

<form action='https://feedburner.google.com/fb/a/mailverify' class='invertsubs-form' expr:onsubmit='&quot;window.open(\&quot;https://feedburner.google.com/fb/a/mailverify?uri=&quot; + data:feedPath + &quot;\&quot;, \&quot;popupwindow\&quot;, \&quot;scrollbars=yes,width=550,height=520\&quot;); return true&quot;' method='post' target='popupwindow'>

<input name='email' placeholder='Your email address' title='Email' type='text'/>

<input name='uri' type='hidden' value='RIFKIABLE'/>

<input name='loc' type='hidden' value='en_US'/>

<input class='submitbutton' type='submit' value='Subscribe'/>

</form>

</div>

</div>

</div>

</div>

<!--End -->

Setelah itu pergi ke bagian </b:skin>, lalu letakkan kode CSS berikut tepat di atasnya:

/* Subscribe */

#na-wrapper{background:transparant;width:100%;border-top:1px solid rgba(0,0,0,0.0)}.invertsubs-content{max-width:970px;margin:0 auto;overflow:hidden;padding:0;position:relative}#invertsubs-subs{text-align:center;width:100%;height:auto;border-radius:2px;padding:0}#invertsubs-subs .emailfield form.invertsubs-form{position:relative;margin:0 auto 20px auto;overflow:hidden;width:65%}#invertsubs-subs p{font-size:18px;color:#afafaf;padding:20px;margin:0;overflow:hidden}#invertsubs-subs .emailfield{padding:0 20px 10px}#invertsubs-subs .emailfield input{width:100%;color:#263238;padding:15px;font-size:13px;border:0;background:rgba(255,255,255,1);border:1px solid rgba(0,0,0,0.08)}#invertsubs-subs .emailfield input:focus{color:#000;outline:0}#invertsubs-subs .emailfield input::-webkit-input-placeholder{color:#263238}#invertsubs-subs .emailfield input::-moz-placeholder{color:#263238}#invertsubs-subs .emailfield input:-ms-input-placeholder{color:#263238}#invertsubs-subs .emailfield input:-moz-placeholder{color:#263238}#invertsubs-subs .emailfield .submitbutton{display:inline-block;position:absolute;right:0;top:0;background:#7f00fd;color:rgba(255,255,255,1);font-size:14px;border:0;outline:0;cursor:pointer;width:20%;border-radius:0;transition:all 0.5s}#invertsubs-subs .emailfield .submitbutton:active,#invertsubs-subs .emailfield .submitbutton:focus{color:#fff;border:0;outline:0}#invertsubs-subs .emailfield .submitbutton:hover{background:#7f00e9;color:rgba(255,255,255,1);box-shadow:0 10px 20px -10px rgba(0,0,0,0.1)}

@media screen and (max-width:768px){#invertsubs-subs .emailfield form.invertsubs-form{width:95%}#invertsubs-subs .emailfield .submitbutton{width:auto}}

Selesai, kalian bisa merubah warna dan placeholder-nya sesuai yang kalian inginkan. klik SIMPAN lalu refresh halaman websitenya. 

Demikian, semoga artikel ini bermanfaat. Jika menurutmu artikel ini bermanfaat silahkan bagikan ke orang-orang yang sehobi dan yang masih dalam tahap belajar.