Membuat Kotak Catatan di Blogger seperti Blockquote

Membuat Kotak Catatan di Blogger - Kadang kala ketika kita membuat sebuah artikel ada point-point penting yang harus di tandai. Fungsinya untuk memperjelas apa yang dimaksudkan.

Maka dibuatlah sebuah tanda dari kalimat di dalam artikel. Contohnya adalah blockquote, secara default blogger telah memberikan tool untuk memblok atau menandai point-point penting dalam paragraf atau kalimat.

Tetapi kalau hanya tampilan model blockquote saja artikel jadi tidak menarik. Maka untuk memperindah tampilan postingan perlu ditambah tampilan blockquote yang lain. Yaitu sebuah kotak catatan yang fungsinya hampir sama dengan blockquote.

Pada kesempatan kali ini admin akan memberikan contoh cara membuat kotak catatan tambahan selain blockquote di dalam blog.

Cara ini sebelumnya telah di terbitkan oleh penaindigo, dan saya hanya menerbitkan ulang dan sebagai pengingat kepada saya sendiri jika ingin buat catatan di postingan blog.

Silahkan ikuti panduannya dibawah ini, dan sebagai pengingat diawal sebelum mempraktekkan cara dibawah ini sebaiknya backup dulu template anda. Untuk menghindari hal-hal yang tidak diinginkan.

Baca juga : Cara membuat daftar isi di dalam artikel seperti Wikipedia di blog

Langsung let's go.....

Membuat Kotak Catatan di Blogger

Pada tutorial kali ini ada jenis 3 model kotak catatan di dalam artikel yaitu model informasi, catatan dan model peringatan.

Anda bisa menggunakan sesuai dengan kebutuhan di dalam artikel blog anda.

Berikut ini caranya yang harus anda lakukan :

1. Silahkan masuk ke menu dasboard blogger

2. Klik pada menu TEMA dan pilih EDIT HTML

3. Lalu letakkan kode ini DI ATAS kode ]]></b:skin> atau </style>,

.info,.tips,.warning{
line-height:22px;
min-height:38px;
padding:10px12px12px68px;
margin:5px0;}
.info{
background:#EDE3F2url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYLyesasrwNfBs8xuFKe8oFCFyLv2g53jJUkYoprYXK1N4US4MC0lkL1vUDS042za0fpkRPG5yQL9rYXYlPJv9mxawJinuxia8sTApUCOm2uqCksIdcJa7RyD9MmnoWXEK1Ad7kbzMglI/s1600/TTB+notice.png')no-repeat12px8px;
color:#222}
.tips{
background:#edf094url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjENw3UDEQpcfrCDmLpcCOXxJ8zL5CNrftuVn2uSaPMmDpz5kDuc1pozp13AuyH1X-Oz8L5mfpZMMVpobkEgNkqC6_bSKPAESEIsSyiCTomzQUUJt0l1l_eUrnhBO7Pgz14cTuliz9nJI/s1600/tips.png')no-repeat12px8px;
color:#fff;}
.warning{
background:#db6161url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbXNjf4rEXuqtEdgcstxawC9S_5l8FPGdQaS6hcclEOe_yTe4jdyZrFZzwrNcISu45hSpG73-VL2nGJMBYAtpHkw40FGDm5DeigCuHd_u24qICUQPJbv3hkw_wGsu7a4n6-SLfrzeYTFo/s1600/warning.png')no-repeat12px8px;
color:#fff;}

4. Jika sudah selesai klik tombol Simpan.

Sekarang anda sudah berhasil memasang kode untuk membuat catatan di blogger. Setelah memasang kode diatas berikutnya adalah bagamaina cara menggunakannya agar berhasil digunakan pada artikel.

Kita tinggal memanggil kode yang telah kita pasang sebelumnya pada template. Untuk caranya silahkan ikuti panduaannya dibawah ini.

Catatan :

Apabila selama pemasangan kode diatas tidak berhasil dipraktekkan, silahkan diganti posisinya peletakan kode. Sampai berhasil dipasang

Cara Menggunakan Kotak Catatan di Blogger

Saatnya kita menggunakan pada artikel, caranya sangat mudah. Jadi setiap akan menggunakannya dari salah satu ketiga model tersebut kita tinggal memanggil kodenya.

Untuk menggunakannya pastikan mode penulisan pada blog menggunakan MODE HTML karena jika tidak menggunakan mode tersebut maka tidak akan berhasil.

Berikut cara penggunaanya :

1. Cara menggunakan kotak catatan model info :

Kode kotak catatan info

<div class='info'>
Letakkan disini contoh teks atau kalimat yang anda informasikan
</div>

Demo kotak info dibawah ini :

Letakkan disini contoh teks atau kalimat yang anda informasikan

2. Cara penggunaan model pesan atau tips :

Kode kotak catatan pesan

<div class='tips'>
Letakkan contah kalimat atau kata-kata di sini untuk menulis pesan atau tips
</div>

Demo kotak tips dibawah ini :

Letakkan contah kalimat atau kata-kata di sini untuk menulis pesan atau tips

3. Cara penggunaan model peringatan

Kode kotak catatan peringatan :

<div class='warning'>
Letakkan disini untuk menulis catatan berupa peringatan
</div>

Demo kotak tips dibawah ini :

Letakkan disini untuk menulis catatan berupa peringatan

Anda bisa menggunakannya salah satu diatas pada artikel yang anda buat. Anda bisa mengganti gambar dari model catatan diatas dari link yang disediakan pada kode.

Baca juga : Cara membuat halaman Disclaimer dan Privacy policy di blog

Demikianlah tutorial cara membuat box catatan pada artikel blogger. Apabila ada kendala dalam pemasangan silahkan tinggalkan pertanyaan melalui kolom komentar dibawah.

Semoga artikel ini bisa bermanfaat dan mudah dipraktekkan.

Massiswo.Com