4 in 1 Cool Sosial Share

Selamat pagi sobat Kolom Tutorial™ dan selamat berahir pekan,.....
Salah satu daya tarik sebuah blog mungkin dengan memasang Fans Page Facebook, Twitter, Kotak Share Google Plus dan Kotak Berlangganan via Email. ke-empat media diatas mungkin akan terasa ribet bila cara pemasangannya satu persatu, nah sobat, Kolom Tutorial™ kali ini akan menyajikan kepada sobat bagaimana cara memasang media tersebut dengan cuman satukali peasangan yang dikemas dalam satu koding.

VIEW A DEMO

Berikut cara pemasangannya :

1. Login ke akun Blogger sobat

2. Klik Edit Tata Letak

3. Klik Tambahkan Gadget

4. Klik HTML/JavaScript

5. Kopipaste Koding dibawah ini

6. Klik Save

Ini Kode Yang Harus Dipasang

    border-radius: 6px;
/*box-shadow*/
    -webkit-box-shadow: 5px 5px 5px #CCCCCC;
    -moz-box-shadow: 5px 5px 5px #CCCCCC;
    box-shadow: 5px 5px 5px #CCCCCC;
    padding: 10px;
    margin: 10px 0;}
.enteryouremail {
    background: #fff !important;
    border: 1px solid #d2d2d2;
    padding: 0px 8px 0px 8px;
    color: #a19999;
    font-size: 12px;
    height: 25px;
    width: 165px;
/*border-radius*/
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin: 0px;}
.submitbutton {
    background: #F2F2F2;
    border: 1px solid #F66303;
/*box-shadow*/
    -webkit-box-shadow: 3px 3px 3px #666;
    box-shadow: 3px 3px 3px #666;
    font: bold 12px Arial, sans-serif;
    color: #000000;
    height: 25px;
    padding: 0 12px 0 12px;
    margin: 0 0 0 5px;
/*border-radius*/
    -webkit-border-radius: 5px;
    border-radius: 5px;
    cursor: pointer;}
</style><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
<script type="text/javascript">jQuery(document).ready(function(){ jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#facebook_right").stop(true,false).animate({right: -200}, 500); });    jQuery("#twitter_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#twitter_right").stop(true,false).animate({right: -250}, 500); });     jQuery("#google_plus_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#google_plus_right").stop(true,false).animate({right: -154}, 500); });    jQuery("#feedburner_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#feedburner_right").stop(true,false).animate({right: -303}, 500); });    });</script>
<div id="on">
<div id="facebook_right" style="top: 18%;">
<div id="facebook_div">
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisgvN9KY4Cry_H53FtsRQLjddF3Ym6MHRyIUP7mcPmCHTSYIjGeQufKfIeg9_EBFOWYwl3U8jdbmLtbcS-brmaW0tUOfvFVaFBADqVSsD9U0qH3_KNV_0rG0_Yun3JDnEeDjwhFWju-Lc5/s1600/facebook-icon.png" alt=""/>
   <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fjoens.tutorial&width=181&height=290&show_faces=true&colorscheme=light&stream=false&border_color&header=true&appId=254247987936949" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:181px; height:290px;" allowtransparency="true"></iframe>
</div>
</div>
</div>
<div id="on">
<div id="twitter_right" style="top: 35%;">
<div id="twitter_div">
   <img id="twitter_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgC_pwdsDqa2ViROivBj2mtAexe6XiVIlXfRRoNYC0ReIa7gdWa7_b_DXdArhsaPblH2uz1rXf521KTugsxe1aTkxgU9jMeBUKErhqTRgiICH7iv3DhPgAHQxfyyWMgYML6GfRbD75tMn2/s1600/twitter-icon.png"/>
   <script src="http://widgets.twimg.com/j/2/widget.js"></script>
   <script>new TWTR.Widget({version: 2,type: 'profile',rpp: 4,interval: 1000,width: 246,height: 265,theme: {shell: {background: '#63BEFD',color: '#FFFFFF'},tweets: {background: '#FFFFFF',color: '#000000',links: '#47a61e'}},features: { loop: false,live: true,scrollbar: false,hashtags: false,timestamp: true,avatars: true,behavior: 'all' }})
.render().setUser('alexjoen').start();</script>
</div>
</div>
</div>
<div id="on">
<div id="google_plus_right" style="top: 52%;">
<div id="google_plus_div">
   <img id="google_plus_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfHvOme9-CZ59lETldTH1vwF5UsAujClPWQvenkmpLRwh9D56eK8Yl9GOfqMxCmIKtT4Mj3MsnEA7LaJbKGn_4GeqUbgiC6uxz9gXzsCd11h8JnAuovzM3_yPZ-mWW5x540X2j6uOWAKMG/s1600/google-plus-icon.png"/>
   <div style="float:left;margin:10px 10px 10px 0;">
    <g:plusone size="tall" expr:href="data:post.url"></g:plusone>
   </div>
</div>
</div>
<div id="on">
<div id="feedburner_right" style=" top: 69%;">
   <div id="knfeedburner_div">
    <center>
    <h4 style="color:#F66303;">You can also receive Free Email Updates:</h4>
    <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open
('http://feedburner.google.com/fb/a/mailverify?uri=kolomtutorial', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
     <input gtbfieldid="10" class="enteryouremail" name="email" value="Enter your email here..." onblur="if (this.value == '') {this.value = 'Enter your email here...';}" onfocus="if (this.value == 'Enter your email here...') {this.value = '';}" type="text"/>
<input value="kolomtutorial" name="uri" type="hidden"/><input value="Submit" class="submitbutton" type="submit"/>
    </form>
    </center><img id="feedburner_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSDSZzMh60j7GERdO_RMU7rnO1S7IewaE9le-wr_zc5mO2KPkBM4qSs8AyVzyDefTRE8_AoCRLwYgOOknLERMNLH90w_tYFVU_XRvSMNn3C3Fr3qsvKYfB2AJLk6D1JTezQs9UkGQDXZr6/s1600/subscribe-icon.png"/>
   </div>
</div>
</div>
</div>

NOTE :

1. Ganti joens.tutorial Dengan Nama Fans Page Facebook Sobat

2. Ganti alexjoen Dengan Akun Twitter Sobat

3. Ganti kolomtutorial Dengan Alamat Feds Sobat

4. Enjoy..............