Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Arsip...

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

Cara Membuat Elemen Baru di Sidebar: Panduan BloGGeR Tata Letak

Membuat Elemen baru berfungsi untuk mendapatkan ruang baru guna menambah widget dalam kolom yang berbeda-beda. Dengan elemen yang baru ini membuat penataan blog menjadi terasa lebih mudah. Sebagai bahan percobaan kita akan menggunakan template Minima bawaan blogger. Bentuk desain yang sederhana dari template ini akan memudahkan blogger untuk berujicoba sekaligus memahami secara cepat teknik membuat elemen baru di bagian sidebar.

Beberapa tahapan dilalui untuk membuat elemen baru ini :


  1. Login ke Blogger (Login to Blogger).
  2. Halaman Dasbor (Dasboard).
  3. Klik Rancangan (Design).
  4. Klik Edit HTML.
  5. Klik Download Template Lengkap (proses mengamankan template).
  6. Simpan dalam folder PC.
  7. Tetap di Edit HTML.
  8. Cari kode
  9. #sidebar-wrapper {
            width: 220px; 
            border:1px solid white;
            padding:8px;
            float: $endSide;
            word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
            overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
    }
    Untuk memudahkan mengingat (identitas baru), rubahlah menjadi seperti ini :
    #sidebartop-wrapper {
            width: 220px;
            float: $endSide;
            word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
            overflow: hidden;  /* fix for long non-text content breaking IE sidebar float */
    }
    Buat KODE CSS baru berdasar CSS di atas dan letakkan persis di bawahnya. Bentuk KODE yang baru adalah seperti di bawah ini :
    #sidebarmiddle-wrapper {
            margin-top:20px
            width: 220px;
            float: $endSide;
            word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
            overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
    }
    #sidebarbottom-wrapper{
            margin-top:20px
            width: 220px; 
            border:1px solid white;
            padding:8px;
            float: $endSide;
            word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
            overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
    }
    Cari KODE HTML seperti di bawah ini :
    <div id='sidebar-wrapper'>
    <b:section class='sidebar' id='sidebar' preferred='yes'>
    Rubah KODE menjadi :
    <div id='sidebartop-wrapper'>
    <b:section class='sidebar' id='sidebartop' preferred='yes'>
    KODE baru di atas akan membentuk rangkaian KODE baru dalam bentuk :
    <div id='sidebartop-wrapper'>
    <b:section class='sidebar' id='sidebartop' preferred='yes'>
    ......
    ......
    </b:section>
    </div>
    Simpan KODE bar di bawah ini dan letakkan di bawah KODE di atas :
    <div id='sidebarmiddle-wrapper'>
    <b:section class='sidebar' id='sidebarmiddle' preferred='yes'/>
    </div>
    
    <div id='sidebarbottom-wrapper'>
    <b:section class='sidebar' id='sidebarbottom' preferred='yes'/>
    </div>
  10. KLIK Simpan Template dan lihat hasilnya dengan membuka Elemen Laman dan halaman blog !

Keterangan/Catatan:

  • Panduan atau titorial ini berdasarkan penggunaan kode html pada template lama blogger.
  • Dengan selesainya pembuatan 2 buah elemen baru ini maka anda sekarang dengan mudah bisa memilih tempat baru untuk menambah widget. Bila ingin menambah elemen baru anda tinggal menggunakan cara seperti itu. Setiap menambah elemen baru gunakan identitas yang berbeda supaya tidak ada penolakan saat dilakukan proses Simpan Template.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Update » January, 08, 2012

» Happy Blogging - gubhugreyot «

4 komentar:

  1. kode CSS diatas saya cari tidak ada, gimana ya? mohon bantuannya

    BalasHapus
  2. Blognya keren ya...
    i like it
    :)

    http://bagussangrezpector.blogspot.com/

    BalasHapus
  3. waaahhh.. merasa tertolong banget nih.. kebetulan gue baru blajar ngeblog.. bisa jadi langganan ne.. 4 jempol deh buat yang punya^^

    BalasHapus
  4. mantap gan postingannya.... tp mo nanya gan., ntar klo udah jadi widgednya.. cara nambah kode didalamnya gimana gan,, saya masih pemula soalnya..heheh

    BalasHapus

 
GR | Edited by | gubhug reyot