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 :
Untuk memasangnya, silahkan sobat simpan kode ini di atas
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:
untuk tips, kodenya seperti ini :
untuk peringatan atau warning :
Sobat juga bisa gunakan tag
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
pertamax :D
nyimak kang, ngomong2 untuk lebarnya apakah otomatis ??
otomatis sob...
Assalamualaikum Kang Ismet. Semakin hari blog kang Ismet semakin cihuy aja nih :) .
Sukses terus ya kang.
wa'alaikum salam.. biasa aja ko sob.. kemana aja nih baru mampir lagi? :)
Seperti biasa, keeeyyeeenn :-bd -bd
Amankan scriptna kang...heheeheh
heheh.. peracanten lah akangmah tos mahir
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.
kapan2 saya akan buat template lagi mas.. masih lumayan sibuk :)
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
Komentar ini telah dihapus oleh Saeful Rahman sebagai penulis.
Coba pake Threaded Comments V3 sob
mantab kang, dari dulu ini yang saya tunggu :)
~ Blogwalking Yuk ~
Daengrio.com <-----
hehehe.. rajin banget nongkrong nih si mas ;)
- mumpung masih dikit orang :) -
absen dulu kang! :D
~ Blogwalking Yuk ~
Daengrio.com <-----
Mantap kang mantap .. perlu untuk dipinang nih hehe
wkwkw ari CSS mahpasti apal kang, cuman manis nya :P
ini nih yang saya cari2 akhirnya dibagikan juga, makasih banyak kang, mau dicoba dulu nih hehe
silahkan dicoba mas...
Alhamdulillah sudah diterapkan kang, pada kolom komentar sma halaman post. :-d
keyeeeen... sok acak2 deui we :)
wah, akhirnya di bagikan tutorialnya
ini bisa bikin postingan jadi menarik untuk dibaca
betul sob.. pemanis aja :)
Keren kangng,,,, ngaraosan ah saalit, hatur nuhun,,,
seueur ge mangga :)
mampir kang, amankan dulu scriptnya....
mangga kang mur... diborgol we lah ;)
Izin praktek Kang! comment back! http://diverzer.blogspot.com/2013/10/share-button-with-css.html
menuju TKP :-d
Komentar ini telah dihapus oleh Unknown sebagai penulis.
Thankkss kang.. ijin pakai..
silahkan sob... :)
keren kang, absen dulu, artikelnya bermanfaat! :D
- salam damai -
daengrio.com <----
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/
Sebenarnya tanpa menambahkan nama tag HTML juga cukup. Kelas CSS itu sudah spesifik:
.info, .tips, .warning {}
betul mas.. saya persingkat saja kodennya :-bd
ada Kang Taufik nih. :-d
wih keren kang, makasih :0 , lumayan buat mempercantik isi postingan :D , sukses terus kang ^_^
dan semoga di beri kesehatan selalu kang :D
- salam damai -
daengrio.com <--- lalu lintas teratas!
Mantab sekali mas, saya coba terapkan di blog bayi saya yg baru lahir. lumayan buat memanjakan para reader di blog. :D
ayo ditunggu updatenya ;)
Jadi tambah menarik ni kang ismet...tak coba untuk buat semacam ini Kang.
Terima kasih
sama2 sob...
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
wkwkkw... padahal rumput tetangga teh plastik nya :D
Salam Kenal Kang Ismet :D,Oh Iya Mas Kok Emoticon Di Blog Saya Tidak Muncul Yah Setelah Saya Pasang TreadhComment Vinaluv Hack???
salam kenal juga sob... vinaluv sendiri sudah ada emo nya, coba non aktifkan Display_Emo = true menjadi Display_Emo =false takutnya bentrok
Ambil ah :D, #brebet lumpaaattt
betul kang, kdang yg sudah bisa HTML sama CSS, tapi kdang buntu ide. keren tutorialnya
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.
kalau punya saya sih 15, coba cek aja di buku rekening
Bungkus ah gagancangan bisi ku ucing.....
langsung pasang ya kang...
gak perlu edit lagi hehehehe... :D
jreng jreng... ada yang baru nih, baru dua hari ga online mah udah jumpa yang baru, keren kang :-bd
wuihhh lagi sibuk ya?
Waw, mantap triknya mas...
lain kali kalau ada waktu saya mau coba...
Bermanfaat (y)
cuma permainan CSS aja ko
Keren kang !!
Kalau taruh didalam postingan blog gimana kang ?
sama aja, simpan dulu CSSnya di atas ]]></b:skin>, baru kode HTMlnya di postingan
Boleh Dicoba Nih Kang Thanks Infonya
sama sob..
assalamu'alaikum. mantap ni kang, coba dulu ya :)
wa alaikum salam.. silahkan sob :-d
ieu tah anu di teangan teh ayanamah di kang ismet wae...
muter" dina Gugel pasti UUK..
Ujung-Ujung namah Kaingismet dui Kangismet dui.
wkwkwkwk
wkwkkwkw... tong ka gugel atuh kang.. search we di blog abdi
sangat bermanfaat kang ismet, terima kasih ya
sama2 sob..
Saya mau nanya Kang. Gimana caranya agar "Info"nya itu terletak di setiap postingan di bawah judul?
simpan di atas <data:post.body/>
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
lumayan juga ngeditnya ribet. kayaknya yang mesti diedit : .entry-image, .entry-image img, .entry-container
kang ikonnya itu kira kira bisa gak diganti pake font awesome :D
bisa sob.. kenapa engga.. :)
kang sudah saya follow.
ditunggu y follback nya
http://cerita-baruku.blogspot.com
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 ? :(
nama kang ismet nih :D
- Salam damai -
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 ?
Maksudnya nulisnya pake format kek dibawh ini
<info>bla bla bla </info>
Akun facebooknya Kang Ismet apa ya??.. Tolong kasi tau biar bisa tanya gitu :)
Inilah yang saya cari dari dulu, Akhirnya ketemu..
makasih kang tutorialnya..
blogwalking yuk!!
lzmodern.blogspot.com
mantap kang . . . . .terima kasih
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
keren kang ismet
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"/>
Itu spt permasalahan ane, gan. Tp stlh kode css nya di taruh di atas </style>. Hasilnya sukses seperti contoh (punya kang ismet), gan.
Mkasih Kang, lngsung pasang nch
Sukses kang ane terapin di blog ane |o|
Matur suwun kang
kamg kenapa link profil komentar dihilangkan? jadi susah buat blogwalking 😅
hahaha kebanyakan link ga bagus buat SEO