Cara Sederhana Membuat Container HTML Pada Postingan Blog

Posting Komentar
Bagi teman-teman yang sering membuat tutorial blogging, terkadang kita perlu memasukkan kode HTML dalam postingan. Namun jika kode HTML tersebut tidak dimasukkan pada kontainer akan terlihat seperti tulisan biasa.

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.
Membuat Container HTML di Postingan Blog
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 inginkan
5. 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?

Karena sederhana, sehingga memang tidak secantik kontainer HTML yang bisa di slide, atau yang lainnya. Misal seperti gambar berikut:
Artikel tentang kontainer slider akan kita buat nanti.

Terimakasih.




Haerul Anaan
Bekerja profesional dan selalu belajar hal baru.

Related Posts

Posting Komentar

Subscribe Our Newsletter