Kotak informasi disini yang chekmad maksud berfungsi untuk memberikan penjelasan maupun tips dari artikel-artikel dari tulisan sobat. Kotak informasi ini juga sangat berguna untuk blog yang mengulas tutorial.
Kotak informasi ini bukanlah karya asli ChekMad, melainkan chekmad ambil dari source html blog tersebut miliknya Rivai-Silaban.
berikut contoh dari kotak informasi yang ChekMad temui tersebut :
Kotak Informasi 1
Box informasi 1
Tulis Informasi sobat disini baris pertama
Tulis Informasi sobat disini baris Kedua
Tulis Informasi sobat disini baris Ketiga
ChekMad | Bloger Cepot
Tulis Informasi sobat disini baris pertama
Tulis Informasi sobat disini baris Kedua
Tulis Informasi sobat disini baris Ketiga
ChekMad | Bloger Cepot
Kotak Informasi 2
Box Informasi 2
Tulis Informasi sobat disini baris pertama
Tulis Informasi sobat disini baris Kedua
Tulis Informasi sobat disini baris Ketiga
ChekMad | Bloger Cepot
Tulis Informasi sobat disini baris pertama
Tulis Informasi sobat disini baris Kedua
Tulis Informasi sobat disini baris Ketiga
ChekMad | Bloger Cepot
Penasaran bagaimana cara membuatnya ?
Ikuti tutorial Chekmad Di bawah ini.
Seperti Biasa Login ke Blogger dan pilih Blog yang ingin anda pasangin widget ini.
Klik Template » Edit HTML
Kemudian Carilah kode ]]></b:skin> atau </style>
Letakan kode di bawah ini sebelum kode tersebut diatas
/*****************************************
Name : Box Informasi dan Keterangan
By : ChekMad | Bloger Cepot
******************************************/
.boxinformasi { border : #990000 dashed 2px; padding : 10px; background-color : #FFFFA8; }
.informasi { color : #FFFFFF; font-weight : bold; text-decoration : none; padding : 5px 30px; border : solid 1px; border-radius : 5px 0 0 5px; margin-right : -10px; margin-left : 6px; border-color : #333; background-color : #0066FF; font-family : Geneva, Arial, Helvetica, sans-serif; box-shadow : 1px 1px 2px #000; float : right; }
.boxketerangan { border : #333 dashed 2px; padding : 10px; background-color : #F3F2F1; }
.keterangan { color : #FFFFFF; font-weight : bold; text-decoration : none; padding : 5px 30px; border : solid 1px; border-radius : 5px 0 0 5px; margin-right : -10px; margin-left : 6px; border-color : #fff; background-color : #111; font-family : Geneva, Arial, Helvetica, sans-serif; box-shadow : 1px 1px 2px #333; float : right; }
Silahkan di simpan bila sudah selesai
Selanjutnya Bagaimana Cara memanggil kode CSS yang sudah kita buat tadi di dalam artikel. Untuk memanggil CSS yang telah kita buat tadi kedalam artikel cukup mudah silahkan sobat paste kode berikut pada artikel sobat, pastekan pada mode HTML
Kode Kotak Informasi 1
<div class='boxinformasi'><span class='informasi'>Box informasi 1</span>
<p>Tulis Informasi sobat disini baris pertama</p>
<p>Tulis Informasi sobat disini baris Kedua </p>
<p>Tulis Informasi sobat disini baris Ketiga <br />
ChekMad | Bloger Cepot </p>
</div>
Kode Kotak Informasi 2
<div class='boxketerangan'><span class='keterangan'>Box Informasi 2</span>
<p>Tulis Informasi sobat disini baris pertama</p>
<p>Tulis Informasi sobat disini baris Kedua </p>
<p>Tulis Informasi sobat disini baris Ketiga <br />
ChekMad | Bloger Cepot </p>
</div>
Silahkan Lihat hasilnya.
