Tutorial kali
ini akan saya bagikan bagaimana cara membuat widget Social Subscription Box Keren alias Cool 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 paling populer saat ini, Dengan
menggunakan tombol share diharapkan artikel anda akan tersebar luas ke berbagai
jejaring sosial yang ada, yang nantinya akan diharapkan juga dapat meningkatkan pelanggan
RSS feed anda juga kotak fans page untuk meningkatkan like
blog anda.
1. Formulir
feedburner untuk subscribe pelanggan artikel
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 di atas dari widget berlangganan artikel ini cukup simple dan bersih yang tidak akan membingungkan pengunjung
blog Anda. 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.
Silahkan
ikuti langkah-langkah berikut ini:
1. Seperti
biasa login ke akun Blogger >>>
Template >>> Edit HTML >>> Proceed
2. Kemudian
klik Expand Widget Templates
3. Kemudian
Anda cari kode berikut : <data:post.body/>
Anda mungkin
akan menemukan dua atau tiga kode diatas, letakkan kode berikut pada kode
pertama saja. Diatas <data:post.body/>
<!--Social
Subscription Box akusharekan.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=akusharekan',
'popupwindow', 'scrollbars=yes,width=550,height=520');return
true'
style='margin:
0pt;' target='popupwindow'>
<input
name='uri' type='hidden' value=akusharekan' />
<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/akusharekan ’target='_blank' title='Join us on
Facebook'><img src='https://lh5.googleusercontent.com/-hbgtzN6sfys/UC_Rt4HCCUI/AAAAAAAAGI4/sNVfSO9oubo/s32/facebook500.png'
alt='facebook'/></a>
<a
href='http://twitter.com/akusharekan'
rel='nofollow' target='_blank'
title='Follow
us on Twitter'><img src='https://lh5.googleusercontent.com/-cBjXpo4xiHA/UC_RvG1JfwI/AAAAAAAAGJI/cQF9OReQCog/s32/twitter.png'
alt='twitter'/></a>
<a
href='https://plus.google.com/ganti dengan ID google plus Anda/' rel='nofollow'
target='_blank'
title='Follow
us on Google+'><img src='https://lh4.googleusercontent.com/-dzFCD4A8UqU/UC_Rtz0xGDI/AAAAAAAAGI8/iz4dYkboPZ0/s32/googleplus-revised.png'
alt='gplus'/></a>
<a
href='http://pinterest.com/
akusharekan /' rel='nofollow' target='_blank'
title='Follow
us on Pinterest'><img src='https://lh3.googleusercontent.com/-VHXyLvPpEBg/UC_Rt63AIdI/AAAAAAAAGJA/xMdGrSFINE4/s32/pinterest.png'
alt='pinterest'/></a>
<a
href='http://feeds.feedburner.com/akusharekan' rel='nofollow' target='_blank'
title='Subscribe
to RSS'><img src='https://lh6.googleusercontent.com/-14vjEhUXrMk/UC_RuxvrOgI/AAAAAAAAGJQ/OQT6x8yxTXY/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%2Fberbagi Pengetahuan&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 akusharekan.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'>+ Get This Widget
Here</a></div></small>
Yang paling
penting untuk Anda ganti pada kode diatas
<<>>Ganti feedburner uri
TipsTrikBlogging-Amatullah dan values
dengan akun Feedburner anda
<<>>Ganti link Facebook, Twitter, Google+,
Pinterest and RSS feed dengan URL media sosial anda
Ganti www.facebook.com%2F BerbagiPengetahuan.
Berbagi Pengetahuan fans page facebook anda. Jangan menggunakan http:// dan
ganti (/) dengan %2F
Demikian
tutorial cara membuat Cara Membuat Widget Social Box Keren. Semoga bermanfaat.
Terima kasih atas kunjungan anda!
Terima kasih atas kunjungan anda!
EmoticonEmoticon