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

Saturday, March 18, 2017

MENAMBAH DAN MEMBAGI ELEMEN HEADER MENJADI BEBERAPA KOLOM

MENAMBAH DAN MEMBAGI ELEMEN HEADER MENJADI BEBERAPA KOLOM


Di sini saya ingin berbagi untuk sobat yang ingin membagi elemen header menjadi beberapa kolom. Sobat bisa menaruh daftar isi,iklan,link atau apa saja yang sobat suka. Jika satu kolom header yang tersedia dirasa masih kurang cukup untuk menambahnya sobat bisa ikuti beberapa langkah dibawah ini:

Disini kita akan coba menambah 4 kolom dibawah header yang nanti hasilnya akan terdapat 1 kolom penuh(100%) dan 4 kolom dari hasil pembagian (25% x 4). Selanjutnya kita masih bisa menambahkan lagi menjadi beberapa kolom.

Langkah-langkahnya:

1. Login ke blog sobat pilih tata letak kemudian klik edit html.
2. Jangan kasih tanda centang pada expand template widget.
3. Cari kode ]]></b:skin> dan letahkan kode dibawah ini diatasnya.

Hingga hasilnya seperti kode dibawah ini:

#under_header{
float:left;
width:100%;
}
#under_header1{
float:left;
width:25%;
}
#under_header2{
float:left;
width:25%;
}
#under_header3{
float:left;
width:25%;
}
#under_header4{
float:right;
width:25%;
}
]]></b:skin>
4. Kemudian cari kode:

<div id=header-wrapper>
<b:section class=headerid=headermaxwidget="1showaddelement="no">
&ltb:widget id=header1locked=truetitle=nama blog sobat(header)
type=header/>
</b:section>
</div>

5. Jika sudah ketemu letakkan kode dibawah ini tepat dibawahnya hingga hasilnya sbb:

<div id=header-wrapper>
<b:section class=headerid=headermaxwidget="1showaddelement="no">
<b:widget id=header1locked=truetitle=nama blog sobat(header)
type=header/>
</b:section>
</div>


<div id=under_header>
<b:section class=header id=underheader preferred=yes/>
</div>

<div id=under_header1>
<b:section class=header id=underheader1 preferred=yes/>
</div>

<div id=under_header2>
<b:section class=header id=underheader2 preferred=yes/>
</div>

<div id=under_header3>
<b:section class=header id=underheader3 preferred=yes/>
</div>

<div id=under_header4>
<b:section class=header id=underheader4 preferred=yes/>
</div>

6. SIMPAN TEMPLATE kemudian klik tata letak. Jika yang nampak seperti pada gambar dibawah ini berarti kerja sobat sudah betul.



















Jika sobat ingin menambahkan lagi kolom yang sejajar dengan elemen tadi,sobat tinggal menambah(sisipkan)kode pada poin 3 dan 5.

Yang perlu sobat perhatikan pada poin 3 pada kode terkhir harus pada posisi right:

#under_header5{
float:right;
width:25%;
}

Tapi jika sobat ingin menambahkan beberapa kolom dibawahnya sobat perlu menambah kode dibawahnya lagi.

Ini adalah penambahan beberapa kolom dibawahnya:

#under_header1{
float:left;
width:25%;
}
#under_header2{
float:left;
width:25%;
}
#under_header3{
float:left;
width:25%;
}
#under_header4{
float:right;
width:25%;
}
#under_header5{
float:left;
width:33.33%;
}
#under_header6{
float:left;
width:33.33%;
}
#under_header7{
float:right;
width:33.33%;
}
#under_header8{
float:left;
width:50%;
}
#under_header9{
float:right;
width:50%;
}
#under_header10{
float:left;
width:100%;
}

Tambahkan juga kode pada poin 4 #under_header{ dengan menambah urutan angka-angka kodenya


<div id=under_header>
<b:section class=header id=underheader preferred=yes/>
</div>

<div id=under_header1>
<b:section class=header id=underheader1 preferred=yes/>
</div>

<div id=under_header2>
<b:section class=header id=underheader2 preferred=yes/>
</div>

<div id=under_header3>
<b:section class=header id=underheader3 preferred=yes/>
</div>

<div id=under_header4>
<b:section class=header id=underheader4 preferred=yes/>
</div>

<div id=under_header5>
<b:section class=header id=underheader5 preferred=yes/>
</div>

<div id=under_header6>
<b:section class=header id=underheader6 preferred=yes/>
</div>

<div id=under_header7>
<b:section class=header id=underheader7 preferred=yes/>
</div>

<div id=under_header8>
<b:section class=header id=underheader8 preferred=yes/>
</div>

<div id=under_header9>
<b:section class=header id=underheader9 preferred=yes/>
</div>

<div id=under_header10>
<b:section class=header id=underheader10 preferred=yes/>
</div>

Gambar dari Hasil penempatan kode-kode diatas:






Available link for download

Read more »
Posted by at
Labels: , , , , , , ,

Friday, March 10, 2017

MENAMBAH SCROLL PADA KOLOM KOMENTAR

MENAMBAH SCROLL PADA KOLOM KOMENTAR



Bagi sobat yang tidak ingin pada kolom komentar terlihat memanjang ke bawah karena sering kebanjiran komentar, bisa menambah fungsi scroll pada kolom komentar. Untuk membuatnya sobat cukup menambahkan sedikit kode.

Caranya:
  • Masuk ke blog sobat.
  • Pilih tata letak.
  • Klik edit HTML.
  • Beri tanta pada Expand Template Widget.
  • Ini adalah kode yang harus ditambahkan.

    <div class="scrollbox" style="overflow:auto; height:350px; width:600px;">
    .............................................
    .............................................
    .............................................
    </div>
  • Tambahkan kode di atas ke kode di bawah ini.
    Kode yang berwarna merah adalah kode di atas setelah ditambahkan.
    <div class="scrollbox" style="overflow:auto; height:350px; width:600px;">
    <dl expr_class=data:post.avatarIndentClass id=comments-block>
    <b:loop values=data:post.comments var=comment>
    <dt expr_class="comment-author " + data:comment.authorClass expr_id=data:comment.anchorName>
    <b:if cond=data:comment.favicon>
    <img expr_src=data:comment.favicon height=16px style=margin-bottom:-2px; width=16px/>
    </b:if>
    <a expr_name=data:comment.anchorName/>
    <b:if cond=data:blog.enabledCommentProfileImages>
    <data:comment.authorAvatarImage/>
    </b:if>
    <b:if cond=data:comment.authorUrl>
    <a expr_href=data:comment.authorUrl rel=nofollow>
    <data:comment.author/></a>
    <b:else/>
    <data:comment.author/>
    </b:if>
    <data:commentPostedByMsg/>
    </dt>
    <dd class=comment-body>
    <b:if cond=data:comment.isDeleted>
    <span class=deleted-comment><data:comment.body/>
    </span>
    <b:else/>
    <p><data:comment.body/></p>
    </b:if>
    </dd>
    <dd class=comment-footer>
    <span class=comment-timestamp>
    <a expr_href=data:comment.url title=comment permalink>
    <data:comment.timestamp/>
    </a>
    <b:include data=comment name=commentDeleteIcon/>
    </span>
    </dd>
    </b:loop>
    </dl>
    </div>
  • Jangan lupa klik simpan.
  • Lihat hasilnya.
Sobat bisa menyesuaikan tinggi dan lebar kolom komentar sesuai dengan template yang sobat punya.

Semoga bermanfaat.

Available link for download

Read more »
Posted by at
Labels: , , , ,

Saturday, February 18, 2017

MEMBUAT FOOTER MULTI KOLOM BLOGGER

MEMBUAT FOOTER MULTI KOLOM BLOGGER


D
engan satu kolom footer rasanya masih kurang,ini yang sering dirasakan bagi mereka yang suka mempercantik blognya dengan berbagai pernak-pernik. Bagi saya sendiri footer ini sangat berguna yang saya anggap fungsinya hampir sama dengan sidebar.

Yang sering saya lihat diberbagai blog mereka senang menggunakan footer dengan tiga kolom,sebenarnya ini tergantung selera masing-masing orang. Bagaimana cara membuatnya
di sini akan kita bahas bersama.

Biasanya beda template ukuranya berbeda-beda pula,agar ukuranya sesuai dengan template yang sobat miliki di sini ukuranya kita buat persen (%),sehingga kita tidak terlalu kebingungan mengganti ukuranya.
Untuk membuatnya mari kita lihat langkah-langkah di bawah ini:

  • Login ke blog sobat.
  • Klik tata letak.
  • Pilih edit HTML.
  • Jangan kasih centang pada expand widget.
  • Cari kode ]]></b:skin> dan letakkan kode di bawah ini di atasnya,hingga posisinya sebagai berikut:

    /* footer_wrapper
    ---------------------------- */
    #footer_wrapper{
    width: 100%;
    position: relative;
    float: left;
    background:#ff69b4;
    border: px solid #ff0000;
    padding:%;
    }

    #footer_wrapper1{
    float:left;
    width:30%;
    margin:1px;
    background:#7cfc00;
    padding:1%;
    }

    #footer_wrapper2{
    float:left;
    width:30%;
    margin-top:1%;
    margin-bottom:1%;
    background:#7cfc00;
    padding:1%;
    }

    #footer_wrapper3{
    float:left;
    width:30%;
    margin:1%;
    background:#7cfc00;
    padding:1%;
    }

    ]]></b:skin>
  • Kemudian tarik ke bawah pada bagian body temukan kode sebagai berikut:

    <div id=footer-wrapper>
    <b:section class=footer id=footer/>
    </div>
  • Jika sudah ketemu letakkan kode di bawah ini di atasnya hingga posisinya sebagai berikut :

    <div id=footer_wrapper>
    <b:section class=footer id=footer_wrapper1/>
    <b:section class=footer id=footer_wrapper2/>
    <b:section class=footer id=footer_wrapper3/>
    </div>

    <div id=footer-wrapper>
    <b:section class=footer id=footer/>
    </div>

  • Dan lihat hasilnya pada tata letak,untuk mencoba tambahkan gadget.

    Catatan: Kode yang berwana merah adalah kode yang asli sedang yang hitam adalah kode yang ditambahkan.
Sebenarnya cara membuat multi kolom pada footer hampir sama dengan menambah atau membagi kolom header,jika sobat ingin tahu bisa lihat di sini.

Semoga bermanfaat.

Available link for download

Read more »
Posted by at
Labels: , , , ,

Friday, January 27, 2017

MENAMBAH SATU KOLOM DI BAWAH HEADER

MENAMBAH SATU KOLOM DI BAWAH HEADER



Untuk menambahkan gadget di bawah header kita memelukan satu kolom di bawahnya. Untuk itu kita harus menambahkannya, karena template bawaan blogger ada yang belum ditambahkan untuk kolom ini. Jika sobat ingin menambahkan bisa ikuti cara dibawah ini:
  • Login ke blog sobat.
  • Pilih tata letak.
  • Klik edit html.
  • Cari kode yang seperti ini: ]]></b:skin>
    Kemudian tambahkan kode yang berwarna merah ini di atasnya,hingga hasilnya sbb:
    #under_header{
    float:left;
    width:100%;
    }
    ]]></b:skin>
  • Kemudian cari kode seperti ini:
    <div id=header-wrapper>
    <b:section class=headerid=headermaxwidget="1showaddelement="no">
    <b:widget id=header1locked=truetitle=nama blog sobat(header)
    type=header/>
    </b:section>
    </div>
    Kemudian tambahkan kode di bawahnya hingga hasilnya sbb:
    <div id=header-wrapper>
    <b:section class=headerid=headermaxwidget="1showaddelement="no">
    <b:widget id=header1locked=truetitle=nama blog sobat(header)
    type=header/>
    </b:section>
    </div>
    <div id=under_header>
    <b:section class=header id=underheader preferred=yes/>
    </div>
  • Warna merah adalah kode yang harus sobat tambahkan.
  • Klik simpan
Semoga bermanfaat !

Available link for download

Read more »
Posted by at
Labels: , , , , ,
Subscribe to: Posts (Atom)