preload
Hello guys ,, apa kabar ?? Semoga teman - teman semua baik - baik saja ,agar bisa terus menggali ilmu di blog saya ,hehehe ...
Ok guys langsung saja kali ini saya akan memposting tentang cara membuat widget 3 in 1 (Blogger, Twitter,FB).

Untuk lebih jelasnya lagi saya berikan screen shotnya :

Ok guys langsung saja kita bahas turtor kali ini .

ATTENTION !
Jangan pernah lupa untuk membackup template bloggers untuk menghindari hal hal yang tidak di inginkan

1. Langsung masuk ke Blog agan masing-masing.
2. Langsung ke Tata Letak => Tambah Gatget => ADD Gatget (HTML/Javascript)
3. Lalu copy script di bawah ini :
<style type="text/css">
.barrightblogger{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZu4Odhx3nSwFMZEWQrMojU99d5XokSeIacjZKq2Hxdi1e7_OgpFOKcID1fZRXYIEgy2tl2gohxZ3TgZJ6dLZuXC8QR7sRQwRRTiVrIZjbHyN_DzsWzvr_Hh0oHM35o9hgimRQRIlNQHtD/');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/AVvXsEjQr4mGmhgFRxNuBHBTXsbWogQy15alNJO_Ljo4-h2LWD0eWiJccL1CV5DwSzQ3PABHEEgLyf3bWPmXb_AQh2UXTtIK71TNBVFT25lYS_WsBYsrYSzkpKpVDw26nLKV5oTs5TSkBLL0kKiz/');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/AVvXsEjCVgI4KYP-XSKl1gYo0eoa-8X_sItZjY8xZ3xhUZmCuHFVWuFS3UP5qU6JgE7mCgEV_JxINbckdAjRDLkNPb7DS96SAXW4XoqKXFHOUy5QNmHLni1E5KeCkArdbJdv74rPufCXWVH4hgeE/');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/AVvXsEhoSoasKOHD3EN66a4xRFhew1D_ikfggbncBtGJ1paGqLHix2i49MeDnpCi0Q3OpIldQ1iqUlAmrNn2X8tWtr_15fk6PB3Hc8AY5ouzZQnxuTHCriJtey5iTwfnKWOcsqefZ5fc3zdcZCC9/');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/AVvXsEj-dx4LeUEE2dlSQXcvvDzn-Qa3bqfwVMvmtqEsbBbBrjsWmpHrBcGP7-xVZL8eo_8E0ozzy4sBxA5uEFi2IhSVK90N1TbvuF8eOqLmLjNFJSN9FgzkkxA22Q3GmRgNDHain-KXbLhscTID/');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/AVvXsEjEUc-t5TbFXXyVTQUqx5nXZ9wyz4GtQRuq0jUGBc8Rt89q-INi7_UUaXKQ-QF3gG9rISfp5tBMCeimT6JBcPkRmmhlz0H0lxuuWEYGlCYcB-ZTSolVKClaw7m3BsCKsMGjzUggxNAsiY7p/');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">
CONTENT BLOGGER HERE
</div>
</div>
<div class="barrighttwitter" onmouseover="this.className='barrighttwitterc'" onmouseout="this.className='barrighttwitter'">
<div class="barcontetwitter">
CONTENT TWITTER HERE
</div>
</div>
<div class="barrightfacebook" onmouseover="this.className='barrightfacebookc'" onmouseout="this.className='barrightfacebook'">
<div class="barcontefacebook">
CONTENT FACEBOOK HERE
</div>
</div>
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/AVvXsEgZu4Odhx3nSwFMZEWQrMojU99d5XokSeIacjZKq2Hxdi1e7_OgpFOKcID1fZRXYIEgy2tl2gohxZ3TgZJ6dLZuXC8QR7sRQwRRTiVrIZjbHyN_DzsWzvr_Hh0oHM35o9hgimRQRIlNQHtD/');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/AVvXsEjQr4mGmhgFRxNuBHBTXsbWogQy15alNJO_Ljo4-h2LWD0eWiJccL1CV5DwSzQ3PABHEEgLyf3bWPmXb_AQh2UXTtIK71TNBVFT25lYS_WsBYsrYSzkpKpVDw26nLKV5oTs5TSkBLL0kKiz/');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/AVvXsEjCVgI4KYP-XSKl1gYo0eoa-8X_sItZjY8xZ3xhUZmCuHFVWuFS3UP5qU6JgE7mCgEV_JxINbckdAjRDLkNPb7DS96SAXW4XoqKXFHOUy5QNmHLni1E5KeCkArdbJdv74rPufCXWVH4hgeE/');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/AVvXsEhoSoasKOHD3EN66a4xRFhew1D_ikfggbncBtGJ1paGqLHix2i49MeDnpCi0Q3OpIldQ1iqUlAmrNn2X8tWtr_15fk6PB3Hc8AY5ouzZQnxuTHCriJtey5iTwfnKWOcsqefZ5fc3zdcZCC9/');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/AVvXsEj-dx4LeUEE2dlSQXcvvDzn-Qa3bqfwVMvmtqEsbBbBrjsWmpHrBcGP7-xVZL8eo_8E0ozzy4sBxA5uEFi2IhSVK90N1TbvuF8eOqLmLjNFJSN9FgzkkxA22Q3GmRgNDHain-KXbLhscTID/');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/AVvXsEjEUc-t5TbFXXyVTQUqx5nXZ9wyz4GtQRuq0jUGBc8Rt89q-INi7_UUaXKQ-QF3gG9rISfp5tBMCeimT6JBcPkRmmhlz0H0lxuuWEYGlCYcB-ZTSolVKClaw7m3BsCKsMGjzUggxNAsiY7p/');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&amp;width=24
    0&amp;colorscheme=light&amp;connections=15&amp;stream=false&amp;header=false&amp;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
Jika ada yang ingin di tanyakan silahkan berkomentar di bawah sini.

  • 0 komentar:

    • Posting Komentar

ArtikelBetuah. Diberdayakan oleh Blogger.
******Kunjungi blog teman saya juga ya****** CatatanRipsn.blogspot.com/