Skip to content Skip to sidebar Skip to footer
Home / Tutorial Blog

Cara memasang Divider pada sidebar blog

3 comments
Cara memasang Divider pada sidebar blog


Kalau melihat gambar di atas ada  ribon pita warna pink  itu adalah yang disebut divider, contohnya di sidebar blog aku ini juga ada. Jadi sekarang aku akan menulis cara memasangnya, divider itu banyak banget pilihannya tekan free divider kalau mau memilih divider yang cantik-cantik sesuai keinginan anda. Jadi cara memasang divider pada sidebar blog inilah langkah-langkahnya:

1.Dashboard > Template > edit HTML
2.Tick Expand template widget dan tekan F3/CTRL + F dan cari kode:
.sidebar .widget { 
3. Di bawah kode diatas contohnya:
.sidebar .widget {
  margin-bottom: 1em;}
atau (karena mungkin setiap template blog tidak sama)
.sidebar .widget, .main .widget {              border-bottom:1px dotted $bordercolor;  margin:0 0 1.5em;  padding:0 0 1.5em; }
4.Hapus yang aku tandai dengan warna merah seperti diatas kalau ada kode itu, dan gantikan dengan kode seperti di bawah ini, sehingga jadinya:
.sidebar .widget {
margin:0 0 1.5em;
padding:0 0 50px;
background-image: url(http://i1243.photobucket.com/albums/gg546/alice4ja/5196c365g59531c554c35.gif);
background-position: bottom;
background-repeat: no-repeat;
}
Yang aku tandai warna biru itu adalah URL DIVIDER contoh dari aku/pita/ribon, dan anda boleh mengggantinya dengan url divider yang lain.

5.Tekan pratinjau dulu untuk melihat jadi apa enggak, kalau jadi baru simpan template xD.

3 comments for "Cara memasang Divider pada sidebar blog"

  1. UnknownMay 4, 2013 at 9:01 PM

    hallo ! tutorialnya sangat membantu sis :) utk tutorial yg lain berhasil tapi yang ini gak ada , yang dapat malah kode .sidebar .widget {-moz-border-radius: 10px;-webkit-border-radius: 10px;border:3px solid #CA8EFF;background: url(http://i1243.photobucket.com/albums/gg546/alice4ja/images3-1.jpg);padding:10px;margin:0 0 1.0em;} - yg kode di atas nggak nemu jadi gmana ya solusinya. tks

    ReplyDelete
    Replies
    1. ALICEMay 4, 2013 at 10:56 PM

      sebenarnya tinggal meletakkan kode no 4 di atas di bawah sidebar widget pada template sesuai petunjuk tutorial seperti di atas,dan kalau ada kode yang lain di bawah kode sidebar widget memang harus dihapus dulu,tapi sebelum di save/simpan,tekan pratinjau dulu ya jangan lupa :D

      Delete
  2. RaMay 28, 2013 at 3:51 PM

    halo, saya baru melihat postingan ini, tutorialnya sangat membantu sis^^ saya mau tanya, gimana caranya kok judul gadget di blog ini bisa kyk ada kotak gambar pita? saya cari-cari di google tapi gk nemu. thanks :)

    ReplyDelete