Berbagi Tips lagi nich BLOGGINGPASURUAN, kali ini tentang Widget Feedburner Modifikasi atau widget berlangganan posting yang berbeda dari biasanya. Syaratnya Blog Anda harus sudah terdaftar di FEEDBURNER dulu, kalu belum silahkan baca artikel saya tentang cara terbaru dan terlengkap daftarkan Blog di Feedburner. Saya katakan berbeda karena widget berlangganan artikel ini lengkap dengan berbagai fitur yang dapat menghubungkan anda dengan beberapa jejaring sosial yang sudah populer. Dengan tombol share diharapkan artikel anda akan tersebar ke berbagai jejaring sosial yang ada, dan meningkatkan pelanggan RSS feed anda juga kotak fans page. Widget ini lebih menarik dari sisi design.
Fitur Widget Feedburner Modifikasi:
1.
Formulir feedburner untuk meningkatkan pelanggan artikel anda
2.
Tombol follow sehingga pembaca dapat bergabung dengan Anda pada jaringan sosial
Anda
3.
Tombol sosial media yaitu,, Facebook, Twitter, g+1, StumbleUpon dan tombol
share Addthis untuk jaringan sosial lainnya.
4.
Kotak Fans Page Facebook untuk meningkatkan penggemar blog And
Semua
tombol media sosial yang tersedia resmi terdapat
pada tombol ShareThis. Untuk memberikan nuansa cool digunakan box-shadow
bertenaga CSS3 transisi . Jenis Font yang digunakan font Google bernama Oswald.
Tertarik
memasangnya di Blog Anda…? Silahkan ikuti langkah-langkah berikut:
1.
Seperti biasa login ke akun Blogger anda -> Template -> Edit HTML ->
Proceed
2.
Cek list Expand Widget Templates
3.
Cari kode berikut : <data:post.body/>
Anda
mungkin akan menemukan dua atau tiga kode diatas, letakkan kode berikut pada
kode pertama diatas.
<!--Social
Subscription Box bloggingpasuruan.blogspot.com -->
<b:if
cond='data:blog.pageType == "item"'>
<style>
.tbibox
{
background:
#fff;
border:
1px solid #ddd;
height:
360px;
margin:
10px auto;
padding:
10px;
width:
572px;
-webkit-border-radius:
10px;
border-radius:
10px;
}
.tbisubscribe
{
border:
1px solid #D3D3D3;
padding:
8px;
width:
300px;
-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;
}
.tbisubscribe: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;
}
.tbisubmit
{
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;
}
.tbisubmit:active
{
cursor:
pointer;
position:
relative;
top:
2px;
}
.tbisubmit::-moz-focus-inner
{
border:
0;
padding:
0;
margin:
0;
}
.tbisharebox
{
border:
1px solid #D3D3D3;
margin:
-157px 0 0 330px;
padding:
8px;
width:
225px;
-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;
}
.tbisharebox:hover
{
-moz-box-shadow:
1px 1px 2px #CCC inset;
-webkit-box-shadow:
inset 1px 1px 55px 1px rgba(249, 215, 126, 1);
box-shadow:
inset 1px 1px 55px 1px rgba(249, 215, 126, 1);
-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;
}
</style>
<link
href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet'
type='text/css' />
<div
class='tbibox'>
<div
class='tbisubscribe'>
<div
style='color: #666666; font-weight: bold; font: 22px Oswald, cursive; margin:
0px 0px 10px 15px;'>Get Free Updates in 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=ganti-nama-feedburner Anda',
'popupwindow',
'scrollbars=yes,width=550,height=520');return true'
style='margin:
0pt;' target='popupwindow'>
<input
name='uri' type='hidden' value=Ganti-nama-Feedburner-Anda'
/>
<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='tbisubmit' title='' type='submit' value='Subscribe' />
</form>
</div>
<div
style='border: none; color: #666666; font: 22px Oswald, cursive; margin: 25px 0
0 5px;'>Follow us on:</div>
<div
style='margin: -32px 0 0 120px;'>
<a
href=‘http://www.facebook.com/ID-Fanpage-Anda’target='_blank'
title='Join us on Facebook'><img
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj46Dpxq52M7oSsFbQd53ZQhU_RqSLA1yCevSH8_2HfJ0pe1jNwFAtSVxxjOVJuYej9Mxs1WLcX7zOLoqCay0zGRAlGeAig4q3crTTePU-ceLeZ3MQUjvijeE1S4BkWeKa38sUqmsbyokc/s32/facebook500.png'
alt='facebook'/></a>
<a
href='http://twitter.com/ID-UserTwitter-Anda'
rel='nofollow' target='_blank'
title='Follow
us on Twitter'><img
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaptlZP57oMwKhiKFwRy5_RPiqkn9o0kQrmTsF_-5tI32yB0I0yniJzPW_0ZuVD170SzzICA1QkNVy2MV9R3-0D1leZ_QOENz-Y4QZpqfYIJT6vwSgmq_FDHcAXXMqvyVtr4FYNdqLaUw/s32/twitter.png'
alt='twitter'/></a>
<a
href='https://plus.google.com/ID-UserGooglePlus-Anda/'
rel='nofollow' target='_blank'
title='Follow
us on Google+'><img
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid4YhRW_hEyC4bKrPsqqCJut2QheFLQYG8x6qjq7q96VUltQhHwgYUJi4ma0dDobh_UV9Wfjy7nWi8tLI_uRpjh6PJJfzm16shB6T9xuWhyphenhyphenNHu11iAMsYyA38CwB2Fmtgo-R99zUMMn-w/s32/googleplus-revised.png'
alt='gplus'/></a>
<a
href='http://pinterest.com/ ID-User pinterest
-Anda /' rel='nofollow' target='_blank'
title='Follow
us on Pinterest'><img
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnVwomO0stKc2kuiTZyvo5Mi4EPJJ3ajOCGG4DUX5ijvPr3yLeIbsm9gHKILdQrCrFisy4XRm2yvYfalap6Qdj3YN98LwL_vunJAr7EBm7J02mw-UJD_Ul1U_u_xkb4M_fFEDcw0ZcTaw/s32/pinterest.png'
alt='pinterest'/></a>
<a
href='http://feeds.feedburner.com/ feedburner Anda
' rel='nofollow' target='_blank'
title='Subscribe
to RSS'><img
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIWYxJQvzvzT8iCnakyk40Mdhi8CvFQ6uD16nYwAcxPRfCWDCxF6yx-1xdRJMQ5JmOKZIpik9hIz7iy4EZpVCJoQthcgkQQSX71BtkhtT7U6Yya47NoSP4rtXnSKvXxzIFNGY5LhY1IBo/s32/rss.png'
alt='rss'/></a>
</div>
</div>
<div
class='tbisharebox'>
<script
type='text/javascript'>
var
switchTo5x = true;
</script>
<script
src='http://w.sharethis.com/button/buttons.js' type='text/javascript'
/>
<script
type='text/javascript'>
stLight.options({
onhover:
false
});
</script>
<div
style='margin: 5px 5px;'>
<span
class='st_fblike_hcount' displaytext=''></span>
</div>
<div
style='margin: -30px -20px 0 0; float: right;'>
<a
href='http://twitter.com/share' rel='nofollow' class='twitter-share-button'
expr:data-url='data:post.canonicalUrl'
expr:data-text='data:post.title'
data-related='topbloggingidea:Get
latest Blogger Widgets, Blogging Tips, Blogging Ideas, Blogger Gadgets, Free
Blogger Templates, Plugins and SEO tips to Optimize Your Blogs.'
data-count='horizontal'
data-via='topbloggingidea' data-lang='en'></a>
<b:if
cond='data:post.isFirstPost'>
<script
type='text/javascript' src='http://platform.twitter.com/widgets.js'>
</script>
</b:if>
</div>
<div
class='addthis_toolbox addthis_default_style' style='margin: 10px 0 12px
85px;'>
<a
class='addthis_counter'></a>
<script
type='text/javascript'
src='http://s7.addthis.com/js/250/addthis_widget.js'></script>
</div>
<div
style='margin: 5px 5px;'>
<su:badge
layout='1'></su:badge>
<script
type='text/javascript'>
(function
() {
var
li = document.createElement('script');
li.type
= 'text/javascript';
li.async
= true;
li.src
= ('https:' == document.location.protocol ? 'https:' : 'http:') +
'//platform.stumbleupon.com/1/widgets.js';
var
s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(li,
s);
})();
</script>
</div>
</div>
<div
style='float: right; margin: -40px -5px 0 0;'>
<div
class='g-plusone' data-size='medium'
expr:data-href='data:post.url'></div>
<script
type='text/javascript'>
(function
() {
var
po = document.createElement('script');
po.type
= 'text/javascript';
po.async
= true;
po.src
= 'https://apis.google.com/js/plusone.js';
var
s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po,
s);
})();
</script>
</div>
<div
style='margin-top: 20px;'>
<iframe
allowTransparency='true'
frameborder='0' scrolling='no'
src='http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FTopBloggingIdeas&width=570&colorscheme=light&
show_faces=true&stream=false&header=false&height=180'
style='border:none;
overflow:hidden; width:570px; height:180px;' />
</div>
</div>
</b:if>
<!--Social
Subscription Box bloggingpasuruan.blogspot.com—>
<small><div
style='font-size:80%; text-align:right; text-shadow:2px 2px 2px
#adadad;'><a href=#' target='_blank' title='Widget Social
Subscription'>Dapatkan Widgetnya Disini </a></div></small>
Sesuatu
yang penting untuk anda ganti pada kode diatas
1.Ganti
feedburner uri dengan Feedburner-Anda dan values dengan akun Feedburner anda
2.Ganti
link Facebook, Twitter, Google+, Pinterest and RSS feed dengan URL media sosial
dengan link anda
3.Ganti
www.facebook.com%2Fdengan fans page facebook
anda. Jangan menggunakan http:// dan ganti (/) dengan %2F
Demikian
tutorial cara membuat widget Social Subscription Box. Semoga bermanfaat.
Silahkan tinggalkan komentar baik pertanyaan, saran atau kritik membangun.
Terima kasih atas apresiasi anda!