Cara Membuat Info Box di Postingan

Cara Membuat Colom Info di Postingan Blog - Informasi adalah adalah keterangan, pernyataan, gagasan, dan tanda-tanda yang mengandung nilai, makna, dan pesan, baik data, maupun fakta. Bagi sobat yang ingin memberikan informasi kepada pengunjung mengenai artikel yang sudah sobat buat, anda bisa memberikan informasi tersebut dengan membuat kotak informasi.

Baiklah sobat, berikut ini saya akan share cara membuat kotak informasi dengan CSS. Pada dasarnya membuat colom info dengan menambahkan kode CSS pada editor template, terdapat dua kode dalam membuat kolom informasi yaitu CSS dan HTML.

Langsung saja ya sobat berikut ini langkah-langkahnya :

Info Box_1

Buka Editor Template dengan mengunakan Ctrl+F anda cari kode ]]></b:skin> , lalu anda copy kode dibawah ini dan pastekan di atasnya :

Info Box dengan gambar

/*colom info1*/
.info1_box {
padding:20px 25px 25px 75px;
margin-bottom:20px;
font-size:14px;
letter-spacing:.3px;
}
.info1_box a {
text-decoration:underline !important; }
.info1_box {
background:#375799 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJNpp7TqnZo_dvL1u5rhH9iYFQhepPbIIUxCqajFXnBJMhl72oh6f1eOe7qshZ4EqVdSAZmK2_Brylq-KwAht54uibvtmwReRgTsfoslB5nTgHtNoOe4Z5HR2xrU5PvAU63VvFDckJFXw/s1600/iconimg_13015.png) no-repeat 10px 15px;
border:1px solid #000; }
.info1_box,
.info1_box a {
color:#FAFAFA;
}

Kemudian anda simpan Template

Info Box_1 Kode HTML

Untuk membuat kolom informasi diperlukan kode pemanggil, silahkan sobat copy kode dibawah ini, sobat buat laman baru, kemudian terapkan di Mode HTML lalu publikasikan.

<div class="info1_box">
Terimakasih sudah berkunjung di www.aak-share.com , mohon bantuannya agar Website ini menjadi berkembang lagi agar bisa bermanfaat untuk orang banyak</div>

Terimakasih sudah berkunjung di www.aak-share.com , mohon bantuannya agar Website ini menjadi berkembang lagi agar bisa bermanfaat untuk orang banyak

Coba yang ini :
Info Box_2

Buka Editor Template dengan mengunakan Ctrl+F anda cari kode ]]></b:skin> , lalu anda copy kode dibawah ini dan pastekan di atasnya :

/*colom info2*/
.info2 {
background-color: #FFEEB3;
}
.alert, .info2, .info3, .instruction, .notes, .question, .setting, .source {
position: relative;
display: block;
font-style: normal;
color: #555;
padding: 15px 18px 15px 48px;
background-color: #f8e38d;
border-radius: 3px;
border-bottom: 2px solid rgba(0,0,0,.1);
}
.info2:before {
content: "\f05a";
}
.alert:before, .info2:before, .info3:before, .instruction:before, .notes:before, .question:before, .setting:before, .source:before {
font-family: 'FontAwesome';
display: block;
position: absolute;
top: 15px;
left: 16px;
color: rgba(0,0,0,.15);
font-size: 22px;
line-height: 1;
}

Kemudian anda simpan Template

Info Box_2 kode HTML

Untuk membuat kolom informasi diperlukan kode pemanggil, silahkan sobat copy kode dibawah ini, sobat buat laman baru, kemudian terapkan di Mode HTML lalu publikasikan.

<div class="info2">
Terimakasih sudah berkunjung di www.aak-share.com , mohon bantuannya agar Website ini menjadi berkembang lagi agar bisa bermanfaat untuk orang banyak</div>

Terimakasih sudah berkunjung di www.aak-share.com , mohon bantuannya agar Website ini menjadi berkembang lagi agar bisa bermanfaat untuk orang banyak

Info Box_3

Buka Editor Template dengan mengunakan Ctrl+F anda cari kode ]]></b:skin> , lalu anda copy kode dibawah ini dan pastekan di atasnya :

Info Box dengan gambar

.info3_box  {
color: #000;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidDWEw7CRcVCtrxwxaDgboe35Ci8_dBvNrkGLYMtJ6uBzdlOoMzS6fisM1AK219aoQQO24VBGhZgGlUMCyFl_yqBbz3fkf-0SFkrdNYpms9H3zzAgFTjXm-9obp3GPdriexrZBTtUzVP0/s1600/speaker_aak-share+dot+com.png") 5px center no-repeat scroll #7F1FDB;
display: block;
font-style: normal;
padding: 10px 12px 10px 40px;
position: relative;
border-radius: 4px;
border-bottom: 1px solid rgba(0,0,0,.1);
}

Info Box_3 Kode HTML

Untuk membuat kolom informasi diperlukan kode pemanggil, silahkan sobat copy kode dibawah ini, sobat buat laman baru, kemudian terapkan di Mode HTML lalu publikasikan.

<div class="info3_box">
Terimakasih sudah berkunjung di www.aak-share.com , mohon bantuannya agar Website ini menjadi berkembang lagi agar bisa bermanfaat untuk orang banyak</div>

Terimakasih sudah berkunjung di www.aak-share.com , mohon bantuannya agar Website ini menjadi berkembang lagi agar bisa bermanfaat untuk orang banyak

Sekian dari saya, semoga bermanfaat!

Subscribe to receive free email updates: