ChekMad bingung mau kasih judul apa untuk artikel kali ini, Cara pasang Kotak informasi Artikel yang jadi pilihan judul untuk ulasan chekmad malam ini.

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

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

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.


Axact

AWAKAWAI.COM

Awakawai.com - Media Online untuk berbagi informasi, pengetahuan dan hiburan.

Post A Comment:

0 comments: