Cara Simpel Membuat Email Berlangganan Widget untuk Blogger

Oleh:   Unknown Unknown   |   September 02, 2017
Cara menambahkan widget berlangganan feedburner email untuk blogger | Email berlangganan widget adalah bagian terpenting dari setiap blogger. Tahukah sobat apa itu widget email subscribe? Iya nih! ini mengumpulkan lalu lintas dalam jumlah besar untuk blog Sobat.


Widget berlangganan email Feedburner dapat membawa sejumlah besar pengunjung di blog Sobat. Pengunjung berlangganan di blog Sobat dengan memasukkan email mereka dan mereka selalu mendapatkan update baru Sobat di email mereka. Formulir berlangganan email di blogger adalah widget yang penting.

Bagaimana cara kerjanya?
Semua orang tahu tentang feedburner google. Singkatnya, google feedburner adalah RSS feed layanan web yang paling populer. Jika ada yang berlangganan blog Sobat dengan email mereka, maka feedburner akan mengirimkan posting terbaru Sobat ke semua email berlangganan. Dengan menggunakan widget ini Sobat juga bisa menumbuhkan pengunjung blog Sobat.

Gambar Widget nya

Pertama sobat perlu menambahkan icon fontawesome dan font font PT Sans. Jika sudah ditambah maka abaikan langkah 1

Langkah 1: Pergi ke Blogger Dashboard> Template> Edit HTML dan paste di bawah kode tepat setelah <head>

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
<link href='//fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'/>

Langkah 2: Sekarang perlu menambahkan Kode CSS sebelum </ style>

#subscribebox{background:#576269;padding:20px;font-family:&#39;PT Sans&#39;,sans-serif;}
.widget_follow_subscribe .widget-detail{padding:36px 30px 40px}
#subscribebox p{color:#fff;font-size:15px;text-align:center;font-weight:700}
.follow-subscribe-social{margin:0 0 15px;padding:0 0 14px;border-bottom:#858585 solid 1px}
.follow-subscribe-social ul{list-style:none;margin:0;padding:0;text-align:center}
.follow-subscribe-social ul li{display:inline;margin:0 15px 0 0;border-bottom:none}
.follow-subscribe-social ul li:last-child{margin:0}
.follow-subscribe-social ul li a{font-size:17px;color:#cacaca;-webkit-transition:color .2s ease-in-out;-moz-transition:color .2s ease-in-out;-ms-transition:color .2s ease-in-out;-o-transition:color .2s ease-in-out;transition:color .2s ease-in-out}
.follow-subscribe-social ul li a:hover{color:#fff}
form.subscribe{margin-top:-7px}
form.subscribe input{display:block;width:100%}
.subscribe-email{height:45px;border:none;margin:0 0 10px;font-size:.928571em;background-color:rgba(255,255,255,0.2);text-align:center;color:#fff}
.subscribe-email:focus{outline:0}
form.subscribe .placeholder{color:#cacaca}
form.subscribe input:-ms-input-placeholder{color:#cacaca}
form.subscribe input::-webkit-input-placeholder{color:#cacaca}
form.subscribe input:-moz-placeholder{color:#fafafa}
form.subscribe input::-moz-placeholder{color:#fafafa}
.subscribe-button{height:45px;font-weight:700;font-size:16px;color:#fff;text-transform:uppercase;border:none;background-color:#F35D5C;-webkit-transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out;-ms-transition:background-color .2s ease-in-out;-o-transition:background-color .2s ease-in-out;transition:background-color .2s ease-in-out}
.subscribe-button:hover{background-color:#f1d640}
.subscribe-button:focus{outline:0}
.creadit a{color: #A7A6A6; float: right; font-size: 8px;}

- Simpan Template

Sekarang masuk ke Layout> Add a gadget> HTML / Javascript dan past di bawah kode HTML dan simpan widget.

<div id="subscribebox">
<div class="follow-subscribe-social">
<ul>
<li><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-google"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-pinterest-p"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-dribbble"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
<p>Subscribe to my Newsletter</p>
<form class="subscribe" action='http://feedburner.google.com/fb/a/mailverify?uri=YOUR-USER-NAME' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=YOUR-USER-NAME, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='YOUR-USER-NAME'/>
<input name='loc' type='hidden' value='en_US'/>
<input class="subscribe-email" type='text' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Your Email&quot;;}' onfocus='if (this.value == &quot;Your Email&quot;) {this.value = &quot;&quot;;}' value='Your Email'/>
<input class="subscribe-button" type="submit" value="Subscribe" />
</form>
</div>
<div class="creadit">
<a href="http://blogger-templatees.blogspot.com" rel="dofollow" target="_blank"> Get This Widget</a></div>

Kustomisasi:

Ubah semua # tag dengan semua tautan media sosial Sobat.
Ubah semua USER-NAME dengan nama pengguna feedburner Sobat.

Dan akhirnya jangan lupa untuk berbagi posting kita dengan teman Sobat. Terima kasih.

Tampilkan Komentar