Bisakah Pengunjung Mengganti Background Blog Anda ?

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

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