Cara Memasang Widget Berlangganan di Blog. Sobat blogger, Widget berlangganan adalah sebuah widget untuk menjaring sebuah pembaca melalui email, jika pengunjung men subscribe atau berlangganan melalui widget feed tersebut, maka secara otomatis artikel yang terbaru yang kita update akan di kirim melalui email pelanggan tersebut, hal ini mempunyai potensi yang sangat bagus untuk mendapat pengunjung dari pelanggan email tersebut.
Sebelum anda memasang widget berlangganan email tersebut, sobat terlebih dahulu harus mempunyai url atau id feedburner hal ini berfungsi untuk mengaktifkan fungsi widget tersebut dan nantinya bisa berlangganan artikel blog anda melalui email pelanggan, tapi jika sobat tidak punya, silahkan untuk membuatnya terlebih dahulu di disini : Cara Daftar FeedBurner Untuk Berlangganan Email Blog
Cara Memasang Widget Berlangganan & Social Media di Blog
1. Buka akun blogger anda.
2. Pilih menu template dan klik Edit HTML
3. Letakan kode dibawah ini tepat diatas kode ]]></b:skin> atau </style> dan klik save.
.subscribebtrix {
border: 2px solid #000000;
padding: 8px;
width: 310px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.subscribebtrix:hover {
-moz-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
-webkit-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
}
.tbimailbox {
border: 1px solid #D3D3D3;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 1px 1px rgba(255, 172, 84, 0.4) inset;
-webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
color: #666;
font: 14px "trebuchet ms", sans-serif;
padding: 7px 15px;
width: 160px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.tbimailbox:hover {
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.btrixsubmit {
font: bold 12px Tahoma, Geneva, sans-serif;
font-style: normal;
color: #ffffff;
background: #ff5714;
border: 0px solid #ffffff;
text-shadow: 0px -1px 1px #222222;
box-shadow: 2px 2px 5px #000000;
-moz-box-shadow: 2px 2px 5px #000000;
-webkit-box-shadow: 2px 2px 5px #000000;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
padding: 8px 15px;
cursor: pointer;
margin: 0 auto;
}
.btrixsubmit:active {
cursor: pointer;
position: relative;
top: 2px;
}
.btrixsubmit::-moz-focus-inner {
border: 0;
padding: 0;
margin: 0;
}
4. Selanjutnya pilih menu layout atau tata letak >> Add Gadget >> Pilih Html/Javascript dan paste kode dibawah ini di kolom yang muncul lalu klik "Save"
<div class="subscribebtrix">
<div style="color: #666666; font-weight: bold; font: 22px Oswald, cursive; margin: 0px 0px 10px 15px;">
Free Updates to your Inbox</div>
<div style="margin: 10px 0 0 6px;">
<form action="http://feedburner.google.com/fb/a/mailverify" class="emailform" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=YOUR FEEDBURNER ID', 'popupwindow', 'scrollbars=yes,width=550,height=520EE');return true" style="margin: 0pt;" target="popupwindow">
<input name="uri" type="hidden" value="YOUR FEEDBURNER ID" />
<input name="loc" type="hidden" value="en_US" />
<input class="tbimailbox" name="email" onblur="if (this.value == "") {this.value = "Enter your email...";}" onfocus="if (this.value == "Enter your email...") {this.value = ""}" type="text" value="Enter your email..." />
<input alt="" class="btrixsubmit" title="" type="submit" value="Subscribe" />
</form>
</div>
<div style="border: none; color: #666666; font: 22px Oswald, cursive; margin: 25px 0 0 5px;">
Follow us:</div>
<div style="margin: -32px 0 0 120px;">
<a rel="nofollow" rel="noreferrer"href="http://www.facebook.com/YOUR FACEBOOK USER NAME" target="_blank" title="Join us on Facebook"><img alt="facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5MOBL9im-ICQAr3AmYciqYMn2dUdIrCXO3P2BCQmOJYmD1TJIcomQwA-RxPaSIbOtmwjxPLonO8XQ3RlL6iabgExjWK1pP7YlhBhyvANDqQFidVQgw5mwJbS3l4Xg8iYH7674PTyBbhA/s1600/facebook_btrix.png" /></a>
<a rel="nofollow" rel="noreferrer"href="http://www.twitter.com/YOUR TWITTER USER NAME" rel="nofollow" target="_blank" title="Follow us on Twitter"><img alt="twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFJdECeVNQMh5U6piRWg5zPvPObTcYkvQn8ENbItDn1DumAaMODLjVi84h9NujSHeDhNfSzgwY-vYZcyZWqgBQ2oIy6jSOvxL9B5vL0c6Yx2NxPUr_5dgpbpy4Y_YZCLxQZX8eEYOToNc/s1600/twitter_btrix.png" /></a>
<a rel="nofollow" rel="noreferrer"href="https://plus.google.com/GOOGLE PLUS USER ID" rel="nofollow" target="_blank" title="Follow us on Google+"><img alt="gplus" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic0wZbZfehv1AR0zKczPkknSKvg1xzSCSdRJCdBZ421tsJ54IES5N_LaQuPqRLDLRqyfTaHamuu8XXQkTe_y7PNC5rsWumE00jZmD-eqVrfB9owN-R3ViZm3lAPbFQY2loNMu5Iy3eFjw/s1600/googleplus_btrix.png" /></a>
<a rel="nofollow" rel="noreferrer"href="http://www.pinterest.com/PINTEREST USER NAME" rel="nofollow" target="_blank" title="Follow us on Pinterest"><img alt="pinterest" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzOHYVRle2DYQDeshQN-I8bZ-e1HQ_3INCZ5frzKWfDleSwED3i35PgK_slyTX8ttoA96IygoYk6dHOPL_7nnJDY_aDgttsT3RaUtJwGvWg6vQ1RadDGn3dCnO0-51BEwd6Jekply-8Ws/s1600/pinterest_btrix.png" /></a>
<a rel="nofollow" rel="noreferrer"href="http://feeds2.feedburner.com/FEEDBURNER ID" rel="nofollow" target="_blank" title="Subscribe to RSS"><img alt="rss" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3YXH73BAaZBPvlymoUzy7CpC9nOAwy_dSFfThriWZPmrOMHyJivyWUtbxuuXQ1Uhv_HJz3riovIVH0v55M4tLb-JHK9PbJLABsN36viuQNELOWbBg-5e6GSgcXc2r5xbCE9AZLojae3Y/s1600/rss_btrix.png" /></a>
</div>
<div align="center">
<a rel="nofollow" rel="noreferrer"href="http://feeds.feedburner.com/FEEDBURNER ID"><img alt="" src="http://feeds.feedburner.com/~fc/bloggertrix?bg=FF9900&fg=444444&anim=1" height="26" style="border: 0;" width="88" /></a></div>
</div>
Keterangan ganti FEEDBURNER ID dengan id feedburner anda yang sudah di daftar tadi.
sekian untuk tutorial cara memasang widget berlangganan di blog, lebih dan kurangnya saya mohon maaf.
