Rabu, 21 Oktober 2009

Widget Hover

 Anda ingin punya widget yg bila disorot oleh cursor maka akan berganti warna seperti blog saya ini? coba arahkan cursor anda ke salah satu widget di sebelah atau boleh ke widget "Tutorial Blogging" di sebelah ini, perhatikan perubahan warna yg terjadi dari hitam menjadi coklat tua (kalo saya belum ganti warna).

Kalau tertarik, ikuti langkah2 berikut:

  1. Masuk ke Dasbor blog anda
  2. Klik Tata letak, Edit HTML
  3. Cari kode berikut:



  4. /* Sidebar Content
    ----------------------------------------------- */
    #sidewrapper-left,#sidewrapper-right {
      color: $sidebartextcolor;
      line-height: 1.5em;
      }
    #sidewrapper-left ul,#sidewrapper-right ul {
      list-style:none;
      margin:0;
      padding:0 0 0
      }
    #sidewrapper-left li,#sidewrapper-right li {
      margin:0;
      padding-top:0;
      padding-$endSide:0;
      padding-bottom:.25em;
      padding-$startSide:15px;
      text-indent:-15px;
      line-height:1.5em;
      }
    #sidewrapper-left .widget,#sidewrapper-right .widget{
      background:#2A1B0A;
      border:1px dotted $bordercolor;
      margin:0 0 1em;
      padding:0.5em;
      }




  5. Kalau sudah ketemu, masukkan kode berikut ini tepat dibawah kode yg berwarna merah:




  6. #sidewrapper-left .widget:hover,#sidewrapper-right .widget:hover{
      background:#2A1B0A;
      border:1px dotted $bordercolor;
      margin:0 0 1em;
      padding:0.5em;
      }



  7. Sehingga menjadi seperti berikut:



  8. #sidewrapper-left .widget,#sidewrapper-right .widget{
      background:#2A1B0A;
      border:1px dotted $bordercolor;
      margin:0 0 1em;
      padding:0.5em; 
      }
    #sidewrapper-left .widget:hover,#sidewrapper-right .widget:hover{
      background:#2A1B0A;
      border:1px dotted $bordercolor;
      margin:0 0 1em;
      padding:0.5em;
    }


    Catatan:
     Yg berwarna orange silahkan ganti atau samakan nilainya dengan nilai milik anda




  9. Simpan Template anda.


  10. Selesai.



Semoga bermanfaat.





Kembali ke atas

0 komentar:

Posting Komentar

Kembali ke atas

Kembali ke atas