BLOGGINGPASURUAN - Kali ini Bloggingpasuruan akan berbagi Cara Memodifikasi Widget Email Subcribe Feedburner Dan Social Share plus tombol share berputar di blog dan yang pasti Responsive, Widget ini di desain profesional, dan widget ini juga 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.
Cara Membuat Widget Feedburner + Social Share Responsive Blogger
1. Login ke AKUN Blogger >> Dashboard >> Templete >> Edit HTML
2. Cari kode <head>kemudian letakkan kode di bawah ini dibawah kode <head>
Letakkan kode ini dibawah kode <head> - BLOGGINGPASURUAN
<link href='http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css' rel='stylesheet'/>
3. Kemudian SAVE Templete Anda…. Selanjutnya !
4. Masih pada menu Dashboard >> Tata Letak >> Add Gadget >> HTML java script
Catatan : Widget di atas dirancang untuk diletakkan pada posisi sidebar dengan ukuran lebar 300px
5.Pada kotak HTML java script , letakkan kode script dibawah ini ke dalamnya
Sebenarnya cara penerapan widget ini cukup mudah dilakukan. Jika Anda tertarik dengan artikel di atas mohon bantuannya untuk men- share di media sosial yang Anda miliki…. Terima kasih, semoga bermanfaat..
HTML - BLOGGINGPASURUAN
<style>
/* ----------------------------------------------------
Widget Berlangganan Via Email Responsive
Di Desain oleh : http://bloggingpasuruan.blogspot.co.id
Dilarang Menghapus hak cipta Design ( credit script )
-----------------------------------------------------*/
#bloggingpasuruan-Subox17 {
padding: 0;
padding-bottom: 5px;
font-family: inherit;
display: block;
margin: 0;
width: 100%;
border-radius: 1px;
border: 0;
background: #363636;
}
#bloggingpasuruan-Subox17 .main_tagline {
padding: 0px 0px;
line-height: 2.5em;
font-size: 26px;
margin: 0;
height: 95px !important;
overflow: hidden;
font-weight: normal;
color: #FFF;
text-align: center;
border: 0;
background-color: #990099;
}
#bloggingpasuruan-Subox17 .email_icon {
display: table;
margin: -35px auto 0px;
font-size: 25px;
padding: 12px;
height: 25px;
width: 25px;
background-color: #363636;
color: #FFF;
border-radius: 50px;
border: 10px solid #FFFFFF;
line-height: 0;
}
#bloggingpasuruan-Subox17 p {
font-size: 15px;
color: #F9F9F9;
text-shadow: 0px -1px 0px #000;
line-height: 27px;
padding: 5px 10px 5px;
text-align: center;
width: 80%;
margin: 5px auto 20px;
border-bottom: 2px solid #6A6A6A;
border-radius: 20px;
}
#bloggingpasuruan-Subox17 .rssform {
padding: 0;
margin: 0 auto;
display: block;
}
#bloggingpasuruan-Subox17 .rssform input {
padding: 8px;
margin: 20px auto 15px;
font-size: 13px;
color: #000;
text-align: center;
display: block;
font-family: inherit;
font-weight: normal;
width: 90%;
height: 38px;
text-transform: uppercase;
outline: none !important;
border: 1px solid #FFFFFF;
border-radius: 1px;
background-color: #FCFCFC;
box-sizing: border-box !important;
}
#bloggingpasuruan-Subox17 .rssform .button:hover {
background: #000000;
}
#bloggingpasuruan-Subox17 .rssform .button {
background: #990099;
color: white!important;
border: 1px solid #FFFFFF;
margin-top: 15px;
outline: none !important;
transition: all .3s ease-in-out;
padding: 5px 2px !important;
float: none;
text-transform: uppercase;
font-size: 18px;
font-weight: normal;
cursor: pointer;
}
#bloggingpasuruan-Subox17 .bottom_lock_policy {
background: url(#) no-repeat 3% -2px;
color: #959595;
text-align: center;
font-size: 10px;
margin: 0;
padding: 3px;
line-height: 25px;
}
#bloggingpasuruan-Subox17 .bottom_lock_policy a {
color: #959595;
text-decoration: none !Important;
}
#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); }
#bloggingpasuruan-Subox17 form {
margin-bottom: 10px !important;
}
</style>
<div id="bloggingpasuruan-Subox17">
<div class="main_tagline">BLOGGINGPASURUAN</div><div class="email_icon"><i class="fa fa-envelope"></i></div>
<p>Dapatkan Update Artikel langsung ke Inbox Email Anda, GRATIS..!</p>
<div class="rssform">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=nama-IDfeedburner-anda', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type="text" name="email" placeholder="Masukkan alamat Email Anda..." />
<input type="hidden" value="nama-IDfeedburner-anda" name="uri" />
<input type="hidden" name="loc" value="en_US" />
<input value="Berlangganan" class="button" type="submit" />
</form>
</div>
<div class="bottom_lock_policy">We Respect Your Privacy | <a href="http://bloggingpasuruan.blogspot.co.id/2015/10/cara-membuat-widget-feedburner-social.html" target="_blank">Dapatkan Widget ini</a> </div>
<br />
<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/usmkurniawan" 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/109346461614405536198" 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>
6. Kemudian tekan SAVE, Selesai…. Lihat hasilnya !!!
Sobat harus lebih dulu mendapatkan ID Feedburner sebelum memasang Widget di atas. Jika belum mendaftarkan Blog ke RSS Feedburner maka Widget diatas tidak akan bekerja dan hanya akan muncul tampilan cantik widget-nya saja namun pengunjung tidak bisa menggunakan/berlangganan artikel Anda Silahkan mendaftarkan Blog Anda ke RSS Feedburner sekarang juga...
Baca juga >> Cara Mendaftarkan Blog ke RSS Ferdburner.
Baca juga >> Cara Mendaftarkan Blog ke RSS Ferdburner.
Sebenarnya cara penerapan widget ini cukup mudah dilakukan. Jika Anda tertarik dengan artikel di atas mohon bantuannya untuk men- share di media sosial yang Anda miliki…. Terima kasih, semoga bermanfaat..