Membuat Kotak Blok Info, Tips, dan Peringatan Keren di Blog

Selamat Pagi sobat blogger

Masih berjumpa lagi dengan Mas Yoga, yang pastinya selalu menemani dengan artikel yang terbaru, terpercaya, dan unik. Mas Yoga hari ini mendapatkan chat dari seorang di grup Blogger Indonesia, bahwa dia bertanya, "Mas boleh tanya? Bagaimana cara membuat Kotak blok Info, Tips keren itu?",, Mas Yoga berpikir, apakah sobat mau request tentang artikel itu. Jadi, Mas Yoga hari ini akan memberikan tutorialnya, "Cara Membuat Blok Info, Tips, dan Peringatan di Blog".

Sebelumnya Mas Yoga mempelajari trik ini dari Blog-nya Kang Ismet. Jadi Mas Yoga di sini hanya ingin membagikan lagi tutorialnya, sehingga bisa nyampai diseluruh dunia.
Yuk kita bahas bagaimana cara Membuat Kotak blok info, tips dan peringatan ini??

Cermati dan pahami langkah demi langkah ;

1. Silahkan sobat login dulu ke blogger > Menu Template > Edit HTML
2. Tekan CTRL + F > cari kode ini ]]></b:skin> atau </style>
** Taruh kode CSS di bawah ini tepat di atas kode ]]></b:skin> atau </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/AVvXsEiapGJI0J2DhLKk5kUhUNjixqupMSWEFuMbtWsi4G_JW0uumZQEC8nkLdA2Vc3unRGfmNEid-AvmuUZCKrwDGKYivYOKNlMGK2pADbdsxyTlUL6bBkSYkYLj-rzq-j6oUy4UXqn-KAhYZk/s1600/info.png') no-repeat 12px 8px;
 color: #222
}
.tips {
 background: #7CADDE url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP7MSObnl9TUZ-h7pzQUpEPgoHmFug8gXpVXzq8OHf0G07qt6XwbCt_DmC53qbFoPQBm2i0p25f1W1gq8ISPPxhxgBZiIOAWjakAUbpRw6kr_gYbGkx_XaUd-tYkvAA1zfwg_vp45vmzQ/s1600/tips.png') no-repeat 12px 8px;
 color: #fff;
}
.warning {
 background: #db6161 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC4Xpe7jSd8EL-AXB7_vf5zbJv9ELuk-wv2yaSGD7oKSY8iw5gKImmtD5j_bvGwRLv9SxSui0_nzsANzG97CuArneg-OQH1Rr7OA0mSx8qg7AZ7ZmRK2tINhier3cCMyvSo8jf0mWDzK8/s1600/warning.png') no-repeat 12px 8px;
 color: #fff;
} 

3. Jika kode CSS sudah terpasang, sekarang lanjut ke Langkah ketiga untuk memasang kode Div dari Info, Tips dan Peringatan di artikel kita.

** Kode kotak blok Info, silahkan copy pastekan kode di bawah ini di artikel Mode HTML sobat ;

<div class="info">
Ini adalah blok yang berisi info/catatan, silahkan sobat tulis di sini sembarang kata</div> 

** Kode kotak blok Tips, silahkan copy pastekan kode di bawah ini di artikel Mode HTML sobat ;

<div class="tips">
Ini adalah blok yang berisi Tips, silahkan sobat tulis di sini sembarang kata
</div> 

** Kode kotak blok Peringatan, silahkan copy pastekan kode di bawah ini di artikel Mode HTML sobat ;

<div class="warning">
Ini adalah blok yang berisi peringatan/larangan, silahkan sobat tulis di sini sembarang kata
</div> 

Sebenarnya kita bisa memasang kode blok tips, info dan peringatan menggunakan <DIV> namun dengan tag <P> juga bisa. intinya kita hanya mengganti kode <DIV class> menjadi <P class>.

Lihat contoh kode di bawah ini ;

<p class="tips">
Ini adalah blok yang berisi Tips, silahkan sobat tulis di sini sembarang kata
</p> 

Dan terakhir coba cek di artikel blog sobat,, keren kan tampilannya? jika merasa puas dengan tutorialnya mohon di ungkapkan langsung di kotak komentar.

Mungkin cukup untuk pertemuan hari ini, jika sobat merasa kesulitan melakukan tutorial ini, mohon bertanya langsung Ke Mas Yoga,,
Jika ada kesalahan atau kesamaan dalam penulisan kata mohon di maafkan,,,

Sampai Jumpa dan tunggu updetan selanjutnya