11 December 2013

membuat blok tips peringatan dan info


membuat blok tips peringatan dan info
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.

nah kali ini moonroemoort akan share cara membuat blok tips peringatan dan info  
ini sangat membantu pembaca blog anda untuk membedakan info,tips dan peringatan serta agar terlihat lebih professional ...


ikuti langkahnya ...
  • masuk dashboard
  • klik template > edit html
  • cari kode ]]></b:skin> atau </style>
  • copy paste kode di bawah ini tepat di atas kode  ]]></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;
}

jika brader ingin pasang di postingan cukup memasukan kode berikut kedalam mode HTML di postingan

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>

selamat mencoba

2 comments

nambah ilmu ane 1 hari ni... thanxs gan sudah berbagi
slam blogger

sama22 gan
sering22 mampir ya gan ...

berkomentarlah sesuka anda
===>no link aktiv<===
NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar