preload
12345

Cara membuat widget 3 in 1 ( Blogger, Twitter, FB )

Published in: Label:

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.

Read More...
0 komentar

Cara Membuat Screen Saver Blog Dengan Gambar Sendiri

Published in: Label:

Hello IT Loverz... Gimana kabarnya ? saya harap baik-baik saja ya. Kali ini saya akan memposting Tutorial tentang "Cara Membuat Screen Saver Blog Dengan Gambar Sendiri". hmmm.. cukup panjang yah judulnya, hehehe.. But No Problem, karena Nubie di luar sana memang sering mencari Tutor ini dengan kata kunci "Cara Membuat Screen Saver Blog Dengan Gambar Sendiri", jadi sengaja saya buat seperti itu.

Mungkin dari beberapa IT Loverz sudah banyak yang mengetahui tutor ini. Tapi saya yakin juga masih banyak IT Loverz yang pemula masih belum tau tentang Tutor ini. Yaitu membuat Screen Saver di Blog, hah ? screen saver di blog ? bukannya screen saver cuma ada di windows ? hhaha itu untuk komputer, yang ini lain lagi. IT Loverz dapat melihat ScreenSaver di Blog saya dengan menunggu beberapa menit tanpa menggerakan mouse IT Loverz, maka beberapa saat akan muncul ScreenSaver seperti di bawah ini :



Dalam membuat ScreenSaver ini ada 2 cara, yaitu dengan cara langsung (default) atau dengan cara mengedit kode.
OK Kita langsung saja mulai Tutor kali ini.

Tutor : Cara Membuat Screen Saver Blog Dengan Gambar Sendiri

DENGAN CARA LANGSUNG (DEFAULT)
1. Pertama login ke BLOG IT Loverz masing-masing
2. Masuk ke Template => Edit HTML => Lanjutkan
3. Jangan lupa untuk meng-klik "Expand Template Widget"
4. Lalu cari kode <head> ( Gunakan Ctrl+F untuk mempercepat pencarian )
5. Lalu copas kode berikut di bawah kode <head>
<script src='http://deafile.webs.com/JavaScript/Screensaver.js'><br/></script>
atau script yang ini
<script language="javascript" type="text/javascript" src="http://www.onlineleaf.com/savetheenvironment.js"></script>


DENGAN CARA MENGEDIT KODE
1. Copast script di bawah ini di NOTEPAD IT Loverz


var idleTime=0;var standby=false;function CheckInactivity(){idleTime+=10;if(idleTime>60){InitializeStandBy()}}function InitializeStandBy(){if(!standby){var a=0;a=jQuery(window).height();jQuery("#energysaving").show().css({height:"0",width:"0",left:"50%",top:"50%"}).animate({width:"100%",height:a,left:"0",top:"0",opacity:"1"},1000);standby=true}}function StopStandBy(){if(standby){jQuery("#energysaving").animate({width:"0",height:"0",opacity:"0",left:"50%",top:"50%"},500);setTimeout('jQuery("#energysaving").hide();',800);standby=false}}document.write('<link rel="stylesheet" href="http://www.onlineleaf.com/savetheenvironment.css" type="text/css">');if(typeof(jQuery)=="undefined"){document.write('<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"><\/script>')}function InitJQuery(){if(typeof(jQuery)=="undefined"){setTimeout("InitJQuery();",50)}else{jQuery(function(){jQuery(document).ready(function(){setInterval("CheckInactivity();",10000);jQuery(this).mousemove(function(a){idleTime=0;StopStandBy()});jQuery(document).keypress(function(a){idleTime=0;StopStandBy()});jQuery("body").append('<div id="energysaving"><p><br/><span></span></p><div id="copyrightOnlineLeaf">Copyright @2012 |<font style="color:#00FF00;"><blink> http://nightmare-999.blogspot.com </blink></font>| <font style="color: #FFFFFF;">Supported by: OnlineLeaf </font> | Design by : <font style="color:#FF0000;"><blink>Angga S.</blink></blink></div></div>');jQuery("#energysaving").hide()})})}}InitJQuery();

Lalu jika sudah Save dengan format .js
2. Lalu Upload Script tersebut ke GoogleCode, cara Uploadnya bisa IT Loverz liat DISINI
3. Jika sudah mendapatkan URLnya, langsung masukan Link JS IT Loverz pada script di bawah sini :



<script type="text/javascript" src="URL JAVASCRIPT"></script>
<style type='text/css'>
div#energysaving, div#energysaving * { -moz-border-radius: 0; -webkit-border-radius: 0; border: 0; background: url(URL GAMBAR) no-repeat center center fixed black; }
div#energysaving p span {display:none;visibility:hidden;}
</style>
4. Lalu masuk ke blog IT Loverz
5. Masuk ke Tata Letak => Tambah widget => HTML/Javascript
6. Masukan script di atas yang telah berisikan URL JS IT Loverz ke widget lalu simpan.
Dan lihat hasilnya. :D

Sumber : http://nightmare-999.blogspot.com/2012/06/cara-membuat-screen-saver-blog-dengan.html#ixzz21stDrzWR

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

Follow My Twitter

online gambling insider.ca

Tag Cloud

Flash tag cloud requires Flash Player 9 atau lebih.

Followers

Resent Post

Popular Posts


Copyright @ ArtikelBetuah 2012
All Rights Reserved
Designed by Betuah Theme | Nature Templates by ArtikelBetuah Nature Template Place