Minggu, 27 Mei 2012
Style Switcher Blog dengan Cookies
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:
<script type='text/javascript' src='http://reader-download.googlecode.com/svn/trunk/cookie.js'></script>
<script type='text/javascript'>
/**
* 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 kode ini dan letakkan di dalam formulirnya:
<style type="text/css">
#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)
Label: Browser, CSS, Desain Tampilan, JavaScript, Menengah, Widget
Minggu, 22 April 2012
Membuat Facebox/Like Box Preloader
Preloader ini hanya berlaku untuk Facebox yang dibangun menggunakan Iframe, jadi saat Anda memilih kode widget, ambillah yang berada pada tab Iframe:
Untuk membuatnya, pertama-tama masuklah ke menu Template kemudian klik Edit HTML dan klik Lanjutkan:
Temukan kode ini:
]]></b:skin>Salin kode CSS di bawah ini lalu letakkan di atasnya:
/* Iframe Preloader */
.framePreloader iframe {
background-color:white;
border:none !important;
display:block;
margin:0px auto;
}Setelah itu temukan kode ini:
</body>Salin kode di bawah ini kemudian letakkan di atasnya:
<script type='text/javascript'>
//<![CDATA[
window.onload = function() {
function createIframe(src, w, h, frID) {
var i = document.createElement("iframe");
i.src = src;
i.scrolling = "auto";
i.frameborder = "0";
i.width = w;
i.height = h;
document.getElementById(frID).appendChild(i);
}
// Definisikan dimensi, URL iframe dan tempat sasaran muat iframe di sini...
createIframe("URL-Iframe", "Lebar Iframe", "Tinggi Iframe", "ID Kontainer");
}
//]]>
</script>Klik Simpan Template. Sekarang kita masuk ke tahap pengaturan.
Pengaturan
Dalam iframe Facebox, Anda akan menemukan beberapa kode yang nantinya harus Anda masukkan ke dalam preloader. Berikut ini adalah sebuah contoh dari iframe Facebox yang akan Anda dapatkan saat Anda mengeklik tombol Get Code:Kita akan mengambil nilai atribut
src, ukuran lebar dan tinggi pada iframe tersebut saja, sementara sisanya bisa kita buang.Tambahkan sebuah elemen halaman HTML/JavaScript (atau cukup gunakan formulir widget Facebox lama Anda). Di dalam formulirnya, letakkan kode ini:
<div class="framePreloader" id="framePreloader1"></div>Kode di atas digunakan untuk memuat iframe Facebox Anda.
Simpan perubahan widget Anda.
Kembali pada fungsi yang telah kita letakkan di atas
</body>, ubah variabel-variabelnya menjadi seperti ini:createIframe("http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fplatform&width=292&height=290&colorscheme=light&show_faces=true&border_color&stream=false&header=true", "292px", "290px", "framePreloader1");Klik Simpan Template dan lihat hasilnya.
<div class="framePreloader" id="framePreloader1"></div>
<div class="framePreloader" id="framePreloader2"></div>
<div class="framePreloader" id="framePreloader3"></div>
<div class="framePreloader" id="framePreloader4"></div>Setelah itu Anda bisa menggandakan fungsinya seperti ini:
createIframe("iframe1.html", "250px", "300px", "framePreloader1");
createIframe("iframe2.html", "250px", "300px", "framePreloader2");
createIframe("iframe3.html", "250px", "300px", "framePreloader3");
createIframe("iframe4.html", "250px", "300px", "framePreloader4");Label: Browser, Menengah, Widget
Kamis, 15 Maret 2012
Dua Versi Konverter HTML
Versi JavaScript Mentah
Konverter HTML dengan JavaScript mentah bisa dibuat dengan mudah. Tambahkan sebuah elemen halaman HTML/JavaScript, kemudian salin kode ini dan letakkan di dalam formulirnya:
<style type="text/css">
#codes {
border:1px solid #666;
width:98%;
height:200px;
margin:5px auto 10px;
display:block;
}
.button-group {
margin:0 auto;
text-align:center;
}
</style>
<textarea id="codes"placeholder="Tulis/paste kode di sini lalu klik 'Konversi'"></textarea>
<div class="button-group">
<button onclick="cdConvert();">Konversi</button>
<button onclick="cdClear();">Bersihkan</button>
</div>
<script type="text/javascript">
function cdClear() {
var wtarea = document.getElementById('codes');
wtarea.value = '';
}
function cdConvert() {
var ctarea = document.getElementById('codes'),
cv = ctarea.value;
cv = cv.replace(/&/g, "&");
cv = cv.replace(/'/g, "'");
cv = cv.replace(/"/g, """);
cv = cv.replace(/</g, "<");
cv = cv.replace(/>/g, ">");
ctarea.value = cv;
ctarea.focus();
ctarea.select();
};
</script>Klik Simpan.
Versi JQuery
Terserah apakah kode ini akan Anda letakkan di dalam halaman statis atau widget, cukup pastikan bahwa template Anda sudah dilengkapi dengan JQuery, maka konverter HTML ini akan bekerja:
<style type="text/css">
#codes {
border:1px solid #666;
width:98%;
height:200px;
margin:5px auto 10px;
display:block;
}
.button-group {
margin:0 auto;
text-align:center;
}
</style>
<textarea id="codes" placeholder="Tulis/paste kode di sini lalu klik 'Konversi'"></textarea>
<div class="button-group">
<button id="convert">Konversi</button>
<button id="clear">Bersihkan</button>
</div>
<script type="text/javascript">
$(function() {
$('button#convert').click(function() {
$('textarea#codes').val(
$('textarea#codes').val()
.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">")
.replace(/"/g, """)
.replace(/'/g, "'")
).focus().select();
return false;
});
$('button#clear').click(function() {
$('textarea#codes').val('').focus().select();
return false;
});
});
</script>Klik Simpan.
Label: Browser, Code Snippet, JQuery, Regular Expression, Widget
Jumat, 16 Desember 2011
Mengecek Ukuran Viewport dengan JQuery
Hal ini tentunya sangat bermanfaat bagi para pemakai template dengan tema responsif. Setidaknya, dengan cara ini Anda bisa mengetahui lebar dan tinggi viewport dengan cepat. Tutorial ini sekaligus juga untuk menjelaskan secara singkat tentang event .resize() yang belum sempat Saya tuliskan di artikel event-event dasar JQuery:
HTML
Letakkan kode ini di atas </body>:
<div id='viewport-checker'>
<ul>
<li id='width'></li>
<li id='height'></li>
</ul>
</div>CSS
Letakkan kode ini di atas kode ]]></b:skin> atau </style>:
#viewport-checker {
width:200px;
height:auto;
text-align:left;
background-color:#333;
padding:0;
border:2px solid #e6e6e6;
font:italic bold 16px/1.4 Cambria,Georgia,Serif;
color:#eee;
text-shadow:0 1px 1px #000;
position:fixed !important;
position:absolute;
top:-100px;
left:50%;
margin:0 0 0 -108px;
-webkit-box-shadow:0 1px 3px rgba(0,0,0,.7);
-moz-box-shadow:0 1px 3px rgba(0,0,0,.7);
box-shadow:0 1px 3px rgba(0,0,0,.7);
z-index:1000;
display:none;
}
#viewport-checker ul,
#viewport-checker li {
margin:0;
padding:0;
border:none;
list-style:none;
}
#viewport-checker li {
border-top:1px solid #444;
border-bottom:1px solid #222;
padding:10px 15px;
list-style:none;
}
#viewport-checker li b {color:#74AE3D}JQuery
Pastikan bahwa template Anda sudah dilengkapi dengan JQuery. Setelah itu letakkan script ini di bawahnya:
<script type='text/javascript'>
$(document).ready(function() {
$(window).resize(function() {
var vPortWidth = $(window).width(), //mengambil data lebar layar
vPortHeight = $(window).height(); //mengambil data tinggi layar
//menampilkan keterangan lebar dan tinggi layar saat ukuran layar diubah
$('#viewport-checker').animate({opacity:"show", top:"50px"}, 600);
$('#viewport-checker #width').html('Lebar: ' + vPortWidth);
$('#viewport-checker #height').html('Tinggi: ' + vPortHeight);
});
//menyembunyikan keterangan lebar dan tinggi layar saat pointer meninggalkan kotak keterangan
$('#viewport-checker').mouseleave(function() {
$(this).animate({opacity:"hide", top:"-100px"}, 100);
});
});
</script>Simpan perubahan.
Label: Browser, JQuery, Layar, Menengah, Widget
