Mengubah Tampilan Blog Praktis Terkeren

Selamat malam , pada malam minggu ini saya akan membagikan sebuah tutorial untuk memperindah tampilan blog anda yaitu tutorial Mengubah Tampilan Blog Praktis Terkeren yang bisa berfungsi sebagai sarana untuk memperingah tampilan blog anda dan juga memungkinkan pengungjung blog anda lebih praktis / cepat dalam mengganti tampilan blog anda dan disesuaikan dengan keinginan pengunjung blog anda.

Artikel Mengubah Tampilan Blog Praktis Terkeren ini merupakan artikel kedua saya hari ini dan artikel Mengubah Tampilan Blog Praktis Terkeren ini juga akan menjadi penutupu artikel pada hari ini / lebih tepatnya malam minggu ini.

Sebelumnya saya juga pernah membahas suatu artikel untuk memperindah blog kita yaitu artikel yang berjudul Membuat Tombol Next Prev Di Samping Kanan Kiri Blog , dan tutorial disamping juga saya terapkan sendiri di blog saya , apabila anda ingin melihat demonya tinggal lihat kanan dan kiri sidebar blog ini.

Tutorial Mengubah Tampilan Blog Praktis Terkeren sendiri dibuat oleh Alya Zahra pemilik blog aiizahh.blogspot.com yang merupakan blog yang keren menurut saya.

Harap anda berkonsentrasi dulu sebelum menerapkan tutorial ini.

Berikut ini cara Mengubah Tampilan Blog Praktis Terkeren :

1. Login ke blogger anda
2. Klik Template > Edit HTML
3. Letakkan kode berikut ini di atas </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. Selanjutnya taruh kode dibawah ini di Tata Letak > Tambahkan Gadget

<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 Gadget dan lihat hasilnya

Demikianlah artikel penutup malam minggu ini yang berjudul Mengubah Tampilan Blog Praktis Terkeren semoga artikel ini dapat berguna dan bermanfaat bagi kita semua , bila ada tutur kata atau pengucapan saya yang kurang baik saya mohon maaf sebesar-besarnya , Wassalamualaikum.

Tutorial ini hanya berlaku sampai 1 tahun , maka dari itu anda segeralah memakai tutorial ini