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:
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:
Untuk membuatnya, pertama-tama masuklah ke halaman
editor HTML template Anda:
Temukan kode ini:
</body>
Salin
script di bawah ini dan letakkan di atasnya:
1code-line:1-12code-line:1-23code-line:1-34code-line:1-45code-line:1-56code-line:1-67code-line:1-78code-line:1-89code-line:1-910code-line:1-1011code-line:1-1112code-line:1-1213code-line:1-1314code-line:1-1415code-line:1-1516code-line:1-1617code-line:1-1718code-line:1-1819code-line:1-1920code-line:1-2021code-line:1-2122code-line:1-2223code-line:1-2324code-line:1-2425code-line:1-2526code-line:1-2627code-line:1-2728code-line:1-2829code-line:1-2930code-line:1-3031code-line:1-3132code-line:1-3233code-line:1-3334code-line:1-3435code-line:1-3536code-line:1-3637code-line:1-3738code-line:1-3839code-line:1-3940code-line:1-4041code-line:1-4142code-line:1-4243code-line:1-4344code-line:1-4445code-line:1-4546code-line:1-4647code-line:1-4748code-line:1-4849code-line:1-4950code-line:1-5051code-line:1-5152code-line:1-5253code-line:1-5354code-line:1-5455code-line:1-5556code-line:1-5657code-line:1-5758code-line:1-5859code-line:1-5960code-line:1-6061code-line:1-6162code-line:1-6263code-line:1-6364code-line:1-6465code-line:1-6566code-line:1-6667code-line:1-6768code-line:1-68<script src='http://dte-project.googlecode.com/svn/trunk/cookie.js'></script>
<script>
var expiredStyle = 7000,
dbs = document.body.style;
function bgSwitch(v) {
dbs.background = v;
createCookie('bgstyle', v, expiredStyle);
}
function fontSwitch(v) {
dbs.fontFamily = v;
createCookie('fontstyle', v, expiredStyle);
}
function changeFontSize(v) {
dbs.fontSize = v + 'px';
createCookie('fontsize', v, expiredStyle);
}
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>
Klik
Simpan Template. Sekarang masuk ke halaman
Tata Letak:
Tambahkan sebuah elemen halaman
HTML/JavaScript, kemudian salin kode ini dan letakkan di dalam formulirnya:
1code-line:2-12code-line:2-23code-line:2-34code-line:2-45code-line:2-56code-line:2-67code-line:2-78code-line:2-89code-line:2-910code-line:2-1011code-line:2-1112code-line:2-1213code-line:2-1314code-line:2-1415code-line:2-1516code-line:2-1617code-line:2-1718code-line:2-1819code-line:2-1920code-line:2-2021code-line:2-2122code-line:2-2223code-line:2-2324code-line:2-2425code-line:2-2526code-line:2-2627code-line:2-2728code-line:2-2829code-line:2-2930code-line:2-3031code-line:2-3132code-line:2-3233code-line:2-3334code-line:2-3435code-line:2-3536code-line:2-3637code-line:2-3738code-line:2-3839code-line:2-3940code-line:2-4041code-line:2-4142code-line:2-4243code-line:2-4344code-line:2-4445code-line:2-4546code-line:2-4647code-line:2-4748code-line:2-4849code-line:2-4950code-line:2-5051code-line:2-5152code-line:2-5253code-line:2-5354code-line:2-5455code-line:2-5556code-line:2-5657code-line:2-5758code-line:2-5859code-line:2-5960code-line:2-6061code-line:2-6162code-line:2-6263code-line:2-6364code-line:2-6465code-line:2-6566code-line:2-6667code-line:2-6768code-line:2-6869code-line:2-6970code-line:2-7071code-line:2-7172code-line:2-7273code-line:2-7374code-line:2-7475code-line:2-7576code-line:2-7677code-line:2-7778code-line:2-7879code-line:2-7980code-line:2-8081code-line:2-8182code-line:2-8283code-line:2-8384code-line:2-8485code-line:2-8586code-line:2-8687code-line:2-8788code-line:2-8889code-line:2-8990code-line:2-9091code-line:2-9192code-line:2-9293code-line:2-9394code-line:2-9495code-line:2-9596code-line:2-9697code-line:2-9798code-line:2-9899code-line:2-99100code-line:2-100101code-line:2-101102code-line:2-102103code-line:2-103104code-line:2-104105code-line:2-105106code-line:2-106107code-line:2-107108code-line:2-108109code-line:2-109110code-line:2-110111code-line:2-111112code-line:2-112113code-line:2-113114code-line:2-114<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 border="0" 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
Blogazine.
Pertanyaan mengenai pengembangan dan penambahan fitur bisa dilanjutkan di bawah, tapi pastikan Anda sudah membaca cara kerja
JavaScript Cookies sebelum berdiskusi » (pelajari
di sini)