12/3/09

Membuat Sidebar Baru Sebelah Kiri


Tertarik dengan komentar sobat Sabirinnet yang menanyakan cara Membuat Sidebar Baru Sebelah Kiri dalam komentarnya dipostingan Membuat Sidebar Dua Kolom katanya begini : ” Punya saya kan sidebarnya hanya disebelah kanan, bagaimana untuk nambah ke sebelah kiri bang?? “ gitu katanya. Pusing juga… karena memang belum pernah lakuin yg ntu hehe.. tapi untuk tidak ngecewakan sekaligus sebagai bentuk tanggung jawab moral (duuiiileee narsisnya… ) maka dengan ini saya coba aja posting tentang cara Membuat Sidebar Baru Sebelah Kiri , dengan ini pula saya nyatakan bahwa artikel ini esensi dan substansinya hasil copas mentah2 dari blognya sobat My Learning Days, saya sih cuma ubah redaksional dikit2.

Langsung meluncur ke Cara Membuat Sidebar Baru Disebelah Kiri yang dilakukan oleh sobat tersebut, langkahnya seperti ini :

  1. Login di Blogger atau Dashboard
  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 diubah jadi 840px; main wrapper tadinya 410px diubah jadi 420px; sidebar wrapper dari 220px jadi 200px.  Perhatikan float and padding yang warna pink ya, jangan kebalik right/leftnya.
  6. Kemudian lihat 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. Selesai, kita telah Membuat Sidebar Baru Sebelah Kiri, selanjutnya berdoa... Mudah2an gak amburadul, ... soalnya saya juga belum praktek nih.. hihihi.. 

         

      Postingan sejenis : Cara Membuat Kolom Tambah Gadget di Bawah Header , cara Buat Footer Multi Kolom  , Cara Membuat Sidebar Dua Kolom 

       

      Source : My Learning Days , makasih sobat atas artikelnya.


      1. Thanks telah mampir, yo kita saling vote dan comment..
      2. Bila berkenan tolong bagikan dengan tombol share di atas.
      3. Gratis langganan artikel blog ini, silahkan klik Disini, atau masukan email disidebar yg telah disediakan

      Sobat sedang membaca artikel Membuat Sidebar Baru Sebelah Kiri, bila berkenan silahkan share artikel ini dengan tombol share di atas. Bila mau COPAS untuk di blog sobat, dimohon meletakkan link aktif sebagai Sumbernya dengan copy kode di bawah ini.

      Related Post:

      60 comments:

      1. Pertamaxxxxxxx...

        Thanks info nya kang.. Tapi kalau side bar yang di bawah gimana kang?

        I miss you came came to my blogs

        ReplyDelete
      2. thanks infonya sob,kalau lagi pengen edit sidebar kesini aja deh diriku

        ReplyDelete
      3. nanti saiia pake ahh tut nya kang... hatur tengkyu kang :)

        ReplyDelete
      4. (maaf) izin mengamankan KELIMAAAAXXXZ dulu. Boleh kan?!
        Walau gak bisa buat blog saya yang gratisan tapi lumayan buat nambah pengetahuan.

        ReplyDelete
      5. salam sobat
        siip banget ,,
        saya pingin juga mencoba buat sidebar baru sebelah kiri ini.
        trims ilmunya.

        ReplyDelete
      6. @ Laksamana Embun : wah baru muncul lagi nih sob.. kemana aje
        @ Gondes
        @ genial
        Makasih juga sobat
        @ Putra : makanya widnya disesuaikan sob..
        @ alam endah : syukurlah sobat kalau dah sembuh.. sepi rasanya dunia maya ini tanpa kehadiran alam yg endah
        @ Nura : Yups silahkan aja dicoba sob..

        ReplyDelete
      7. Halo sobat,
        Tambahan ilmu tentang blog dari anda.
        Mungking perlu hati2 untuk menerapkannya.

        ReplyDelete
      8. Makasi BRO SaungWEB mau berkunjung ke blog saya. Blog anda juga bagus, terutama contentnya yang sangat bermanfaat. Jujur aja, saya banyak mengambil teknik dan jurus2 dari blog anda. Salam kenal.

        ReplyDelete
      9. Waduh tambah hebring aja nih elmunya akang saya, tetap semangat kang, keep blogging!

        ReplyDelete
      10. Maaantaaap!!! udah terbukti bisa dipraktekan!

        ReplyDelete
      11. sidebar saya sebelah kanan mas, jika kita membuka halaman posting saya mau sidebarnya pindah ke kiri mas....thank's

        ReplyDelete
      12. @ Multibrand : halo lagi bos .. thanks ya
        @ dudijaya
        @ tukang poto
        @ gravisware
        @ embah gndng

        Makasih sobat2 sukses selalu ya
        @ hadi : wah kalau yg ntu belum pernah nyoba bos... tapi template2 magazine biasanya kayak gitu.. donlot yg dah jadi aja...

        ReplyDelete
      13. Terima kasih ilmu barunya..

        mau di coba, ntar kalo udah jadi or ada masalah mohon bantuan lagi

        ReplyDelete
      14. wah ne perlu dicoba???
        salam kenal.....

        ReplyDelete
      15. @ Dipenogoro Aventure : Sama2 sob.. silahkan dicoba,, cuman kalau nanti jadi amburadul.. gak nanggung ya.. hahaa
        @ javabis99 : sama2 sobat.. gimana nih khabar dipagi yg cerah ini
        @ oto busyet : busyet lagi dah.. blognya keren.. cuma otonya bikin ngiler aja tuh

        ReplyDelete
      16. Thx info nya.....
        dah dicoba dan berhasil,

        ReplyDelete
      17. jika saya buat sidebar batu berarti kolomnya tambahnya.. kolom saya cuma 2 brarti lumayanh jih untuk nambah hhee.. makasih infonya ya

        ReplyDelete
      18. hehehe...akhirnya ada cara bikinnya ....daripada bongkar semua... template, padahal sudah lama modifikasinya..mo di bongkar total...capeee

        ReplyDelete
      19. Wah bagus nih artikel nya.
        .thanks ..
        bermanfaat...

        ReplyDelete
      20. terima kasih ya mas .blog saya sudah ada sidebar sebelah kirinya ....

        thanks..

        http://detc-hack.blogspot.com

        ReplyDelete
      21. Liat commentnya sobat-sobat yang lain tuh pada tahun 2009 semua !!! Nah saya baru kasih comment pas mo tahun baruan 2011...He..he..Saya baru ja ngeblog, habisnya sumpek kmaren g lolos CPNS, payah deh ??? Gini Boz, kode-kode yg disebutkan di atas tu g ada, klo yang mirip-mirip ya banyak. Pa bawaannya template-nya kali ya ?

        ReplyDelete
      22. ihhh, kan gak boleh copas kang.. ntar gak unik lagi artikel ny di mata mbah google

        ReplyDelete
      23. Naruto Wikipedia|Naruto Wikipedia English|Naruto Wikipedia Shippuden|Naruto Wikipedia Indo

        ReplyDelete
      24. Naruto Movie Free Download|Naruto Shippuden Free Download|Download Naruto Episodes

        ReplyDelete
      25. Naruto 535|Naruto Manga 536|Naruto Shippuden Manga 537|Naruto 538 Manga|Naruto 539 Spoiler

        ReplyDelete
      26. Naruto GBA Roms|Naruto RPG NDS|Naruto RPG 4.0|Naruto RPG 3 Games|Naruto RPG 2 English

        ReplyDelete
      27. Naruto Sage Mode Wallpaper|Minato Namikaze Wallpaper|Kakashi Hatake Wallpaper

        ReplyDelete
      28. Read Online Naruto|Naruto Spoiler|Naruto Comic|Naruto Manga|Naruto Raw and Prediction

        ReplyDelete
      29. Terima kasih atas tutorialnya..
        mantep

        ReplyDelete
      30. Naruto 546|Naruto Manga 547|Naruto Shippuden Manga 548|Naruto 549 Manga|Naruto 550 Spoiler

        ReplyDelete
      31. Naruto 546|Naruto Manga 547|Naruto Shippuden Manga 548|Naruto 549 Manga|Naruto 550 Spoiler

        ReplyDelete
      32. Naruto 546|Naruto Manga 547|Naruto Shippuden Manga 548|Naruto 549 Manga|Naruto 550 Spoiler

        ReplyDelete
      33. thanks infonya sob,kalau lagi pengen edit sidebar kesini aja deh diriku

        ReplyDelete
      34. Sy pernah coba disalah satu blogspot ku, tapi berantakan.. sekarang lagi konsen di wordpress gan :)

        ReplyDelete
      35. maksutnya keseluruhan kodenya
        kita nambahin lagi gitu?

        ReplyDelete
      36. Sip dah infonya, tpi aq lagi meminimalisir script......................

        ReplyDelete
      37. Hehehe ni mw aq cob, malah jdi amburadul. Ndak jadi est...............
        Thanks infonya. jgan lupa visit me back on PIEBIE-TECHNO

        ReplyDelete

      Bagi sobat-sobat silahkan comment disini, Insya Allah saya comment balik di blog anda. Trims atas kerjasamanya

      Langganan Artikel

      Artikel Gtais : :

      Enter your email address:

      Delivered by FeedBurner

      Total Kunjungan

       

      Copyright 2008 All Rights Reserved Revolution Two Church theme !, Converted into Blogger Template by Bloganol dot com ! Modified by Saung Web ! , On Blogger