Style Switcher ialah aplikasi/aksesoris kecil yang biasa ada dalam sebuah situs untuk mengizinkan pengunjung mengganti tampilan dari luar sesuka hati. Dengan ini dibutuhkan pengunjung tidak akan bosan dengan artikel yang beliau baca sebab beliau dapat memutuskan desain situs yang sedang beliau kunjungi melalui Style Switcher. Versi orisinil yang lebih besar bersama-sama cenderung mengambil konsep penggantian file CSS secara keseluruhan:
Di sini Saya hanya akan mengambil beberapa perubahan kecil saja menyerupai warna latar, warna huruf, jenis abjad dan ukuran huruf. Versi ini agak berbeda dengan yang biasa Anda temui, sebab versi ini sudah Saya lengkapi dengan JavaScript Cookies. Kelebihannya adalah, dikala pengunjung blog Anda mengubah tampilan template Anda dari luar, meskipun beliau sudah berpindah-pindah halaman, perubahan yang beliau lakukan akan tetap bertahan:
Untuk membuatnya, pertama-tama masuklah ke halaman editor HTML template Anda:
Temukan instruksi 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:
Tambahkan sebuah elemen halaman HTML/JavaScript, kemudian salin instruksi 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 ialah masa kadaluarsa kuki. Saya menciptakan masa kadaluarsa selama 7000 hari untuk menciptakan tampilannya bertahan selama mungkin. Tapi kalau Anda ingin memilih sendiri masa kadaluarsa perubahan tema yang pengunjung Anda lakukan, (misalnya tampilan yang telah berubah akan kembali menjadi menyerupai 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 mempunyai detail elemen yang rumit. Tidak cocok untuk Blogazine. Pertanyaan mengenai pengembangan dan penambahan fitur dapat dilanjutkan di bawah, tapi pastikan Anda sudah membaca cara kerja JavaScript Cookies sebelum berdiskusi » (pelajari di sini)