Download File: kiri

Showing posts with label kiri. Show all posts

Thursday, April 6, 2017

MENAMBAH SIDEBAR DI KANAN DAN KIRI

ebelum menambah kolom sidebar yang perlu kita perhatikan adalah pada bagian di bawah ini:

Outer-wrapper=660px;
Header-wrapper=660px;
Footer-wrapper=660px;

Sekarang masuk ke blog sobat.
Klik tata letak.
Edit html.
Jangan beri centang pada Expand widged template.

Cari kode seperti di bawah ini:

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
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 */
}

#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 */

Outer-wrapper ini merupakan sebuah bingkai di mana main wrapper dan sidebar berada,termasuk header dan footer berada di dalamnya.

Jika ingin menambah satu sidebar berarti kita harus menambah pula lebar dari bingkai tersebut.Misalnya kita ingin menambah satu sedebar dengan lebar yang sama dari sedebar sebelumnya,kita tinggal cloning dan menambahkan nilai sidebar tersebut pada Outer-wrapper= 660+220=880.

Kemudiann kasih nama sidebar tersebut dengan nama yang berbeda.Agar lebih mudah membedakannya kita beri nama sidebarbaru-wrapper,hingga hasilnya sbb:

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 880px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
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 */
}

#sidebar-wrapper {
width: 220px;
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 */
padding:5px;

#sidebarbaru-wrapper {
width: 220px;
float: left;
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 */
padding:5px

Untuk warna merah adalah hasil cloning dari sedebar-wrapper yang kita beri nama sidebarbaru-wrapper,sedang warna biru tambahan sela agar font tidak terhimpit bingkai sidebar. warna orange dimana letak sidebar berada.

Jangan lupa ganti juga nilai lebar dari:
header-wrapper= 880px;
footer-wrapper= 880px;

Setelah mengganti kode-kode angka dan memberi nama sidebar tersebut,kemudian tarik ke bagian bawah pada kode template sobat. Temukan kode seperti di bawah ini:

<div id=main-wrapper>
<b:section class=main id=main showaddelement=no>
<b:widget id=Blog1 locked=true title=Posting Blog type=Blog/>
</b:section>
</div>

Letakkan kode dibawah ini tepat atasnya:

<div id=sidebarbaru-wrapper>
<b:section class=sidebar id=sidebarbaru preferred=yes/>
</div>

Hingga hasilnya sebagai berikut:

<div id=sidebarbaru-wrapper>
<b:section class=sidebar id=sidebarbaru preferred=yes/>
</div>

<div id=main-wrapper>
<b:section class=main id=main showaddelement=no>
<b:widget id=Blog1 locked=true title=Posting Blog type=Blog/>
</b:section>
</div>

Klik pratinjau.
Jika di rasa sudah sesuai klik simpan template.

Available link for download

MELETAKKAN GAMBAR DI SEBELAH KANAN ATAU KIRI ARTIKEL

Meletakkan gambar atau image memang bisa memperindah tampilan suatu blog,tapi jika kita menaruhnya kurang serasi bisa saja merusak pandangan bahkan membuat jenuh bagi pengunjung. Apalagi jika gambar tersebut berada di antara artikel yang kita buat. Sebenarnya di sini yang ingin saya katakan adalah ketika kita meletakkan gambar apa adanya pada artikel yang akan terlihat menjorok ke atas.
Untuk mengatasi hal ini sobat bisa menyisipkan kode css dengan menambahkan ukuran dan letak gambar. Selanjutnya bisa meletakkan gambar tersebut di sebelah kanan maupun pada sebelah kiri dari artikel kita.

Gambar di samping akan terlihat mengambang di sebelah kiri setelah kita menambahkan kode css nya. Misalkan disini saya punya alamat gambar <img src="http://i761.photobucket.com/albums/xx252/darma_bucket/th_garudajpn.png"> Kita tinggal menambahkan letak dan ukurannya yang akan menjadi seperti ini <img src="http://i761.photobucket.com/albums/xx252/darma_bucket/th_garudajpn.png" align="left" width="100" height="100">

Gambar di samping akan terlihat mengambang di sebelah kanan dengan mengganti posisi left menjadi right. Sobat juga bisa menyesuaikan juga lebar dan tingginya.

Gambar di samping akan terlihat menjorok ke atas ketika kita letakkan apa adanya tanpa menambah ukuran dan letak gambar.

Semoga bermanfaat !

Available link for download

Thursday, April 6, 2017

MENAMBAH SIDEBAR DI KANAN DAN KIRI

MENAMBAH SIDEBAR DI KANAN DAN KIRI

Thursday, March 23, 2017

MELETAKKAN GAMBAR DI SEBELAH KANAN ATAU KIRI ARTIKEL

MELETAKKAN GAMBAR DI SEBELAH KANAN ATAU KIRI ARTIKEL