Cara Pasang Email Subscribe plus Link Media Sosial di Sidebar Blogger

Baca Juga

Cara Memasang Form Email Subscribe plus Link Media Sosial di Sidebar Blogger.

Form Email Subscribe adalah widget di sidebar Blogger untuk memudahkan pengunjung berlangganan posting blog via email.

Begitu ada posting baru, pengunjung akan menerima newsletter dari Feedburner Google berisi posting terbaru dari blog kita.

Form email subscibe berikut ini plus Link Media Sosial. Dipasang di Sidebar. Penampakannya seperti ini.

Di bagian atas ada ikon dan link akun media sisial, seperti Facebook, Twitter, LinkedIn, dan Instargram. Di bagian bawahnya form isian untuk pengunjung memasukkan alamat emailnya.

Widget Email Subscribe bisa meningkatan pengunjung blog karena ada notifikasi kepada pelanggan begitu ada tulisan baru atau ada artikel yang diupdate.

Cara Pasang Email Subscribe plus Link Media Sosial di Sidebar Blogger

Berikut ini Cara Memasang Email Subscribe plus Link Media Sosial di Sidebar Blogger.

1. Di Dashboard Blogger, klik Tempa > Edit HTML
2. Copas kode berikut ini di atas 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'/>

Jika kedua kode di atas sudah ada di template blog Anda, gak usah dipasang. Langsung aja ke langkah ketiga berikut ini.

3. Copas kode berikut ini di atas kode </head>

<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}
</style>

4. Save! Simpan Template.
5. Klik Layout > klik Add a gadget > pilih HTML/Javascript
6. Copas kode HTML Email Subscribe plus Link Media Sosial berikut ini di kolom konten

<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=blogromeltea, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='blogromeltea'/>
<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>

Catatan:
1. Ganti semua kode # dengan alamat akun medsos Anda.
2. Ganti blogromeltea dengan username akun feedburner blog Anda.
3. Jika belum punya username Feedburner, buat dulu di Feedburner Google.

Demikian Cara Pasang Email Subscribe plus Link Media Sosial di Sidebar Blogger. (blogromeltea.blogspot.com).*

Sumber: Codepen

See the Pen Subscribe box widget by JawaDev (@JawaDev) on CodePen.