Kunjungi Blog terbaru saya corkismet - Coretan Kang Ismet - dan tinggalkan jejak sobat disana.
Beranda
Blogger Tutorial

Membuat Blok Catatan, Tips dan Peringatan di Blog

Membuat catatan, info, tips dan peringatan keren 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.

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 68px;
 margin: 5px 0;
}
.info {
 background: #e0e5eb url('http://2.bp.blogspot.com/-3rcGQ-VAKb8/UlA4L72c6wI/AAAAAAAAFtY/f__fkV_xBsQ/s1600/info.png') no-repeat 12px 8px;
 color: #222
}
.tips {
 background: #7CADDE url('http://2.bp.blogspot.com/-_Y9kuQODeBs/UlA4LwDUkhI/AAAAAAAAFtk/Rm0QwoddGLw/s1600/tips.png') no-repeat 12px 8px;
 color: #fff;
}
.warning {
 background: #db6161 url('http://2.bp.blogspot.com/-rgsBmdJYFkM/UlA4LyWCrqI/AAAAAAAAFtc/suIf3IwnpgE/s1600/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'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.
</div>

untuk tips, kodenya seperti ini :

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

untuk peringatan atau warning :

<div class='warning'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.
</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>
#Blogger Tutorial

115 komentar

1. Komentar ini, diurutkan dari yang terbaru
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code
  1. pertamax :D
  2. nyimak kang, ngomong2 untuk lebarnya apakah otomatis ??
    1. otomatis sob...
  3. Assalamualaikum Kang Ismet. Semakin hari blog kang Ismet semakin cihuy aja nih :) .
    Sukses terus ya kang.
    1. wa'alaikum salam.. biasa aja ko sob.. kemana aja nih baru mampir lagi? :)
  4. sudah diterapkan kang :)
    1. silahkan gan, hati hati yah :)
      ~ Blogwalking Yuk ~
      Daengrio.com <-----
  5. langsung coba ya gan makasih untuk tutorialnya
    1. silahkan dicicipi
  6. Seperti biasa, keeeyyeeenn :-bd -bd
    Amankan scriptna kang...heheeheh
    1. heheh.. peracanten lah akangmah tos mahir
  7. 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.
    1. kapan2 saya akan buat template lagi mas.. masih lumayan sibuk :)
  8. 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
    1. Saeful Rahman
      Komentar ini telah dihapus oleh pengarang.
    2. Coba pake Threaded Comments V3 sob
  9. mantab kang, dari dulu ini yang saya tunggu :)
    ~ Blogwalking Yuk ~
    Daengrio.com <-----
    1. hehehe.. rajin banget nongkrong nih si mas ;)
  10. - mumpung masih dikit orang :) -
    absen dulu kang! :D
    ~ Blogwalking Yuk ~
    Daengrio.com <-----
  11. Mantap kang mantap .. perlu untuk dipinang nih hehe
    1. wkwkw ari CSS mahpasti apal kang, cuman manis nya :P
  12. ini nih yang saya cari2 akhirnya dibagikan juga, makasih banyak kang, mau dicoba dulu nih hehe
    1. silahkan dicoba mas...
  13. Alhamdulillah sudah diterapkan kang, pada kolom komentar sma halaman post. :-d
    1. keyeeeen... sok acak2 deui we :)
  14. wah, akhirnya di bagikan tutorialnya
    ini bisa bikin postingan jadi menarik untuk dibaca
    1. betul sob.. pemanis aja :)
  15. Keren kangng,,,, ngaraosan ah saalit, hatur nuhun,,,
    1. seueur ge mangga :)
  16. mampir kang, amankan dulu scriptnya....
    1. mangga kang mur... diborgol we lah ;)
  17. Izin praktek Kang! comment back! http://diverzer.blogspot.com/2013/10/share-button-with-css.html
    1. menuju TKP :-d
  18. Unknown
    Komentar ini telah dihapus oleh pengarang.
  19. Thankkss kang.. ijin pakai..
    1. silahkan sob... :)
  20. keren kang, absen dulu, artikelnya bermanfaat! :D
    - salam damai -
    daengrio.com <----
  21. 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/
  22. Sebenarnya tanpa menambahkan nama tag HTML juga cukup. Kelas CSS itu sudah spesifik:

    .info, .tips, .warning {}
    1. betul mas.. saya persingkat saja kodennya :-bd
    2. ada Kang Taufik nih. :-d
  23. wih keren kang, makasih :0 , lumayan buat mempercantik isi postingan :D , sukses terus kang ^_^
    1. dan semoga di beri kesehatan selalu kang :D
      - salam damai -
      daengrio.com <--- lalu lintas teratas!
  24. Mantab sekali mas, saya coba terapkan di blog bayi saya yg baru lahir. lumayan buat memanjakan para reader di blog. :D
    1. ayo ditunggu updatenya ;)
  25. Jadi tambah menarik ni kang ismet...tak coba untuk buat semacam ini Kang.
    Terima kasih
    1. sama2 sob...
  26. 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
    1. wkwkkw... padahal rumput tetangga teh plastik nya :D
  27. Salam Kenal Kang Ismet :D,Oh Iya Mas Kok Emoticon Di Blog Saya Tidak Muncul Yah Setelah Saya Pasang TreadhComment Vinaluv Hack???
    1. salam kenal juga sob... vinaluv sendiri sudah ada emo nya, coba non aktifkan Display_Emo = true menjadi Display_Emo =false takutnya bentrok
  28. Ambil ah :D, #brebet lumpaaattt
  29. betul kang, kdang yg sudah bisa HTML sama CSS, tapi kdang buntu ide. keren tutorialnya
  30. 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.
    1. kalau punya saya sih 15, coba cek aja di buku rekening
  31. Bungkus ah gagancangan bisi ku ucing.....
  32. langsung pasang ya kang...
    gak perlu edit lagi hehehehe... :D
  33. jreng jreng... ada yang baru nih, baru dua hari ga online mah udah jumpa yang baru, keren kang :-bd
    1. wuihhh lagi sibuk ya?
  34. Waw, mantap triknya mas...
    lain kali kalau ada waktu saya mau coba...
    Bermanfaat (y)

    1. cuma permainan CSS aja ko
  35. Keren kang !!
    Kalau taruh didalam postingan blog gimana kang ?
    1. sama aja, simpan dulu CSSnya di atas ]]></b:skin>, baru kode HTMlnya di postingan
  36. Boleh Dicoba Nih Kang Thanks Infonya
    1. sama sob..
  37. assalamu'alaikum. mantap ni kang, coba dulu ya :)
    1. wa alaikum salam.. silahkan sob :-d
  38. ieu tah anu di teangan teh ayanamah di kang ismet wae...
    muter" dina Gugel pasti UUK..
    Ujung-Ujung namah Kaingismet dui Kangismet dui.
    wkwkwkwk
    1. wkwkkwkw... tong ka gugel atuh kang.. search we di blog abdi
  39. sangat bermanfaat kang ismet, terima kasih ya
    1. sama2 sob..
  40. Saya mau nanya Kang. Gimana caranya agar "Info"nya itu terletak di setiap postingan di bawah judul?
    1. simpan di atas <data:post.body/>
  41. 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
    1. lumayan juga ngeditnya ribet. kayaknya yang mesti diedit : .entry-image, .entry-image img, .entry-container
  42. kang ikonnya itu kira kira bisa gak diganti pake font awesome :D
    1. bisa sob.. kenapa engga.. :)
  43. ini saya terapkan di template terbaru saya kang , ijin comott :D
  44. kang sudah saya follow.
    ditunggu y follback nya
    http://cerita-baruku.blogspot.com
  45. 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 ? :(
    1. nama kang ismet nih :D
      - Salam damai -
  46. 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 ?
    1. Maksudnya nulisnya pake format kek dibawh ini
      <info>bla bla bla </info>
  47. Akun facebooknya Kang Ismet apa ya??.. Tolong kasi tau biar bisa tanya gitu :)
  48. Inilah yang saya cari dari dulu, Akhirnya ketemu..
    makasih kang tutorialnya..

    blogwalking yuk!!
    lzmodern.blogspot.com
  49. mantap kang . . . . .terima kasih
  50. 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
  51. keren kang ismet
  52. Terimah kasih kang ^_^
  53. 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"/>
    1. Unknown
      Komentar ini telah dihapus oleh pengarang.
    2. Itu spt permasalahan ane, gan. Tp stlh kode css nya di taruh di atas </style>. Hasilnya sukses seperti contoh (punya kang ismet), gan.
  54. Mkasih Kang, lngsung pasang nch
  55. mantap gan sangat membantu artikelnya
    backlink ya gan
    http://thazbhy.blogspot.com
    Belajar SEO Blog, Pendidikan, Teknologi, Komputer, Elektronika, Otomotif, Kesehatan, Bisnis Online, Adsense, Adwords, Anroid
  56. Sukses kang ane terapin di blog ane |o|
  57. Matur suwun kang
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
More Details
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.