Selamat pagi sob...
Kali ini saya ingin berbagi sebuah tutorial yang sangat menarik, yakni
mengenai cara mengubah tampilan blog dengan menggunakan style switcher.
Style switcher sendiri adalah sebuah aksesoris bagi blog yang dapat
digunakan oleh, baik pemilik blog maupun pengunjung blog dengan tujuan
mengganti tampilan blog tersebut sehingga menjadi semakin menarik.
Selain membuat blog semakin menarik, tentu saja diharapkan pengunjung
blog akan lebih betah untuk berkeliling di dalam blog kita.
Mungkin sudah banyak sekali tutorial tentang aksesoris ini, namun saya lebih suka dengan
tampilan style switcher ala Mas Taufik
ini, sehingga saya mencoba untuk melakukan modifikasi pada beberapa
bagian. Jadi, dengan style switcher ini kita tidak hanya bisa mengubah
background menjadi warna saja, namun juga dengan tambahan opsi pattern
yang menarik.
Disamping itu, ada juga opsi untuk mengganti font, baik style, ukuran,
maupun warna, serta ditambah dengan javascript cookie sehingga meskipun
pengunjung membuka halaman blog yang berbeda-beda namun perubahan itu
akan tetap bertahan, bahkan meskipun pengunjung blog tersebut mengakses
blog kita besok, lusa, minggu depannya, sampai bulan depannya karena
masa kadaluarsa dari cookie ini sendiri adalah selama satu tahun.
1. Login ke blogger.
2. Masuk ke Template - Edit HTML.
3. Letakkan kode berikut ini tepat diatas </head> atau </body> :
<script type='text/javascript' src='http://aiizahh-reader.googlecode.com/svn/trunk/patterns/cookieforblog.js'></script>
<script type='text/javascript' src='http://aiizahh-reader.googlecode.com/svn/trunk/patterns/styleswitcher.js'></script>
4. Simpan Template.
5. Masuk ke Tata Letak - Tambahkan Gadget - HTML/Javascript dan letakkan kode berikut didalamnya :
<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:#9D8675;
padding:2px;
font:bold 11px Tahoma,Verdana,Arial,Sans-Serif;
color:#000;
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 #bgpattern {
overflow:hidden;
margin:10px 0 10px;
}
#styleSwitcher #bgpattern 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">Ubah Tampilan Blog</th></tr>
<tr>
<td colspan="2">
<div id="bgColorer">
<span style="background-color:#A735E0;" onclick="bgSwitch(this.style.backgroundColor);"></span>
<span style="background-color:#EF2D19;" onclick="bgSwitch(this.style.backgroundColor);"></span>
<span style="background-color:#F1FF00;" onclick="bgSwitch(this.style.backgroundColor);"></span>
<span style="background-color:#F49AC2;" onclick="bgSwitch(this.style.backgroundColor);"></span>
<span style="background-color:#FA8D63;" onclick="bgSwitch(this.style.backgroundColor);"></span>
<span style="background-color:#967878;" onclick="bgSwitch(this.style.backgroundColor);"></span>
<span style="background-color:#49E84C;" onclick="bgSwitch(this.style.backgroundColor);"></span>
</div>
<div id="bgpattern">
<span style="background:url(http://aiizahh-reader.googlecode.com/svn/trunk/patterns/amazing%20willows.png) repeat;" onclick="bgSwitch(this.style.background);"></span>
<span style="background:url(http://aiizahh-reader.googlecode.com/svn/trunk/patterns/colorful%20circle.png) repeat;" onclick="bgSwitch(this.style.background);"></span>
<span style="background:url(http://aiizahh-reader.googlecode.com/svn/trunk/patterns/pattern%20flowers.png) repeat;" onclick="bgSwitch(this.style.background);"></span>
<span style="background:url(http://aiizahh-reader.googlecode.com/svn/trunk/patterns/colorful%20square.png) repeat;" onclick="bgSwitch(this.style.background);"></span>
<span style="background:url(http://aiizahh-reader.googlecode.com/svn/trunk/patterns/tie.png) repeat;" onclick="bgSwitch(this.style.background);"></span>
<span style="background:url(http://aiizahh-reader.googlecode.com/svn/trunk/patterns/kinder%20floral.png) repeat;" onclick="bgSwitch(this.style.background);"></span>
<span style="background:url(http://aiizahh-reader.googlecode.com/svn/trunk/patterns/Brightness.png) repeat;" onclick="bgSwitch(this.style.background);"></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>
<small><a href="http://aiizahh.blogspot.com/2013/05/mengubah-tampilan-blog-dengan-style.html" target="blank">Pasang Widget Ini</a></small>
6. Simpan.
7. Enjoy.
Terima kasih, semoga bermanfaat...
) yang saya desain sendiri, mencoba untuk sedikit berbeda meskipun mengedepankan konsep simple dan colorful. Saya namakan "Aiizahh Try To Colorful"
merujuk pada tampilannya yang penuh warna, juga merupakan representasi
dari blog ini yang mencoba untuk terus berwarna di dunia blogging.
