May 16, 2013

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.


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

38 comments

  1. lumayan nih tipsnya, tapi sejak fitur editor html di blogger tampilannya baru lagi, saya kesulitan mengeditnya. untuk menemukan kode tertentu melalui CTRL + F saja suka gak ketemu, padahal saya yakin kode itu ada cuma lupa dimana letaknya. nice share :)

    salam blogger,
    oldsunday.blogspot.com

    ReplyDelete
    Replies
    1. benar, karena kadangkala kode-kode tertentu yang kita cari dibungkus oleh kode lain, sehingga harus dibuka dulu simbol segitiga hitam disamping nya...
      tp kalo kode </body> atau </head> pasti ketemu kok gan... ^_^

      Delete
    2. HTML blog model baru, umumnya bagi pemula agak bingung.

      Delete
    3. Bener gan Djangkaru :D
      Seperti saya yang agak bingung

      Delete
  2. info yang bagus nie zob...ijin nyaba zob!

    ReplyDelete
  3. Saya liat demonya keren banget. Pengunjung bisa sesuka hati menentukan backgroundnya.

    ReplyDelete
    Replies
    1. :-bd terima kasih gan atas apresiasi nya...

      Delete
  4. Ini baru pertama kalinya saya menemukan aksesoris blog seperti ini. Terima kasih atas informasinya, cocok buat referensi ngeblog. :D

    ReplyDelete
    Replies
    1. :-bd mas terima kasih juga atas kunjungannya...

      Delete
  5. Alhamdulillah lumayan dapat pengetahuan tutorial baru yang aku cari, sepertinya perlu dicoba nih
    ijin menggunaknnya sobat
    terima kasih sudah berbagi

    http://kabmmu.blogspot.com/

    ReplyDelete
    Replies
    1. silahkan mas, terima kasih atas kunjungannya...

      Delete
  6. hello sobat, sudah dicoba, widgetnya bagus tapi kok gak bisa berubah warnanya yah..?
    terima kasih sobat

    ReplyDelete
    Replies
    1. coba ganti http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js dengan versi yang lebih baru gan http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js mungkin masalah nya ada disitu... :)

      Delete
  7. Wah keren ni miss tutor nya, terimakasih banyak sudah berbagi

    ReplyDelete
    Replies
    1. sama-sama sob...lama ga keliatan nih sob... ^_^

      Delete
  8. Wahh, Keren :D
    Kunjungan sore gan..

    ReplyDelete
  9. owh jadi begitu ya cranya mbak..emmmmm..mkasih mbak kapan kpan tak coba ahh !!

    ReplyDelete
  10. Makasih infonya gan memang Artikel yang luar biasa gan, sangat bermanfaat. terimakasih bangyak sudah mau share.
    di tunggu artikel berikutnya gan.
    salam bloggers samsoftware-cyber
    ada juga ni informasi yang sangat Penting, Panas, Perlu dan Seruu

    ReplyDelete
  11. makasih infonya,, kunjungan akhir pekan nihh.

    ReplyDelete
    Replies
    1. terima kasih atas kunjungannya gan... haii

      Delete
  12. Wah tipsnya keren, apalagi yang nulis seorang cewek, jarang2 nulisin tutorial kaya gini (kebanyakan laki)

    Nice share sis :)
    Btw, saya mau nanya, cara buat widget stat, pop post sama arsip bisa dibuat slide itu gimana caranya? Thx before :D

    ReplyDelete
    Replies
    1. hehehe, terima kasih... haii
      kalo untuk sidebar dibuat accordion, mesti edit template kebetulan saya ingin buat postingannya, ditunggu saja dulu gan.. cheer

      Delete
    2. Oke... Oke... Aku tunggu postingannya... :D

      Delete
    3. http://aiizahh.blogspot.com/2013/05/membuat-sidebar-accordion-pada-blog.html

      Delete
  13. Blogwalking sore nih ...
    Keren artikelnya , boleh dicoba juga nih , saya nantikan kunjungan baliknya ya..

    ReplyDelete
  14. keren ya,tutorialnya mantap,jelas
    bisa dicoba nih buat blog agar tampilan beda

    ReplyDelete