Cara Mudah Membuat dan Memasang Garis Warna-Warni di Blog

kholilrohman 22.43
Cara Mudah Membuat dan Memasang Garis Warna-Warni di Blog - kali ini saya akan membuat bagaimana  "Cara Mudah Membuat dan Memasang Garis Warna-Warni di Blog" mungkin bagi sobat sudah tidak asing lagi dengan garis ini, garis ini banyak di gunakan di template premium seperti evo magz .



 Garis Warna-Warni di Blog


Cara Mudah Membuat dan Memasang Garis Warna-Warni di Blog

Cara ini sebenarnya mudah apa bila anda paham letak atau komposisi blog anda jika anda ingin memasang garis ini anda hanya perlu mengdit sedikit pada bagian CSS, anda dapat meletakkan garis ini pada Header ataupun pada atas Footer terserah anda bagaimana bagusnya. lansung simak cara dibawah ini....

1. Pertama sebelum anda meletakkan garis ini anda perlu mencari tempat yang pas untuk meletakkannya karena setiap template berdeda bentuk dan berbeda pula modelnya, ada template yang cocok di letakkan di header ada yang cocok di atas footer. kali ini saya akan meletakkan di atas tadinya akan saya letakkan pada header tetapi headernya tidak di menu paling atas .

2. Buka blog anda dan pertimbangkan sekali lagi ingin di letakkan dimana karena saya ingin meletakkan pada atas saya cek terlebih dahulu dengan menggunakan "inspect elemen" maka akan muncul seperti gamber dibawah, apabila anda mengarahkan cursor ke menu #outer-wrapper maka tampilan layar akan seperti gambar dibawah. kali ini saya akan meletakkan di atasnya #outer-wrapper

 Garis Warna-Warni di Blog


3. Jika anda sudah menemukan tempat yang pas langsung saja anda pergi ke menu Template > Edit Html selanjutnya selanjutnya cari #outer-wrapper untuk mempermudah gunakan Ctrl+F. karena saya ingin meletakkan pada jika jika template anda bagian atas adalah #header-wrapper maka anda cari #header-wrapper .
#outer-wrapper {background:#fdfdfd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgQpeQCndf-IqA1qqNBoGrw_ShAN1A7vHjs16XZbSvoiRuw4ZPquCeF_6gpbucLr3Rl_6UKA16JhiGlGRFx4cvN3jgs1stdR5Z3FNA-it8N6w8jEvz8eNhZBJ_JZ2oRGrtAzJ5A36CQNVZ/s1600/line.png) repeat-x top center;  margin: 0; padding: 5px 10px; height: auto;}
4. Letakkan kode diatas dengan cara seperti digambar dibawah ini

 Garis Warna-Warni di Blog
Cara Meletakkan script

Note : Karena saya meletakkan garis ini pada menu atas #outer-wrapper maka kodenya sepeti ini "repeat-x top center" apabila anda ingin meletakkan garis dibawah anda tinggal merubah top menjadi bottom jadinya seperti ini "repeat-x bottom center" apbila ingin meletakkan pada header anda cukup mengganti #outer-wrapper menjadi #header-wrapper .

5. Silahkan preview dahulu jika anda belum yakin dan jangan lupa untuk backup template terlebih dahulu.

Share this

Related Posts

Previous
Next Post »