13.3.14
18
Mengganti background adalah hal yang mudah untuk dilakukan, tetapi jika itu anda yang melakukannya (Pemilik Blog), karena hanya account anda yang secara resmi terdaftar sebagai kepemilikan suatu web/blog sehingga yang dapat melihat atau mendesain tampilan blog melalui element struktur HTML pada template adalah account pemilik situs.

Apakah pengunjung dapat mengganti background seperti yang anda lakukan? Jawabannya- YA..!!
Ada sebuah aplikasi/aksesoris kecil pada sebuah situs, yang mengizinkan pengunjung mengganti tampilan dari luar (misalnya mengganti warna tampilan background, merubah jenis huruf, warna huruf serta ukuran huruf pada artikel yang dia Baca/kunjungi) dan aplikasi ini bernama STYLE SWITCHER.

Seperti pada YAHOO masih menerapkan aplikasi Style Switcher, yang tampak dalam gambar berikut

Yahoo selected color image

Aplikasi tersebut membuat saya tertarik, dan mencari central kode selector apa yang digunakan hingga dapat menciptakan aplikasi seperti itu, dan ternyata aplikasi tersebut menggunakan COOKIES yang dibalut dengan JAVASCRIPT seperti ini


function createCookie(name, value, days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        var expires = "; expires=" + date.toGMTString();
    } else {
        var expires = "";
    }
    document.cookie = name + "=" + value + expires + "; path=/";
}

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
}

function eraseCookie(name) {
    createCookie(name, "", -1);
}

Script Cookie diatas sumbernya dari http://www.quirksmode.org/js/cookies.html, saya akan coba memindahkan aplikasi tersebut agar dapat juga kita terapkan pada blog, karena blog juga dapat membaca bahasa JavaScript, dan hasilnya sempurna pada browser GOOGLE CHROME, dan kegagalan pada MOZILLA FIREFOX dan INTERNET EXPOLER (style switcher) tidak merespon, kesalahan pada Cookies, karena cookies merupakan aplikasi penyimpan data pada browser. Saya akan menggabungkan semua dengan penerapan yang sama, COOKIES saya balut juga dengan JavaScript, sehingga tampilannya akan terlihat lebih sempurna pada  DEMO  dibawah ini



DEMO SHOW



Bisakah Pengunjung Mengganti Background Blog Anda ?, jawabannya tentu saja bisa dengan kode penerapan dibawah ini
  1. Template - Edit Template, Cari dan Temukan Kode </body>
  2. Copy Script berikut, lalu Pastekan diatasnya

<script>
/**
 * Style Switcher with JavaScript Cookie by Devy Indriyani
 * URL: https://sahabatblogger77.blogspot.com/
 */

//<![CDATA[
//=============================================================
// == File credit personal function (script)
//=============================================================
var expiredStyle = 9000,
    dbs = document.body.style;

// background switcher
function bgSwitch(v) {
    dbs.background = v;
    createCookie('bgstyle', v, expiredStyle);
}

// font switcher
function fontSwitch(v) {
    dbs.fontFamily = v;
    createCookie('fontstyle', v, expiredStyle);
}

// font sizer
function changeFontSize(v) {
    dbs.fontSize = v + 'px';
    createCookie('fontsize', v, expiredStyle);
}

// color switcher
function fontColor(v) {
    dbs.color = v;
    createCookie('fontcolor', v, expiredStyle);
}
if (readCookie('bgstyle')) {
    dbs.background = readCookie('bgstyle');
}
if (readCookie('fontstyle')) {
    dbs.fontFamily = readCookie('fontstyle');
}
if (readCookie('fontsize')) {
    dbs.fontSize = readCookie('fontsize') + 'px';
    document.getElementById('fontSizer').value = readCookie('fontsize');
}
if (readCookie('fontcolor')) {
    dbs.color = readCookie('fontcolor');
    document.getElementById('fontColorer').value = readCookie('fontcolor');
}
function resetStyle() {
    eraseCookie('bgstyle');
    eraseCookie('fontstyle');
    eraseCookie('fontsize');
    eraseCookie('fontcolor');
    window.location.reload(1);
}
//]]>
</script>

SIMPAN TEMPLATE Anda, Kemudian Tempatkan kode berikut dimana sesuka hati anda untuk menampilkan aplikasi Style Switcher pada blog anda

<style typecss[HTML]="[{http://sahabatblogger77.blogspot.com}]">
#styleSwitcher {
  border:none;
  margin:0 0;
  padding:0 0;
  width:98%;
  text-align:left;
  font:normal 11px Tahoma,Arial,Sans-Serif;
  border-collapse:collapse;
}

#styleSwitcher th,
#styleSwitcher td {
  vertical-align:middle;
  border:none !important;
  padding:2px 10px;
}

#styleSwitcher th.title {
  background-color:#ccc;
  padding:5px 10px;
  margin:0 0 10px;
  text-transform:uppercase;
  font-size:12px;
  font-family:Arial,Sans-Serif;
}

#styleSwitcher select,
#styleSwitcher input[type="text"] {
  width:130px;
  border:2px solid #bbb;
  background-color:#333;
  padding:2px;
  font:bold 11px Tahoma,Verdana,Arial,Sans-Serif;
  color:#999;
  display:block;
  margin:0 0 0;
  height:24px;
}

#styleSwitcher select option {
  color:white;
  padding:5px 10px;
  cursor:pointer;
}

#styleSwitcher button {
  font:normal 11px Tahoma,Arial,Sans-Serif;
  padding:3px 5px;
  cursor:pointer;
}

#styleSwitcher #bgColorer {
  overflow:hidden;
  margin:10px 0 10px;
}

#styleSwitcher #bgColorer span {
  display:block;
  float:left;
  width:20px;
  height:20px;
  border:1px solid black;
  margin:0 5px 0 0;
  cursor:pointer;
}

#styleSwitcher input[type="text"] {
  width:118px !important;
  padding:4px !important;
  height:auto !important;
}
</style>
<table border="0" id="styleSwitcher">
    <tr><th class="title" colspan="2">Bosan Dengan Warna Background..!! Ganti Tampilan Sesuka Hati</th></tr>
    <tr>
        <td colspan="2">
            <div id="bgColorer">
                <span style="background-color:#523690;" onclick="bgSwitch(this.style.backgroundColor);"></span>
                <span style="background-color:#248bcb;" onclick="bgSwitch(this.style.backgroundColor);"></span>
                <span style="background-color:#fed100;" onclick="bgSwitch(this.style.backgroundColor);"></span>
                <span style="background-color:#c91212;" onclick="bgSwitch(this.style.backgroundColor);"></span>
                <span style="background-color:#3a9838;" onclick="bgSwitch(this.style.backgroundColor);"></span>
                <span style="background-color:#36404a;" onclick="bgSwitch(this.style.backgroundColor);"></span>
                <span style="background-color:#ffffff;" onclick="bgSwitch(this.style.backgroundColor);"></span>
            </div>
        </td>
    </tr>
    <tr><th>Tipe Font</th>
        <td>
            <select onchange="fontSwitch(this.value);">
                <option selected="true">--</option>
                <option value="'Book Antiqua',Serif">Book Antiqua</option>
                <option value="'Times New Roman',Serif">Times New Roman</option>
                <option value="Georgia,Serif">Georgia</option>
                <option value="Arial,Sans-Serif">Arial</option>
                <option value="Tahoma,Verdana,Arial,Sans-Serif">Tahoma</option>
                <option value="'Trebuchet MS',Arial,Sans-Serif">Trebuchet</option>
                <option value="Verdana,Arial,Sans-Serif">Verdana</option>
                <option value="'Century Gothic',Tahoma,Verdana,Arial,Sans-Serif">Century Gothic</option>
                <option value="'Comic Sans MS',Serif">Comic Sans</option>
            </select>
        </td>
    </tr>
    <tr><th>Warna Font</th>
        <td><input type="text" id="fontColorer" value="#000000" onkeyup="fontColor(this.value);"/></td>
    </tr>
    <tr><th>Ukuran Huruf</th>
        <td><input type="text" id="fontSizer" value="12" maxlength="3" onkeyup="changeFontSize(this.value);"/></td>
    </tr>
    <tr><th>Reset?</th>
        <td><button onclick="resetStyle();">Reset Semua Tampilan</button></td>
    </tr>
</table>



KETERANGAN
  1. Saat pengunjung blog Anda mengubah tampilan background template Anda dari luar, meskipun dia sudah berpindah-pindah halaman, perubahan yang dia lakukan akan tetap bertahan selama waktu yang telah saya tentukan dengan kode yang saya beri tanda, angka itu merupakan masa kadaluarsa kuki selama 9000hari, jika anda ingin merubahnya, cukup ganti dengan 2 (untuk 2hari) dan seterusnya.
  2. Bahasa script diatas dapat terbaca oleh semua jenis blog, Hanya pada BLOGAZINE aplikasi ini tidak dapat merespon
  3. Semoga pengunjung lebih betah berlama-lama bermain dengan background pada Template blog anda
  4. Terimakasih  ....SEMOGA BERHASIL.... Salam SAHABAT BLOGGER 77

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Bisakah Pengunjung Mengganti Background Blog Anda ?
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

18 komentar

  1. keren mba postingannya. :D,, jarang2 perempuan suka ngoding :D

    BalasHapus
  2. btw bbuat load mere post gmn sob,, itu pake jquery ya

    BalasHapus
    Balasan
    1. scriptnya sengaja saya gantung mas,karena waktu dilihat hasil tampilan belum sempurna, setelah diperbaiki, baru script kita lepas seperti yang mas lihat ada load post berganti menjadi tombol 3D

      Hapus
  3. repot ya kalau pengunjung bisaa ganti background blog kita

    BalasHapus
    Balasan
    1. maksudnya yang repot apanya mas,
      lihat DEMO SHOW mas brow, maksud artikel ini, saya menyediakan icon warna untuk mengganti tampilan background template, dan itu bisa dilakukan oleh pengunjung, namun warna asli akan kembali semula sesuai dengan waktu yang mas tentukan

      Hapus
  4. Fitur ini sering saya lihat di template premium. ternyata kita bisa bikin sendiri ya....
    Keren sob triknya makasih :)

    BalasHapus
    Balasan
    1. bener sekali sob, aplikasi ini sangat cocok untuk blog yang minim fitur,

      Hapus
  5. misalnya tampilan background yang saya kunjungi hitam dan saya kurang selera maka saya bisa mengganti nya dengan warna lain tanpa mengubah warna asli pemilik..intinya cuma saya yang bisa lihat gitu ya mbak

    BalasHapus
    Balasan
    1. kurang lebih seperti itu mbak, walau pemilik blog tidak online, kita bisa leluasa mengubah tampilan background blognya, dan script diatas sudah saya lengkapi dengan fitur text sebagai tambahan, sehingga text bisa juga kita gonta-ganti ke model text yang selera hati

      Hapus
  6. keren nih, perlu dicoba tapi kayaknya ribet hehe

    BalasHapus
    Balasan
    1. gak begitu ribet ko mas, kan kodenya sudah saya susun, tinggal dicopy pada template scriptnya, lalu kode terakhir tempatkan dimana yang kita sukai, misalnya pada sidebar blog, tinggal ke tata letak lalu java/Script tinggal paste dech. cukup mudah kok,,
      hehehe

      Hapus
  7. Keren juga yah pengunjung blog bisa mengganti backgroun blog kita hehe

    BalasHapus
    Balasan
    1. Terinspirasi waktu mengunjungi YAHOO kang, kok background pada yahoo bisa digonta-ganti, padahal saya belum log-in, cari tahu ternyata kode yang dipakai script cookie, coba diblog, ehh taunya bisa juga hehe

      Hapus
  8. Waaaah mantap mbah,, jadi pingin nyoba nih,,,

    BalasHapus
  9. pingin nyoba tapi takut ggal hehe

    BalasHapus
    Balasan
    1. kegagalan kan jembatan menuju KESUKSESAN sob, hehe..
      pada blog saya bisa, pasti bisa juga pada blog sobat, lihat DEMO SHOW

      Hapus
  10. ijin nyoba saya tutorial ini Mbak Devy terima kasih sudah berbagi :)

    BalasHapus
  11. Terima kasih mbak devy, tutorialnya sangat membantu dan bermanfaat sekali.

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK