Cara Memodifikasi Widget Email Subcribe Feedburner Dan Social Share

Salam Blogger, Kali ini Bloggingpasuruan akan berbagi Cara Memodifikasi Widget Email Subcribe Feedburner Dan Social Share plus tombol share berputar di blog, Widget ini penting bagi pengunjung agar mereka lebih mudah mendapatkan informasi terupdate dari postingan Anda terbaru, dan para pengunjung blog mau untuk berlangganan dan share artikel blog anda tentunya. Dan penambahan tombol share perputar hanya sebuah aksesoris agar bisa menarik perhatian mata pengunjung. Untuk melakukan hal ini tidaklah sulit karena sudah saya sediakan pada postingan ini dengan modifikasi sehingga tampilan kotak feedburner menjadi lebih menarik dan dilengkapi dengan tombol share yang bisa berputar. Sehingga pengunjung bisa menikmati blog anda yang rapi dan teratur. Langsung saja menuju ke TKP hehehehehe

1. Login Blogger kemudian klik Tata Letak > Tambah Widget > pilih HTML/Java Script.

2. Kemudian masukan kode berikut ini :

<style>
.form{border:2px solid #ff0000;background:#fff padding:3px;width:308px;height:230px;-moz-border-radius:6px}
.rss{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLvaGm31weiHr8WnZj1VtcN3CBfvwGWNybxlJ2CeI8er7zGQTMHM84eyMDudMwH-zxuoRB6zzTxfcuVFbJXLZNuLKtP2gt0xz-f6l-9Dc4CdWIfXzPeocqpgZ_8xUgTiH2W-ezwxUm_mk/s1600/bloggingpasuruan01.png") no-repeat top right}
.button{background:#9b9b9b;color:#FFF;font-size:11px;font-family:Arial,Tahoma,Verdana;margin-left:5px;border:1px solid #ff0000;padding:3px 5px 3px 5px;font-weight:bold;-moz-border-radius:5px}
</style>
<div class="form">
<div class="rss">
<div style="font-weight:bold; color:#333333; font-size:15px; padding:10px 5px 5px 10px;">
<a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5h7yMDUpWF2pQa0y2BXgtvCN4cGgYYWleaRrrXFhJplZMFiSNlipKLRjjRrkGKQPQAB7vHff3PsyxSh1et6uj2fLj_VVUYMh60j1WmqtW_8Y72rM_tEhFomyFpCKBDfi6nPlcs_seQgLa/s144/rss%20feed%20icon.gif" /></a>
<a href="http://feeds.feedburner.com/ganti namaIDfeedburner_anda"><blink>GET UPDATE VIA RSS</blink></a></div> <div style="font-weight:bold; padding:10px 10px;">GET UPDATE VIA EMAIL</div>
<div style="padding-left:10px">Berlangganan Gratis Artikel via RSS. Isi alamat email anda di bawah ini:</div>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=ganti namaIDfeedburner_anda', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<div style="padding-left:10px; padding-bottom:10px; padding-top:10px">
<input type="text" style="width:160px; height:18px" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Ketik email anda disini...&quot;;}" onfocus="if (this.value == &quot;Ketik email anda disini...&quot;) {this.value = &quot;&quot;}" type="text" value="Ketik email anda disini..." />
<input type="hidden" value="ganti namaIDfeedburner_anda" name="uri" /><input type="hidden" name="loc" value="en_US" /><input class="button" type="submit" value="SUBCRIBE" /></div></form>
<style>
#social a:hover {background-color: transparent;opacity:0.7;}
#social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; }
#social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }
</style>
<center>
<div id="social">
<!--Start Rss Icon--> <a title="Grab Our Rss Feed" href="http://feeds.feedburner.com/ganti namaIDfeedburner_anda " target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAMHHJeFUAqw7qldKUP5Gb9BX0brvsMvNgY3yQID9cdM7a420orBx5xY8UqBx9KP8YAOW5gyUuQpJOZOiMbhRxTGX1UNZg70qQy0Kixp6gr_si7k1DL3YR9ff1CCBtgfqic26W4G6g5Dll/s1600/RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Rss Icon-->
<!--Start Email Rss Icon--> <a rel="nofollow" title="Get Free Updates Via Email" href="http://feeds.feedburner.com/ ganti namaIDfeedburner_anda " target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCvcKodHmKbzCvIJAb5VPifh_aLTS-MCJUxhevrH0PNBDPeyDvANwnS8DkBOW_Nb9G49Jmx995seGMqMtjFxgwth-91c2eCLMx9ML-0O7Q7dV6QKImIZrLBxScgCi6ht00c0nVv4V5UyrV/s1600/RSS-EMAIL-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Email Rss Icon-->
<!--Start Facebook Icon--> <a rel="nofollow" title="Like Our Facebook Page" href="https://www.facebook.com/bloggingpasuruan" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeHDwxIXlqnSWRkDU5nuR4oJpfUgV1QiiZJrm0Jr4aiMWf0bfDnU38BU05kPXTY7OlTCQ3xGzQdJuXCpiLBgmWaDJnmfW_wiKuKhmySw7w4AkLvi-9x6pfc39P1mujtiB2cSIP7ktgs9Ke/s1600/FACEBOOK-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Facebook Icon-->
<!--Start Twitter Icon--> <a rel="nofollow" title="Follow Our Updates On Twitter" href="http://twitter.com/bloggingpasuruan" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0cAjxvUz67-Y9LILK_rfGr-8DDLNzTIYkjxRQw4A8ZAxqG5MzpoakMpQRge87XNRbGmDv075AbSCujSl1vmZxPAerrAkolZXywsBOlbe-TEhhm7ExyWlemzEqpUGKmw6YYFieMkZ-zOTR/s1600/TWITTER-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Twitter Icon-->
<!--Start Google+ Icon--> <a title="Follow Us On Google+" rel="nofollow" href="https://plus.google.com/10409378757523xxxxxx" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDjfuBBrKEpfd-tfYlVbyb58BQVrhorV6SYR4r39DC-XGnersWvU9mxZ_YnVhc4L-uT9VlsX2kqFflZxw2hfQZhZk7wl-rMKEu-e52LSphuFuKgjLM3lOiFA7AN8buMbTx1DescuFLXtWs/s1600/GOOGLE-PLUS-48x48.png"/></a>
</div></center> </div></div>

Keterangan:

Ganti tulisan warna merahdengan ID Feedburner anda.

Ganti tulisan warna orangedengan ID Facebook anda.

Ganti tulisan warna hitam dengan ID Twitter anda.

Ganti tulisan warna biru dengan ID Google+ anda.

3. Simpan ( Save ) dan lihat hasilnya.

Related Posts