Cara Menciptakan Informasi Box Di Postingan

Cara Membuat Colom Info di Postingan Blog - Informasi yaitu adalah keterangan, pernyataan, gagasan, dan gejala yang mengandung nilai, makna, dan pesan, baik data, maupun fakta. Bagi sahabat yang ingin memperlihatkan warta kepada pengunjung mengenai artikel yang sudah sahabat buat, anda sanggup memperlihatkan warta tersebut dengan menciptakan kotak informasi.

Baiklah sobat, berikut ini aku akan share cara menciptakan kotak warta dengan CSS. Pada dasarnya menciptakan colom info dengan menambahkan arahan CSS pada editor template, terdapat dua arahan dalam menciptakan kolom warta yaitu CSS dan HTML.

Langsung saja ya sahabat berikut ini langkah-langkahnya :

Info Box_1

Buka Editor Template dengan mengunakan Ctrl+F anda cari kode ]]></b:skin> , kemudian anda copy arahan 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/AVvXsEil_CrC8CXJiF-k3YzXz290uwaMPt8HLi9CjwxPGzS_yWmrixaRIGEKgGl2rncNJbJHAk4AilIwRDBvQzx1hcS1n_UUmmOTIUsGPpCJ-yD6Xok0e_HmqSYDi_eDSmngjEErBURcIqKcxVs/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 menciptakan kolom warta diharapkan arahan pemanggil, silahkan sahabat copy arahan dibawah ini, sahabat buat laman baru, kemudian terapkan di Mode HTML kemudian publikasikan.

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

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

Coba yang ini :
Info Box_2

Buka Editor Template dengan mengunakan Ctrl+F anda cari kode ]]></b:skin> , kemudian anda copy arahan 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 menciptakan kolom warta diharapkan arahan pemanggil, silahkan sahabat copy arahan dibawah ini, sahabat buat laman baru, kemudian terapkan di Mode HTML kemudian publikasikan.

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

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

Info Box_3

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

Info Box dengan gambar

.info3_box  {
color: #000;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZe5YcRJpVtXd34WJ9DK_Ew3sG-PQHGJGIxjnSpOHGD97maZTMSMdMZkSAhec9I8w_BfCro_7neeeGWxrc5m_nTkV5S-Uye0zu-CLTtrnuDqPJu3Mj-mj_7J0nM-clY3naCHgexdIbmIE/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 menciptakan kolom warta diharapkan arahan pemanggil, silahkan sahabat copy arahan dibawah ini, sahabat buat laman baru, kemudian terapkan di Mode HTML kemudian publikasikan.

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

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

Sekian dari saya, semoga bermanfaat!



Sumber http://www.websiteedukasi.com/