Cara Pengunjung Mengubah Tampilan Blog Kita

ads here
Tahukah Anda bahwa Pengunjung Bisa Mengubah Tampilan Blog Kita ?. Memang suatu hal yang mudah untuk mengganti tampilan sebuah blog melalui element struktur HTML pada Template, Tapi jika itu dilakukan oleh admin (pemilik blog). Lalu bagaimana jika pengunjung ternyata bisa mengubah tampilan , background, font blog kita sesuai dengan kesukaan mereka ?

Ya... Sebagai blogger, kita mendisain tampilan blog semenarik mungkin agar pengunjung suka dengan warna tampilan blog serta artikel yang kita suguhkan dalam kontent. Namun, kita tidak pernah berpikir bahwa dari kalangan mana pengunjung blog kita berdatangan ?, warna apa kesukaan setiap pengunjung yang hadir membaca artikel kita. ?. Dan satu hal yang pasti yaitu setiap orang punya selera masing-masing.

Pada artikel Sebelumnya Admin sudah mebahas tentang cara membuat 3 kolom artikel dalam 1 halaman. yaitu sebuah aartikel untuk membuat atau mempartisi halaman posting menjadi beberapa kolom seperti majalah atau surat kabar agar terlihat profesional. Dan sekarang Admin akan memberikan tutorial tentang Cara Pengunjung Mengubah Tampilan Blog kita. 

Aplikasi Customize color


Customize Color


Berawal dari pemikiran ini Admin berinisiatf untuk membuat aplikasi yang akan di tempatkan pada Blog agar pengunjung bisa dengan leluasa memilih tampilan yang mereka suka. Dan untuk membuat aplikasi ini Admin akan mengambil sample dari yahoo yang menggunakan STYLE SWITCHER dimana dengan aplikasi ini member bisa mengubah tema dan tampilan sesuka hati.

Setelah menelisik lebih jauh ternyata STYLE SWITCHER menggunakan COOKIES yang dibalut dengan JAVASCRIPT seperti dibawah 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);
}

Sumber script diatas adalah http://www.quirksmode.org/js/cookies.html COOKIES merupakan aplikasi penyimpanan data pada browser. Dan saya akan menerapkan hal yang sama seperti ada yahoo yakni kode diatas akan saya balut dengan java script agar bisa berfungsi dan berjalan pada blog. Dan ternyata hasilnya suksess, Tampilan aplikasi ini bisa anda lihat pada LIVE DEMO dibawah ini:

LIVE DEMO

Bagaimana Cara Membuat Aplikasinya ?

Silahkan ikuti petunjuk dibawah ini guna menerapkanya pada blog Anda:

Langkah Pertama

-> Login ke blog Anda kemudian pilih Template >>Edit Template, Cari ( ctrl + f ) dan temukan kode </body>
-> Copy Script dibawah ini lalu paste diatas kode </body>.

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

Langkah Kedua

Simpan Template anda, Kemudian temppatkan kode berikut dibawah ini diamanapun sesuai kesukaan anda untuk menampilkan aplikasi switchler pada blog Anda.

<style http:="" expertblogger.org="" typecss="">
#styleSwitcher {
  border:none;
  margin:0 0;
  padding:0 0;
  width:100%;
  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>

<br />
<table border="0" id="styleSwitcher">
    <tbody>
<tr><th class="title" colspan="2">Bosan Dengan Warna Background blog ini..? Pilih Warna di bawah ini !!</th></tr>
<tr>
        <td colspan="2"><div id="bgColorer">
<span onclick="bgSwitch(this.style.backgroundColor);" style="background-color: #523690;"></span>
                <span onclick="bgSwitch(this.style.backgroundColor);" style="background-color: #248bcb;"></span>
                <span onclick="bgSwitch(this.style.backgroundColor);" style="background-color: #fed100;"></span>
                <span onclick="bgSwitch(this.style.backgroundColor);" style="background-color: #c91212;"></span>
                <span onclick="bgSwitch(this.style.backgroundColor);" style="background-color: #3a9838;"></span>
                <span onclick="bgSwitch(this.style.backgroundColor);" style="background-color: #36404a;"></span>
                <span onclick="bgSwitch(this.style.backgroundColor);" style="background-color: orange;"></span>
                <span onclick="bgSwitch(this.style.backgroundColor);" style="background-color: purple;"></span>
                <span onclick="bgSwitch(this.style.backgroundColor);" style="background-color: pink;"></span>
                <span onclick="bgSwitch(this.style.backgroundColor);" style="background-color: blue;"></span>
                <span onclick="bgSwitch(this.style.backgroundColor);" style="background-color: #959595;"></span>
<span onclick="bgSwitch(this.style.backgroundColor);" style="background-color: #a305a3;"></span>
<span onclick="bgSwitch(this.style.backgroundColor);" style="background-color: magenta;"></span>
<span onclick="bgSwitch(this.style.backgroundColor);" style="background-color: #89c237;"></span>
<span onclick="bgSwitch(this.style.backgroundColor);" style="background-color: cyan;"></span>
<span onclick="bgSwitch(this.style.backgroundColor);" style="background-color: #a3a305;"></span>
<span onclick="bgSwitch(this.style.backgroundColor);" style="background-color: #ff7f7f;"></span>
<span onclick="bgSwitch(this.style.backgroundColor);" style="background-color: #f6b26b;"></span>
<span onclick="bgSwitch(this.style.backgroundColor);" style="background-color: #c27ba0;"></span>
<span onclick="bgSwitch(this.style.backgroundColor);" style="background-color: white;"></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 id="fontColorer" onkeyup="fontColor(this.value);" type="text" value="#000000" /></td>
    </tr>
<tr><th>Ukuran Huruf</th>
        <td><input id="fontSizer" maxlength="3" onkeyup="changeFontSize(this.value);" type="text" value="12" /></td>
    </tr>
<tr><th>Reset?</th>
        <td><button onclick="resetStyle();">Reset Semua Tampilan</button></td>
    </tr>
</tbody></table>

Setelah selesai silahkan anda simpan kemudian refresh halaman blog anda untuk melihat hasil dari aplikasi ini. Semoga tutorial yang Expert Blogger berikan kali ini bermanfaat untuk anda. jangan lupa klik follow blog ini untuk mendapatkan update tutorial menarik terbaru berikutnya dari kami.
  ..

FOLLOW NOW