MEMBUAT BLOK CATATAN, TIPS DAN PERINGATAN DI BLOG

Di Uncategorized 13 views

Membuat Blok Catatan, Tips dan Warning – Sambil menunggu rasa kantuk datang, kali ini saya akan berbagi cara membuat catatan, informasi, tips, atau peringatan di blog, agar blog lebih stylish dan pengunjung betah berlama-lama di blog kita.

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('http://2.bp.blogspot.com/-3rcGQ-VAKb8/UlA4L72c6wI/AAAAAAAAFtY/f__fkV_xBsQ/s1600/info.png') no-repeat 12px 8px;
color: #222
}
.tips {
background: #7CADDE url('http://2.bp.blogspot.com/-_Y9kuQODeBs/UlA4LwDUkhI/AAAAAAAAFtk/Rm0QwoddGLw/s1600/tips.png') no-repeat 12px 8px;
color: #fff;
}
.warning {
background: #db6161 url('http://2.bp.blogspot.com/-rgsBmdJYFkM/UlA4LyWCrqI/AAAAAAAAFtc/suIf3IwnpgE/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>
Cara Mengobati Penyakit Difteri Secara Alami
Cara Mengobati Penyakit Difteri Secara Alami
Cara Mengobati Penyakit Difteri Secara Alami dengan
Khasiat Dan Keunggulan Obat Herbal Ace Maxs
Khasiat Dan Keunggulan Obat Herbal Ace Maxs
Ace Maxs adalah merupakan produk obat herbal
11 Masalah Seksual Penyebab Pria Tidak Mau berhubungan seks
11 Masalah Seksual Penyebab Pria Tidak Mau berhubungan seks
Masalah seksual mengacu pada masalah yang mencegah
Ramuan Tradisional Pembersih Rahim Setelah Keguguran
Ramuan Tradisional Pembersih Rahim Setelah Keguguran
Solusi cepat untuk membersihkan rahim setelah keguguran
Baca Juga×

Top