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>

117 komentar

nyimak kang, ngomong2 untuk lebarnya apakah otomatis ??

Balas

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

Balas

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

Balas

langsung coba ya gan makasih untuk tutorialnya

Balas

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

Balas

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.

Balas

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

Balas

woy keduluan lagi PERTAMAXnya :/
terlalu lambat :D
- salam damai kang ismet! -
~ Blogwalking Yuk ~
Daengrio.com <-----

Balas

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

Balas

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

Balas

Mantap kang mantap .. perlu untuk dipinang nih hehe

Balas

silahkan gan, hati hati yah :)
~ Blogwalking Yuk ~
Daengrio.com <-----

Balas

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

Balas

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

Balas

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

Balas
Komentar ini telah dihapus oleh pengarang.

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

Balas

mampir kang, amankan dulu scriptnya....

Balas

Kang bade naros, script di blog abdi rada ngadat kang. Nembe oge dikantun 1 dinten tos aya masalah. JS Emoticon srg Auto Selection na teu jalan. :(

Dimana masalahna kang ?? :)

Balas

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

Balas
Komentar ini telah dihapus oleh pengarang.

Thankkss kang.. ijin pakai..

Balas

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

Balas

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/

Balas

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

.info, .tips, .warning {}

Balas

betul mas.. saya persingkat saja kodennya :-bd

Balas

biasana aya bentrok kang, cobi posisi JS di ulah alih, biasana kitu pangalaman abdimah :)

Balas

heheh.. peracanten lah akangmah tos mahir

Balas

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

Balas

Coba pake Threaded Comments V3 sob

Balas

hehehe.. rajin banget nongkrong nih si mas ;)

Balas

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

Balas

keyeeeen... sok acak2 deui we :)

Balas

betul sob.. pemanis aja :)

Balas

mangga kang mur... diborgol we lah ;)

Balas

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

Balas

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

Balas

absen siang dulu kang!
- salam damai -

Balas

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

Balas

ayo ditunggu updatenya ;)

Balas

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

Balas

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

Balas

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

Balas

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

Balas

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

Balas

Ambil ah :D, #brebet lumpaaattt

Balas

iya nih.. master nyasar ke sini :)

Balas

sudah saya terapkan kang...

Balas

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

Balas

yes ada senggolan .. nambah referensi buat kode yg lain kang .. super ngintip terus heuheu

Balas

siap kang, urang acak2 deui..

Balas

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.

Balas

Bungkus ah gagancangan bisi ku ucing.....

Balas

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

Balas

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

Balas

heheh benar kang, lagi sibuk didunia nyata, udah ter urus kok.

Balas

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

Balas

cuma permainan CSS aja ko

Balas

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

Balas

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

Balas

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

Balas

Boleh Dicoba Nih Kang Thanks Infonya

Balas

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

Balas

wa alaikum salam.. silahkan sob :-d

Balas

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

Balas

sangat bermanfaat kang ismet, terima kasih ya

Balas

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

Balas

simpan di atas <data:post.body/>

Balas

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

Balas

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

Balas

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

Balas

makasih ya....

aq cba editnya dulu....
dan kenapa thread koment dri blog ini aq coba ke blogku replynya gk brfungsi?

Balas

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

Balas

bisa sob.. kenapa engga.. :)

Balas

Kok tidk berhasil ya Kang :(

Balas

ini saya terapkan di template terbaru saya kang , ijin comott :D

Balas

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

Balas

mantab!
sudah terapin kang juga ^_^

Balas

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 ? :(

Balas

nama kang ismet nih :D
- Salam damai -

Balas

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 ?

Balas

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

Balas

kalau ga umum dengan kode standar ya harus pake class. kecuali yang sudah umum seperti 'blockquote', 'mark' dll

Balas

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

Balas

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

blogwalking yuk!!
lzmodern.blogspot.com

Balas

mantap kang . . . . .terima kasih

Balas

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

Balas

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"/>

Balas
Komentar ini telah dihapus oleh pengarang.

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

Balas

Mkasih Kang, lngsung pasang nch

Balas

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

Balas

Sukses kang ane terapin di blog ane |o|

Balas

Keren Lah .. Saya Ijin Pasang CSS Nya Mas Om :D


http://blogger-newbie10.blogspot.com

Balas

Poskan Komentar


×
Chat