10/22/2020

Cara Membuat Garis Horizontal Warna Warni Elegan! di Blogger

RahmanCyber.NET | Blogger - Hai Teman teman Blogger, kali ini saya akan berbagi nih cara membuat Garis semacam HR gitu, atau Tag HTML <HR>, tetapi ini menggunakan <DIV>.

Jadi sebenarnya dalam kasus ini adalah untuk menekankan sesuatu, dengan adanya Garis horizontal berwarna warni kan, bisa menarik perhatian orang untuk membaca apa yang kita tekankan tersebut...

Seperti ini nih contohnya.. yang diterapkan pada Blog teman saya ^_^


Membuat Garis Warna warni dengan DIV

Nah.. udah agak paham ya yang dimaksud...

Jadi kita akan buat itu...

Tapi tenang nih, sobat tidak perlu kok bukak bukak Edit HTML, karena ini bisa langsung diterapkan di Widget / Gadget HTML di Blogger.

Bisa juga loh diterapkan di Postingan, tentunya kalian harus berada di Mode HTML ya.. bukan di mode penulisan..


Langsung aja.. berikut adalah Kode Style CSS Garis Horizontal Warna Warni nya :










<style>
.site-footer-colors i.teal {
    background-color: #009888;
}
.site-footer-colors i.red {
    background-color: #D53540;
}
.site-footer-colors i.green {
    background-color: #679047;
}
.site-footer-colors i.yellow {
    background-color: #EC8A22;
}
.site-footer-colors i {
    float: right;
    width: 25%;
    height: 8px;
}
* {
    margin: 0px;
    padding: 0px;
}
</style>


 

 

Yup, kalian bisa pastekan itu di bagian paling atas, atau satu tempat dengan kode penempatan..

Misalnya kalian mau meletakkannya di Postingan, berarti silahkan kalian letakkan di Paling atas.

Atau Jika kalian mau meletakkan di banyak tempat.. kalian hanya perlu buat Gadget atau Widget buat khusus nampung kode diatas yah..

Entar untuk penempatan kode <div> nya bisa di Postingan atau di Widget atau Gadget HTML lainnya tanpa harus memasang kode CSS Style diatas lagi.. 

 

 

 

Berikut Kode HTML <Div> Garis Horizontal Warna Warninya.. 

 

silahkan kalian letakkan dimanapun... yang ingin kalian tampilkan Garis Horizontal Warna Warni





<div class="site-footer-colors"><i class="teal"></i><i class="red"></i><i class="green"></i><i class="yellow"></i></div>

 

Kalian bisa kode div yang tampilannya akan menjelma menjadi Garis Horizontal warna warni...

 

 

Berikut ini adalah contoh jika kalian mau meletakkan kode CSS dan HTML diatas dalam satu Widget / Gadget HTML

 

 

 


<style>
.site-footer-colors i.teal {
    background-color: #009888;
}
.site-footer-colors i.red {
    background-color: #D53540;
}
.site-footer-colors i.green {
    background-color: #679047;
}
.site-footer-colors i.yellow {
    background-color: #EC8A22;
}
.site-footer-colors i {
    float: right;
    width: 25%;
    height: 8px;
}
* {
    margin: 0px;
    padding: 0px;
}
</style>
<div class="site-footer-colors"><i class="teal"></i><i class="red"></i><i class="green"></i><i class="yellow"></i></div>


Jadi kalian bisa modifikasi modifikasi menyesuaikan dengan keinginan kalian, yang jelas satu kode div diatas adalah satu garis horizontal warna warni.

 

 

 

Kesimpulan

 

Kode diatas merupakan salah satu kode bagian dari Tutorial Blogger "Cara Memperindah Tampilan Blog dengan Garis Horizontal Warna Warni" kalian bisa eksplore beberapa materi yang kami buat lainnya di Blog ini..




Sekian Tutorial Blogger kali ini Visitor... moga dapat diambil manfaatnya... Langsung aja praktekkan biar enggak lupa.. Kalian bisa juga Bookmark halaman ini.. kalo sewaktu waktu butuh...









Advertisement
Sobat, ditempat ini kita belajar bareng ya, saling berbagi ilmu di https://www.rahmancyber.net Apabila ada yang perlu di tambahkan atau ada kesalahan mohon di koreksi
Bagi yang menginginkan konten berupa video, bisa langsung kunjungi link https://www.youtube.com/rahmancyber
Matur Nuwun...

Sponsor Rahmancyber Network



Baca Juga

Posting Komentar

Follow by Email



Semenjak saya F.N.A-RED mendirikan RahmanCyber ini tahun 2008, saya mendedikasikan situs ini untuk memberikan edukasi dan artikel pengetahuan secara GRATIS, sobat tidak dibebankan Biaya langganan maupun Pembelian Hak Akses untuk dapat menikmati Artikel yang kami sediakan di RahmanCyber. Saya juga tidak berniat menjadikan RahmanCyber untuk model langganan dengan membayar Hak Akses. Semua Pemasukan untuk Mendukung Pemeliharaan Situs dari Iklan dan link affiliasi yang kami tanam di beberapa artikel ( Kami tidak menutupi hal ini, agar semua jelas tidak ada yang disembunyikan dan tidak manipulatif )
Ya, kita punya channel Youtube, tetapi fungsinya memang untuk mendukung penyampaian materi di Blog, sehingga memang untuk kontennya Campuran dan tidak berdasarkan Nice. Tekan aja gambar dibawah ini untuk melakukan subscribe ke channel kita
Image
Jika kalian tertarik untuk bergabung dalam jurnal perjalanan kita, silahkan...
Ada 2 tipe website yang ber ekstensi RahmanCyber.NET,

1. Website Bagian yang merupakan layanan kita untuk fokus materi tertentu maupun berupa produk terpisah yang berbeda untuk konsep dari Website Induk RahmanCyber.NET, tetapi selama ber ekstensi .rahmancyber.net, itu adalah Website Resmi dari kita. Informasi ini juga tercantum dalam Fanpage RAHMANCYBER di Facebook yang linknya tertaut di website utama ini, sehingga hal ini untuk meminimalisir adanya penipuan dari pihak yang tidak bertanggung jawab
2. Website Rekanan yang dikelola oleh Kontributor, sehingga kadang memiliki nama personal, yang bertujuan untuk menampilkan Iklan di web, sehingga dengan menggunakan ekstensi .rahmancyber.net, bisa ikut menampilkan iklan sebagai monetisasi untuk websitenya ( Bagaimana cara bergabung agar website saya bisa menampilkan iklan dan mendapat penghasilan? maaf, ini terbatas dan saya tidak membukanya untuk umum )

Disini kita berusaha untuk memberikan konten yang kredibel dan tidak semata mata untuk mengejar traffic dan penghasilan, ( RahmanCyber lebih condong ke "Pengetahuan" )

Whatsapp Button works on Mobile Device only