Membuat Blok Catatan, Tips dan Peringatan di Blog
0 views
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.
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>
116 komentar
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
5. Untuk menghapus komentar, geser kursor ke sebelah kanan komentar Anda.
image quote pre code
backlink ya gan
http://thazbhy.blogspot.com
Belajar SEO Blog, Pendidikan, Teknologi, Komputer, Elektronika, Otomotif, Kesehatan, Bisnis Online, Adsense, Adwords, Anroid
cara ngatasinnya gimana ya kang
<a href="http://prntscr.com/2k9bwf"><img src="http://prntscr.com/2k9bwf"/>
Aku praktekin di blog saya yaa kang.. tapi aku edit dikit.. boar sesuai dengan tema blog saya yaa kang... Salam blogger
makasih kang tutorialnya..
blogwalking yuk!!
lzmodern.blogspot.com
Yg mo saya tanyain , itu tuh lebih mending pake yang mana kang ? pke yang pake class ato yang kek saya pake sekarang ?
<info>bla bla bla </info>
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 ? :(
- Salam damai -
ditunggu y follback nya
http://cerita-baruku.blogspot.com
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
muter" dina Gugel pasti UUK..
Ujung-Ujung namah Kaingismet dui Kangismet dui.
wkwkwkwk
Kalau taruh didalam postingan blog gimana kang ?
lain kali kalau ada waktu saya mau coba...
Bermanfaat (y)
gak perlu edit lagi hehehehe... :D
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.
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
Terima kasih
- salam damai -
daengrio.com <--- lalu lintas teratas!
.info, .tips, .warning {}
nnt kalau saya buat blog baru saya akan coba mas.. :)
Salam damai.
Visit http://zetta-zone.blogspot.com/
- salam damai -
daengrio.com <----
ini bisa bikin postingan jadi menarik untuk dibaca
absen dulu kang! :D
~ Blogwalking Yuk ~
Daengrio.com <-----
~ Blogwalking Yuk ~
Daengrio.com <-----
Amankan scriptna kang...heheeheh
~ Blogwalking Yuk ~
Daengrio.com <-----
Sukses terus ya kang.