Cara Pasang Border Pelangi Agar Tampilan Blog Lebih Indah

Cara Pasang Border Pelangi Agar Tampilan Blog Lebih Indah

Cara Pasang Border Pelangi Agar Tampilan Blog Lebih Indah - Memperindah tampilan blog tidak harus menggunakan javadcript, jquery dan lainnya sebab bisa-bisa bukannya blog kamu indah malah susah diakses alias berat.

Tentunya kamu tidak mau bukan hal tersebut terjadi? buruknya lagi visitor blog kamu bisa enggan berkunjung karena blog kamu terlalu berat untuk diakses. Untuk itu cobalah cara membuat border pelangi hanya dengan CSS yang tentunya ini sangat ringan.

Sebab tidak ada untsur javascript dan lainnya dalam pemasangan border pelangi ini, jadi murni hanya CSS saja. Buat sobat yang ingin mencoba menerapkannya cukup mudah kok! kita langsung saja ke TKP.

Pertama tentunya harus masuk ke editor template dan simpan kode css di bawah ini pada tempat semestinya hehe..saya yakin anda sudah tahu bagaimana menaruh kode css.


/* Border Pelangi By blog.jejakunik.com */
.tr-border{display:table;width:100%;table-layout:fixed}
.tr-border span{float:left;width:14.28%;height:5px;background:#CC0000}
.tr-border span:nth-child(2){background:#FF7E00}
.tr-border span:nth-child(3){background:#F7C602}
.tr-border span:nth-child(4){background:#4D9902}
.tr-border span:nth-child(5){background:#3B94D9}
.tr-border span:nth-child(6){background:#B60783}
.tr-border span:nth-child(7){background:#550175}

Setelah kode CCS dipasang selanjutnya kita harus meletakan kode pemanggilnya agar border bisa tampil.

Letakan kode di bawah ini dimana saja yang kalian suka (dalam HTML template) bisa di header, footer atau dalam dalam postingan

<div class='tr-border'>
<span/><span/><span/><span/><span/><span/><span/>
</div>

Simpan template anda dan lihat hasilnya. selamat mencoba!

Jejak Unik

Kumpulan Informasi Unik Menarik Dari Berbagai Belahan Dunia. www.jejakunik.com

Show comments

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel