January 27, 2009

18

Nambah Sidebar Baru Di Sebelah Kiri

Posted in , ,
Template blogku yang Ningtyas itu dulu cuma 2 kolom, sidebarnya di kanan.. Sekarang udah jadi 3 kolom.. Dulu pas ngutakatik sampe stress, ribet cari2 tutorial yang ngajarin cara menambah sidebar baru.. Akhirnya sukses deh, walau sempet mau nangis, awal2nya jadinya kok meletot2 nggak karuan.. Hehe..

Buat nambahin sidebar baru disebelah kiri, dulu aku ambil tutorial dasarnya dari blognya Kang Rohman, nuhun ya Kang..

Langkah2nya gini nih..
  • 1. Login di Blogger
  • 2. Klik Layout >> Edit HTML (nggak usah nyentang expand HTML nya ya.. n jangan lupa Backup dulu..)
  • 3. Liat di bagian Outer Wrapper, tambahkan kode di bawah ini tepat di bawah bagian #sidebar wrapper.
#newsidebar-wrapper {
width: 200px;
float: left;
padding-right:10px;
word-wrap: break-word;
overflow: hidden;
}
  • 4. Keseluruhan kodenya jadi seperti ini :
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 840px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

#main-wrapper {
width: 420px;
float: left;
padding: 5px;
border:1px solid $bordercolor;
background-color:#c77c7c;

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: 200px;
float: right;
padding: 5px;
border:1px solid $bordercolor;
background-color:#c77c7c;

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

#newsidebar-wrapper {
width: 200px;
float: left;
padding-right:10px;
word-wrap: break-word;
overflow: hidden;
}
  • 5. Outer wrappernya yg tadinya 660px kuubah jadi 840px; main wrappernya yg tadinya 410px kuubah jadi 420px; sidebar wrappernya yg tadinya 220px kuubah jadi 200px. Perhatikan float and padding yang warna kuning ya, jangan kebalik right/leftnya.
  • 6. Kemudian liat di bagian bawah, tambahkan kode di bawah ini sebelum kode <div id='main-wrapper'>
<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'/>
</div>
  • 7. Keseluruhan kodenya jadi seperti ini :
<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'/'>
</div>

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

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archives' type='BlogArchive'/>
</b:section>
</div>
  • 8. Save Template
  • 9. Berdoa yaa... Mudah2an gak amburadul, hihi..

PS: width nya outer, main n sidebar wrapper bisa disesuaikan sesuai keinginan.
Share on :

18 comments:

  1. wah ayik nih mba tyas sudah belajar html....mantabbb mba terusin ngopreknya mba, sukses yah mba

    ReplyDelete
  2. aku tobat dah mba beljar otak-atik template lg.. bernatakan mulu hasilnya.. T_T hihihi.. tp guru kita sama2 kang rohman ni ^_^

    ReplyDelete
  3. ternyata...mbak ini tidak hanya cantik.., tetapi juga pinter....

    ReplyDelete
  4. akhirnya bertambah lagi neh ada yang ngasih tutorial...sipppp mbakeeee ;)

    cemangat teyussss sesuai warna meyahnyaaaa...heheehe

    ReplyDelete
  5. wow mbak ning udah mulai ngeluarin jurus ngoprek html nya nih.ikutan belajar ahh

    ReplyDelete
  6. semangat mbak..maju teruuusss ..he he he

    ReplyDelete
  7. wahh sipp , dr kmrn liat postingan blogger yg laen agak rumit gak jadi2 , bgitu pake punya mbk , jd bisa , ehh td sempet mlorot juga sih , wkwk akhirnya dah di perbaiki juga , thx . . wkwk

    ReplyDelete
  8. AnonymousJune 01, 2009

    Terima kasih udah saya coba,dan berhasiiil,..

    ReplyDelete
  9. makasih semua....
    atas petunjuknya
    ternyata setelah di buat sidebar baru langsung diisi dengan widget ya.....??
    biar tampak bagaimana posisinya
    pantesan sebelum diisi postingnya tetep paling kiri

    salam fabrie.blogspot.com

    ReplyDelete
  10. makasih semua....
    atas petunjuknya
    ternyata setelah di buat sidebar baru langsung diisi dengan widget ya.....??
    biar tampak bagaimana posisinya
    pantesan sebelum diisi postingnya tetep paling kiri
    salam
    fabrie.blogspot.com

    ReplyDelete
  11. Trim's ya..
    Berhasil nih..

    ReplyDelete
  12. Alhamdulillaah... akhirnya berhasil... kemarewn sempat stress juga mencoba dari yang lain... akhirnya ketemu blog mba ini, trimakasih buanyak... minta ijin saya link ya blognya!!!????

    ReplyDelete
  13. Kebetulan lagi nyari trik yang ini sob.. ijin copas ya n trims banyak2..

    ReplyDelete
  14. Artikelnya dah saya copas sobat.. di blog saya.. tapi sumbernya saya link ke sini.. makasih ya

    ReplyDelete
  15. maksih mbak,,,tapi saya masih binun dengan menambah wigdet ke sebelah kiri nya,,, :)

    ReplyDelete
  16. makasih mbak saya sudah bisa,,,,,ehehehhe jadi koment dua kali deh,,,,

    ReplyDelete
  17. eh mbak ..
    gw kan nyoba trik mbak ..
    tapi hasilnya sidebar yang sebelah kanan ga rata ..
    itu gimana ngatasinnya ya ?

    coba liat blogku : http://ex-tee-indonesia.blogspot.com

    please help me :)

    ReplyDelete
  18. menarik tuh saya coba
    http://sincron9.blogspot.com

    ReplyDelete