Sebuah widget Feedburner langganan email dapat membawa sejumlah besar pengunjung di blog Anda. Pengunjung berlangganan di blog Anda dengan menempatkan email mereka dan mereka selalu mendapatkan update baru Anda pada email mereka. Email formulir berlangganan pada blogger adalah widget penting.
- Email Subscribe Widgets untuk Blogger
Jika Anda menempatkan widget berlangganan email pada sidebar, itu akan lebih baik. Tapi popup dan di bawah setiap posting juga tempat yang baik untuk menambahkan email kotak berlangganan di blogger. Hari ini saya berbagi 2 email sidebar kreatif widget kotak berlangganan untuk blogger.
- latar belakang gelap dengan ikon sosial
- widget warna-warni dengan name box
- Bagaimana cara kerjanya?
Semua orang tahu tentang feedburner google. Singkatnya, RSS google feedburner paling populer layanan web pakan. Jika ada yang berlangganan pada blog Anda dengan email mereka, maka feedburner akan memberikan atau mengirim postingan terbaru Anda pada semua email yang berlangganan dengan blog Anda. Dalam tutorial ini saya dengan 2 widget kotak berlangganan untuk blogger. Dengan menggunakan widget ini Anda juga dapat meningkatkan pengunjung blog Anda.
Pergi ke link berikut dan langsung mendaftar dengan alamat blog Anda dan email Anda: feedburner.google.com. Jika sudah mendaftar, silahkan copy nama/username feedburner Anda dan paste itu di notepad dahulu.
Sekarang mari kita mulai tutorialnya.
- Bagaimana cara pendaftaran di feedburner?
Pergi ke link berikut dan langsung mendaftar dengan alamat blog Anda dan email Anda: feedburner.google.com. Jika sudah mendaftar, silahkan copy nama/username feedburner Anda dan paste itu di notepad dahulu.
Sekarang mari kita mulai tutorialnya.
- 1 - latar belakang gelap dengan ikon sosial
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>Jika di template Anda tidak ada kode tersebut, silahkan copy kode diatas dan letakan tepat dibawah <head>
<link href='//fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'/>
2. Sekarang kita tambahkan CSS follow by email dengan style latar belakang gelap di template Anda. Copy kode dibawah ini dan letakan tepat sebelum kode </style>
#subscribebox{background:#576269;padding:20px;font-family:'PT Sans',sans-serif;}Save template.
.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}
3. Jika sudah, silahkan menuju Layout/Tata Letak klik tambahkan widget/add widget pilih HTML/Javascript dan copy kode dibawah ini lalu save.
<div id="subscribebox">Keterangan:
<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('http://feedburner.google.com/fb/a/mailverify?uri=YOUR-USER-NAME'popupwindow', 'scrollbars=yes,width=550,height=520');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 == "") {this.value = "Your Email";}' onfocus='if (this.value == "Your Email") {this.value = "";}' value='Your Email'/>
<input class="subscribe-button" type="submit" value="Subscribe" />
</form>
</div>
- Ganti semua tag # dengan semua link sosial media Anda.
- Ganti semua teks YOUR-USER-NAME dengan username/nama feedburner Anda.
- 2 - widget warna-warni dengan name box
Anda dapat menggunakan widget ini di bawah setiap postingan. berlangganan kotak widget ini dibuat dengan css sederhana dengan latar belakang berwarna-warni. Dalam langganan email ini pengunjung widget dapat menulis nama mereka. Dengan kotak nama membuat widget ini lebih profesional. Dalam widget ini Anda dapat mengubah berlangganan kotak pos. Default pos adalah: "Subscribe for our all latest news and updates". Sekarang mari kita mulai tutorial nya.
#subscribe-box {background-color:#0CC388;font-family: 'PT Sans', sans-serif;}Save template.
#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;}
Sekarang menuju Layout/Tata Letak -> Tambahkan Widget/Add Widget -> HTML/Javascript dan masukan kode dibawah ini lalu save.
<div id="subscribe-box">Keterangan:
<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 == "") {this.value = "Your Name";}" onfocus="if (this.value == "Your Name") {this.value = "";}" type="text" value="Your Name" />
<input name="email" onblur="if (this.value == "") {this.value = "Your Email";}" onfocus="if (this.value == "Your Email") {this.value = "";}" 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>
- Ganti semua USER-NAME dengan username feedburner Anda.
Saya harap 2 widget berlangganan email ini dapat membantu Anda. Jika Anda menemukan masalah, silahkan memberitahukan pada bagian komentar, saya akan mencoba untuk memecahkan masalah Anda. Dan jangan lupa untuk beritahu postingan saya ini pada teman-teman Anda. Terima kasih.
No comments:
Post a Comment