Cara Menambah Sidebar Di Blog Dengan Cooding HTML

Cara Menambah Sidebar Di Blog Dengan Cooding HTML || Salam Bedlimciti baru baca judulnya saja sudah sepertinya gimana gitu, Sama admin dulu seperti itu, Kalok udah melihat atau mendengarkan kata COODING HTML ampun rasanya. Waktu Kuliah juga dulu baru awal mendengarnya rasanya tak sanggup. Tetapi jika kita telatenin dan pelajari rasanya tidak terlalu rumit rumit amat. Ada rasa yang menantang gitu... 

Ok Kita tidak membahas tentang coodingnya, tetapi kita akan mencoba menjelaskan terlebih dahulu Apa itu Sidebar Diblog ? kemudian kita akan membahasnya bagaimana cara menambah sidebar itu?

Langsung saja di simak dan dipraktekkan.

Apa Itu Sidebar Blog?

Pengertian Sidebar itu sendiri adalah  bagian dari tata letak suatu blog. Sidebar merupakan kolom blog yang berada di sebelah kiri, atas, bawah, dan kanan posting artikel. Kita tentu banyak melihat web dan blog dengan berbagai widget disebelah kiri dan kanan posting, atau di atas dan bawah posting artikel. Itulah yang dinamakan sidebar.

jika kita sudah mengetahui pengertiannya pasti bertanya juga kan apa manfaatnya sidebar blog itu

Apa Manfaat Sidebar Blog itu ?

Sidebar Blog itu sendiri cukup banyak manfaatnya. Diantaranya bisa menampilkan widget :

1. Mempercantik Blog
2. Memberikan Informasi Blog itu sendiri
3. Memberikan Informasi tentang jumlah Pengunjung
4. Tempat Sosial Media
5. Tempat Iklan
6. dan masih banyak lagi

 

Cara Menambah Sidebar Di Blog

Sebelum 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.

Itulah Beberapa Cara yang sudah admin berikan, semoga bermanfaat, dan jangan lupa sering sering berkunjung di blog bedlimciti.