Sabtu, 25 Agustus 2012

2 Membuat Gambar Background Blog Berganti Otomatis

Membuat Gambar Background Blog Berganti Otomatis

Biar Blog makin mencleng aja, kita coba membuat Gambar Backgroundnya berganti-ganti secara otomatis, sehingga indah dipandang mata, jangan kwuatir ini tidak akan buat lelet loudingnya asalkan jangan terlalu jangan terlalu banyak anda menggunakan flash animasi, cara cukup mudah.

1.  Seperti biasanya Log In Blog dulu

2.  Klik Rancangan
3.  Klik Edit HMTL
4.  Letakkan kode CSS dibawah ini diatas kode   ]]></b:skin>


.sleding, img.coX {
        height: 768px;  // bisa diganti : 100%, auto //
        width: 1024px;
        position: fixed;
        top: 0;
        left: 0;
        z-index:-9999;
}

5.  Coba anda letakkan kode script dibawah ini diatas kode   </head>

<script src="https://sites.google.com/site/cuerosbhelatos/cueros.js" type="text/javascript">
</script>
<script src="https://sites.google.com/site/cuerosbhelatos/sikil.js" type="text/javascript">
</script>
<script>
 $(document).ready(function() {
    $('.sleding').sikil({
    fx: 'growX', // Kode growX bisa diganti dengan:fade, scrollUp, scrollRight, scrollDown, turnUp, turnDown, turnLeft, turnRight, wipe, toss, uncover, cover, fadeZoom, zoom, blindX, blindY, growX, growY, curtainX, curtainY //
    pager: '#smallnav',
    pause:   2,
    speed: 2000,//ganti nilai varibelnya semakin besar nilainya semakin lambat efek slidenya//
    timeout:  2000
   });
  });
</script>

6.  Kode HMTL dibawah ini letakkan tepat dibawah kode  </head>

<div class='sleding'>

<img class='coX' src='http://stuckincustoms.smugmug.com/Portfolio-The-Best/your-favorites/18219156511129fc8dfo/742619193_SacSS-900x583.jpg'/>
<img class='coX' src='http://stuckincustoms.smugmug.com/Portfolio-The-Best/your-favorites/4070581709a1c668a779o/742619345_hkJPG-900x600.jpg'/>
<img class='coX' src='http://1-ps.googleusercontent.com/x/www.stuckincustoms.com/stuckincustoms.smugmug.com/Portfolio-The-Best/your-favorites/Portofino2/900x589x788763356_a9WJp-900x589.jpg.pagespeed.ic.641eVzE004.jpg'/>
<img class='coX' src='http://www.weirdpalace.com/img/nature/peta-protest/peta-protest11.jpg'/>
<img class='coX' src='http://dl.ziza.ru/other/102007/31/other/telke/04_telke_86252.jpg'/>
<img class='coX' src='http://dl.ziza.ru/other/102007/31/other/telke/06_telke_73023.jpg'/>
<img class='coX' src='http://dl.ziza.ru/other/102007/31/other/telke/08_telke_88255.jpg'/>
<img class='coX' src='http://dl.ziza.ru/other/102007/31/other/telke/13_telke_74982.jpg'/>
<img class='coX' src='http://i50.tinypic.com/18j0ic.jpg'/>
<img class='coX' src='http://i45.tinypic.com/25sa1bp.jpg'/>
<img class='coX' src='http://i48.tinypic.com/9pp9ig.jpg'/>
<img class='coX' src='http://i47.tinypic.com/34tahwo.jpg'/>
<img class='coX' src='http://i49.tinypic.com/29yk3ed.jpg'/>
<img class='coX' src='http://i46.tinypic.com/34ycjs9.jpg'/>
<img class='coX' src='http://i49.tinypic.com/t0j8zq.jpg'/>
</div>



Keterangan
Kode warna Hijau sesuaikan lebar gambar dengan layar tampilan di monitor
Kode warna merah ganti sesuai dengan alamat url gambar pilihan anda yang sudah di Uploap
Kalau gambarnya belum di Upload  Masukkan   kesini

7.  Pratinjau dahulu kalau sudah oke Save 
 Selamat bersenang senang dengan gambar blognya.

;READMORE

Senin, 13 Agustus 2012

2 Cara mengganti background blog

Tampilan blog yang itu-itu saja dapat membosankan,  karena itu agar tidak bosan kita coba mengganti backgroundnya dengan gambar atau bisa juga dengan animasi agar kelihatan berbeda sedikit, caranya sangat mudah


1.  Log in Bloger
2.  Pilih tata letak(rancangan)
3.  Pilih Edit HMTL

Cari kode seperti dibawah ini ( cara cepat cari kode hmtl tekan F3)

body {
background:#000;
margin:0;
color:#ffffff;
font:12px trebuchet ms;
text-align: center;
}

 Setelah ketemu anda tinggal menambahkan kode url background saja seperti ini,ganti url warna merah dengan url foto anda

body {
background::url("http://foto saya.jpg") ;
margin:0;
color:#ffffff;
font:12px trebuchet ms;
text-align: center;
}

Kalau juga masih sulit,  hapus seluruhnya kode diatas ganti dengan kode dibawah ini 

body {background-image:url('http://cdn.indowebster.com/www42.indowebster.com/7dd2ae51f4b0cb792d3a435dc953f5cc_thumbnail.gif');}url(http://cdn.indowebster.com/www42.indowebster.com/7dd2ae51f4b0cb792d3a435dc953f5cc_thumbnail.gif) left top repeat-x;color:#C5C5C5;font-family: Arial, Helvetica, Sans-serif;font-size: 13px;margin:0px;padding:0px;}

4.   Pratinjau dahulu sudah oke Save
 Kalau gambar background menjadi banyak acak acakan cara mengatasinya klik disini
Sekian dan terima kasih 
;READMORE
 

TOMMY-PATIKAWA
twins-ix.blogspot.com Full free html/java script

Full free html/java script
twins-ixx.blogspot.com - Regga Twinlight Webmaster
- FREE TIPS AND TRICK @ 2010