Membuat Widget Berlangganan & Social Media di Blog

Cara Memasang Widget Berlangganan di Blog. Sobat blogger, Widget berlangganan ialah sebuah widget untuk menjaring sebuah pembaca melalui email, jikalau 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 indah untuk mendapat pengunjung dari pelanggan email tersebut.

Sebelum anda memasang widget berlangganan email tersebut, sahabat terlebih dahulu harus mempunyai url atau id feedburner hal ini berfungsi untuk mengaktifkan fungsi widget tersebut dan nantinya mampu berlangganan artikel blog anda melalui email pelanggan, tapi jikalau sahabat tidak punya, silahkan untuk membuatnya terlebih dahulu di disini : Cara Daftar FeedBurner Untuk Berlangganan Email Blog

Sekarang cara menembahkannya juga sangat mudah sekali, silahkan ikuti tutorialnya

Cara Memasang Widget Berlangganan & Social Media di Blog

1. Buka akun blogger anda.

2. Pilih menu template dan klik Edit HTML

3. Letakan isyarat dibawah ini sempurna diatas isyarat ]]></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 isyarat 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 == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" type="text" value="Enter your email..." />
<input alt="Cara Memasang Widget Berlangganan di Blog Membuat Widget Berlangganan & Social Media di Blog" class="btrixsubmit" title="Membuat Widget Berlangganan & Social Media di Blog" 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="Membuat Widget Berlangganan & Social Media di Blog"><img alt="Cara Memasang Widget Berlangganan di Blog Membuat Widget Berlangganan & Social Media di Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipme7S7XlRuPMS9v9vr-yTdr7WoMGwu4cVHjYORGrmGyoai1RHsw0ueUOy2E-pUV6XBbKQtS5i_gMW0rWDyu3PhymzTQRgHgBvxbTZRjxdzPxuAQZ15dyDYTF6-VKouPpHlDtjDAIooXU/s1600/facebook_btrix.png" /></a>
<a rel="nofollow" rel="noreferrer"href="http://www.twitter.com/YOUR TWITTER USER NAME" rel="nofollow" target="_blank" title="Membuat Widget Berlangganan & Social Media di Blog"><img alt="Cara Memasang Widget Berlangganan di Blog Membuat Widget Berlangganan & Social Media di Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4j212r5KzKmu6W-GR0FV7OzFsvEgorycdD70pQTpxeFTUHtoIL-sxoPsaMiA1ip8vuZJHoOZdBZSuFsJE9BJp3aI2SjuBHvr-d6Po1v3ncePRYivg606zLS3N-MhruS_Ei2vK1Awm0m0/s1600/twitter_btrix.png" /></a>
<a rel="nofollow" rel="noreferrer"href="https://plus.google.com/GOOGLE PLUS USER ID" rel="nofollow" target="_blank" title="Membuat Widget Berlangganan & Social Media di Blog"><img alt="Cara Memasang Widget Berlangganan di Blog Membuat Widget Berlangganan & Social Media di Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2YTO2dc3O82hUK6PySBYAP84E7xtT0PlP24yX3CdHE_XYMooKOmgeCFjIzuirhUImeBFGGCKGX1PQjVp_SBXFpm9YNsqJNDnqjMy_y-mhDFjKdcleB1CS_Ajo2bTYqoE5BCT79Lqj2I8/s1600/googleplus_btrix.png" /></a>
<a rel="nofollow" rel="noreferrer"href="http://www.pinterest.com/PINTEREST USER NAME" rel="nofollow" target="_blank" title="Membuat Widget Berlangganan & Social Media di Blog"><img alt="Cara Memasang Widget Berlangganan di Blog Membuat Widget Berlangganan & Social Media di Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEionUP-nGIlCHJ-H1E0VULPJGTIn2QhViDYFttDRDV_E3FEw9mqoCCDkGhRKTz0JVuBXdOldzSEuFZzdiz_0Ks2W12EupRRTMyRGyY0T5XPLnjNc3THm7pPY61RIhRiAFnF7SIgqtCzkV4/s1600/pinterest_btrix.png" /></a>
<a rel="nofollow" rel="noreferrer"href="http://feeds2.feedburner.com/FEEDBURNER ID" rel="nofollow" target="_blank" title="Membuat Widget Berlangganan & Social Media di Blog"><img alt="Cara Memasang Widget Berlangganan di Blog Membuat Widget Berlangganan & Social Media di Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO9emJBLtolQnU1BoJ1h5W1BSsgMQftHJS1d7EtWvuls8B2y6MB4Sj3dTnO7qQlUDPmglL_azHHH8bTimeAZRHgj5ZDlv2vzq0d3hzeLsscvibJctN1nAE4bSeWDubiNaZYNIV47UyoqE/s1600/rss_btrix.png" /></a>
</div>
<div align="center">
<a rel="nofollow" rel="noreferrer"href="http://feeds.feedburner.com/FEEDBURNER ID"><img alt="Cara Memasang Widget Berlangganan di Blog Membuat Widget Berlangganan & Social Media di Blog" src="http://feeds.feedburner.com/ fc/bloggertrix?bg=FF9900&amp;fg=444444&amp;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.