Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.

Style Switcher Blog dengan Cookies

Style Switcher Blog
Style Switcher Blog

Style Switcher adalah aplikasi/aksesoris kecil yang biasa ada dalam sebuah situs untuk mengizinkan pengunjung mengganti tampilan dari luar sesuka hati. Dengan ini diharapkan pengunjung tidak akan bosan dengan artikel yang dia baca karena dia bisa memutuskan desain situs yang sedang dia kunjungi melalui Style Switcher. Versi asli yang lebih besar sebenarnya cenderung mengambil konsep penggantian file CSS secara keseluruhan:

Style Switcher pada Yahoo! Mail
Style Switcher pada Yahoo! Mail

Di sini Saya hanya akan mengambil beberapa perubahan kecil saja seperti warna latar, warna huruf, jenis huruf dan ukuran huruf. Versi ini agak berbeda dengan yang biasa Anda temui, karena versi ini sudah Saya lengkapi dengan JavaScript Cookies. Kelebihannya adalah, saat pengunjung blog Anda mengubah tampilan template Anda dari luar, meskipun dia sudah berpindah-pindah halaman, perubahan yang dia lakukan akan tetap bertahan:

Lihat Sampel

Untuk membuatnya, pertama-tama masuklah ke halaman editor HTML template Anda:

Mengedit HTML Template
Mengedit HTML Template

Temukan kode ini:

</body>

Salin script di bawah ini dan letakkan di atasnya:

<script src='http://dte-project.googlecode.com/svn/trunk/cookie.js'></script>
<script>
/**
 * Style Switcher with JavaScript Cookie by Taufik Nurrohman
 * URL: https://plus.google.com/108949996304093815163/posts
 */

//<![CDATA[
// =========================================================================
// == Your personal function
// =========================================================================
var expiredStyle = 7000,
    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 cookies successfully created and successfully read... do something!
// =========================================================================
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');
}

// =========================================================================
// == Reset button
// =========================================================================
function resetStyle() {
    eraseCookie('bgstyle');
    eraseCookie('fontstyle');
    eraseCookie('fontsize');
    eraseCookie('fontcolor');
    window.location.reload(1);
}
//]]>
</script>

Klik Simpan Template. Sekarang masuk ke halaman Tata Letak:

Masuk ke Halaman Tata Letak
Masuk ke halaman Tata Letak

Tambahkan sebuah elemen halaman HTML/JavaScript, kemudian salin kode ini dan letakkan di dalam formulirnya:

<style>
#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 id="styleSwitcher">
    <tr><th class="title" colspan="2">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>

Klik Simpan dan lihat hasilnya.

Kode yang Saya beri tanda adalah masa kadaluarsa kuki. Saya membuat masa kadaluarsa selama 7000 hari untuk membuat tampilannya bertahan selama mungkin. Tapi jika Anda ingin menentukan sendiri masa kadaluarsa perubahan tema yang pengunjung Anda lakukan, (misalnya tampilan yang telah berubah akan kembali menjadi seperti semula dalam waktu 3 hari), cukup ganti nilainya dari 7000 menjadi 3 (untuk 3 hari).

Catatan: Aksesoris ini cocok diterapkan pada tema yang sederhana, cenderung berkotak-kotak dan tidak memiliki detail elemen yang rumit. Tidak cocok untuk . Pertanyaan mengenai pengembangan dan penambahan fitur bisa dilanjutkan di bawah, tapi pastikan Anda sudah membaca cara kerja JavaScript Cookies sebelum berdiskusi » (pelajari di sini)

  

Berlangganan

Berlangganan: Dapatkan berbagai materi dan informasi seputar dunia pemrograman yang tidak akan pernah bisa kalian dapatkan di buku dan di bangku kuliah.

 34 Komentar

Memuat…

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://example.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI…</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI…</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI…</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

:) :( ^_^ :D ;) :bd :'( :\ ;p B) :Q :Ozzz 7:( \o/ **p :* 0:) :a 7:O *fuck* x& x@ ~x( *yaya* =p*

Nama Saya Taufik Nurrohman. Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias. Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?
Ke atas!