Cara Membuat Widget Berlangganan Sederhana pada Blog

KURAZONE ~ Halo sahabat Kurazer, pada kesempatan kali ini saya share mengenai "Cara Membuat Widget Berlangganan Sederhana pada Blog". Widget ini sangat cocok apabila diletakkan dibagian akhir postingan maupun dibagian sidebar blog. 

Cara kerja dari widget berlangganan ini adalah memanfaatkan fitur dari feedburner yang akan mengirmkan pesan yang berisi artikel terbaru kepada pelanggan yang telah berlangganan memasukkan email mereka melalui widget Berlangganan. 

Dengan memasang widget Berlangganan ini berpotensi dapat meningkatkan jumlah visitor pada blog, namun tentunya harus diimbangi dengan artikel yang menarik dan berkualitas. Supaya Pelanggan tidak merasa sia-sia berlangganan pada blog kalian.

Bagi yang belum memiliki akun feedburner, bisa melakukan pendaftaran disini > http://feedburner.google.com/

Nah, langsung saja :
1. Buka Akun Blogger >> Pilih TEMA >> Pilih Edit HTML
2. Copy kode Eksternal CSS dibawah ini, dan letakkan (paste) diatas kode </head>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"></link>
<link href="//fonts.googleapis.com/css?family=PT+Sans:400,700" rel="stylesheet" type="text/css"></link>
3. Copy kode CSS dibawah ini, dan letakkan (paste) diatas kode ]]></ b:skin>
#subscribebox{width:300px;background:#123456;padding:20px;font-family:'PT Sans',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;padding:5px;background:#123}
.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:#007bfd;-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:#123456}
.subscribe-button:focus{outline:0}
.post-body li:before{display:none}
4. Simpan Template

Selanjutnya, kalian bisa menentukan mau diletakkan dimana widget Berlangganan ini.

#1 Meletekkan diakhir postingan blog

1. Masih berada di Menu Tema >> Edit HTML
2. Cari kode <data:post.body/> (kode ini biasanya lebih dari 1, silahkan kalian tentukan mana yang cocok pada template blog kalian)
3. Copy kode HTML dibawah ini, dan letakkan (paste) dibawah kode <data:post.body/>
<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 style="color:white">Yuks!! Berlangganan Artikel Kurazone</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>
4. Simpan Template

#2 Meletakkan dibagian sidebar blog

1. Pilih menu Tata Letak
2. Add widget yang berada dibagian sidebar >> pilih HTML/JavaScript
3. Copy kode HTML dibawah ini, dan letakkan (paste) dibagian isi gadget
<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 style="color:white">Yuks!! Berlangganan Artikel Kurazone.</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>
4. Simpan Gadget

NOTE :
  1. Ubah YOUR-USER-NAME menjadi username feedburner kalian
  2. Ubah tnada pagae (#) menjadi URL sosial media kalian
  3. Ubah width:300px ke width:100% apabila ingin tampilannya menyesuaikan wadah
  4. Masalah warna bisa kalian explore sendiri di kode #123, #007bfd dan #123456
  5. Sisanya bisa kalian kembangkan sendiri

DEMO

Yuks!! Berlangganan Artikel Kurazone



Itulah informasi mengenai "Cara Membuat Widget Berlangganan Sederhana pada Blog", selamat mencoba dan semoga bermanfaat. Goodluck!








Lebih baru Lebih lama