Cara Membuat dan Memasang Garis Warna-Warni Di Blog

Cara Membuat dan Memasang Garis Warna-Warni Di Blog - Pada kesempatan kali ini pinterkomputer ingin membagikan sebuah tutorial, bagaimanakah "Cara Membuat dan Memasang Garis Warna-Warni Di Blog" . Garis ini lagi populer di kalangan template-template para blogger profesional di Indonesia. Contoh template yang menggunakan garis warna-warni tersebut diantaranya :


Gambar: Garis Warna Warni Pada Template Brosense

Brosense Responsive (Mas Sugeng) 
FiSEO Magz V2 (Dian AnaR-chyta) 
Ridwan-Hex (Abdul Ajiz Ridwanz) 
dan template-template keren lainnya yang tidak bisa saya sebutkan satu persatu. 

Cara Mudah Membuat dan Memasang Garis Warna-Warni Di Blog

Untuk caranya itu kita sangat mudah sekali, hanya mengedit di bagian CSSnya saja dan menambahkan atau menyisipkan beberapa script. Udah penasaran kan gimana buatnya, Yuk disimak  caranya.

1. Tentukan dimana sobat ingin meletakkan garisnya, ingin di atas/bawah Header, atas/bawah Menu, atas/bawah Footer. Sebagai contoh anda akan memasang dibagian bawah Header, diatas Footer, diatas header

2. Jika sudah ditentukan meletakkannya dimana, contohnya dibagian Header lalu klik kanan dan pilih Inspect element. Saya membuatnya di Header jadi saya klik dibagian Header lalu klik Inspect element. Maka akan muncul sebuah menu yang muncul dibagian bawah.

3. Kita lihat dibagian CSSnya (header-wrapper) disebelah menu kanan bawah menu inspect element. Disitu terdapat warna Background blog anda.






4. Masuk ke dashboard blogger pilih Template lalu Edit HTML cari tulisan header-wrapper (gunakan Ctrl + F) 

5. Setelah itu tambahkan script ini setelah script warna background tadi :

url(http://2.bp.blogspot.com/-yNE4A_H3C2o/U1E6RPYNEpI/AAAAAAAADRQ/UOP1mUKaxGE/s1600/line.png) repeat-x bottom center; margin: 0; padding: 5px 10px; height: auto;}

contoh: warna background nya #15467D, maka jadinya seperti ini : 
#header-wrapper {background: #15467D url(http://2.bp.blogspot.com/-yNE4A_H3C2o/U1E6RPYNEpI/AAAAAAAADRQ/UOP1mUKaxGE/s1600/line.png) repeat-x bottom center; margin: 0; padding: 5px 10px; height: auto;} 

Keterangan :

Warna biru : warna background header-wrapper (tidak perlu diganti,biarkan saja sesuai warna backgroudn anda)

Warna merah : script yang ditambahkan setelah background: #15467D

warna Hijau : untuk meletakkan dimana gambar ingin diletakkan diatas (Top) kalau dibawah bawah (bottom) atur sesuai keinginan. Hasilnya akan seperti gambar dibawah ini :


6. Klik preview untuk melihat apakah sudah saja atau tidak, jangan lupa backup template mu jika terjadi hal yang tidak diinginkan,jangan lupa Save.

Demikikan Cara Membuat dan Memasang Garis Warna-Warni Di Blog. Semoga bermanfaat

26 Responses to "Cara Membuat dan Memasang Garis Warna-Warni Di Blog"

  1. Ternyata ini cara memasang garis warna dibawah heaader, tes coba gan

    ReplyDelete
  2. oh ternyata begitu, terimakasih sudah mau berbagi masbro

    ReplyDelete
  3. Ini dia yg tak cari2, ijin nyoba ya

    ReplyDelete
  4. izin nyoba gan..

    http://nurekapancadarmawan.blogspot.co.id

    ReplyDelete
  5. Ini dia totorial yg sedang saya cari.. Terimasih banyak gan

    ReplyDelete
  6. Template brosesnse ? Bukannya yg seperti itu blognya mas Sugeng ? Si Evomagz ? Atau sy yg kurang update ya ? Artikel nya bagus.Enaskdibasca. Salam admin SURGA BLOGGING

    ReplyDelete
    Replies
    1. Semua blog bisa dipasang garis warna warni gan. mungkin anda kurang update...hehe :)

      Delete