Iklan

Cara Mudah Modifikasi WIDGET Subscribe Feedburner Anda

Cara Mudah Modifikasi WIDGET  Subscribe Feedburner Anda

Salam Blogging. Kali ini Bloggingpasuruan akan membagian widget modifikasi SUBSCRIBE FEEDBURNER  keren, disini ada 3 widget yang saya coba modifikasi , sahabat blogger tinggal pilih widget mana saja yang merunur sahabat blogger paling keren…

Berkikut ini adalah kode dari Widget hasil modifikasi BLOGGINGPASURUAN.

1. Widget Feedburner modifikasi 1#

Cara Mudah Modifikasi WIDGET  Subscribe Feedburner Anda
gambar di atas sudah saya rubah background-nya menjadi stone texture yang jauh lebih keren

<!-- Feedburner Widget by bloggingpasuruan.blogspot.com -->
<style>
.blogpasuruansubscribe {background:url(http://4.bp.blogspot.com/-wN0rOkq7jrk/VARLB31x5ZI/AAAAAAAAAoA/qJXD5Q7lK60/s1600/Copy%2Bof%2Bgb5.jpg)no-repeat -5px;
border: 1px solid #0ed9d9;border-radius:5px;
padding: 8px;
width: 297px;
-webkit-transition: all 0.5s ease-in-out;
-blogpasuruan-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;
}
.blogpasuruansubscribe:hover {
-blogpasuruan-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);
}
.blogpasuruanmailbox {
background:#fff url(http://2.bp.blogspot.com/-Vr1yIrT7ZS4/U71SMi6wVvI/AAAAAAAAAd4/AhKKj1e3gAM/s1600/Pict1.jpg)no-repeat left 5px;
border: 1px solid #0ed9d9;
-webkit-border-radius: 4px;
border-radius: 4px;
-blogpasuruan-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: #0ba9a9;
font: 16px "trebuchet ms", sans-serif;
padding: 10px 0px 9px 30px;
width: 160px;
-webkit-transition: all 0.5s ease-in-out;
-blogpasuruan-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;
}
.blogpasuruanmailbox:hover {
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: all 0.5s ease-in-out;
-blogpasuruan-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;
}
.blogpasuruansubmit {
font:  16px Tahoma, Geneva, sans-serif;
font-style: normal;
color: #fff;
background: -webkit-gradient(linear,50% 0%,50% 100%,color-stop(0%,#0cc1c1),color-stop(100%,#0ba9a9));
background: -webkit-linear-gradient(top,#0cc1c1,#0ba9a9);
background: -moz-linear-gradient(top,#0cc1c1,#0ba9a9);
background: -o-linear-gradient(top,#0cc1c1,#0ba9a9);
background: -ms-linear-gradient(top,#0cc1c1,#0ba9a9);
background: linear-gradient(top,#0cc1c1,#0ba9a9);
border: 2px solid #0ba9a9;
text-shadow: 0;
border-radius: 5px;
padding: 10px 9px;
cursor: pointer;
margin: 0 auto;
}
.blogpasuruansubmit:active {
cursor: pointer;
position: relative;
top: 2px;
}
.blogpasuruansubmit::-blogpasuruan-focus-inner {
border: 0;
padding: 0;
margin: 0;
}
</style>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' />
<div class='blogpasuruansubscribe'>
<div style='background: url(http://icons.iconarchive.com/icons/fasticon/comic-3/48/mail-icon.png)no-repeat -2px;padding:10px 0 10px 40px;color: #333; font-weight: bold; font: 23px Oswald, cursive; margin: 0px 0px 10px 0px;border-radius:5px;'>Get Free Updates by Email !</div>
<div style='margin: 10px 0 0 6px;'>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform'
method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=namafeedburner-anda&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true'
style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='namafeedburner-anda' />
<input name='loc' type='hidden' value='en_US' />
<input class='blogpasuruanmailbox' 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='' class='blogpasuruansubmit' title='' type='submit' value='Subscribe'/>
</form>
</div>
<div style='border: none; color: #333; font: 22px Oswald, cursive; margin: 25px 0 0 5px;text-align: left;'>Follow Us on:</div>
<div style='margin: -32px 0 0 120px;'>
<a href='http://facebook.com/your-username' target='_blank' title='Join us on Facebook'><img src='http://1.bp.blogspot.com/-7BFnvcwztPI/UDvPdyfwRdI/AAAAAAAALEI/JIvOf_6qVvs/s1600/facebook500.png' alt='facebook'/></a>
<a href='http://twitter.com/your-username' rel='nofollow' target='_blank'
title='Follow us on Twitter'><img src='http://4.bp.blogspot.com/-whgSYuUXFK4/UDvPif88foI/AAAAAAAALEk/o1h9AQUEN48/s1600/twitter.png' alt='twitter'/></a>
<a href='https://plus.google.com/your id-username' rel='nofollow' target='_blank'
title='Follow us on Google+'><img src='http://3.bp.blogspot.com/-CKC8VpnLV4E/UDvPe3F-JeI/AAAAAAAALEM/CfdjTmmDbHU/s1600/googleplus-revised.png' alt='gplus'/></a>
<a href='http://pinterest.com/your-username' rel='nofollow' target='_blank'
title='Follow us on Pinterest'><img src='http://1.bp.blogspot.com/-W-z8yV2MJAo/UDvPgCvvFaI/AAAAAAAALEU/EM36zCqtyNE/s1600/pinterest.png' alt='pinterest'/></a>
<a href='http://www.youtube.com/user/your-username' rel='nofollow' target='_blank'
title='Subscribe us on Youtube RSS'><img src='http://icons.iconarchive.com/icons/martz90/circle/32/youtube-icon.png' alt='Youtube'/></a>
</div>
</div> <!-- Feedburner Widget by bloggingpasuruan.blogspot.com -->


2. Widget Feedburner modifikasi 2#

Cara Mudah Modifikasi WIDGET  Subscribe Feedburner Anda

<!-- Feedburner Widget by bloggingpasuruan.blogspot.com -->
<style>
. blogpasuruansubscribe {
border: 2px solid #111;background: url(http://2.bp.blogspot.com/-8MT23fRt_Gw/T0jvi8_uE2I/AAAAAAAAFhA/UIeU-8rIpWw/s1600/main-bg.png);
padding: 8px;border-radius:5px;
width:295px ;
-webkit-transition: all 0.5s ease-in-out;
-blogpasuruan-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;
}
. blogpasuruansubscribe:hover {
-blogpasuruan-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);
}
. blogpasuruanmailbox {
background:#ccc;
border: 1px solid #0ed9d9;
-webkit-border-radius: 4px;
border-radius: 4px;
-blogpasuruan-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: #0ba9a9;
font: 13px "trebuchet ms", sans-serif;
padding: 6px 15px;
width: 150px;
-webkit-transition: all 0.5s ease-in-out;
-blogpasuruan-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;
}
. blogpasuruanmailbox:hover {
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: all 0.5s ease-in-out;
-blogpasuruan-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;
}
. blogpasuruansubmit {
font:  16px Tahoma, Geneva, sans-serif;
font-style: normal;
color: #fff;
background: -webkit-gradient(linear,50% 0%,50% 100%,color-stop(0%,#0cc1c1),color-stop(100%,#0ba9a9));
background: -webkit-linear-gradient(top,#333,#222);
background: -moz-linear-gradient(top,#0cc1c1,#0ba9a9);
background: -o-linear-gradient(top,#0cc1c1,#0ba9a9);
background: -ms-linear-gradient(top,#0cc1c1,#0ba9a9);
background: linear-gradient(top,#0cc1c1,#0ba9a9);
border: 2px solid #222;
text-shadow: 0;
border-radius: 5px;
padding: 6px 11px;
cursor: pointer;
margin: 0 auto;
}
. blogpasuruansubmit:active {
cursor: pointer;
position: relative;
top: 2px;
}
.
blogpasuruansubmit::- blogpasuruan-focus-inner {
border: 0;
padding: 0;
margin: 0;
}
</style>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' />
<div class='blogpasuruansubscribe'>
<div style='background:#000 url(http://icons.iconarchive.com/icons/kearone/comicons/32/email-icon.png)no-repeat 6px;padding:4px 5px 5px 45px;color: #0ed9d9; font-weight: bold; font: 18px Oswald, cursive; margin: 0px 0px 10px 0px;border-radius:5px;border:2px solid#444'>Get Free Updates by Email !</div>
<div style='margin: 10px 0 0 6px;'>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform'
method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=Namafeed-anda&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true'
style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value=' Namafeed-anda' />
<input name='loc' type='hidden' value='en_US' />
<input class='blogpasuruanmailbox' 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='' class='blogpasuruansubmit' title='' type='submit' value='Subscribe'/>
</form>
</div>
<div style='border: none; color: #0cc1c1; font: 20px Oswald, cursive; margin: 25px 0 0 5px;text-align: left;'>Follow Us:</div>
<div style='margin: -32px 0 0 100px;'>
<a href='http://facebook.com/your-username' target='_blank' title='Join us on Facebook'><img src='http://1.bp.blogspot.com/-7BFnvcwztPI/UDvPdyfwRdI/AAAAAAAALEI/JIvOf_6qVvs/s1600/facebook500.png' alt='facebook'/></a>
<a href='http://twitter.com/your-username' rel='nofollow' target='_blank'
title='Follow us on Twitter'><img src='http://4.bp.blogspot.com/-whgSYuUXFK4/UDvPif88foI/AAAAAAAALEk/o1h9AQUEN48/s1600/twitter.png' alt='twitter'/></a>
<a href='https://plus.google.com/your id-username' rel='nofollow' target='_blank'
title='Follow us on Google+'><img src='http://3.bp.blogspot.com/-CKC8VpnLV4E/UDvPe3F-JeI/AAAAAAAALEM/CfdjTmmDbHU/s1600/googleplus-revised.png' alt='gplus'/></a>
<a href='http://pinterest.com/your-username' rel='nofollow' target='_blank'
title='Follow us on Pinterest'><img src='http://1.bp.blogspot.com/-W-z8yV2MJAo/UDvPgCvvFaI/AAAAAAAALEU/EM36zCqtyNE/s1600/pinterest.png' alt='pinterest'/></a>
<a href='http://www.youtube.com/user/your-username' rel='nofollow' target='_blank'
title='Subscribe us on Youtube RSS'><img src='http://icons.iconarchive.com/icons/martz90/circle/32/youtube-icon.png' alt='Youtube'/></a>
</div>
</div>
<!-- Feedburner Widget by bloggingpasuruan.blogspot.com -->


3. Widget Feedburner modifikasi 3#

Cara Mudah Modifikasi WIDGET  Subscribe Feedburner Anda

<!-- Feedburner Widget by bloggingpasuruan.blogspot.com -->
<style>
.blogpasuruansubscribe {background: url(http://4.bp.blogspot.com/-0By4TW5q8kM/UelOJPQqOpI/AAAAAAAAD4M/YqsJjjhawHM/s1600/navbar6.jpg)repeat-x top;
border: 1px solid #9f1d00 ;border-radius:5px;
padding:0 8px 8px 8px;
width: 297px;
-webkit-transition: all 0.5s ease-in-out;
-blogpasuruan-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;
}
.blogpasuruansubscribe:hover {
-blogpasuruan-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);
}
.blogpasuruanmailbox {
border: 1px solid #9f1d00 ;
-webkit-border-radius: 4px;
border-radius: 4px;
-blogpasuruan-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: #9f1d00 ;
font: 16px "trebuchet ms", sans-serif;
padding: 5px 15px;
width: 160px;
-webkit-transition: all 0.5s ease-in-out;
-
blogpasuruan-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;
}
.blogpasuruanmailbox:hover {
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: all 0.5s ease-in-out;
-blogpasuruan-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;
}
.blogpasuruansubmit {
font:  16px Tahoma, Geneva, sans-serif;
font-style: normal;
color: #fff;
background: url(http://4.bp.blogspot.com/-0By4TW5q8kM/UelOJPQqOpI/AAAAAAAAD4M/YqsJjjhawHM/s1600/navbar6.jpg);
border: 2px solid #9f1d00 ;
text-shadow: 0;
border-radius: 5px;
padding: 6px 11px;
cursor: pointer;
margin: 0 auto;
}
.
blogpasuruansubmit:active {
cursor: pointer;
position: relative;
top: 2px;
}
.
blogpasuruansubmit::- blogpasuruan-focus-inner {
border: 0;
padding: 0;
margin: 0;
}
</style>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' />
<div class='blogpasuruansubscribe'>
<div style='background: url(http://icons.iconarchive.com/icons/harwen/pleasant/32/E-mail-icon.png)no-repeat 6px;padding:4px 5px 5px 45px;color: #fff ; font-weight: bold; font: 20px Oswald, cursive; margin: 0px 0px 10px 0px;border-radius:5px;'>Get Free Updates by Email !</div>
<div style='margin: 10px 0 0 6px;'>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform'
method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=namafeed-anda&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true'
style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='
namafeed-anda' />
<input name='loc' type='hidden' value='en_US' />
<input class='blogpasuruanmailbox' 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='' class='blogpasuruansubmit' title='' type='submit' value='Subscribe'/>
</form>
</div>
<div style='border: none; color: #9f1d00 ; font: 22px Oswald, cursive; margin: 25px 0 0 5px;text-align: left;'>Follow Us:</div>
<div style='margin: -32px 0 0 100px;'>
<a href='http://facebook.com/your-username' target='_blank' title='Join us on Facebook'><img src='http://2.bp.blogspot.com/-zLbplFI5Dc8/UelWZwUmCeI/AAAAAAAAD4c/PlyZLX1f7cQ/s1600/sosmed+facebook+elegant+red+-+32.png' alt='facebook'/></a>
<a href='http://twitter.com/your-username' rel='nofollow' target='_blank'
title='Follow us on Twitter'><img src='http://2.bp.blogspot.com/-ALM6_6apulM/UelWar1XCRI/AAAAAAAAD4s/oVbuAdWMht4/s1600/sosmed+twitter+elegant+red+-+32.png' alt='twitter'/></a>
<a href='https://plus.google.com/your id-username' rel='nofollow' target='_blank'
title='Follow us on Google+'><img src='http://1.bp.blogspot.com/-3HErnWvO66c/UelWZy8WOII/AAAAAAAAD48/L535D3F4Wc4/s1600/sosmed+google++elegant+red+-+32.png' alt='gplus'/></a>
<a href='http://pinterest.com/your-username' rel='nofollow' target='_blank'
title='Follow us on Pinterest'><img src='http://2.bp.blogspot.com/-mS_BU56YScU/UelWZ5JFt6I/AAAAAAAAD4g/Ajd-PrssOzk/s1600/sosmed+pinterest+elegant+red+-+32.png' alt='pinterest'/></a>
<a href='http://www.youtube.com/user/your-username' rel='nofollow' target='_blank'
title='Subscribe us on Youtube RSS'><img src='http://3.bp.blogspot.com/-mIvE1jY2To0/UelWaunAcAI/AAAAAAAAD4w/w8l_C8JYpXU/s1600/sosmed+youtube+elegant+red+-+32.png' alt='Youtube'/></a>
</div>
</div>
<!-- Feedburner Widget by bloggingpasuruan.blogspot.com -->



Cara Pemasangan :
1. cara pemasangannya simple saja , silahkan anda masuk ke menu Layout >> add Gadget >> plih Html/javascript >> masukan kodenya.
2. Sebelum anda simpan anda harus mengeditnya terlebih dahulu,sekarang perhatikan code yang dicetak tebal berwarna merah dan biru , untuk yang berwarna merah silahkan masukan masukan Id feedburner anda.sedangkan code yang berwarna biru silahkan anda masukan url halaman sosial media anda.
3. Setelah semua selesai langsung saja di simpan.

Kode ini sudah saya sesuaikan dengan sidebar widget yang memiliki lebar antara 300px. jadi saya sarankan widget ini anda masukan di sidebar widget yang berukuran lebar sekitar 300px agar widget ini terlihat lebih rapi. tapi jika anda ingin menyimpannya di sidebar yang ukuran kurang atau lebih dari 300px dan masih bingung cara mengeditnya.silahkan saja masukan pertanyaan anda di kotak komentar ,insyallah kalau saya sempet saya akan saya bantu.

Demikian widget hasil modifikasi BLOGGINGPASURUAN semoga sahat bloger sekalian menyukainya, jika ada masalah dengan widget saya di atas mohon tinggalkan pesan insyaAllah jika ada waktu saya akan membantu permasalahan sahabat Blogger… terima kasih.


Next
Prev Post
Previous
Next Post

1 comment: