Membuat Blok Catatan, Tips dan Peringatan di Blog

Membuat Blok Catatan, Tips dan Warning - Sambil menunggu rasa kantuk datang, kali ini saya akan berbagi cara membuat catatan, informasi, tips, atau peringatan di blog, agar blog lebih stylish dan pengunjung betah berlama-lama di blog kita.

Sebenarnya bagi sahabat yang sudah mahir CSS dan HTML tidak akan aneh lagi dengan tutorial seperti ini. Tapi walaupun mahir dalam CSS dan HTML terkadang buntu ide untuk memoles blognya supaya lebih menarik.

Sebelum saya kasih CSS dan HTMLnya, silahkan lihat dulu penampakan blok catatan, tips dan peringatan pada demo di bawah ini :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.

Untuk memasangnya, silahkan sobat simpan kode ini di atas ]]></b:skin> atau </style>

.info, .tips, .warning {
 line-height: 22px;
 min-height: 38px;
 padding: 10px 12px 12px 50px;
 margin: 5px 0;
 border-radius:6px;
 font-size:.9rem
}
.info {
 background: #e0e5eb url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTnmQ3iF4D9RdvpHOwULfFeW6T4q4rZV53_f3NqqH9al9OsFt4phRpzlre0hO3se5aWuWoF992UqaEeKzGYDm7z8hNiwkogp_ST4zcdy4TTV9X8p4_moz5KdvdD9ocaYYm-yLJQVt8pq4/s30-rw/info.png') no-repeat 12px 8px;
 color: #222
}
.tips {
 background: #7CADDE url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR2jCoHI6mJBJ1eTjZ0ns4ejP5CgTS9YhvyEBzphNGlXUbqt8nr4IAoYI4evokYr2BTZmLBD54c_t4jjEat1hKvTzT8wgEB0gw5Oxbm0LAbnr4g36QoRtmhNW-rsFGPq0Qom7lIsQjNI4/s30-rw/tips.png') no-repeat 12px 8px;
 color: #fff;
}
.warning {
 background: #db6161 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwpOzFlOxYBYgnvg96dZtqHhKHbDJOyh7YVzPytQR_Ratuzm2CoLSJOTnwQyCWHpc8PzqC-cKscE71sl-NmP9qDH8T1oJmrOZefY0RBKlfJHPXK6cbMjyWJ5varkkEPEz3k77v94h-LIk/s25-rw/warning.png') no-repeat 12px 8px;
 color: #fff;
}

Selanjutnya, apabila ingin memasukan ke dalam postingan, sobat tinggal memilih blok mana yang akan digunakan. (Tulis kode dalam mode HTML). Untuk Info (catatan) sobat gunakan kode seperi ini:

<div class='info'>
..kata-kata disini..
</div>

untuk tips, kodenya seperti ini :

<div class='tips'>
..kata-kata disini..
</div>

untuk peringatan atau warning :

<div class='warning'>
..kata-kata disini..
</div>

Sobat juga bisa gunakan tag p dalam penulisan kode HTML, contoh :

<p class='info'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.
</p>

Artikel ini dibuat pada :5 Oktober 2013 diupdate pada : 15 Maret 2024

Berita Lebih Baru Berita Lebih Lama
  • ws
    Profil: https://www.blogger.com/profile/05720682377443002014
    05 Oktober, 2013

    pertamax :D

  • Anonim
    Profil:
    06 Oktober, 2013

    nyimak kang, ngomong2 untuk lebarnya apakah otomatis ??

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      06 Oktober, 2013

      otomatis sob...

  • Direkori Penerjemah
    Profil: https://www.blogger.com/profile/03694273036372606794
    06 Oktober, 2013

    Assalamualaikum Kang Ismet. Semakin hari blog kang Ismet semakin cihuy aja nih :) .
    Sukses terus ya kang.

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      06 Oktober, 2013

      wa'alaikum salam.. biasa aja ko sob.. kemana aja nih baru mampir lagi? :)

  • Adhy Suryadi
    Profil: https://www.blogger.com/profile/06846144400647921085
    06 Oktober, 2013

    Seperti biasa, keeeyyeeenn :-bd -bd
    Amankan scriptna kang...heheeheh

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      06 Oktober, 2013

      heheh.. peracanten lah akangmah tos mahir

  • Unknown
    Profil: https://www.blogger.com/profile/09559388448729346354
    06 Oktober, 2013

    Tutorial tentang bloggernya sangat bermanfaat kang, saya juga sudah pakai salah satu template buatan akang untuk blog saya yang baru, templatenya keren dan fast loading kang. Salam kenal, dan terus berkarya, saya suka blognya akang.

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      06 Oktober, 2013

      kapan2 saya akan buat template lagi mas.. masih lumayan sibuk :)

  • Yandi Mulyadi
    Profil: https://www.blogger.com/profile/05345801809802904880
    06 Oktober, 2013

    Kang, cara membuat Komentar pada bagian Balas komentar nya , bisa untuk semua komentar . . kalo punya aku kan cuma yang membuat komentar pertama saja yang bisa buat di balas . . kalo komentar kedua setelah sudah di balas tidak akan bisa di balas komentar . . hanya ada tombol hapus yang muncul . . nah, cara memunculkan tombol balasnya itu aktif semua komentar kaya punya kang ismet gimana? http://mafiasitez.blogspot.com/2013/10/masalah-menghadapi-tab-post-dan-comments.html

    • Saeful Rahman
      Profil:https://www.blogger.com/profile/12948365880346888770
      06 Oktober, 2013

      Komentar ini telah dihapus oleh Saeful Rahman sebagai penulis.

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      06 Oktober, 2013

      Coba pake Threaded Comments V3 sob

  • no data
    Profil: https://www.blogger.com/profile/13465796310160423114
    06 Oktober, 2013

    mantab kang, dari dulu ini yang saya tunggu :)
    ~ Blogwalking Yuk ~
    Daengrio.com <-----

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      06 Oktober, 2013

      hehehe.. rajin banget nongkrong nih si mas ;)

  • no data
    Profil: https://www.blogger.com/profile/13465796310160423114
    06 Oktober, 2013

    - mumpung masih dikit orang :) -
    absen dulu kang! :D
    ~ Blogwalking Yuk ~
    Daengrio.com <-----

  • Sopala Multapa
    Profil: https://www.blogger.com/profile/17709242066690693656
    06 Oktober, 2013

    Mantap kang mantap .. perlu untuk dipinang nih hehe

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      06 Oktober, 2013

      wkwkw ari CSS mahpasti apal kang, cuman manis nya :P

  • Unknown
    Profil: https://www.blogger.com/profile/01332270890841900429
    06 Oktober, 2013

    ini nih yang saya cari2 akhirnya dibagikan juga, makasih banyak kang, mau dicoba dulu nih hehe

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      06 Oktober, 2013

      silahkan dicoba mas...

  • Saeful Rahman
    Profil: https://www.blogger.com/profile/12948365880346888770
    06 Oktober, 2013

    Alhamdulillah sudah diterapkan kang, pada kolom komentar sma halaman post. :-d

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      06 Oktober, 2013

      keyeeeen... sok acak2 deui we :)

  • Anonim
    Profil:
    06 Oktober, 2013

    wah, akhirnya di bagikan tutorialnya
    ini bisa bikin postingan jadi menarik untuk dibaca

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      06 Oktober, 2013

      betul sob.. pemanis aja :)

  • Gupitan
    Profil: https://www.blogger.com/profile/01958676779323309263
    06 Oktober, 2013

    Keren kangng,,,, ngaraosan ah saalit, hatur nuhun,,,

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      06 Oktober, 2013

      seueur ge mangga :)

  • Kang Muroi
    Profil: https://www.blogger.com/profile/15022422809113377143
    06 Oktober, 2013

    mampir kang, amankan dulu scriptnya....

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      06 Oktober, 2013

      mangga kang mur... diborgol we lah ;)

  • Anonim
    Profil:
    06 Oktober, 2013

    Izin praktek Kang! comment back! http://diverzer.blogspot.com/2013/10/share-button-with-css.html

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      06 Oktober, 2013

      menuju TKP :-d

  • Unknown
    Profil: https://www.blogger.com/profile/17484727763717603316
    06 Oktober, 2013

    Komentar ini telah dihapus oleh Unknown sebagai penulis.

  • Unknown
    Profil: https://www.blogger.com/profile/17484727763717603316
    06 Oktober, 2013

    Thankkss kang.. ijin pakai..

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      06 Oktober, 2013

      silahkan sob... :)

  • no data
    Profil: https://www.blogger.com/profile/13465796310160423114
    06 Oktober, 2013

    keren kang, absen dulu, artikelnya bermanfaat! :D
    - salam damai -
    daengrio.com <----

  • Unknown
    Profil: https://www.blogger.com/profile/11582340141083970801
    06 Oktober, 2013

    bermanfaat kang.namun, blog saya harus edit artikel total.....
    nnt kalau saya buat blog baru saya akan coba mas.. :)

    Salam damai.
    Visit http://zetta-zone.blogspot.com/

  • Taufik Nurrohman
    Profil: https://www.blogger.com/profile/17973546667775491071
    06 Oktober, 2013

    Sebenarnya tanpa menambahkan nama tag HTML juga cukup. Kelas CSS itu sudah spesifik:

    .info, .tips, .warning {}

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      06 Oktober, 2013

      betul mas.. saya persingkat saja kodennya :-bd

    • Saeful Rahman
      Profil:https://www.blogger.com/profile/12948365880346888770
      06 Oktober, 2013

      ada Kang Taufik nih. :-d

  • Unknown
    Profil: https://www.blogger.com/profile/14712215430804044545
    06 Oktober, 2013

    wih keren kang, makasih :0 , lumayan buat mempercantik isi postingan :D , sukses terus kang ^_^

    • no data
      Profil:https://www.blogger.com/profile/13465796310160423114
      06 Oktober, 2013

      dan semoga di beri kesehatan selalu kang :D
      - salam damai -
      daengrio.com <--- lalu lintas teratas!

  • Aditya Nugroho
    Profil: https://www.blogger.com/profile/15468906802342533105
    06 Oktober, 2013

    Mantab sekali mas, saya coba terapkan di blog bayi saya yg baru lahir. lumayan buat memanjakan para reader di blog. :D

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      06 Oktober, 2013

      ayo ditunggu updatenya ;)

  • Ferry Nurse
    Profil: https://www.blogger.com/profile/03471956174234108041
    06 Oktober, 2013

    Jadi tambah menarik ni kang ismet...tak coba untuk buat semacam ini Kang.
    Terima kasih

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      06 Oktober, 2013

      sama2 sob...

  • sopyan nc
    Profil: https://www.blogger.com/profile/06065535342964992862
    06 Oktober, 2013

    betul kang ide buntu :d hihihhi
    padahal blog saya masi bayi ni pinin banget ngebagus"in
    kadang dah edit sana sini beum puas juga
    pepatah bilang "rumput tetangga lebih hijau dari rumput sendirii " alah naha jadi kadinya
    tp da leres ningal blog nu kang ismet asa hayong hahahaha

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      06 Oktober, 2013

      wkwkkw... padahal rumput tetangga teh plastik nya :D

  • Anonim
    Profil:
    06 Oktober, 2013

    Salam Kenal Kang Ismet :D,Oh Iya Mas Kok Emoticon Di Blog Saya Tidak Muncul Yah Setelah Saya Pasang TreadhComment Vinaluv Hack???

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      06 Oktober, 2013

      salam kenal juga sob... vinaluv sendiri sudah ada emo nya, coba non aktifkan Display_Emo = true menjadi Display_Emo =false takutnya bentrok

  • Unknown
    Profil: https://www.blogger.com/profile/18401729932301880526
    06 Oktober, 2013

    Ambil ah :D, #brebet lumpaaattt

  • Anonim
    Profil:
    06 Oktober, 2013

    betul kang, kdang yg sudah bisa HTML sama CSS, tapi kdang buntu ide. keren tutorialnya

  • Anonim
    Profil:
    06 Oktober, 2013

    wah menarik jg nih.. cocok buat tulisan yg di highlight
    oia kang, kalau nomor rekening atm mandiri biasanya ada berapa digit? soalnya ane mau menerapkan no rek. di pemasangan iklan blog ane. punya ane ada 16 digit, apa betul?.. takutnya nanti yg mengirim slh kirim. Makasih.

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      07 Oktober, 2013

      kalau punya saya sih 15, coba cek aja di buku rekening

  • M. Alex Joenaedi
    Profil: https://www.blogger.com/profile/00071593122995725134
    07 Oktober, 2013

    Bungkus ah gagancangan bisi ku ucing.....

  • Bungfrangki
    Profil: https://www.blogger.com/profile/13162875744493565460
    07 Oktober, 2013

    langsung pasang ya kang...
    gak perlu edit lagi hehehehe... :D

  • Admin
    Profil: https://www.blogger.com/profile/13586899371667182261
    07 Oktober, 2013

    jreng jreng... ada yang baru nih, baru dua hari ga online mah udah jumpa yang baru, keren kang :-bd

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      07 Oktober, 2013

      wuihhh lagi sibuk ya?

  • Unknown
    Profil: https://www.blogger.com/profile/11582340141083970801
    07 Oktober, 2013

    Waw, mantap triknya mas...
    lain kali kalau ada waktu saya mau coba...
    Bermanfaat (y)

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      07 Oktober, 2013

      cuma permainan CSS aja ko

  • Welson
    Profil: https://www.blogger.com/profile/11242972443447797256
    07 Oktober, 2013

    Keren kang !!
    Kalau taruh didalam postingan blog gimana kang ?

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      07 Oktober, 2013

      sama aja, simpan dulu CSSnya di atas ]]></b:skin>, baru kode HTMlnya di postingan

  • Anonim
    Profil:
    07 Oktober, 2013

    Boleh Dicoba Nih Kang Thanks Infonya

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      07 Oktober, 2013

      sama sob..

  • el-azmie
    Profil: https://www.blogger.com/profile/02857721775921285356
    08 Oktober, 2013

    assalamu'alaikum. mantap ni kang, coba dulu ya :)

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      08 Oktober, 2013

      wa alaikum salam.. silahkan sob :-d

  • Unknown
    Profil: https://www.blogger.com/profile/14810003056432893292
    08 Oktober, 2013

    ieu tah anu di teangan teh ayanamah di kang ismet wae...
    muter" dina Gugel pasti UUK..
    Ujung-Ujung namah Kaingismet dui Kangismet dui.
    wkwkwkwk

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      08 Oktober, 2013

      wkwkkwkw... tong ka gugel atuh kang.. search we di blog abdi

  • akang sam
    Profil: https://www.blogger.com/profile/04017981156609121820
    08 Oktober, 2013

    sangat bermanfaat kang ismet, terima kasih ya

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      08 Oktober, 2013

      sama2 sob..

  • Syalala
    Profil: https://www.blogger.com/profile/01057889777681135284
    08 Oktober, 2013

    Saya mau nanya Kang. Gimana caranya agar "Info"nya itu terletak di setiap postingan di bawah judul?

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      08 Oktober, 2013

      simpan di atas <data:post.body/>

  • DBUnggul_P
    Profil: https://www.blogger.com/profile/03662638418611739126
    08 Oktober, 2013

    Mantap 1000000000%

    oh ya aku juga mw nanya cara mengecilkan thumnail homepage di blog saya dan memindahkannya disamping cuplikan blognya gimana?

    soalnya blog punya saya thumbnainya terlalu besar..

    http://www.dbupambudi.blogspot.com/

    kalau perlu kode template saya hubungi aja
    http://fb.com/dbunggul

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      08 Oktober, 2013

      lumayan juga ngeditnya ribet. kayaknya yang mesti diedit : .entry-image, .entry-image img, .entry-container

  • Anonim
    Profil:
    09 Oktober, 2013

    kang ikonnya itu kira kira bisa gak diganti pake font awesome :D

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      09 Oktober, 2013

      bisa sob.. kenapa engga.. :)

  • Helmi Fatur Rohman
    Profil: https://www.blogger.com/profile/15006735404330378338
    15 Oktober, 2013

    kang sudah saya follow.
    ditunggu y follback nya
    http://cerita-baruku.blogspot.com

  • Nhinis
    Profil: https://www.blogger.com/profile/16718372808525476364
    16 Oktober, 2013

    Hmm...ga berhasil kang :(
    Blog saya template bawaan blogger, waktu nyobain tutor ini, kalo pesannya panjang akan keluar dari kotak, trus kotaknya ga otomatis melebar mengikuti banyaknya pesan. Gimana ya kang ? :(

    • no data
      Profil:https://www.blogger.com/profile/13465796310160423114
      19 Oktober, 2013

      nama kang ismet nih :D
      - Salam damai -

  • Ichi Hikaru
    Profil: https://www.blogger.com/profile/12797179653528208837
    19 Oktober, 2013

    Kalo saya di Css nya pake misal info { bla bla bla } , dan kalo di penulisannya cuma pake bla bla bla

    Yg mo saya tanyain , itu tuh lebih mending pake yang mana kang ? pke yang pake class ato yang kek saya pake sekarang ?

    • Ichi Hikaru
      Profil:https://www.blogger.com/profile/12797179653528208837
      19 Oktober, 2013

      Maksudnya nulisnya pake format kek dibawh ini
      <info>bla bla bla </info>

  • Unknown
    Profil: https://www.blogger.com/profile/02106308431818384662
    24 Oktober, 2013

    Akun facebooknya Kang Ismet apa ya??.. Tolong kasi tau biar bisa tanya gitu :)

  • Yusuf
    Profil: https://www.blogger.com/profile/11349753759247047570
    30 Oktober, 2013

    Inilah yang saya cari dari dulu, Akhirnya ketemu..
    makasih kang tutorialnya..

    blogwalking yuk!!
    lzmodern.blogspot.com

  • Anonim
    Profil:
    31 Oktober, 2013

    mantap kang . . . . .terima kasih

  • Unknown
    Profil: https://www.blogger.com/profile/02106308431818384662
    02 November, 2013

    Manteb amatt :) ...Btw blognya kini makin keren.. pengen mintak templatenya :)
    Aku praktekin di blog saya yaa kang.. tapi aku edit dikit.. boar sesuai dengan tema blog saya yaa kang... Salam blogger

  • Unknown
    Profil: https://www.blogger.com/profile/06880820889876277150
    06 Desember, 2013

    keren kang ismet

  • Unknown
    Profil: https://www.blogger.com/profile/13068182171126024265
    18 Januari, 2014

    Akang kok di blog saya eror seperti ini
    cara ngatasinnya gimana ya kang
    <a href="http://prntscr.com/2k9bwf"><img src="http://prntscr.com/2k9bwf"/>

    • Febrika Setiyawan
      Profil:https://www.blogger.com/profile/17220760165288248889
      18 Februari, 2014

      Itu spt permasalahan ane, gan. Tp stlh kode css nya di taruh di atas </style>. Hasilnya sukses seperti contoh (punya kang ismet), gan.

  • Admin
    Profil: https://www.blogger.com/profile/16713377226583345638
    26 Februari, 2014

    Mkasih Kang, lngsung pasang nch

  • Anonim
    Profil:
    15 Juli, 2014

    Sukses kang ane terapin di blog ane |o|

  • Hena Wirasatya
    Profil: https://www.blogger.com/profile/03203728081175581932
    08 Agustus, 2014

    Matur suwun kang

  • Amir
    Profil: https://www.blogger.com/profile/05062274712424026395
    17 Maret, 2024

    kamg kenapa link profil komentar dihilangkan? jadi susah buat blogwalking 😅

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      30 Agustus, 2024

      hahaha kebanyakan link ga bagus buat SEO

Tambahkan Komentar
comment url
Terima kasih telah berkomentar di Blog Kang Ismet.
  • Untuk menyisipkan Gambar, Kode, atau Kutipan silahkan klik Tab Sisipkan di atas.
  • Emoji yang bisa digunakan pada komentar :), :D, :( <3, :love dan :top
  • Untuk melihat Komentar yang telah ditambah sisipan kunjungi DEMO
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Klik tombol Salin Kode! lalu paste ke kolom komentar.


image quote pre code
112 Komentar