Tips Sederhana : Merubah Style Blogroll Menjadi 2 Kolom

in Web Desain | 30 Comments
Tips Sederhana : Merubah Style Blogroll Menjadi 2 Kolom

Widget blogroll sangat sering saya jumpai di hampir setiap blog yang saya jumpai, apabila link yang di pasang masih sedikit mungkin tidak akan mengganggu keberadaannya, namun, apabila link yang terpasang sudah banyak , widget blogroll ini akan memanjang ke bawah dan cukup mengganggu, serta membuat bagian sidebar blog anda penuh.

Solusi yang saya tawarkan adalah dengan membuat widget blogroll ini menjadi 2 kolom, sehingga bisa menghemat tempat di sidebar blog anda. Tidak terlalu sulit untuk merubah widget blogroll menjadi 2 kolom, anda hanya harus membuka file style.css pada template anda. Masih bingung cara membukanya ? baiklah, silahkan ikuti step by step caranya  di bawah ini

  1. Bila sudah login ke dashboard, silahkan anda pilih menu Appearance » Editor
  2. Kemudian anda lihat di sebelah kanan layar monitor anda, cari style.css , biasanya ada di bagian paling bawah.
  3. Kemudian anda masukan kode css berikut di dalam file style.css tersebut, untuk penyimpanan kodenya bisa anda taruh di mana saja, bisa paling bawah atau di tengah-tengah isi file style.css
    ul.blogroll li{
float:left;
width:135px;
}
  4. Kolom 3 yang saya highlight, silahkan anda sesuaikan sendiri sehingga widget blogroll anda bisa menjadi 2 kolom.
  5. (Optional) Apabila ukuran width atau lebar sidebar anda 300px, kemudian anda menggunakan width:100px pada kode css yang saya berikan, dapat merubah widget blogroll menjadi 3 kolom. Tetapi harus bersih dari padding dan margin.

Tidak sulitkan :mrgreen: , selamat mencoba.

Semoga bermanfaat !

Penulis: Satrya Bima - http://www.margasatrya.com

Satrya, founder margasatrya.com yang saat ini sedang bekerja di salah satu provider theme e-commerce, Tokokoo.com sebagai Front End Developer. Mau mengenal saya lebih jauh ? Silahkan follow twitter atau kontak saya

Berlangganan Artikel Gratis !

  • http://www.isnuansa.com isnuansa

    Lha, mana nih contohnya blogroll dua kolomnya Sat?

    Yang di inspiration itukah?

    • http://www.margasatrya.com Satrya

      Iya mba, :mrgreen:

  • POOSOFT-Tips Dan Trik Komputer

    Kok Mas Sendiri gak make 3 Kolom hem ???,. hanya mengedit style.css yah ?

    • http://www.margasatrya.com Satrya

      Kan saya bilang di atas optional mas, berhubung sidebar saya kecil jadi kurang bagus klo di jadikan 3 kolom.

  • Andank

    Kalo plugin buat bikin blogroll apa ya mas?

    • http://www.margasatrya.com Satrya

      Plugin ? hmmm, mksudnya plugin seperti apa mas ? Itu kan sudah fasilitas dari wp nya

  • http://andreasandre.net andre

    wah patut di coba nih, kalo bagian footer nya ini mas, bikinnya gmana? apa sudah dari temanya?

    • http://www.margasatrya.com Satrya

      Saya memang membuatnya seperti itu mas,. biar ramai .. hahhah :mrgreen:

  • Agus Siswoyo

    Sepertinya tips ini akan saya pakai. Risih juga kalau pajang blogroll sepanjang rel kereta api. hehehe…

    Thanks sharungnya.

    • http://www.margasatrya.com Satrya

      Sharung.. hahahha, oke sama2 :lol:

  • Pingback: Tips Sederhana : Merubah Style Blogroll Menjadi 2 Kolom | Tutorial … - Cari Judul Skripsi, Makalah, Laporan

  • rismaka

    Hihihi… kalau boleh saya tebak, lama kelamaan mas satrya juga bakal lepas tuh blogroll. Catet deh komentar saya ini. :mrgreen:

    Kita lihat 1-2 tahun lagi ya :D

    • http://www.margasatrya.com Satrya

      hahhaha,. bisa jadi :mrgreen:

  • http://moblogger.co.cc Moblogger United

    opsi yg menarik.
    sayang skl, dg alasan SEO saya sndr membatasi jmlh link blogroll di sidebar.

  • ardianzzz

    BTW, yang bener SpeckyBoy bukan SpeakyBoy :)

    Oh ya, kalau pakai float jangan lupa clearfix,


    /* slightly enhanced, universal clearfix hack */
    .clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
    }
    .clearfix { display: inline-block; }

    /* start commented backslash hack */
    * html .clearfix { height: 1%; }
    .clearfix { display: block; }
    /* stop commented backslash hack */

    :D

    • http://www.margasatrya.com Satrya

      Hahhaha,. oia salah :D

      Hmmm, apakah di setiap element yg di beri float harus menggunakan clearfix ini mas ?
      Bedanya sama clear biasa apa mas ?

    • iznyn

      Beda clearfix sama css attribute clear adalah jika clearfix digunakan untuk menyelesaikan masalah float pada container dari elemen yang difloat, sedangkan clear hanya untuk membersihkan efek float pada element descendant dari element yang difloat.
      Contoh pada kasus dari tutorial ini, misalkan struktur html adlah sbb

      <ul>
      <li>Menu 1</li>
      <li>Menu 2</li>
      <li>Menu 3</li>
      </div>

      Jika element li diatas kita float maka element ul akan collapse dan akibatnya tidak bisa kita manipulasi seperti diberikan background color. Untuk menyelesaikannya kita dapat menambahkan element kosong yang di-clear seperti

      <br style=”clear: both;” />

      Atau dengan menggunakan class .clearfix tersebut.

      • http://www.margasatrya.com Satrya

        Owhh,. terima kasih penjelasannya mas,

  • http://www.nyubi.org/ Ngeblog Dibayar

    lha saia malah ndak punya blogroll mas… *ndak ada yang amu exchange link dengan blog PR 0 ;)

  • Agustantyono

    ehm…. gitu ya cara bikin blogroll kita bisa tambah ringkas… trims mas satrya, sepertinya cocok banget dengan kebutuhan :)

    • http://www.margasatrya.com Satrya

      Sama2 mas :D

  • http://kafegue.com/ iskandaria

    Untuk blogroll saya kayaknya cocok juga ya. Ntar mau saya coba deh.

  • http://www.gemilang.tv Indovision

    Bagus Tipsnya, tapi widget di blogroll masih sedikit, jadi di bookmark dulu. Thanks

  • ardianzzz

    Sepertinya properti clear buggy di IE

  • http://ilmucts.blogspot.com ilmucts

    tips yang bagus… kalu buat blogspot gimana mas??

  • http://ciccikoni.wordpress.com ciccikoni

    tips yang sangat bermanfaat, salam kenal yah…

  • http://coretan9.wordpress.com coretan9

    makasih tipsnya mas… !!

  • http://syimen.com Syimen

    …dapat merubah widget blogroll menjadi 3 kolom. Tetapi harus bersih dari padding dan margin.
    Inget2 tuh,… harus bersih dari padding dan Margin kalo nda mau sesat nafas. hehehehe.

    Salam kenal dari Syimen, nda menyesal saia mampir ke mari. ;)

    Cheers.

  • Semua Ada

    terima kasih tipsnya mas ,
    mas buat tutorial cara buat 2 kolom dibawah artikel terkait yang sosial bookmark sama facebook fan page itu dong, bagus soalnya mas, hehe, terima kasih

  • http://cek-info.blogspot.com/ Asmara Susanto

    buat blogger ad gk?