fungsi kontainer akan memberi batas sekaligus memberi highlight atau memberi warna background dari kode HTML yang akan kita tampilkan. Sehingga tidak tercampur dengan tulisan yang lain, istilahnya tampilannya semakin kece.
Sebelum kita memulai cara sederhana membuat kontainer kode HTML pada postingan blog, saya akan memberikan tambahan tulisan mengenai apa itu HTML. Tujuannya untuk memperpanjang artikel ini agar memenuhi syarat SEO.
Karena ini tidak terlalu penting silakan Anda skip saja langsung ke bagian tutorial.
Baca Juga :
Membuat Container HTML Pada Postingan Blog
Apa itu HTML ?
Hypertext Markup Language (HTML) adalah sebuah bahasa pemrograman yang digunakan untuk membuat suatu situs atau halaman web. HTML inilah yang menampilkan informasi ketika kita melakukan pencaharian di internet dalam bahasa ASCII. Selngkapnya mengenai HTML silahkan baca di WIKIPEDIA/WIKI/HTML.
Karena kali ini kita akan membuat kontainer sederhana jadi kita tidak perlu membuat kode yang diletakkan pada template blog.
Langkah-langkah membuat Kontainer HTML
1. Membuat postingan baru.
2. Atur tampilan pengetikan ke HTML View
3. Kopi Kode berikut :
<div style="background-color: #fafafc; border: 1px solid rgb(221, 221, 221); padding: 10px; text-align: justify;">Kode HTML anda disini</div>
4. Paste pada bagian yang anda inginkan5. Kembali ke Compose View
6. Silahkan Ganti tulisan Kode HTML dengan Kode yang anda inginkan
Contoh:
<div class='top-navigation-right'>
<div class='social-icon' id='social-icon'><div class='widget LinkList' id='LinkList55'>
<ul class='social'>
<li class='facebook'><a href='http://' title='facebook'/></li>
<li class='twitter'><a href='http://' title='twitter'/></li>
<li class='youtube'><a href='http://' title='youtube'/></li>
<li class='linkedin'><a href='http://' title='linkedin'/></li>
<li class='tumblr'><a href='http://' title='tumblr'/></li>
<li class='instagram'><a href='http://' title='instagram'/></li>
<li class='pinterest'><a href='http://' title='pinterest'/></li>
</ul>
</div></div>
</div>
Jika anda ingin melihat tampilannya sebelum mencoba, anda dapat menggunakan situs HTML-ONLINE dan buka pada bagian editor. Silahkan coba kode pada nomer 3 disana dan ganti tulisan Kode HTML disini dengan kode HTML anda.
Mengganti Warna Baground Kontainer
Pada kode no 3 diatas anda dapat mengganti warna baground dengan warna yang anda suka. referensi warna yang bisa anda gunakan adalah HTMLCOLOUR. Silahkan set warna yang anda mau, dan copy kode warnanya.
Misal saya mengganti baground dengan warna hijau #9EB086 jadinya seperti ini:
<li><a href='http://'>Contact</a></li>
Kurang cantik?
Artikel tentang kontainer slider akan kita buat nanti.
Terimakasih.
Posting Komentar
Posting Komentar