Menambah Elemen Dibawah Dua Sidebar -Assalamu Alaikum WR.WB Hallo sahabat TrikMITOS-blog seputar informasi, islami,kesehatan, kecantikan Tips dan Trik android kord gitar dll, Pada Artikel yang anda baca kali ini dengan judul Menambah Elemen Dibawah Dua Sidebar, saya telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya, yang mungkin bermanfaat buat anda. mudah-mudahan isi postingan Artikel CSS dan HTML, Artikel Desain Template, Artikel Sidebar, Artikel Tutorial Blogger, yang saya tulis ini dapat anda pahami, karna mungkin dari beberapa pengunjung bahasa atau tulisan saya ini agak sulit di mengerti...hehehe benarkah??!!!. baiklah, tanpa panjang lebar dan bertele-tele lagi selamat membaca, jangan lupa baca juga artikel lainnya, karena masih banyak artkel yang menarik lainnya yang menurut saya pribadi sangat bermanfaat

Judul : Menambah Elemen Dibawah Dua Sidebar
link : Menambah Elemen Dibawah Dua Sidebar
Gambar dibawah ini

Menambah Elemen Dibawah Dua Sidebar

Sebelumnya saya pernah posting cara menambahkan elemen (dua kolom tambah gadget) dibawah sebuah sidebar utama.
 
Postingan kali ini trik menambah elemen halaman dibawah dua kolom atau sidebar yang telah saya buat kemarin.
Seperti gambar dibawah ini:


Menambah elemen di bawah dua sidebar

1. Login ke blogger dengan id anda
2. Masuk ke menu Tata Letak
3. Pada tab menu, klik Edit HTML
4. Backup template anda, klik Download Template Lengkap
5. Sekarang cari kode ini :
   

   #sidebar-wrapper {
   width: 220px;
   float: $startSide;
   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 */
   }

6. Silahkan diganti dulu nilai width 220px; dan properti float: $startSide; dengan nilai lebar sidebar yang anda rencanakan. Misalnya width: 350px dan properti menjadi float: right; Jadinya seperti ini :
   

   #sidebar-wrapper {
   width: 350px;
   float: right;
   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 */
   }

7. Jika anda telah membuat dua sidebar di bawah sidebar utama seperti pada tutorial yang sebelumnya, silahkan tambahkan hanya kode yang berwarna hijau saja.
   

   #left-col {
   width:170px;
   float:left;
   word-wrap:break-word;
   overflow:hidden;
   }
   #right-col {
   width:170px;
   float:right;
   word-wrap:break-word;
   overflow:hidden;
   }
   #bottom-col {
   width:350px;
   float:right;
   word-wrap:break-word;
   overflow:hidden;
   }

   Sehingga kodenya akan menjadi seperti ini :
   

   #sidebar-wrapper {
   width: 350px;
   float: right;
   $startSide
   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 */
   }
   #left-col {
   width:170px;
   float:left;
   word-wrap:break-word;
   overflow:hidden;
   }
   #right-col {
   width:170px;
   float:right;
   word-wrap:break-word;
   overflow:hidden;
   }
   #bottom-col {
   width:170px;
   float:right;
   word-wrap:break-word;
   overflow:hidden;
   }

8. Sekarang buat kode HTML untuk bottom sidebar yang dinamai sebagai "bottom-col" tersebut. Carilah kode ini :
   

   <div id='sidebar-wrapper'>
   <b:section class='sidebar' id='sidebar' preferred='yes'/>
   <b:widget id= dan seterusnya...
   <b:section class='sidebar' id='left-col' preferred='yes'/>
   <b:section class='sidebar' id='right-col' preferred='yes'/>
   </div>

9. Sisipkan kode berikut di bawah kode tadi :
   <b:section class='sidebar' id='bottom-col' preferred='yes'/>
10. Sehingga secara keseluruhan menjadi seperti ini :
    

    <div id='sidebar-wrapper'>
    <b:section class='sidebar' id='sidebar' preferred='yes'/>
    <b:widget id= dan seterusnya....
    <b:section class='sidebar' id='left-col' preferred='yes'/>
    <b:section class='sidebar' id='right-col' preferred='yes'/>
    <b:section class='sidebar' id='bottom-col' preferred='yes'/>
    </div>

11. Sekarang klik tombol SIMPAN TEMPLATE
12. Selesai

Untuk melihat hasilnya masuk ke elemen halaman, semoga berhasil!

Demikianlah Artikel Menambah Elemen Dibawah Dua Sidebar

Sekianlah artikel Menambah Elemen Dibawah Dua Sidebar kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya jangan lupa tinggalkan komentar anda dan share yang banyak....heheheh.

Anda sekarang membaca artikel Menambah Elemen Dibawah Dua Sidebar dengan alamat link https://trikmitos.blogspot.com/2009/12/menambah-elemen-dibawah-dua-sidebar.html