Cara Membuat Widget Subscribe Box di Blogger - Dilengkapi Tombol Follow Media Sosial

Cara Membuat Widget Subscribe Box di Blogger - Dilengkapi Tombol Follow Media Sosial

Cara Membuat Widget Subscribe Box di Blogger (Dilengkapi Tombol Follow Media Sosial) | Widget subscribe box atau berlangganan e-mail merupakan salah satu bagian terpenting dari sebuah blog.

Penjelasan Singkat mengenai Widget Subscribe Box

Widget ini dapat mendatangkan blog kalian pengunjung yang banyak. Karena, setiap pengunjung yang mengisikan e-mail mereka pada kotak subscribe ini, otomatis mereka akan selalu mendapatkan informasi terbaru dari blog kalian.

Tak hanya berfungsi sebagai berlangganan e-mail saja, widget subscribe box ini juga dilengkapi tombol ikon follow media sosial juga. Dimana, hal tersebut bisa menjadikan blog kalian memiliki dua keuntungan yakni mendapatkan pengunjung gratis lewat e-mail dan media sosial.

Tentunya, widget ini telah dirancang dengan responsive dan cocok untuk segala jenis template blog kalian. Untuk tutorial membuat dan pemasangan widget subscribe box, kalian simak saja pembahasan berikut ini.

Cara Membuat Widget Subscribe Box di Blogger - Dilengkapi Tombol Follow Media Sosial

  • Pertama, login ke akun blogger kalian. Selanjutnya, kalian kunjungi situs Feedburner dan salin nama/ID feedburner blog kalian. Cara Mengetahui ID Feedburner Blog Sendiri
  • Kedua, kalian harus memasang ikon Fontawesome. Jika sebelumnya blog kalian sudah memasang fontawesome, abaikan langkah yang ini. Buka dashboard blogger, klik Tema => Edit HTML => pastekan kode dibawah ini sesudah 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'/>
  • Tetap pada halaman Edit HTML, kalian pastekan kode CSS dibawah ini sebelum kode ]]></b:skin> dan simpan perubahan.
#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} 
  • Ketiga, kalian buka Tata Letak => klik Tambahkan Gagdet (Bebas dimana saja) => pilih HTML / Javascript => pastekan kode dibawah ini di bagian 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=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"> 

Konfigurasi
  • Ubah semua tag # dengan url media sosial milik kalian.
  • Ubah semua tulisan YOUR-USER-NAME dengan nama Feedburner blog kalian.

Akhir Kata …

Semoga, kalian senang dengan tampilan widget subscribe box diatas. Apabila kalian menemukan kesulitan, kalian bisa menanyakan masalah tersebut di komentar. Sekian artikel tentang cara membuat widget berlangganan email di blog (dilengkapi tombol follow media sosial) dan Terimakasih.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel