Pages

Showing posts with label kolom. Show all posts
Showing posts with label kolom. Show all posts

Garis Melengkung Pada Kolom

type='html'>Seperti janji saya pada pembahasan sebelumnya tentang membuat kotak postingan terpisah dan kebetulan ada pertanyaan dari salah seorang sobat yang bernama sadulur yang berkomentar pada tgl 19 mei lalu, isinya kira-kira seperti ini "makasih berbagi ilmu, ...kawan, tapi bagaimana cara membuat postingan garis melengkung pada sudut kolom agar tidak terlihat kaku". Thanks buat mas sadulur yang telah menanyakan hal ini.

Perhatikan kolom postingan blog milik saya, tampak kolom postingan terpisah-pisah dan membentuk garis lengkung pada sudut-sudutnya, bagus kan..
Tertarik dengan pembahasan ini ?? sipp..mari kita lanjutkan

  1. Login ke Blogger dengan ID blogger sobat tentunya.

  2. Klik Tata Letak

  3. Klik Edit HTML

  4. Cari kode h2.date-header {

  5. Copy kode berikut tepat setelah kode diatas


    border-left:3px solid #0080FF;
    border-right:3px solid #0080FF;
    border-top:3px solid #0080FF;
    border-bottom:0px solid #0080FF;
    -moz-border-radius-topleft:15px;
    -moz-border-radius-topright:15px;


  6. Cari kode .post-body {

  7. Kemudian copy dan letakkan kode berikut ini setelah kode tersebut.


    border-right:3px solid #0080FF;
    border-left:3px solid #0080FF;


  8. lalu cari kode .post-footer { dan letakkan kode berikut dibawah kode tersebut.


    border-left:3px solid #0080FF;
    border-right:3px solid #0080FF;
    border-top:0px solid #0080FF;
    border-bottom:3px solid #0080FF;
    -moz-border-radius-bottomleft:15px;
    -moz-border-radius-bottomright:15px;


  9. Oke, sudah selesai..Simpan Template sobat.

Untuk kode yang saya tandai dengan warna merah adalah kode untuk warna border, sobat bisa menggantinya sesuai dengan keinginan sobat. Untuk kode warna-warna, sobat bisa melihatnya disini. Selamat mencoba !

Membuat Label Menjadi 2 Kolom

type='html'>
Label 2 Kolom

Gambar di atas menunjukkan bahawa label ditampilkan menjadi 2 kolom. Nah tanpa basa basi, mari kita praktik Membuat label Menjadi 2 Kolom.

Jika di blog sudah ada labelnya, maka tinggal masuk ke html blog sobat. Setelah itu centang kotak kecilnya ya sob. Setelah itu cari kode ]]>

Untuk mempermudah gunakan Ctrl+F atau F3 (jika sobat menggunakan mozilla firefox). Jika sudah paste kode ini diatas kode merah tersebut.

#Label1 li {
      float:left;
      width:45%;
}

Simpan deh! atau kalau tidak preview dulu hasil edit label sobat. 
Perlu diperhatikan nama label sobat. Mungkin nama label di atas bisa berbeda dengan nama label punya saya, untuk mengetahui nama label silakan sobat gunakan pencarian dengan Ctrl+F atau F3 dan ketik 'Label1' tanpa tanda petik, jika sama lanjutkan, jika beda silakan sobat ganti dengan nama label sobat.

Tidak semua template mendukung warna background yang mengikuti. Seperti kasus saya, dengan trik ini mungkin warna background tidak selalu mengikuti kotak label. Yang jelas saya sudah mencoba di blog saya yang lain dan berhasil.
Seperti itulah cara Membuat label menjadi 2 kolom. Semoga berhasil

Cara membagi kolom postingan menjadi 2

type='html'>Selamat subuh sobat, hehe, bentar lagi dah mau adzan jangan lupa sholat, OK postingan kali ini kita akan membahas bagai mana Cara membagi kolom postingan menjadi 2, ha gimana tu ? oke dari pada nanti saya ngomongnya muter muter lebih baik kita liat screenshotnya di bawah.. BEKICOT


ha gimana menarik bukan ? kalo nggak ya udah hehe
untuk pembuatan langsung saja ikuti kata kata newbie ini

  • Loggin blogger.com > Rancangan > Edithtml
  • cari kode ]]> dan letakkan kode berikut dibawah nya





  • Selanjutnya cari kode .post { dan tambahkan kode berikut


margin:0.5em auto 0.5em;

  • sehingga menjadi seperti ini


.post {
font-family:Comic Sans MS;
color: #000000;
margin:0.5em auto 0.5em;
background:transparent;
}




  • oke simpan
Sumber : SYSTEM OF BLOG