Cara Membuat Panel Catatan Di Blog Dengan Bootstrap

Cara Membuat Panel Catatan Di Blog Dengan Bootstrap

Jika kamu seorang blogger dan sering menulis blog yang membahas seputar tutorial atau cara, tentu panel catatan adalah salah satu script yang perlu kamu ikut sertakan dalam penulisan artikel.

Script ini sejatinya dapat dipasang diberbagai halaman seperti blog, web, forum, dll asalkan sudah memanggil Bootstrap Framework di header halaman.


Apa sih manfaat Panel Catatan ini?




Panel catatan berfungsi untuk membuat kolom keterangan atau kutipan yang menarik dan mempermudah pengunjung mencerna maksud dari tutorial yang kamu tulis. Karena dengan panel catatan ini, kutipan akan lebih menonjol dan jelas yang pasrinya akan dibaca oleh pengunjung.



Jika kamu sering membaca blog ini, tentu kamu akan menemukam beberapa catatan atau note yang berada di dalam kolom dengan warna tertentu. Ya, itulah yang disebut panel catatan, hanya saja saya menggunakan Alert sebagai pemuat kolom, fungsinya tetap sama dengan panel catatan.

Untuk membuat kolom kutipan yang bagus di blog, kamu bisa menggunakan panel yang disediakan didalam Bootstrap Framework. Jadi, kamu perlu memanggil Bootstrap dahulu sebelum menerapkan panel catatan ini.

Berikut kode untuk memanggil Bootstrap di header template blogspot atau halaman web kamu :



Tempatkan kode ini tepat diatas kode <*/head> (tanpa tanda bintang).

CATAT : Jika blog kamu sudah terpasang kode Bootstrap pada bagian header, lewati langkah ini dan langsung ke langkah pemasangan elemen di artikel.

Apabila kode sudah ditempatkan pada posisinya, selanjutnya kamu bisa memanggil elemen panel catatan ke artikel atau halaman.


Bagaimana cara memanggil Panel Catatan?




Cukup dengan menempelkan salah satu kode dibawah ini ke postingan. Jangan lupa untuk memilih salah satu warna yang cocok dengan warna template blog kamu atau warna yang sesuai dengan kutipan.


Kode pemanggilan Elemen Panel Catatan Putih :




Kode pemanggilan Elemen Panel Catatan Biru :




Kode pemanggilan Elemen Panel Catatan Hijau :




Kode pemanggilan Elemen Panel Catatan Biru Muda :




Kode pemanggilan Elemen Panel Catatan Cokelat :




Kode pemanggilan Elemen Panel Catatan Merah :





Contoh Panel Catatan :



Judul Panel Putih
Isi catatan...

Judul Panel Biru
Isi catatan...

Judul Panel Hijau
Isi catatan...

Judul Panel Biru Muda
Isi catatan...

Judul Panel Cokelat
Isi catatan...

Judul Panel Merah
Isi catatan...


Sekarang kamu bisa lihat preview artikel atau halaman yang sudah terintegrasi dengan panel catatan dan Bootstrap Framework.

Selamat, sekarang blog kamu sudah bisa menggunakan panel catatan dari Bootstrap.

Jika kamu rasa artikel ini bermanfaat dan layak dibaca oleh orang lain, jangan ragu untuk membagikannya kepada teman-teman atau saudara dengan meng-klik tombol sosial media diatas ini.

0 komentar:

Posting Komentar

Artikel Terpopuler



DMCA.com Protection Status