Friday 24 November 2017

Widget Blog - Cara Membuat Widget Subscription

Salah satu widget yang wajib kamu pasang di blog adalah Subcription box. Widget ini sangat bermanfaat guna meningkatkan visitor blog kamu, karena dapat mengingatkan pengunjung untuk berlanggangan artikel di blog kamu.


Baca Juga : Cara Membuat Widget Flag Counter

Selain itu jika blog kamu memiliki banyak pelanggan otomatis akan meningkatkan Page Rank kamu, dan juga dapat memperoleh banyak Backlink. Blogger.com sebenarnya sudah menyediakan widget ini, tapi mungkin kamu kurang suka dengan model defaultnya. Nah, untuk tampilan Subscription box yang akan Gomu Gomu Ku berikan, seperti berikut..




Sebelumnya, kamu harus memiliki akun feedburner terlebih dahulu, jika kamu belum punya silahkankan daftar DISINI..

Ok, jika kamu sudah memiliki akun feedburner, kamu tinggal ikutin langkah-langkah berikut ini..

1. Login ke akun blogspot kamu
2. Kemudian masuk ke menu Tata Letak
3. Klik Add Gadget diposisi yang kamu inginkan
4. Pilih HTML/JavaScript 
5. Setelah itu masukkan kode dibawah ini

<style>
.ujangyoyo-email{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2i6RRXzDGtCmn413qgu-Y3FuWzvBJrvEkTr66uCfCrE5KZi6E4Wc_CTXvejKeYx3hIZpXXTtL9kN8ypeZT6gAohrBztov7jCm92I3I5rR7XHqHnlPrGCVFR7KuhuBRZfMJzCwzTcA5vI/s1600/shinemat-email-icon.jpg) no-repeat 25px 1px ;
width: auto;
float: left;
font-family: Arial;
font-size: 1.2em;
font-weight: bold;
margin: -1px 10px -5px -20px;
color: #686B6C;
}
.ujangyoyo-emailsubmit{
background: #131313;
border: 1px solid #000000;
cursor: pointer;
color:#ffffff;
padding: 4px;
text-shadow: 0 -1px 1px #080000;
-moz-border-radius: 6px;
border-radius: 6px;
font:15px "Arial";
font-weight: bold;
}
.ujangyoyo-emailsubmit:hover{
background: #3C3B3B;
border:1px solid #000000;
-moz-box-shadow: 0 0 5px #3A3A3A;
box-shadow: 0 0 5px #3A3A3A;
}
.ujangyoyo-textarea{
padding: 4px;javascript:void(0)
margin: 6px 2px 6px 2px;
background: #f9f9f9;
border: 1px solid #BFBBBB;
resize: none;
-moz-box-shadow: 0 0 5px #3A3A3A;
box-shadow: 0 0 5px #3A3A3A;
font-size: 13px;
width: 160px;
color: #FF7D00;
}
.ujangyoyo-textarea:hover{
border-color: #000000;
-moz-box-shadow: 0 0 5px #3A3A3A;
box-shadow: 0 0 5px #3A3A3A;
}
.ujangyoyo a{
padding: 3px 3px 3px 3px;
display: inline-block;
background: #F4F1F1;
border: solid 1px #C9C9C9;
border-radius: 4px;
-moz-border-radius: 4px;
}
.ujangyoyo a:hover {
border-color: #727171;
-moz-box-shadow: 0px 0px 3px #7C7C7C;
box-shadow: 0px 0px 3px #7C7C7C;
}
.ujangyoyo-followbox{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA7kmm5gQRcL_Bmpb_XMPo7f7RDTAOtCnAPedVfC9mMXFJ8iDuC5hbQilwsgpeyeh7a1aZXscLxtRm0Slm0R4jB1XQZJf2_9gtNr3IgLPhLWv01rrHkXsYgVqjLQc19ejtn3aF24jYU0g/s1600/fb-twitter-shinemat.png) no-repeat 237px 53px ;
padding: 5px;
border: 1px solid #C9C9C9;
-moz-border-radius: 8px;
border-radius: 8px;
color: #686B6C;
}
.ujangyoyo-followbox:hover{
background: #F5FCFE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUCMD3MMGgNA0IQ_F3ou0ZdNlGRt6xGJfDRYO3t07ZnvcXB_x_Zlrhd8f7CJcN_LuwtVBZtEC3vle-jeNwmpgwCggG99F21U7HBk_0GcMJbbcjaJ0dRDNv4D9P8rFVCqdWENHcZkYA0vE/s1600/fb-twitter-shinemat-hover.png) no-repeat 237px 53px ;
padding: 5px;
border: 1px solid #727171;
-moz-border-radius: 8px;
border-radius: 8px;
-moz-box-shadow: 0px 0px 3px #7C7C7C;
box-shadow: 0px 0px 3px #7C7C7C;
}
</style>
<center>
<div class="ujangyoyo-email">
Subscribe via Email
<form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=gomugomuku', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="3" class="ujangyoyo-textarea" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter email address here&quot;;}" onfocus="if (this.value == &quot;Enter email address here&quot;) {this.value = &quot;&quot;;}" value="Enter email address here" type="text" /><input type="hidden" value="gomugomuku" name="uri"/><input type="hidden" name="loc" value="en_US"/><input class="ujangyoyo-emailsubmit" value="Submit" type="submit" />
</form></div><br /><br /><br />
<b><font size="2" face="Arial" color="#686B6C">...and receive awesome posts to your mail inbox</font></b>
</center>

6. Ganti tulisan merah (Judul Widget) dengan kalimat pendukung yang kamu suka.
7. Ganti tulisan berwarna biru (Username Feedburner) dengan username akun feedburner kamu.
8. Ganti tulisan berwarna coklat (Tulisan dalam kotak Subscription) dengan kalimat pendukung yang kamu suku.
9. Terakhir simpan widget kamu.. dan reload page blog kamu untuk melihat hasilnya.

Ok, sampai disini dulu Artikel Gomu Gomu Ku kali ini, jangan lupa dishare ya.

Sampai ketemu di Artikel selanjutnya.
Salam... Happy Blogging...

0 komentar:

Post a Comment