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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_nQhyphenhyphenJXFHnADT0C-UaGSbLmyddbqGkVpJdsAeEL1_-P6_lhaXNqODkOhX8CMXaNXZPqptJNCR79Lt0TB5gl5pcUo3OP1_faEJWL3RmeCoMdgRk4I-pTZ65Ldhnu3MamuEN9NITyjLF18q/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_nQhyphenhyphenJXFHnADT0C-UaGSbLmyddbqGkVpJdsAeEL1_-P6_lhaXNqODkOhX8CMXaNXZPqptJNCR79Lt0TB5gl5pcUo3OP1_faEJWL3RmeCoMdgRk4I-pTZ65Ldhnu3MamuEN9NITyjLF18q/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

Tweet