'No Ordinary' social sharing, email subscribtion dll di 3 kolom

      'No Ordinary' Social Share & email Subscribtion keren - Kenapa saya bisa bilang widget ini keren? Ya, karna widget mempunyai 3 kolom. Kolom 1, untuk subscribe, kolom ke-2 untuk share (via addthis), dan kolom ke-3 untuk facebook fanspage. Selain itu, jika kursor mengarah ke widget tersebut, akan tampat efek hover pada border masing-masing kolom.

         
      Untuk lebih jelasnya, anda bisa langsung mencobanya dengan mengikuti langkah - langkah dibawah ini :
1. Login blog.
2. Template - > Edit html.
3. Klik Lanjutkan, centang expand template widget.
4. Cari kode <data:post.body/> (Pilih yang pertama).
5. Copas kode dibawah ini, tepat dibawahnya.

<!--No Ordinary Social Subscription Widget--> 

<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=infoiki&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='infoiki' /> 

<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='FACEBOOK URL' target='_blank' title='Join us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnWMjT61Bha_sQ22YQoLd-NMfKWNsD5U31dYmLVMEhP8vh8JhoU0JqNSnvC3fGmaMKzZwFQJnwl0Xe1o2GV9H_UT905qPfX_d9d8iPf0egoT71fai5WrfojTbvUWL5yoHXP6L5Im8NtjQ/s32/facebook500.png' alt='facebook'/></a> 

<a href='TWITTER URL' rel='nofollow' target='_blank' 

title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgylp2IsrFSwFUM40UXx16Aj8C1AEjuhyphenhyphen46d8odKGDrtO-pzq4gCoUzzZLRJVl_pemaCVbUIMfl6ZauusbkIBN0Ey0BNhlZygUMMc9eK4qxihhsaBLyAKYKeTQz8shYv0I2z-TWgqdpqQ8/s32/twitter.png' alt='twitter'/></a> 

<a href='GOOGLE+ URL' rel='nofollow' target='_blank' 

title='Follow us on Google+'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtUdhzRcsMCeFDMlkf_mFhdIie4gCjal3tBlzow6dMLbAM-eMrq-FMEbC_pW9Kq9f-5aC5swT3pPyGxFColiXNa9eFNhRlPlbnzdDKloylZUcHlkJB6aAJJprJqBXmD3zAHbsEpnJMELM/s32/googleplus-revised.png' alt='gplus'/></a> 

<a href='PINTEREST URL' rel='nofollow' target='_blank' 

title='Follow us on Pinterest'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5HWgoPPKFzSQYF3XL124Gal5lUvdvX9tI3GK4luBTjDelhSXw0crtf-u2d9B4848cun-vazACp3VDS03hjVyaaFUoTvoYjXIbl5zfzCEM5ATJItrtgZs-dJQCRCJ6JOrYsoKjp9HsnwU/s32/pinterest.png' alt='pinterest'/></a> 

<a href='RSS URL' rel='nofollow' target='_blank' 

title='Subscribe to RSS'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJpZLry2FDYDVBQBT-9WcUbOLci8Md0fUwXTO8X9j18-UCSzPHCZ-LdwSCw9YR0BeybkZ-qprDuxw015h38CwJuHYhUSl0uZFzFaQQyufTQ67FrvedZfPDHGZSnCzxv7G-l5CZE11uleo/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> 
SCRIPT WIDGET LINTAS.ME DISINI

<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-count='horizontal'  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%2Fbloggertricks&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;' /><a href="http://infoiki.blogspot.com/2012/08/no-ordinary-social-sharing-email-html">Infoiki widgets</a>

</div> 

</div> 

</b:if> 

<.div>

<!--No Ordinary Social Subscription Widget-->

 6. Save template.

  Keterangan :

1. Kode bertuliskan iinfoiki , ganti dengan username feedburner anda.

2. Kode berwarna merah bold, ganti dengan url fanspage anda.

INGAT & PENTING!!!

Kode '%2F' sama dengan '/' (garis miring).  Jadi, jika anda ingin menambah garis miring (/) pada teks dengan style merah bold, silahkan gunakan %2F, sebagai penggantinya.

3. Jika ingin meletakkan widget lintas.me, ganti kode berwarna HIJAU dengan script widget lintas.me. Jika tidak, hapus kode berwarna hijau tersebut. Ingin mendapatkan script widget lintas.me secara sangat mudah dan GRATIS? KLIK DISINI!

SELAMAT MENCOBA & SEMOGA BERMANFAAT! :)