YARO STARAK BLUE PRINT

Yahoo bot last visit powered by  Bots Visit
Google bot last visit powered by Bots Visit
powered by PRBbutton
Personal Blogs - BlogCatalog Blog Directory
Blog Directory & Search engine
Selasa, 08 Juni 2010

CARA MEMBUAT KOLOM SIDEBAR TERPISAH

image

Kolom sidebar yang terpisah akan membuat tampilan blok menjadi lebih menarik dan rapi. 

cara pembuatan sidebar yang terpisah ini tidak sulit dilakukan, anda hanya perlu merubah scrip yang ada pada template blog anda melalui edit html.

untuk membuat sidebar terpisah, ikuti langkah – langkah dibawah ini.

 

   1. Buka blogger  dengan ID sobat.

   2. Klik Tata Letak --> Edit HTML.

   3. Contreng Expand Template Widget.

   4. Lalu cari kode yang seperti ini :

      .sidebar .widget, .main .widget {
      margin:0 0 1.5em;
      padding:0 0 1.5em;
      }

   5. Pisahkan saja sehingga menjadi seperti ini :

      .sidebar .widget {
      margin:0 0 1.5em;
      padding:0 0 1.5em;
      }

      .main .widget {
      margin:0 0 1.5em;
      padding:0 0 1.5em;
      }

   6. Untuk sidebar terpisah sobat rubah menjadi seperti berikut :

      .sidebar .widget {
      background:#FFFFFF;
      border:1px solid #CCCCCC;
      margin:0 0 1.5em;
      padding:0.5em;
      }

Buat bagian main. widget atau kolom postingan tinggal sobat kreasikan sendiri, untuk background #FFFFFF adalah warna background putih dan border:1px solid #CCCCCC untuk border warna abu - abu. Kode warna bisa sobat lihat disini. Sedangkan untuk padding adalah jarak antara postingan dengan border, bisa juga sobat merubahnya menjadi padding:15px; agar lebih terlihat rapi antara postingan dengan border tidak terlalu rapat. Untuk kotak sidebar agar membentuk garis melengkung pada sudutnya sobat bisa tambahkan kode sehingga menjadi seperti berikut ini :

.sidebar .widget {
background:#FFFFFF;
border:1px solid #CCCCCC;
margin:0 0 1.5em;
padding:15px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
}

earning-news.blogspot.com

0 komentar:

Posting Komentar

Posting yang berkaitan

TUKARAN LINK SILAHKAN COPY LINK DI BAWAH INI

Ą