Berbagi Tutorial Seputar Blog Terserah Adminnya, Masalah?

Cara Membuat dan Memasang Garis Warna-Warni Di Blog

Cara Membuat dan Memasang Garis Warna-Warni Di Blog - Suasana yg cerah, Tut-Blogger kembali berganti template, menurut sobat gimana ? apakah ada perubahan dengan kecepatan blognya atau sama saja? hehe.. hanya sobat yang tau ya.

Cara Membuat dan Memasang Garis Warna-Warni Di Blog

Pada kesempatan kali ini saya ingin membagikan sebuah tutorial, bagaimana sih "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 :

  • 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 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 kawan..

1. Pertimbangkan dimana sobat ingin meletakkan garisnya, ingin di atas/bawah Header, atas/bawah Menu, atas/bawah Footer. Di Tut-Blogger saya memasang dibagian bawah Header dan diatas Footer

2. Jika sudah ingin meletakkannya dimana, sekarang sobat klik dibagian Header/Menu/Footer lalu klik Inspect element. Saya membuatnya di Header jadi saya klik dibagian Header lalu klik Inspect element. Lalu akan muncul sebuah menu yang muncul dibagian bawah.

Cara Membuat dan Memasang Garis Warna-Warni Di Blog


3. Disini Header saya bernama header-wrapper, jika saya sentuh maka bagian header akan membentuk bayang-bayang.

Cara Membuat dan Memasang Garis Warna-Warni Di Blog


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

Cara Membuat dan Memasang Garis Warna-Warni Di Blog

Cara Membuat dan Memasang Garis Warna-Warni Di Blog


5. Setelah itu tambahkan script ini setelah script warna background tadi sebelum  " ; "
contoh: warna background saya itu #15467, lalu tambakan script yang berwarna orange itu

#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;}
 **
warna merah : warna background header-wrapper saya (tidak diganti,biarkan saja sesuai warna backgroudn anda )
warna orange : script yang harus ditambahkan setelah background: #15467D (tambahkan script yang warna orange)
warna biru : untuk meletakkan dimana gambar ingin diletakkan diatas/bawah (atur sesuai keinginan)
Cara Membuat dan Memasang Garis Warna-Warni Di Blog

Cara Membuat dan Memasang Garis Warna-Warni Di Blog


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


Demikian tutorail kali ini, jika bingung anda berkenan bertanya dikomentar,semoga bermanfaat ya..
Cara Membuat dan Memasang Garis Warna-Warni Di Blog

Share on Facebook
Share on Twitter
Share on Google+
Tags :

Related : Cara Membuat dan Memasang Garis Warna-Warni Di Blog

47 comments:

  1. jadi keren ya , apakah mengurangi kecepatan loading blog???
    Evo Magz bgt template nya :D

    ReplyDelete
    Replies
    1. sedikit mengurangi,tapi buktinya blog ane tetep wuzz kok gan

      Delete
  2. Kalo dipasang atas dan bawah header jadi kagak ya gan? :o

    ReplyDelete
    Replies
    1. jadi kok gan,tinggal agan saja yang harus pintar menempatkannya

      Delete
  3. Mantap gan :D jadi keren blog saya

    ReplyDelete
  4. jadi itu ya tutorialnya thanks dah langsung ane coba, ane pengen ada garis warnanya :D

    ReplyDelete
  5. wah kren nih langsung dicoba
    thanks for sharing

    ReplyDelete
  6. Sepertinya tidak cocok boss untuk template saya jadi nyimak aja ya .

    ReplyDelete
  7. nah lumayan buat ngehias nih. nanti saya pasang ^_^

    ReplyDelete
    Replies
    1. iya mas, buat ngehias. pasang sekarang aja

      Delete
  8. Mantap Banget dah Blog kawan saya 1 ini (y)

    ReplyDelete
    Replies
    1. weh ada izlal, ayo zlal ngeblog lagi

      Delete
    2. iya nanti, masih sibuk boss.
      hehe

      Delete
    3. wkwkwk sibuk ngapa.. emangnya mudik zlal?

      Delete
  9. Waduh kok saya masuk ke daftar list ^_^
    Makasih kawan ...

    ReplyDelete
    Replies
    1. wkwkwk, jadi bahan referensi tutorial saya mbak..
      makasih udah back yah :D

      Delete
  10. wah boleh juga nih, bisa jadi keren template saya :D

    ReplyDelete
  11. Wiihh bikin blog tambah keren dong!!

    ReplyDelete
  12. Mantap gan , bisa dipasang di blog saya nih , hehhehe

    ReplyDelete
  13. wow.. nice tutorial mas,,
    langsung coba aah,,

    ReplyDelete
  14. tapi apa gak bikin berat gan.,??kan gak begitu penting..

    ReplyDelete
    Replies
    1. ya memang tidak begitu penting, tpi buat blog lebih keren mas

      Delete
  15. kebetulan ane lagi nyari backlink nih coba dah

    ReplyDelete
  16. Akhirnya nemu juga tutor begini. Terima kasih banget gan :D

    ReplyDelete
  17. Replies
    1. gagal dimananya gan? mau pasang di footer atau header?

      Delete
  18. Mantap ! Tapi bisa nggak di pasang di template bawaan blogger?

    ReplyDelete

Silahkan berikan komentar dan masukan anda di bawah ini, komentar dengan link tidak akan di approve