Membuat Blok Catatan, Tips, Dan Peringatan di Blog

Membuat Blok Catatan, Tips dan Warning
Sebenarnya bagi sahabat yang sudah mahir CSS dan HTML tidak akan aneh lagi dengan tutorial seperti ini. Tapi walaupun mahir dalam CSS dan HTML terkadang buntu ide untuk memoles blognya supaya lebih menarik.

Sebelum saya kasih CSS dan HTMLnya, silahkan lihat dulu penampakan blok catatan, tips dan peringatan pada demo di bawah ini :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.

Untuk memasangnya, silahkan sobat simpan kode ini di atas ]]></b:skin> atau </style>
.info, .tips, .warning { line-height: 22px; min-height: 38px; padding: 10px 12px 12px 68px; margin: 5px 0; } .info { background: #e0e5eb url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit8f4KZ8-xrRT66qtj2iZqo6EtnkDe_R1LJ8SAI_5qcazYWcpQKAcKtXWx7gqSbg-kCub3Xi5O9ONBRC2_LBJx6yJlN680iOBfRMt9XD2Ncw_7_zPguJkbGJKk8hcl6TDvA6nu0M8ktLQ/s1600/info.png') no-repeat 12px 8px; color: #222 } .tips { background: #7CADDE url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1ESltypv7eZCKM5eE0YQhatAgTAgY5YlESvfnlrtFgstLQah2QOZHp2HnkU_uy01QX4etSsB0i11kqdxOBrK8GTEbNmX4fI_wVahMn5m6pS4CWa8AVTerCZDyj7kzRlq7PbU6qayOFKY/s1600/tips.png') no-repeat 12px 8px; color: #fff; } .warning { background: #db6161 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizieYUIzslo5L_b8VFi1s8izH4SrErrubBg3T63xouHS7dcFMmzdIN401HHfK9SXjr9i7RiTxb9sim1PFHyF_OXDQsOmGxn4EjkcFfigTIPjCdqSGK0RxcuClMZRnOS7ywAa7Yno-1KBs/s1600/warning.png') no-repeat 12px 8px; color: #fff; }

Selanjutnya, apabila ingin memasukan ke dalam postingan, sobat tinggal memilih blok mana yang akan digunakan. (Tulis kode dalam mode HTML). Untuk Info (catatan) sobat gunakan kode seperi ini:
<div class='info'> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue. </div>
untuk tips, kodenya seperti ini :
<div class='tips'> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue. </div>
untuk peringatan atau warning :
<div class='warning'> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue. </div>
Sobat juga bisa gunakan tag p dalam penulisan kode HTML, contoh :
<p class='info'> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue. </p>

Postingan terkait:

21 Tanggapan untuk "Membuat Blok Catatan, Tips, Dan Peringatan di Blog"

  1. mantap nih untuk mempercantik tampilan posting blog :D

    ReplyDelete
  2. Thanks!!~ Lumayan buat nambah Ilmu :')

    ReplyDelete
  3. wah keren nih bisa bikin postingan blog jadi ramean dikit :v

    ReplyDelete
  4. keren, buat tambahan di bawah postingan blog. Udah kucoba ^^

    ReplyDelete
  5. ajibb.. keren lh.. dri kang ismet.. thanks udh dishare.. :D

    ReplyDelete
  6. Trims sharing, mas dan salam kenal sekalian mengundang untuk meramaikan launchingnya direktori blog dofollow Indonesia terbaru dengan submit url dan artikel gratis. :)

    ReplyDelete
  7. kren sob , , ,
    salam kenal , ,sama ama punya kang ismet nih . . .

    ReplyDelete
  8. saya sudahpakai.. yang ini buat cadangan,,,

    ReplyDelete
  9. informasinya sangat menarik mas, ane coba ea

    ReplyDelete
  10. Jadi makin cantik

    ReplyDelete

Catatan :
- Dilarang Menggunakan Link Aktif / Live Link
- Dilarang Promosi Iklan
- Dilarang Nyepam
- Untuk Menyisipkan Kode, Gunakan tag <i rel='code'> Taruh Kode Disini </i>
- Untuk Menyisipkan Kode Panjang, Gunakan tag <i rel='pre'> Taruh kode panjang disini </i>
- Untuk Menyisipkan Catatan, Gunakan <b rel='quote> Taruh Catatan disini </b>
- Untuk Menyisipkan Gambar, Gunakan <i rel="'image> URL Gambar </i>
- Untuk Menyisipkan Youtube, Gunakan <i rel='youtube'> URL Youtube </i>

Sebelum menyisipkan kode silahkan gunakan Tools Konversi Kode.
Caranya tinggal klik tombol "Konversi Kode" yang berada di Form Komentar.