×

Author / Admin / Editor

     Jagoan Redesign    

Blog yang membahas Tutorial Blogger, Games, Template, Tips Adsense, SEO, Web Design dan Teknologi

Iklan Bawah Posting

Cara Membuat Note Box Keren di Blogger

Cara Membuat Note Box Berwarna dengan Border di Blogger - Sering kali pada saat kita menulis sebuah artikel di blog biasanya kita memberikan sebuah catatan simple kepada sang pembaca supaya dia lebih jelas apa yang disampaikan pada postingan di blog, 

Cara Membuat Note Box Keren di Blogger

Semoga dengan tampilan Note Box dibawah ini pengunjung blog kamu bisa memahami poin penting pada postingan tersebut.

membuat Note Box ini sangat mudah dan simple dengan menambahkan kode CSS dibawah ini dan Script pemanggil Note Box yang sudah siap pakai..

Cara Membuat Note Box Keren di Blogger 

1. Silahkan Login ke Blogger.
2. Selanjutnya masuk ke menu TEMA > klik Edit HTML.

3. Cari kode berikut ini ]]></b:skin> dan pastekan kode dibawah ini tepat DIATAS kode tersebut.
/* Note jagoan Border Color */
.grenjagoan {padding:10px;font-size:14px;line-height:1.5;background: rgba(198, 226, 204, .37);border-radius:4px;border-left:4px solid;color: #48b074;border-color:#48b074}
.redjagoan {padding:10px;font-size:14px;line-height:1.5;background: rgba(244, 215, 201, .37);border-radius:4px;border-left:4px solid;color: #e0473d;border-color:#e0473d}
.bluejagoan {padding:10px;font-size:14px;line-height:1.5;background: rgba(186, 208, 228, .37);border-radius:4px;border-left:4px solid;color: #3b5998;border-color:#3b5998}

Kamu bisa mengubah kode warna yang saya tandai  dengan warna kesukaan kalian sendiri.

4. Klik Simpan Template.

5. Cara penerapannya di dalam postingan blog, Buat Postingan Baru > kemudian letakkan kode ini pada mode HTML

Note Box Merah:

<div class="redjagoan">TEKS-ANDA</div>

Note Box Biru:

<div class="bluejagoan">TEKS-ANDA</div>

Note Box Hijau:

<div class="grenjagoan">TEKS-ANDA</div>

Ganti TEKS-ANDA dengan tulisan yang kalian inginkan

Nah, itu adalah tutorial Cara Membuat Note Box Keren di Blogger , Jika ada hal yang ingin ditanyakan silakan berkomentar saja di bawah.

Previous
Next Post »
avatar
Penulis Blog dan redesigner template blogger.

Related Posts

Komentar
Tutup Komentar

0

Post a Comment

  • Berkomentarlah secara bijaksana dan bertanggung jawab.
  • Tidak diperbolehkan mempromosikan barang atau berjualan.
  • Tulis komentar Anda untuk hal yang masih berhubungan dengan posting pada halaman ini.
  • Dilarang memuat Link Aktif pada kolom komentar
  • Komentar dengan link aktif akan otomatis dihapus.
  • Jika ingin menulis kode silahkan anda parse terlebih dulu (terutama Javascript dan HTML)
  • Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
  • Gunakan tag <i> dan diakhiri dengan kode </i> untuk menuliskan kode. Contoh:
    <i>#comments</i>
  • Gunakan tag <em> dan diakhiri dengan kode </em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
    <em>#comments {margin:0; padding:10px 15px}</em>

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel