Mengubah Tampilan Blog Dengan Style Switcher

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.

DEMO

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...