Cara Membuat 3 Box Keren Blog

AA Sciences, Aldi Andreansyah - Cara Membuat 3 Box Keren Blog (Informasi, Tips, dan Peringatan), Box Lengkap 3.

Cara Membuat 3 Box Keren Blog - Sudah tak asing lagi sobat AA Sciences salah satu widget ini yakni 3 box keren yang dimana box ini mencantum tentang mengenai sebuah fitur informasi, tips, dan peringatan. 3 Box keren ini sangat cocok digunakan untuk semua peringatan khususnya dalam sebuah informasi, tips, dan peringatan jika para pengunjung website mengunjungi website yang sudah di pasang 3 box keren ini.

Penempatan 3 Box Keren

3 Box Keren ini sangat cocok sekali di tempatkan pada tengah postingan,bawah setelah postingan terutama jika kalian ingin mencantumkan sebuah informasi, peringatan dan tips. Biasa nya 3 box ini AA Sciences gunakan tepat pada sesudah sebuah bawah postingan yang dimana tepatnya dalam kode data:post.body atau dapat juga pada bagian <div class='post-footer'/> yang intinya box tersebut terletak pada bawah sebuah postingan.

Dan jika kalian ingin mencantumkan sebuah 3 box keren ini pada sebagai sebuah postingan maka kalian mudah kalian hanya terapkan sebuah kode peringatan yang ingin kalian buat sendiri pada bagian mode HTML bukan mode compose.

Ya sudah,jika kalian memang sudah penasaran membuat 3 box keren yakni yang berisi informasi, tips, dan peringatan langsung saja simak tutor nya pada cara di bawah ini :

Cara Membuat 3 Box Keren Blog (Informasi, Tips, dan Peringatan) :

A . Pembuatan CSS nya terlebih dahulu

1 . Pastikan sudah Login terlebih dahulu pada akun Blogger kalian.

2 . Template - > Edit HTML - > CTRL+F lalu cari kode b:skin atau <style>.

3 . Jika sudah ditemukan kode <style> atau b:skin tadi, langsung saja kalian Copy Paste kan Script CSS di bawah ini, tepat pada bagian dalam kode b:skin atau <style> :

/*CSS info,tips dan peringatan by Aldi Andreansyah*/
.info, .tips, .warning {
 line-height: 22px;
 min-height: 38px;
 padding: 10px 12px 12px 68px;

 margin: 5px 0;
}
.info {
background: #415471 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc_gJIvow0QeySYWbSPGB7JpmU5ySkQQS_i2P-rX2bNGwv8FDDO4vUsoPIAJkoi5f086vbi8nY10Oa4Gsc_GmhbpLcG2Kn0UZWo-rLDIKhBs3IGX-Z1kNcKCq_B2F5lH0j5Jqs5FBVeY4/s1600/info.png') no-repeat 12px 8px;
 color: #fff
}
.tips {
 background: #415471 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijo96GD2HLXcicM5fT_iBrzC6h2h8atR3LfHdgeRrLEaCAACyv0tYc4SVHi9zjG5gdtO66nY8pMLS-Gvpln2o_IH7A8n35wu4jTQBCPbrrg2UvE955QwgGRRE83wslX6fE1iXopN3FC0c/s1600/tips.png') no-repeat 12px 8px;
 color: #fff;
}
.warning {
 background: #415471 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMfxtcl7z6P_MuyTg62gYjcCztDjuLopfQDsSw1uSbNsFnsODHztnImxCj_73D-SvH2nB07DznI-vkAH81xow-53srbnLe-SZ1XDXHwSw4rnQ1EG-RmPdxPqHuxk0Da4NbItPTo_wnzTGb/s50/warning.png') no-repeat 12px 8px;
 color: #fff;
}

4 . Terakhir, Pilih menu Simpan Template dan lihat hasilnya.

B . Penerapan dalam HTML nya

• Penempatan dalam sebuah Posting an nya :

1 . Pastikan sudah Login terlebih dahulu pada akun Blogger kalian.

2 . Entri Baru - > pilih mode HTML bukan Compose

3 . jika sudah Pada Mode HTML, Copy Paste Script nya di bawah ini seterah ingin di pasang dimana, lalu masukkan kata² informasi, tips dan peringatan yang ingin kalian tulis tersebut.

<div class='info'>
  <H4>#INFORMASI :</H4>
Masukkan Script tentang Informasi seterah kalian !!!
</div>
<div class='tips'>
  <H4>#TIPS :</H4>
Masukkan Script tentang Tips seterah kalian !!!
</div>
<div class='warning'>
  <H4>#PERINGATAN :</H4>
Masukkan Script tentang Peringatan seterah kalian !!!
</div>

4 . Terakhir, Publikasikan Postingan kalian

• Penempatan tepat dalam sebuah kolom bawah postingan nya :

1 .Template - > Edit HTML - > CTRL+F lalu cari kode data:post.body atau <div class='post-footer'/> atau tempat sejenis nya yang tempatnya tepat pada bawah posting an.

2 . Jika sudah ditemukan kode data:post.body atau <div class='post-footer'/> atau sejenisnya, langsung saja kalian Copy Paste kan Script HTML di bawah ini, tepat pada bagian sebelum kode data:post.body atau <div class='post-footer'/> atau Sejenisnya :

<div class='info'>
  <H4>#INFORMASI :</H4>
Masukkan Script tentang Informasi seterah kalian !!!
</div>
<div class='tips'>
  <H4>#TIPS :</H4>
Masukkan Script tentang Tips seterah kalian !!!
</div>
<div class='warning'>
  <H4>#PERINGATAN :</H4>
Masukkan Script tentang Peringatan seterah kalian !!!
</div> 

3 . Terakhir, Pilih menu Simpan Template dan lihat hasilnya.

Nah mungkin hanya cukup sekian mengenai pembahasan cara membuat 3 box keren di Blog yang memiliki informasi, tips dan peringatan yang dapat AA Sciences sampaikan, semoga bermanfaat dan sekaligus menambah wawasan mengenai penambahan 3 box keren di blog yang memiliki fitur informasi, tips, dan peringatan ini, Amin.

Share this post