Welcome !!!: Juli 2012

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&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

Jika ada yang ingin di tanyakan silahkan berkomentar di bawah sini.

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

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

Welcome !!!

Welcome to My Blog

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

Cara Membuat Screen Saver Blog Dengan Gambar Sendiri

Follow My Twitter

Categories

Tag Cloud

Followers

Blog Archive

Resent Post

Popular Posts