Ganti Background Gambar Template Secara Otomatis

Ganti Background Gambar Template Secara Otomatis - Hallo Sob Jody Blog, artikel kali ini berjudul Ganti Background Gambar Template Secara Otomatis, kami telah menuliskan yang kami tahu pada artikel ini, semoga bermanfaat.

Judul : Ganti Background Gambar Template Secara Otomatis
link : Ganti Background Gambar Template Secara Otomatis

lihat juga


Ganti Background Gambar Template Secara Otomatis

Contoh Kotak Widget Tombol Background Otomatis
S
ebenarnya cara mengganti background template secara otomatis pernah saya posting di blog ini silahkan lihat ,pada pertemuan kali ini juga kang mahfid akan membuat tutorial yang sama akan tetapi dengan cara berbeda dan lebih sederhana ,tapi sobat jangan khawatir meskipun saya buat dengan cara yang sangat sederhanan tapi hasilnya sangat luar biasa..he he he (itu sich menurut Admin).
untuk melihat demonya silahkan sobat lihat dan praktekkan tombol tombol di bagian atas sidebar.sobat bisa tambahkan berapa warna / gambar yang ingin sobat tambahkan silahkan ganti sendiri url gambarnya sesuai keinginan sobat.Sebenarnya trik ini saya dapat dari blog nya kang Taufik Nurrohman ( www.dte.web.id/ ) akan tetapi saya buat lebih sederhana agar mudah dan gampang di praktekkan di blog sobat karena kita sudah tidak perlu lagi melakukan edit template.Nah untuk cara membuat  Background Gambar Template Secara Otomatis silahkan ikuti tutorialnya lebih lanjut.
  1. Silahkan loggin dulu ke blogger.com
  2. Setelah masuk ke dasboard silahkan pilih tata letak 
  3. Lalu tambah Gadgget pilih Html Java Script lalu masukkan kode berikut  :
  4. <div style="background:blue;width:275px;height:auto;border:2px solid#333;overflow:hidden;margin-left:10px;text-align:center;">
    <style>#bgColorer {
    overflow:hidden;
    padding:15px;
    background-color:rgba(0,0,0,0.4);
    }
    #bgColorer span {
    width:20px;
    height:20px;
    border:3px solid #333;
    margin:0px 5px 0px 0px;
    float:left;}</style>
    <div id="bgColorer">
    <span style="background-color:#8E006B;" onclick="bgSwitch(this.style.backgroundColor);"></span>
    <span style="background-color:#007D47;" onclick="bgSwitch(this.style.backgroundColor);"></span>
    <span style="background:url(http://karina-project2.googlecode.com/files/1.jpg) repeat;" onclick="bgSwitch(this.style.background);"></span>
    <span style="background:url(http://karina-project2.googlecode.com/files/2.jpg) repeat;" onclick="bgSwitch(this.style.background);"></span>
    <span style="background:url(http://karina-project2.googlecode.com/files/3.jpg) repeat;" onclick="bgSwitch(this.style.background);"></span>
    <span style="background:url(http://karina-project2.googlecode.com/files/4.jpg) repeat;" onclick="bgSwitch(this.style.background);"></span>
    <span style="background:url(http://karina-project2.googlecode.com/files/5.jpg) repeat;" onclick="bgSwitch(this.style.background);"></span>
    <span style="background:url(http://karina-project2.googlecode.com/files/6.jpg) repeat;" onclick="bgSwitch(this.style.background);"></span>
    <span style="background:url(http://karina-project2.googlecode.com/files/air.jpg) repeat;" onclick="bgSwitch(this.style.background);"></span>
    <span style="background:url(http://karina-project2.googlecode.com/files/8.jpg) repeat;" onclick="bgSwitch(this.style.background);"></span>
    <span style="background:url(http://suarajakartadotcom.files.wordpress.com/2011/10/suarajakarta-logo-obi.jpg?w=406&h=300&crop=1)no-repeat top right;" onclick="bgSwitch(this.style.background);"></span>
    <span style="background:url(http://www.ecasuppliesonline.co.uk/images/upload/blogger%20logo.jpg)no-repeat bottom right;" onclick="bgSwitch(this.style.background);"></span>
    <span style="background:brown url(http://www.ecasuppliesonline.co.uk/images/upload/blogger%20logo.jpg)no-repeat top left;" onclick="bgSwitch(this.style.background);"></span>
    <span style="background:brown url(http://www.ecasuppliesonline.co.uk/images/upload/blogger%20logo.jpg)no-repeat top left;" onclick="bgSwitch(this.style.background);"></span>
    </div>
    <script>var dbs = document.body.style;
    function bgSwitch(v) {
    dbs.background = v;
    }</script>
    </div>
  5. Jangan Lupa Save
Silahkan Sobat Ganti kode Warna dan kode gambar sesuai keinginan sobat sendiri selamat mencoba...!!!



Demikianlah Artikel Ganti Background Gambar Template Secara Otomatis

Sekian Ganti Background Gambar Template Secara Otomatis, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sekian postingankali ini.

Anda sedang membaca artikel Ganti Background Gambar Template Secara Otomatis dan artikel ini url permalinknya adalah https://caratutorialgratis.blogspot.com/2013/02/ganti-background-gambar-template-secara.html Semoga artikel ini bisa bermanfaat.