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>
mantap nih untuk mempercantik tampilan posting blog :D
ReplyDeleteiya gays ._.
Deleteiya gays :p
DeleteApa pria homo?
Deletekeren, patut dicoba
ReplyDeletesip :)
DeleteThanks!!~ Lumayan buat nambah Ilmu :')
ReplyDeleteSama-sama :)
Deletewah keren nih bisa bikin postingan blog jadi ramean dikit :v
ReplyDeleteiya :)
Deletekeren, buat tambahan di bawah postingan blog. Udah kucoba ^^
ReplyDeletesip kalo gitu :)
Deletemonggo :)
ReplyDeleteajibb.. keren lh.. dri kang ismet.. thanks udh dishare.. :D
ReplyDeletemampir baca aja deh dan...
ReplyDeleteTrims sharing, mas dan salam kenal sekalian mengundang untuk meramaikan launchingnya direktori blog dofollow Indonesia terbaru dengan submit url dan artikel gratis. :)
ReplyDeletekren sob , , ,
ReplyDeletesalam kenal , ,sama ama punya kang ismet nih . . .
saya sudahpakai.. yang ini buat cadangan,,,
ReplyDeleteinformasinya sangat menarik mas, ane coba ea
ReplyDeleteJadi makin cantik
ReplyDelete