Style Switcher Blog

Style Switcher Blog - Blogger Update. Assalamualaikum wr.wb. Malam ini saya akan menuliskan salah satu Tutorial Blog yang saya dapat dari DTE adalah Style Switcher Blog. Widget ini berguna untuk Merubah Tipe Font, Warna Font, Ukurang Font dan Mengganti Background Blog kita sesuai keinginan pengunjung. Mungkin dengan widget ini pengunjung betah berlama-lama di blog kita. Lihat screenshoot dari Widget Style Switcher Blog :

Langkah-Langkah Membuat Style Switcher Blog

1. Buka Blog Anda >> Edit Tempalate.

2. Cari kode </body>, lalu masukan kode dibawah ini diatas kode </body>.

<script src='http://dte-project.googlecode.com/svn/trunk/cookie.js'/><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 switcherfunction bgSwitch(v) {    dbs.background = v;    createCookie('bgstyle', v, expiredStyle);}
// font switcherfunction fontSwitch(v) {    dbs.fontFamily = v;    createCookie('fontstyle', v, expiredStyle);}
// font sizerfunction changeFontSize(v) {    dbs.fontSize = v + 'px';    createCookie('fontsize', v, expiredStyle);}
// color switcherfunction 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>

3. Simpan template.
4. Pilih tata letak >> tambahkan gadget >> HTML/javascript.
5. Masukan script dibawah ini ke dalam gadget HTML/javascript.

<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 />--                <option value="&#39;Book Antiqua&#39;,Serif" />Book Antiqua                <option value="&#39;Times New Roman&#39;,Serif" />Times New Roman                <option value="Georgia,Serif" />Georgia                <option value="Arial,Sans-Serif" />Arial                <option value="Tahoma,Verdana,Arial,Sans-Serif" />Tahoma                <option value="&#39;Trebuchet MS&#39;,Arial,Sans-Serif" />Trebuchet                <option value="Verdana,Arial,Sans-Serif" />Verdana                <option value="&#39;Century Gothic&#39;,Tahoma,Verdana,Arial,Sans-Serif" />Century Gothic                <option value="&#39;Comic Sans MS&#39;,Serif" />Comic Sans            </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>

6. Simpan dan selesai.

Jika ada pertanyaan silahkan ditanya dikotak komentar saya akan menjawab pertanyaan sobat blogger sebisa saya. Sekian dari saya Mochammad Fikri yang menuliskan artikel tentang Style Switcher Blog. Simak juga artikel saya yang lainnya :Daftar Isi Dengan Scroll, Cara Membuat Artikel Terkait Dengan Thumbnail, Cara Membuat Label Tertentu Dengan Thumbnail,  Cara Membuat Emoticon Di Komentar Blogger, dan Cara Membuat Artikel Yang Berkualitas SEO Friendly. Terima kasih sudah berkunjung.

Dilarang untuk meng-copas artikel ini kecuali menuliskan sumbernya

Style Switcher Blog 2014-02-15T22:19:00+07:00 Rating: 4.5 Diposkan Oleh: Fikri