Cara Membuat Blok Catatan, Tips dan Peringatan di Blog

Unknown

Tips & Trik Blog, Widget

Senin, 05 Januari 2015

3 Komentar

Cara Membuat Blok Catatan, Tips dan Peringatan di Blog - Ya itulah tutorial yang akan saya berikan kepada sobat semua, Sebenarnya bagi sahabat yang sudah mahir CSS dan HTML tidak akan aneh lagi dengan tutorial seperti ini. 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 Membuat Seperti itu lakukan tutorial dibawah ini....

Langkah Pertama Yaitu silahkan sobat letakan kode dibawah ini tepat di atas ]]></b:skin> atau bisa juga di atas </style> 

.info, .tips, .warning {
 line-height: 22px;
 min-height: 38px;
 padding-left: 10px;
 padding: 10px 12px 12px 68px;
 margin: 5px 0;
}
.info {
 background: #e0e5eb url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUq-n_Y6__Y3wpD4WnGrfgA6YFPYMpWs1sgZ4usjvMbTw3VX_zxu7syV2NuxfxxaPsE22SJPN8h-5wyx1r7FDNIfFj3zTnJq_0o_Qai14JCkdWdQMWaWe4DNBQcJu-0u7preu8AGhnYk4/s1600/info.png') no-repeat 12px 8px;
 color: #222
}
.tips {
 background: #7CADDE url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJtQilKzKULUjk5fYHG4X7jHMLk-Fn4uZUbUaKG95Mtu342mto-gM-kHrnZ7GX81xx0JppF4BO2qMGOaj3z-lvTcqE4dr2DIawPRImhRLQTIljUOfxAPix73QuM-8c1ROhDk-j3Ua5qnM/s1600/tips.png') no-repeat 12px 8px;
 color: #fff;
}
.warning {
 background: #db6161 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGXTmifvf9d3yJIPYA-wQUhBOrE4l1aGjHUsD6dw0qn7dhkp99_lKVifUwLsWY4Q_hZPTrh6tARrJJH4mGNtb1NszZOzTV7mYuX7DffeayMu8K6mG7PpQjKtfIILiMOH1zyD22hyphenhyphenyH8Q4/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 seperti 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 kodenya seperti ini:

<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='tips'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.
</p>

Itulah Tutorial ''Cara Membuat Blok Catatan, Tips dan Peringatan Di Blog" Jangan Lupa Like, Share, Komen dan Follownya ya Terimakasih telah berkunjung, tunggu tutorial selanjutnya ya...

Source : http://blog.kangismet.net/2013/10/membuat-blok-catatan-tips-dan-peringatan.html