Cara Membuat Widget Subscription/Langganan Di Blogger

Widget langganan sosial adalah hal yang paling penting untuk ditambahkan ke blog Anda, yang tidak hanya membantu untuk meningkatkan lalu lintas tetapi mengkonversi pembaca satu waktu Anda untuk kembali satu. Anda mungkin melihat banyak widget berlangganan sosial dalam satu blog yang ditambahkan dengan maksud pelanggan meningkat dari blog tetapi sebenarnya dampaknya negatif seperti yang terlihat jelek dan tidak ada yang akan ingin menghabiskan waktu mereka untuk membaca sesuatu di tempat yang buruk. Blog Anda harus jelas dengan latar belakang eye catchy yang bisa pembaca blog Anda bisa merasa nyaman saat membaca artikel di blog Anda dan juga mereka akan ingin menghabiskan lebih banyak waktu di rawa Anda dalam membaca artikel. Ada banyak manfaat membuat blog Anda sederhana dan jelas. tapi apa widget tentang langganan sosial? jika blog Anda memiliki lebih banyak ruang pada lokasi tertentu maka di sini hadir sebuah widget berlangganan sosial lainnya sempurna untuk blogger / blogspot. Setelah menambahkan widget ini ke blog Anda, Anda tidak perlu menggunakan ruang lain dari blog Anda untuk menunjukkan widget berlangganan. Dalam widget ini berisi Facebook, Twitter, RSS, E-mail dan berlangganan dengan fitur email dan ini cukup untuk setiap blog.

Cara Install Widget Subscription/Langganan Di Blogger:

1.Login Blogger > Template > Edit HTML
2.Tekan CTRL+F Untuk Menampilkan Kotak Pencarian Untuk Mempercepat Pencarian Tulisan,Ketik ]]></b:skin> di dalam kotak pencarian dan tekan ENTER untuk menemukannya.
3.Sekarang Masukan Kode Di Bawah Ini Sebelum Kode ]]></b:skin>

@import url("http://fonts.googleapis.com/css?family=Oswald&text=AaBbCcEeFfIiKkLlMmOoRrSsTtWw%20");
.w2bOldSocial ul {
font-family: 'Oswald', sans-serif;
margin: 15px 0;
overflow: hidden;
}
.w2bOldSocial ul li {
float: left;
width: 90px;
padding: 0 0 0 55px !important;
margin: 0 0 0 5px !important;
line-height: 48px !important;
}
.w2bOldSocial ul li a {
font-size: 20px !important;
text-decoration:none;
padding:0 !important;
margin:0 !important;
text-decoration:none;
}
.w2bOldSocial ul li a:hover {
text-decoration:underline;
}
.w2bOldSocial ul li.w2brss {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUnDvKi7LeO-ZJ2TZpthEuQVKJggJrG3mRwuJvgpopiWprVxaJnstOIMAD3rP7JQO5C-AFKlW5qDjhRkBmHAGqlqUPMhW9A6aLC3okNyU3lSUAgTCiilioW0zfXClVONSgwla-9fH0qxZI/s48/RSS.png") no-repeat scroll left center transparent !important;
}
.w2bOldSocial ul li.w2bmail {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_55M6JJjS-vGpFM8-hRamn3ICkrAVHgRcPVOP9O3-KTH5HWCxujB1p3Ju6CQE6gg-WW_H4jJfTYvZBxQFmFoiFOJ45r7w9enGzdonttSn4uPmRR9v_xvhIlarTQXxuA4GzIf_esf1Ze7f/s48/Mail.png") no-repeat scroll left center transparent !important;
}
.w2bOldSocial ul li.w2btwitter {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3Mwj4Cpn8svw5yK1fmbcHC6enVUTN1OH9mN8moLwsKw-ozh2WrWVqCLeyQ8pmZgVmS9GCZpnKg9yJh2TUyeXJBsnIaMzwLZjvQ9F8RudgOpdD4jYPvC4JpIcfHh0JUlYcKuG9-eTJxwNe/s48/Twitter2.png") no-repeat scroll left center transparent !important;
}
.w2bOldSocial ul li.w2bfacebook {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUXhDDqGwx8WxOtxIuzgIy4v4SpNdQbJwMu6QXPEohhI31BRSr5ZTnnF5apUDsWuvqvBtxYv77q0bA7kHnQ1ReCHZcMOTeW5lvYn_UWBsP6A_9oMIKYKW2Ng7K5eWk3Vd1TbMfj2871CZy/s48/Facebook.png") no-repeat scroll left center transparent !important;
}
#w2bEmailsub {
display: block;
clear: both;
margin: 10px 0;
}
form.w2bEmailform {
margin: 20px 0 0;
display: block;
clear: both;
}
.emailText {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGNJ_9Vu4TyOytoccA5QXFBS2ZJbakyQew6JmqxlOeWbZ7XsUKa5mqpR6viQXQs6QbBgXKdW6Abb5gNI7x85Yaq5i138ZGyoxGdRoFqOIf3tSoqxkk6ANEo7KlFrGpLo3agFUOhE1zAHhM/s28/w2b-mail.png") no-repeat scroll 4px center transparent;
padding: 7px 15px 7px 35px;
color: #444;
font-weight: bold;
text-decoration: none;
border: 1px solid #D3D3D3;

-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;

-webkit-box-shadow: 1px 1px 2px #CCC inset;
-moz-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
.emailButton {
color: #444;
font-weight: bold;
text-decoration: none;
padding: 6px 15px;
border: 1px solid #D3D3D3;
cursor: pointer;

-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;

background: #fbfbfb;
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}


Now, Save your template and navigate to Layout > Add a widget >
Choose HTML/Javascript from the list.
Copy and paste the code below into it.

<div class="w2bOldSocial">
    <ul>
        <li class="w2brss"><a href="http://feeds.feedburner.com/feedburneranda">RSS</a></li>
        <li class="w2bmail"><a href="http://feedburner.google.com/fb/a/mailverify?uri=Emailanda" >Email</a></li>
        <li class="w2btwitter"><a href="http://twitter.com/twitteranda">Twitter</a></li>
        <li class="w2bfacebook"><a href="http://facebook.com/halamanfbanda">Facebook</a></li>
    </ul>
</div>
<div id="w2bEmailsub">
    <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloggerwidgetgenerators', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="w2bEmailform">
        <input type="hidden" value="Dengan Id Feed burner anda " name="uri" />
        <input type="hidden" name="loc" value="en_US" />
        <input type="text" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" value="Enter your email..." name="email" class="emailText" />
        <input type="submit" class="emailButton" value="SignUp" title='' />
    </form>
</div>

Note:

• http://feeds.feedburner.com/feedburneranda Ganti Dengan FeedBurner Anda.
• http://feedburner.google.com/fb/a/mailverify?uri=Emailanda Ganti Dengan Email anda.
• http://twitter.com/twitteranda Ganti Dengan Twitter Anda.
• http://facebook.com/halamanfbanda Ganti Dengan Facebook Halaman.
•  <input type="hidden" value="Dengan Id Feed burner anda " name="uri" /> Gamti Dengan Id Feed Burner Anda.