Membuat Blok Catatan, Tips dan Peringatan di Blog - sudah lama gk posting kali ini saya posting lagi , dan kali ini saya akan memposting : Membuat Blok Catatan, Tips dan Peringatan di Blog
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 mengasih CSS dan HTML nya , Lihat Dulu Screenshotnya agar Tidak Menyesal
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.
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/AVvXsEj91jLm_sUbML6KUtp4QP2zvs_2v_vXwqaAa8PIG-dyFV5bp1W8NkpSqNlNSmJai7tdakG-gsT-C4gg08ByalKsrCv8-k8sJxlWVRC2-SholrITg6O3xMmjH2wVZa4QsbTwx3ieK9S7ohI/s1600/info.png') no-repeat 12px 8px;
color: #222
}
.tips {
background: #7CADDE url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrezYNBMp9deKgSZnGK4vXfLZ2ApxQ-6Udx8FChlf-9iLw8vFidbNS943JY1DsnFoeMgM9aIY_vxq7QhV1V7H64LPg6CQBNWA9JSh8qrH7_BX5izWQtB_blnkvIivVED5GNPBm4FnZnKE/s1600/tips.png') no-repeat 12px 8px;
color: #fff;
}
.warning {
background: #db6161 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjA-bWVdz1ykWvRTP9A0ppfiMT2x-opfSyi0ID18GFbKuTZCh5T7533_pbTSJ94-GrxZ3lnXoWOu-K3LEVOBXhzL8o-8m1EfGI_M0jr7Tm_nPSjEJoI5QrxcwODKfSPfRqpmaNorRkGrE/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:
INFO :
<div class='info'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.
</div>
Tips :
<div class='tips'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.
</div>
Warning :
<div class='warning'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.
</div>
terimakasih sangat bermanfaat broo
ReplyDelete