Most Popular
This Week
Membagi coloum sidebar menjadi 2
CARA MEMBAGI 2, COLOUM SIDEBAR Cara membagi 2 kolom sidebar blog atau cara membagi kolom sidebar blog menjadi 2...?! bingung juga sih kasi...
Membuat Scroll pada Label, Arsip Blog Ataupun Widgets Lainnya
scroll itu adalah sesuatu yang bisa ditarik ke atas dan ke bawah, seperti pada halaman utama blog ini. Atau Pada arsip di blog ini maupun N...
Domain Dot Com Gratis
Buat sobat blogger yang ingin menggunakan domain dot com tapi terbentur dana yang minim,, kaya saya ini, hehehe saya punya info bagus ni...
Domain Gratis.tis..tis..
Ini adalha posting lanjutan dari posting kemerin.. Posting ini membahas tenteng domain gratis..siapa yang mau??? ok langsung ke TKP.. situ...
Cara menampilkan background pada posting
halo sobat blogger..!! Saya akan beri trik memposting yg namanya cara membuat backgruond pada postingan. Trik ini bertujuan agar tampil beda...
Mengganti Mouse/Pointer/Cursor
Mungkin teman-teman sudah mulai bosan dengan bentuk pointer yang itu itu aja setiap kali anda membuka blog/site anda. Bagi teman-teman yang...
Cara Menampilkan HTML Pada Posting
Ketika Anda memposting kode HTML seperti script ternyata banyak bagian yang hilang? Anda bingung kenapa? Bagaimana cara menampilkannya? Mud...
Panduan membuat Blog di Blogspot
1. Apa itu Blog ? Blog merupakan sigkatan dari “Web log” adalah salah satu aplikasi web berupa tulisan-tulisan yang umum disebut sebagai po...
cara membuat tulisan berkedip ( blink )
anda pengen punya tulisan kyak gini pada blog and, klu bagi saya sih tulisan kayak gini dapat meyakinkan pengunjung untuk mencobany, soa...
Popular Posts
Latest Stories
What is new?
Comments
What They says?
Latest News
Membagi coloum sidebar menjadi 2
CARA MEMBAGI 2, COLOUM SIDEBAR
Cara membagi 2 kolom sidebar blog atau cara membagi kolom sidebar blog menjadi 2...?! bingung juga sih kasih judul postingan ini. Tapi saya yakin anda pun sudah tahu dengan maksud judul postingan diatas. Postingan kali ini seputar otak atik template blog. Jika pada postingan terdahulu saya tulis tentang bagaimana cara memperlebar halaman blog, maka kali ini saya akan coba berbagi tentang cara membagi 2 kolom sidebar blog atau menambahkan kolom di sidebar blog.
Cara ini sudah sering saya aplikasikan di template default blog minima. Tapi walaupun demikian, masih tetap bisa diaplikasikan di template blog lain karena intinya sama saja. Sebelum mulai membahas mengenai cara membagi 2 kolom sidebar blog, ada baiknya jika anda memperlebar dulu kolom sidebar blog anda. Karena jika kolom sidebar blog anda kecil, maka kalo di bagi 2 akan menjadi tambah kecil. Oleh karena itu, anda harus memperlebar dulu sidebar blog anda. Untuk cara memperlebarnya, anda bisa baca di postingan saya tentang bagaimana cara memperlebar halaman blog.
Nah..kalo sekiranya lebar kolom sidebar blog anda sudah cukup, maka saatnya untuk membagi 2 kolom sidebar tersebut. Silahkan simak langkah - langkahnya :
1. Proses editing kode css
Setelah login di blogger, langsung masuk ke menu edit html dan tidak usah kasih tanda centang pada kolom expand template widget. Selanjutnya, cari kode css seperti ini :
#sidebar-wrapper {
width: 190px;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
}
tidak harus sama sih, intinya cari kode css untuk membuat sidebar. Jika pada kode diatas yaitu #sidebar-wrapper. Kemudian liat berapa jumlah width-nya, jika pada kode diatas width-nya adalah 190px.
Nah..logikanya jika ingin di bagi 2, maka jumlah width sidebar yang pertama harus dibagi 2. Misal..pada kode di atas width-nya 190px. Maka untuk membaginya tinggal 190px : 2 sehingga lebar masing - masing kolom sidebar adalah 95px. Memang betul, tapi ingat kita harus ngasih jarak antara sidebar yang ke-1 dengan yang ke-2 supaya tidak berdempetan. Bagaimana caranya..?! sebelum membagi 2, kurangi dulu sesuai dengan jarak yang di inginkan. Misal...saya mau kasih jaraknya 20px, maka lebar sidebar yang ke-1 menjadi 190px - 20px dan hasilnya 170px. Nah..baru setelah itu dibagi 2, sehingga lebar masing - masing sidebar menjadi 85px.
Setelah kita menentukan lebar masing - masing sidebar, selanjutnya tinggal mendeklarasikannya di kode css. caranya....copy paste kode sidebar yang pertama menjadi 2 dan ubah namanya menjadi #sidebar2-wrapper. Misal..untuk kode diatas menjadi seperti ini :
#sidebar-wrapper { --> kode sidebar awal
width: 190px;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
}
#sidebar2-wrapper { --> kode sidebar 2 (hasil copy paste)
width: 190px;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
}
Selanjutnya, ubah width (lebar) masing - masing sidebar seperti yang telah dibahas tadi menjadi 75px. Sehingga hasilnya menjadi seperti ini :
#sidebar-wrapper { --> kode sidebar awal
width: 75px;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
}
#sidebar2-wrapper { --> kode sidebar 2 (hasil copy paste)
width: 75px;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
}
Langkah yang terakhir untuk proses editting kode css yaitu menambahkan jarak antara 2 kolom sidebar tersebut. Caranya, tambahkan di kode css #sidebar2-wrapper berupa perintah untuk pendeklarasian jarak, yaitu margin. Sehingga hasilnya seperti ini :
#sidebar-wrapper { --> kode sidebar awal
width: 75px;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
}
#sidebar2-wrapper { --> kode sidebar 2 (hasil copy paste)
width: 75px;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
margin-right: 20px;
}
2. Aplikasi di kode html
Nah..untuk proses editting kode css sudah selesai. Kemudian saatnya untuk mengaplikasikan kode css tersebut di kode html blog. caranya..cari kode html seperti ini dan fokuskan pad text yang berwarna hijau saja. Karena untuk yang berwarna merah tiap template pasti berbeda:
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'/>
<b:widget id='Profile2' locked='false' title='Mengenai Saya' type='Profile'/>
</b:section>
</div>
Jika sudah ketemu, copy paste text yang berwarna hijau di bawah kode html tersebut. Kemudian rubah type id-nya menjadi sidebar2. Maka hasilnya :
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'/>
<b:widget id='Profile2' locked='false' title='Mengenai Saya' type='Profile'/>
</b:section>
</div>
<div id='sidebar2-wrapper'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
</b:section>
</div>
Awas..jangan sampe salah. Jika sudah selesai silahkan klik dulu pratinjau / preview. Apabila hasilnya sudah bagus baru di save. Tapi...apabila masih ada error atau kesalahan, klik bersihkan edit / clear edit, kemudian ulangi langkahnya dari awal.
About Koran Lama
Adds a short author bio after every single post on your blog. Also, It's mainly a matter of keeping lists of possible information, and then figuring out what is relevant to a particular editor's needs.
About Me
Popular Posts
-
Membagi coloum sidebar menjadi 2CARA MEMBAGI 2, COLOUM SIDEBAR Cara membagi 2 kolom sidebar blog atau cara membagi kolom sidebar blog menjadi 2...?! bingung juga sih kasi...
-
Membuat Scroll pada Label, Arsip Blog Ataupun Widgets Lainnyascroll itu adalah sesuatu yang bisa ditarik ke atas dan ke bawah, seperti pada halaman utama blog ini. Atau Pada arsip di blog ini maupun N...
-
Domain Dot Com GratisBuat sobat blogger yang ingin menggunakan domain dot com tapi terbentur dana yang minim,, kaya saya ini, hehehe saya punya info bagus ni...
-
Domain Gratis.tis..tis..Ini adalha posting lanjutan dari posting kemerin.. Posting ini membahas tenteng domain gratis..siapa yang mau??? ok langsung ke TKP.. situ...
-
Cara menampilkan background pada postinghalo sobat blogger..!! Saya akan beri trik memposting yg namanya cara membuat backgruond pada postingan. Trik ini bertujuan agar tampil beda...
-
Mengganti Mouse/Pointer/CursorMungkin teman-teman sudah mulai bosan dengan bentuk pointer yang itu itu aja setiap kali anda membuka blog/site anda. Bagi teman-teman yang...
-
Cara Menampilkan HTML Pada PostingKetika Anda memposting kode HTML seperti script ternyata banyak bagian yang hilang? Anda bingung kenapa? Bagaimana cara menampilkannya? Mud...
-
Panduan membuat Blog di Blogspot1. Apa itu Blog ? Blog merupakan sigkatan dari “Web log” adalah salah satu aplikasi web berupa tulisan-tulisan yang umum disebut sebagai po...
-
cara membuat tulisan berkedip ( blink )anda pengen punya tulisan kyak gini pada blog and, klu bagi saya sih tulisan kayak gini dapat meyakinkan pengunjung untuk mencobany, soa...
Tidak ada komentar: