Best Email Subscribe Widget Design for Blogger

Desain Email Berlangganan Keren untuk Blog Anda - Di penghujung akhir pekan ini akan kami berikan sebuah informasi mengenai cara memasang email subscribe atau email berlangganan artikel dengan desain yang keren untuk dipasang di blog Anda.

Optimasi blog dengan memanfaatkan email subscribe atau artikel berlangganan memang menjadi salah satu hal yang paling efektif untuk meningkatkan trafik blog secara alami (natural traffics). Hal itu dikarenakan dengan banyaknya pembaca yang berlangganan atikel kita, maka mereka akan menjadi pengunjung setia kita.
Untuk contohnya kotak berlangganan artikel yang keren bisa sobat lihat pada salah satu template paling SEO killer dari SL Blogger, yakni SL Fastest SEO yang terletak di atas related post.
Maka dengan itu, kali ini saya akan memberikan dua cara mudah memasang box email subscribe / kotak artikel berlangganan dengan desain yang mengesankan. Desain kali ini saya peroleh dari MS Design.

2 Best Email Subscribe Widget Design for Blogger

Langsung saja berikut cara mudah memang kotak berlangganan dengan desain keren seperti halnya yang dipasang pada blog Ma Sugeng:

1. Silakan masuk akun blogger
2. Silakan buka dashboard > pilih template mode html
3. Copas kode di bawah ini di bawah kode <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'/>
4. Copas kode CSS di bawah ini sebelum kode </style> atau di atas kode ]]></b:skin>
#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;}
5. Save template.

Selanjutnya silakan buat widget baru (pada mode Html/JavScript) dan copas kode di bawah ini ke dalamnya:
<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://msdesignbd.com" rel="dofollow" target="_blank"> Get This Widget</a></div>
6. Silakan save widget baru tersebut.

Note: 
- Silakan ganti kode dengan kode url yang anda tentukan
- Silakan sesuaikan kode YOUR-USER-NAME dengan feedburner Anda 
7. Selesai

Mudah bukan?

Jika berhasil tampilannya kurang lebih seperti ini:

Best Email Subscribe Widget Design for Blogger 1

Ingin dengan desain kotak email subscribe keren lainnya? Nih saya berikan juga caranya. 
Langkah-langkahnya sama dengan cara pertama di atas. Namun ada beberapa kode yang berbeda. 
Untuk langkah ke empat di atas, silakan tempatkan menggunakan kode CSS di bawah ini:
#subscribe-box {background-color:#0CC388;font-family: 'PT Sans', sans-serif;}#subscribe-box p {font-size:22px;color:#fff;line-height:20px;padding:10px 20px 0 20px;margin:0;}#subscribe-box .emailfield {padding:0px 20px 10px;}#subscribe-box .emailfield input {background:#f9f9f9;color:#bbb;padding:10px;margin-top:10px;font-size:13px;width:91%;border:0;transition:all 0.4s ease-in-out;}#subscribe-box .emailfield input:focus {background:#fff;outline:none;color:#888;}#subscribe-box .emailfield .submitbutton {background:#444;color:#fff;text-transform:uppercase;font-weight:700;font-size:18px;font-family: 'PT Sans', sans-serif;;border:none;outline:none;width:100%;cursor:pointer;border-radius:3px;transition:all 0.4s ease-in-out;}#subscribe-box .emailfield .submitbutton:active {outline:none;border:none;background:#fff;color:#e25734;}#subscribe-box .emailfield .submitbutton:hover{background:#fff;color:#444;}
.creadit a{color: #A7A6A6; float: right; font-size: 8px
Selanjutnya silakan masukkan kode di bawah ini pada widget baru mode Html/JavaScript seperti setelah langkah ke lima di atas:
<div id="subscribe-box">
<center>
Subscribe for our all latest news and updates</center>
<div class="emailfield">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=USER-NAME" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=USER-NAME, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="name" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Your Name&quot;;}" onfocus="if (this.value == &quot;Your Name&quot;) {this.value = &quot;&quot;;}" type="text" value="Your Name" />
<input 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;;}" type="text" value="Your Email" />
<input name="uri" type="hidden" value="USER-NAME" />
<input name="loc" type="hidden" value="en_US" />
<input class="submitbutton" type="submit" value="Subscribe Now" />
</form>
</div>
</div>
<div class="creadit">
<a href="http://msdesignbd.com/" rel="dofollow" target="_blank"> Get This Widget</a></div>
Selanjutnya tinggal save widget.
Note:
- Silakan sesuaikan kode USER-NAME dengan feedburner Anda
Untuk hasilnya seperti gambar di bawah ini:

Best Email Subscribe Widget Design for Blogger 2

Mudah bukan?

Read also: Cara Memasang Komentar Terpopuler (Most Commented) di Sidebar Blog

Demikian sekilas informasi mengenai Best Email Subscribe Widget Design for Blogger. Jika ada hal yang masih perlu didiskusikan dengan tips desain blog kali ini, silakan tinggalkan pesan di kolom komentar. Bantu shared juga artikel ini ya jika dirasa bermanfaat. Semoga bermanfaat dan salam sukses selalu. 

3 Responses to "Best Email Subscribe Widget Design for Blogger"

  1. Pas Banget... Ini dia yang saya cari2 niih. Tpi knapa ya kalau ada yang subscribe feedburner saya tidak mendapatk email konfirmasi di emailnya? Hasilnya status visitor yang subscribe hanya "unactivated".

    Mohon Bantuannya
    terima kasih

    ReplyDelete
    Replies
    1. silakan lakukan setting deafault di feed burner akun mas..

      Delete

Silakan masukkan komentar Sobat di sini!

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Hosting Unlimited Indonesia