Selamat Siang IT Loverz Semua :D

Bagaimana kabarnya ? saya harap IT Loverz baik-baik saja. Ammiiiinn...

OK kali ini saya akan posting tentang bagaimana cara Membuat widget 3 IN 1 ( Blogger, Twitter, FB ).

IT Loverz bisa melihat widget ini di sebelah kanan website saya ini. Disana sudah terlihat bagaimana widget itu jika telah terpasang pada blog IT Loverz masing-masing.

Untuk lebih jelasnya lagi saya berikan screen shotnya :

Oya sampir lupa, Berhubung saya masih bingung bagaimana cara memasang Google Friend Connect pada widget kali ini, jadi say menggantinya dengan Widget NetworkedBlog hehehe #piss.

OK tanpa berlama-lama, kita mulai saja tutor kali ini.

Tutor membuat widget 3 IN 1 ( Blogger, Twitter, FB )

ATTENTION !

1. Langsung masuk ke Blog IT Loverz masing-masing.

2. Langsung ke Tata Letak => Tambah Gatget => ADD Gatget (HTML/Javascript)

3. Lalu copy script di bawah ini :

4. Lalu masukan script-script widget yang akan kita pasang pada widget 3 IN 1 ini sesuai dengan tulisan berwarna biru di atas.

5. Berikut adalah contoh script yang saya gunakan untuk memasang widget ini.

<style type="text/css">
    .barrightblogger{
    background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC_8OsPmm9RLnQ0bXCPthXUn0nH9zS1j_rWS9OVeAnLCN5M-CBI0kI_W5bvdAYuD_M_R7fzZY2SNy_8K5DymqRWNJLlUwj8YQpmuZpuH8H8koZcOTbKOrxhcE7ODalS3nCmIpNOyWaMT4h/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:50px; z-index:1000;}
    .barrightbloggerc{
    background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKd7c1e8PuvFPJqmJMS2LvY_9XTUbFqyLj-LT9NDKE33guwnVTezUufInOislf5LZ94tit6JuJbn10UGaNUUamXma5xFUfGX4KuLZ1L9sMgZNr4FlZhqXnFrrCnVKsnUQJYDHnhL8BhqAx/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:50px; z-index:1100;}
    .barconteblogger{margin:5px 0 0 47px}
    .barrighttwitter{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguBJpz_m5PbiPsh2GWNxJWtF772vkvrNnyjZEYQpaS-BlOkwmd7ybMf4zmBjWKFT5bW7dIIvcrlDd39MuqQvPMHjFAgI0K_cQhPta32g09PC-51h1DlVbmyaPne4r5Qfzw_saYGokCSdte/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:210px;z-index:1000;}
    .barrighttwitterc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX1jnasGmNoueyxwRXcVaI6ZvW9jpEhB7izV6DH9TuhKlmxx4KnpsFRsNd0kDYYJElVy1kwLpTLIQHeKG9gw2ah0hTB_Op42XnvuF3Vm4OhT2YLtd2Tw5XeShXjEHBXHPJ_Li-twHm4L-H/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:120px; z-index:1100;}
    .barcontetwitter{margin:5px 0 0 47px}
    .barrightfacebook{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtIBuy8noPUAMkStlBii05xvdraQifLg9KWTedBrbleb8c89ITQ6fusnOqYdtUouOoRcSxg5DwmKARTcd0T9WEggi_t7va2ZRXgS4l82tPxZRs-hHb_LHEl7ARL3BJBTF58ucwkn7fttnT/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:370px; z-index:1000;}
    .barrightfacebookc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSNBpliZfzb9wmAmU3CZVcS6AE3qIPakn079a5So3AX3akNf8N-ScjnVoNgb4VhNtMheiOITVbRiMXi98iu8CZQO4jgBZ-l12CvS0Y6Sa45TE3NaG9l_QD3rcd8sOXDCVuPbuMTBcWAR2B/');background-
    repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:185px; z-index:1100;}
    .barcontefacebook{margin:5px 0 0 47px}
    </style>
    <div class="barrightblogger" onmouseover="this.className='barrightbloggerc'" onmouseout="this.className='barrightblogger'">
    <div class="barconteblogger">
   <div id='networkedblogs_nwidget_container' style='height:300px;padding-top:10px;'><div id='networkedblogs_nwidget_above'></div><div id='networkedblogs_nwidget_widget' style="border:1px solid #D1D7DF;background-color:#F5F6F9;margin:0px auto;"><div id="networkedblogs_nwidget_logo" style="padding:1px;margin:0px;background-color:#edeff4;text-align:center;height:21px;"><a href="http://www.networkedblogs.com/" target="_blank" title="NetworkedBlogs"><img style="border: none;" src="http://static.networkedblogs.com/static/images/logo_small.png" title="NetworkedBlogs"/></a></div><div id="networkedblogs_nwidget_body" style="text-align: center;"></div><div id="networkedblogs_nwidget_follow" style="padding:5px;"><a style="display:block;line-height:100%;width:90px;margin:0px auto;padding:4px 8px;text-align:center;background-color:#3b5998;border:1pxsolid #D9DFEA;border-bottom-color:#0e1f5b;border-right-color:#0e1f5b;color:#FFFFFF;font-family:'lucida grande',tahoma,verdana,arial,sans-serif;font-size:11px;text-decoration:none;" href="http://www.networkedblogs.com/blog/nightmare-999?ahash=2de458f56333dfbccfa06e2c3cb5e2df">Follow this blog</a></div></div><div id='networkedblogs_nwidget_below'></div></div><script type="text/javascript">
if(typeof(networkedblogs)=="undefined"){networkedblogs = {};networkedblogs.blogId=1129813;networkedblogs.shortName="nightmare-999";}
</script><script src="http://nwidget.networkedblogs.com/getnetworkwidget?bid=1129813" type="text/javascript"></script>


    </div>
    </div>
    <div class="barrighttwitter" onmouseover="this.className='barrighttwitterc'" onmouseout="this.className='barrighttwitter'">
    <div class="barcontetwitter">
    <script src="http://widgets.twimg.com/j/2/widget.js"></script>
    <script>
    new TWTR.Widget({
      version: 2,
      type: 'profile',
      rpp: 10,
      interval: 30000,
      width: 220,
      height: 220,
      theme: {
        shell: {
          background: '#333333',
          color: '#ffffff'
        },
        tweets: {
          background: '#333333',
          color: '#f3f5f0',
          links: '#eb9f07'
        }
      },
      features: {
        scrollbar: true,
        loop: false,
        live: false,
        behavior: 'all'
      }
    }).render().setUser('@anggaluvscreamz').start();
    </script>
    </div>
    </div>
    <div class="barrightfacebook" onmouseover="this.className='barrightfacebookc'" onmouseout="this.className='barrightfacebook'">
    <div class="barcontefacebook">
    <iframe allowtransparency="true" frameborder="0" scrolling="no"
    src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/Nightmare-999/349976001733875&width=24
    0&colorscheme=light&connections=15&stream=false&header=false&height=320" style="border: none; height: 320px;
    overflow: hidden; width: 240px;background: #fff;"></iframe>
    </div>
    </div>

6. Jika sudah jangan lupa Simpan. dan lihat hasilnya