Cara Membuat Widget Social Subscription Box

Akhirnya dapat membuat widget Social Subscription Box atau widget berlangganan posting yang berbeda dari biasanya. Saya katakan berbeda karena widget berlangganan artikel ini lengkap dengan berbagai fitur yang dapat menghubungkan anda dengan beberapa jejaring sosial yang terkenal, dengan tombol share diharapkan artikel anda akan tersebar ibarat virus ke berbagai jejaring sosial yang ada, dan diharapkan juga dapat meningkatkan pelanggan RSS feed anda juga kotak fans page untuk meningkatkan penggemar blog anda.

View Demo

Fitur:

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 Anda

Keempat fitur utama dari widget berlangganan artikel ini cukup rapi dan bersih yang tidak akan membingungkan pembaca. Semua tombol media sosial  yang resmi terdapat pada tombol ShareThis. Untuk memberikan nuansa halus digunakan box-shadow bertenaga CSS3 transisi . Jenis Font yang digunakan adalah font Google bernama Oswald.

Sangat antusias untuk menggunakan widget baru yang mengagumkan ini? Anda tidak perlu menunggu lagi. 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 Tipstrikblogging.com-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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(&apos;http://feedburner.google.com/fb/a/mailverify?uri=TipsTrikBlogging-Amatullah&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='TipsTrikBlogging-Amatullah' />
<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='' 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/amatullah.syukur’target='_blank' title='Join us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE70l6kQUHDohR-cD-aN8Rdh3mdUMWCQSqhXkNkPJaJAAoVfgkxd5JxdoXGY857KrJYda4RE6sOHcF8uTii08vOhzBZx_A2zBsX53Lvj-e00qzCU8O3Y_orqbk-LXGoN55Q6heddrCbPU/s32/facebook500.png' alt='facebook'/></a>
<a href='http://twitter.com/amatullahsyukur' rel='nofollow' target='_blank'
title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ2ReaLsdlWHGSBx72HN8DzuYSAw01kxNYPN2LOV-lX5GDtk943YQZzPqjVyoYmG3FQw_Mb3WhxNh4H7psOQMrAt5ZkrkIoKKTpINqsO87gvFuMYjWnF2k0IC0RbN3qkDcw-1fij-XQkg/s32/twitter.png' alt='twitter'/></a>
<a href='https://plus.google.com/116382152511220195182#116382152511220195182/' rel='nofollow' target='_blank'
title='Follow us on Google+'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuDLLsT6dkzrZ09wvJ67MxlW2El-rAFOk1cgtn6iVrS1b6XLvirpsmCzXNDrtTYMnHCG0VcnusNQH9VbnV4iuW9Dr0dOyqZ3SPEsNEQAqgzhdbBKx854L6PAyR0S-yCjjQSCUyuD_gMGU/s32/googleplus-revised.png' alt='gplus'/></a>
<a href='http://pinterest.com/amatullahsyukur/' rel='nofollow' target='_blank'
title='Follow us on Pinterest'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhArjRN3pv87k-tPtESyE3XdnoUpFsAWU7IKs2fmf9JaRnvpdkbl56wmQpId-l2z9f7rzjfn_M3MkIiG7UHtYiEtw4rTCi21qFmJ7S4j7eJjxilOVCjK82Kn53V0V5ttLj_84KfdUWJOOY/s32/pinterest.png' alt='pinterest'/></a>
<a href='http://feeds.feedburner.com/TipsTrikBlogging-Amatullah' rel='nofollow' target='_blank'
title='Subscribe to RSS'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpKi3L3eL5VoKxV4BJJJFasF_iM3aiN1ZTMgKTUuGALm6mnCT0e2dKDE7XMjdPMpuH3kULvidBCHCRyB4xm7MRSWORuhZCg2EYgUDqiQhLpPiBIQ-CA5h-dXmPVi_YXlQ9FwlzKQysr7Q/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&amp;width=570&amp;colorscheme=light&amp; show_faces=true&amp;stream=false&amp;header=false&amp;height=180'
style='border:none; overflow:hidden; width:570px; height:180px;' />
</div>
</div>
</b:if>
<!--Social Subscription Box Tipstrikblogging.com—>

<small><div style='font-size:80%; text-align:right; text-shadow:2px 2px 2px #adadad;'><a href='http://www.tipstrikblogging.com/2012/12/cara-membuat-widget-social-subscription.html' target='_blank' title='Widget Social Subscription'>+ Get This Widget Here</a></div></small>

 

Sesuatu yang penting untuk anda ganti pada kode diatas

1. Ganti feedburner uri TipsTrikBlogging-Amatullah  dan values dengan akun Feedburner anda
2. Ganti link Facebook, Twitter, Google+, Pinterest and RSS feed dengan URL media sosial anda
3. Ganti www.facebook.com%2FTipsTrikBlogging.Amatullah 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!

Original Resource

• Tweet
• Share
• Share
• Share
• Share