Cara Membuat Widget RSS Subscribe Keren Lengkap dengan Social

Pada postingan kali ini, saya akan memberitahu pada kalian bagaimana caranya menambahkan Widget RSS Subsrcibe lengkap dengan tombol social media. Subscribe ini penting untuk menambah traffic blog, karena para subscriber akan mendapatkan link pada email mereka apabila terdapat berita terbaru dari blog anda. Widget ini tampak bagus dengan perpaduan warna yang sesuai dengan blog rata-rata, dan widget ini disertai dengan link social media yang akan mengarahkan pada Facebook, Twitter dan Feed Burner anda. Berikut adalah gambar widgetnya :

Untuk yang penasaran ingin memasangnya, silahkan ikuti tutorial berikut :

1. Login pada Blogger dan pilih Layout

2. Pilih Add Gadget dan klik pada HTML/Javascript

3. Copy script berikut

<style>
.btrixsocial_box-email{
background:Fff no-repeat 0px 12px ; width:270px;float:center;font-size:1.4em;font-weight:bold;margin:2px 20px 0px 10px;color:#686B6C;
}
.btrixsocial_box-emailsubmit{
background:#0084CE;cursor:pointer;  color:#fff; border:none;padding:3px;margin:0 0 0px 0;text-shadow:0 -1px 1px rgbaundefined0,0,0,0.25);
-moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; font:12px sans-serif;
}
.btrixsocial_box-emailsubmit:hover{
background:#E98313;
}
.textarea{
padding:2px; margin:0px 2px 0px 2px; background:#f9f9f9; border:1px solid #ccc; resize:none; box-shadow:inset 1px 1px 1px rgbaundefined0,0,0,0.1);
-moz-box-shadow:inset 1px 1px 1px rgbaundefined0,0,0,0.1); -webkit-box-shadow:inset 1px 1px 1px rgbaundefined0,0,0,0.1); font-size:13px;   width:200px; height:20px;color:#666;}
#socialboxbt
{
text-align:center;font-weight:bold;padding:5px;border:1px solid black;width:300px;
-moz-box-shadow: 0px 0px 8px #000000;-webkit-box-shadow: 0px 0px 8px #000000;box-shadow: 0px 0px 8px #000000;}
</style>
<br />
<div id="socialboxbt">
<a href="http://feeds.feedburner.com/bloggunkde" imageanchor="1" rel="nofollow" style="float: center; margin-left: .5em; margin-right: 1em;" target="blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8wgB_JuS9CoaxRbEkSzy4OUXY93uHQLkml956Ng1I8aVDqEbA8RzfdIi37yKQ9yQTfGOdJIhdauOksXioGcYp6zBK3TaAL68LThkD-jw-Lmh_9wxCp96rVnOkQvDxValdaBpB7iM9tlzY/s1600/rss.png" /></a>
Submit your Email Address to Get Free latest Articles Directly to your Inbox
<br />
<div class="btrixsocial_box-email">
<form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=bloggunkde', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="textarea" gtbfieldid="3" name="email" onblur="if undefinedthis.value == &quot;&quot;) {this.value = &quot;Enter email address here&quot;;}" onfocus="if undefinedthis.value == &quot;Enter email address here&quot;) {this.value = &quot;&quot;;}" type="text" value="Enter email address here..." />
<input name="uri" type="hidden" value="bloggunkde" /><input name="loc" type="hidden" value="en_US" />
<input class="btrixsocial_box-emailsubmit" type="submit" value="Submit" />
</form>
</div>
<style class="text/css">
table
{border-bottom: 0px solid #E6E6E6;float: center;width: 300px;margin:-8px 0 0 0px;}
.subicons
{border-right: 0px solid #E6E6E6;}
.Fadeout {filter:alphaundefinedopacity=100);opacity: 1.0;border:0;
}
.Fadeout:hover{filter:alphaundefinedopacity=80);opacity: 0.8;border:0;
}
</style>
<br /><div class="table"><table>
<tbody><tr>
<td><div class="subicons">
<a class="Fadeout" href="http://www.facebook.com/bloggunkde" imageanchor="1" rel="nofollow" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8m6Zn5cbu2P8U3d83rPIwkbz84v6mthBLilIVnq4lQjpoafOSxujIWBkkehskb6LTA5dyF-2c1nZ13Fpz0ruy1ViXFaQvfJNUkBKNQZ1cWVcKwk9hVh0OPjQYNp7DUQTFccDp7MxBcks/s1600/btrix-facebook-icon.png" /></a></div>
</td><td><div class="subicons">
<a class="Fadeout" href="http://twitter.com/bloggunkde" imageanchor="1" rel="nofollow" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXOcti3Na_VdNuXNuOojm8pgOGJ_E0F_74jZuwUngER859B02ia2gb7pHbc4uGXkceAfK5nkfShATYcnzi9QFYkvoiArunWJ6Db82rtOf9NXopTnTSPlxwpp2_9POQKKLgxfE6jxiFph0/s1600/btrix-twitter-icon.png" /></a></div>
</td>
<td><div class="subicons">
<a class="Fadeout" href="http://feeds.feedburner.com/bloggunkde" imageanchor="1" rel="nofollow" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWU6txFjgSm3niXt52ZnpriyPPoj7ITWtgWPxHRgbHG4RlHcyH1ZexvOL6pzQZLMjh_o4CM4NU1xQJ-u_oIVjCVM_AlWYU4No4RgEAGX_wbgFXaGXGjmK59y7G-C785NO0mecmxKM3O3Q/s1600/btrix-rss-icon.png" /></a></div>
</td>
<td><a class="Fadeout" href="https://pinterest.com/bloggunkde" imageanchor="1" rel="nofollow" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3a8B0ODBBgjQWPVL0gPSCBiJdR7Kdmq9TFHYjXWSP_kYXuhX76AyOP5L7mbhZl4vlatK688kqwkC0fD8MxZ9GrExHlzY3z2NpytIqTnLHD7zTqWStP1gKLm4GE02Mi-1mP9CG3k8x_QM/s1600/btrix-Pinterest-icon.png" /></a></td>
</tr></tbody></table></div></div>

Nb :
Ganti bloggunkde dengan akun Feed Burner anda
Ganti bloggunkde dengan akun Facebook anda
Ganti bloggunkde dengan akun Twitter anda
Ganti bloggunkde dengan akun Pinterest anda

4. Save Widget anda

Jadi sekian dulu posting tentang cara memberikan Widget RSS Subscribe

Selamat Mencoba ! 

(Sumber : http://www.bloggertrix.com/)

Tweet