,
Get paid To Promote at any Location

free counters

  • Web
  • Remo xp
    • cahyo. Powered by Blogger.
    RSS
    Showing posts with label Sidebar. Show all posts
    Showing posts with label Sidebar. Show all posts

    Membuat Sidebar dalam Kotak yang Terpisah-pisah

    12:14 AM | Labels: ,

    sidebar
    Kadang kita ingin memodifikasi template blog menjadi lebih trendy dan tidak ketinggalan zaman. Dengan catatan tanpa membebani loading blog tentunya. Banyak cara dan trik optimasi agar blog tampil lebih oke, salah satunya adalah membuat tampilan sidebar dalam kotak yang terpisah-pisah. Rekomendasinya trik blogger ini lebih bagus jika diterapkan pada template yang memiliki 2 (dua) kolom, karena akan kelihatan lebih hidup tanpa harus memikirkan perataan terhadap kolom-kolom elemen halaman sidebar. Tapi tidak menutup kemungkinan pula, apabila template yang mempunyai lebih dari 2 (dua) kolom untuk ikut serta menerapkan trik blogger ini.

    Adapun langkah-langkahnya adalah sebagai berikut :

    • Login ke account blogger kamu.
    • Pilih Tata Letak --> Edit HTML.

    Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

    • Cari kode CSS sidebar antara <head> ... </head>

        .sidebar .widget {
        border-bottom:1px dotted $bordercolor;
        margin:0 0 1.5em;
        padding:0 0 1.5em;
        }

    Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

    Catatan :
    Kode template tiap blog mungkin berbeda tapi cari yang memiliki kemiripan (.sidebar .widget). Atau jika belum ada maka tambahkan kode tersebut.

    Modifikasi kode .sidebar .widget, seperti dibawah ini.

        .sidebar .widget {
        background:#fff;
        border:1px solid #6E6E6E;
        margin:0 0 1.5em;
        padding:0.5em;
        }

    Artinya setiap widget yang kamu tambahkan dalam elemen sidebar akan dipisahkan (margin:0 0 1.5em;) sebesar 1,5em ke bawah. Kotak sidebar tersebut berlatar putih (#fff) dan memiliki garis tepi berwarna abu-abu (#6E6E6E), sedangkan jarak teks dengan tepi kotak (padding:0.5em;) sebesar 0.5em.

    • Kamu bisa membuat kotak sidebar versi kamu sendiri dengan merubah kode-kode yang berwarna merah di atas.
    • Jangan lupa di simpan

    Sumber: Optimasi-Blog.blogspot.com & Kolom-Tutorial.blogspot.com


    Free Template Blogger collection template Hot Deals SEO
    • Digg
    • Del.icio.us
    • StumbleUpon
    • Reddit
    • RSS
    Read User's Comments(0)
    Posted by nurcahyono

    Mengganti Sidebar Background Dengan Animasi

    4:39 PM | Labels: ,

    Kali ini saya akan membuat tutorial tentang cara mengganti background sidebar widget. kalo ada yang belum tahu background sidebar widget itu apa ini, adalah contoh background sidebar widget pada blog saya:



    mengganti sidebar widget

    Nah...sudah tahu kan... Saya akan menerangkan cara mengganti background sidebar widget ini dan menggantinya dengan background lain yang lebih menarik. Untuk menggantinya kita harus sedikit mengotak-atik kode CSS template. Apabila kita akan mengotak-atik CSS template, backup lah template anda terlebih dahulu...biar aman. Cari aman aja lah....hehehe

    Untuk menggantinya kita tidak menggunakan script tetapi dengan gambar biasa dengan format .gif, jadi tidak akan memberatkan blog. Oleh karena itu kita harus menyediakan gambar terlebih dahulu. Dari pada teman-teman bingung cari gambar yang tepat, Saya telah menyediakan gambar yang siap teman-teman gunakan :



    sidebar widget



    sidebar widget





    Ini adalah link image hosting dari gambar diatas:
    gambar 1 :http://i560.photobucket.com/albums/ss44/erge32/RGsdbar.gif
    gambar 2 :http://i560.photobucket.com/albums/ss44/erge32/EkaSidebar.gif

    Okey...kalau teman teman sudah dapat gambarnya, saya akan memulai tutorialnya.


    Login dulu ke bloger > Tata Letak > Edit HTML > Kemudian cari Kode seperti di bawah ini (pake ctrl + f supaya cepet nyari kemudian isikan .sidebar h2)



    .sidebar h2, .middlecol h2, .bottom h2{
    color: $sidebarcolor;
    text-transform: capitalize;
    font-size: 14px;
    font-family: Arial, Tahoma, Verdana;
    font-weight: bold;
    margin: 0px 0px 5px 0px;
    padding: 0px 0px 2px 0px;
    border-bottom:1px solid $bordercolor;
    }


    Nah kalo udah ketemu sobat tinggal tambahin aja Background nya seperti dibawah ini:



    background:#f7f7f7 url(http://i560.photobucket.com/albums/ss44/erge32/RGsdbar.gif?imgmax=800)repeat;

    atau




    background:#f7f7f7 url(http://i560.photobucket.com/albums/ss44/erge32/EkaSidebar.gif?imgmax=800)repeat;


    terserah yang mana dipakai image nya ... jadi kodenya seperti di bawah ini :



    .sidebar h2, .middlecol h2, .bottom h2{
    color: $sidebarcolor;
    text-transform: capitalize;
    font-size: 14px;
    font-family: Arial, Tahoma, Verdana;
    font-weight: bold;
    margin: 0px 0px 5px 0px;
    padding: 0px 0px 2px 0px;
    border-bottom:1px solid $bordercolor;
    background:#f7f7f7 url(http://i560.photobucket.com/albums/ss44/erge32/RGsdbar.gif?imgmax=800)repeat;
    }


    Simpan. Kalau sudah selesai, insyaAllah sidebar anda telah berganti dengan sidebar yang disertai lampu berjalan yang indah. Apabila teman-teman semua suka dengan tutorial ini, pasang banner blog ini di blog anda. Atau klik iklan di blog ini atuh...pssttt...pssttt, kalau ketahuan bisa kena dibanned nih. hehehe...

    ( Sumber : http://ekakom.blogspot.com )


    Free Template Blogger collection template Hot Deals SEO
    • Digg
    • Del.icio.us
    • StumbleUpon
    • Reddit
    • RSS
    Read User's Comments(0)
    Posted by nurcahyono
    Subscribe to: Posts (Atom)
    Free Doll 18 Glitter MySpace Cursors at www.totallyfreecursors.com