Widget Facebook, Twitter dan G+1 Slider

Jika anda sudah memiliki website sendiri, tentunya anda ingin tampilan website anda menarik buat dilihat oleh banyak pengunjung, selain modern dan keren pengunjung betah berada di website anda.
salah satunya yang buat blog anda terlihat menarik, yaitu memasang widget.
disini saya akan memberikan pada anda widget social facebook, twitter dan G+1 dengan tampilan slider dan menarik.
berikut screen shotnya :

Menarik bukan?
jika anda tertarik, ikuti saja langkah-langkahnya di bawah ini.

1. Masuk ke akun blogger
2. Tata Letak/Layout
3. Add gadget
4. Add/Edit HTML
5. Copy Paste kode di bawah ini :

<script src="http://code.jquery.com/jquery-latest.js"></script> <script src="http://apis.google.com/js/plusone.js" type="text/ javascript"></script> <link rel="stylesheet" type="text/css" href="https://dl.drop boxusercontent.com/s/m4krejz6tw6sxlf/3%20in%201%20StyleSheet.css" /> <script src="https://dl.dropboxusercontent.com/s/e5p8j4qnfvgda8p/ 3%20in%201%20Widget.js"></script>    <div id="on">    <div id="facebook_right" style="top: 12%;">      <div id="facebook_div">       <img alt="" src="http://3.bp.blogspot.com/-wQUpmiGwynE/UNHJaesfqeI/ AAAAAAAAItg/JQlnTuoFRnQ/s1600/NBTfacebook_right.png" />       <iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/likebox.php?href= http%3A%2F%2Fwww.facebook.com%2FCoMetSHaRE&amp;width=200&amp; height=346&amp;colorscheme=light&amp;show_faces=true&amp; border_color&amp;stream=false&amp;header=false"       style="border: none; height: 346px; overflow: hidden; width: 200px;"> </iframe>      </div>    </div>  </div>  <div id="on">   <div id="twitter_right" style="top: 28%;">      <div id="twitter_div">       <img id="twitter_right_img" src="http://3.bp.blogspot.com/-UrPbwWyd88E/ UNHJhIlDSRI/AAAAAAAAIt4/fmis0qzbcfI/s1600/NBTtwitter_right.png" /> <div style="width:248px;font-size:8px;text-align:right;"> <script type="text/javascript">  document.write(unescape("%3Cscript src='http://twitterforweb.com/twitterbox.js?username=@IkhsanGaozhan& settings=0,1,2,248,279,ffffff,0,c4c4c4,101010,1,1,336699' type='text/ javascript'%3E%3C/script%3E"));</script><a href="http://cometshare.blogspot.com/" target="_blank"></a></div>        </div>      </div>    </div>   <div id="on">      <div id="google_plus_right" style="top: 45%;">       <div id="google_plus_div">          <img id="google_plus_right_img" src="http://2.bp.blogspot.com/-e2uAzeEjWU4/UTHxwZv6O_I/AAAAAAAAACo/ IIkUjVUrtus/s1600/NBTgoogle_plus_right.png" />          <div style= "float: left; margin: 10px 10px 10px 0;">           <a href='http://cometshare.blogspot.com/'>             <img alt='Comet Share' src= 'http://3.bp.blogspot.com/_rKG-ziTSNUQ/TQ5eV0U0EiI/AAAAAAAACik/ xo2eFaDbfrE/s1600/best+blogger+tips.png' />            </a>           <div class="g-plus" data-action="followers" data-height="250" data-href="https://plus.google.com/101354035066564687263" data-source=" blogger:blog:followers" data-width="270"></div>            <script type= "text/javascript">            (function () {              window.___gcfg = {                'lang': 'en'              };              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>      </div>

Keterangan :

• Kode berwarna Merah ganti dengan ID Fans page facebook anda
• Kode berwarna Hijau ganti dengan ID twitter anda
• Kode berwarna Biru ganti dengan ID Google Plus anda.

Memasang widget twitter di blog

Bagi anda yang sudah memiliki blog sendiri dan anda ingin mempercantik tampilan blog anda, salah satunya dengan memasang widget twitter. hal yang pertama anda harus membuat akun twitter dulu, jika sudah copy kode di bawah ini dan paste kan.


<div style="background:#fff url(http://cometshare.blogspot.com/-CLBGzLyi1so/T1UPEFQD_oI/AAAAAAAAFuI/dTa03s7vVYg/s1600/tweet.png) no-repeat;padding-top:45px;padding-left:8px">
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 10,
interval: 3000,
width: 285,
height: 123,
theme: {
shell: {
background: 'transparent',
color: '#000000'
},
tweets: {
background: 'transparent',
color: '#000000',
links: '#135a9e'
}
},
features: {
scrollbar: false,
loop: true,
live: true,
hashtags: true,
timestamp: true,
avatars: true,
behavior: 'default'
}
}).render().setUser('AndieAAN').start();
</script>
</div>
<br />
<div class="twitter"> <!-- Twitter --> <iframe title="" style="width: 300px; height: 20px;" class="twitter-follow-button" src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351&amp;
align=&amp;button=blue&amp;id=twitter_tweet_button_0&amp;
lang=en&amp;link_color=&amp;screen_name=AndieAAN&amp;show_count=&amp;
show_screen_name=&amp;text_color=" frameborder="0" scrolling="no"></iframe> </div>


Cara nya :
1.login ke blogger
2.klik tata letak
3.klik tambah gadget
4.pilih edit html/javascript
5.kemudian paste kode tersebut
6.save.
catatan : silahkan ganti yang berwarna merah dengan nama anda..
Lihat hasilnya..semoga bermanfaat buat anda. silahkan beri komentar nya. . .thank's