Cara buat Kotak Catatan Warna-warni Didalam Postingan - kali ini sahabat Tau Ugi akan membagikan Artikel Bagaimana Cara Buat Kotak Pesan cantik berwarna di dalam postingan blog seperti didalam postingan saya ini.
Saya rasa bagi sobat yang sudah mahir CSS tentunya tidak akan asing dengan postingan kali ini.
tapi walaupun anda sudah mahir,pastinya anda butuh ide untuk memoles entah itu postingan blog ataupun halaman home blog anda yang tentunya di inspirasi oleh orang lain.
Oke udah melihat screenshotnya yang berada diatas belum?? nah,untuk lebih jelasnya, supaya anda juga ngga penasaran maka,sebelum anda melihat CSS yang saya akan berikan ini,silahkan melihat demo yang berada dibawah :
Saya rasa bagi sobat yang sudah mahir CSS tentunya tidak akan asing dengan postingan kali ini.
tapi walaupun anda sudah mahir,pastinya anda butuh ide untuk memoles entah itu postingan blog ataupun halaman home blog anda yang tentunya di inspirasi oleh orang lain.
Oke udah melihat screenshotnya yang berada diatas belum?? nah,untuk lebih jelasnya, supaya anda juga ngga penasaran maka,sebelum anda melihat CSS yang saya akan berikan ini,silahkan melihat demo yang berada dibawah :
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor.
Nah,bagaimana sobat?? tertarik?? jika iya,silahkan simak tutorial pemasangannya yang akan saya berikan ini..
CSS
.AHSalert,.AHSnotice,.AHSsuccess,.AHSinfo,.AHSseries{margin:5px 0;border:2px solid #ddd;padding:.8em .8em .8em 3.6em;text-align:left}.AHSalert{background:#fbe3e4 url(http://2.bp.blogspot.com/-m199bF-51Y8/UD-xoPclOMI/AAAAAAAAA2g/v0Ph5F33LTU/s1600/MBT+alert.png) no-repeat scroll .8em .4em;color:#8a1f11;font:bold 15px Trebuchet MS;border-color:#fbc2c4}.AHSnotice{background:#fff6bf url(http://1.bp.blogspot.com/-axW-b4k19rA/UD-xrlRIRCI/AAAAAAAAA20/WyWG5-lKfJw/s1600/MBT+notice.png) no-repeat scroll .8em .4em;color:#514721;font:bold 15px Trebuchet MS;border-color:#ffd324}.AHSsuccess{background:#CCFEBF url(http://3.bp.blogspot.com/-Ey_f4tLqWaw/UD-xsS60hmI/AAAAAAAAA28/q8aIYetyEwc/s1600/MBT+success.png) no-repeat scroll .8em .4em;color:#264409;font:bold 15px Trebuchet MS;border-color:#c6d880}.AHSinfo{background:#DFE7FE url(http://2.bp.blogspot.com/-jH9ysEu0PdI/UD-xqU42isI/AAAAAAAAA2s/vHFYlXqooEY/s1600/MBT+info.png) no-repeat scroll .8em .4em;color:#205791;font:bold 15px Trebuchet MS;border-color:#92cae4}.AHSseries{background:#9FCFFF url(http://1.bp.blogspot.com/-fB8_ur4gKYQ/UFLkgDuNEdI/AAAAAAAABAM/9Ig3cqe1f40/s1600/MBT+series.png) no-repeat scroll .8em .4em;color:#444;font:bold 15px Trebuchet MS;border-color:#099CEE}.AHSnotice a{color:#514721}.AHSsuccess a{color:#264409}.AHSinfo a{color:#205791}.AHSseries a:link{color:#19109F}.AHSseries a:hover{color:#1950CF}.AHSerror a,.AHSalert a{color:#8a1f11}
HTML
<div class='AHSalert'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor.
</div>
<div class='AHSnotice'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor.
</div>
<div class='AHSsuccess'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor.
</div>
<div class='AHSinfo'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor.
</div>
<div class='AHSseries'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor.
</div>
untuk pengaktifannya silahkan simak langkah-langkah dibawah ini,..
- jika sobat mau memakai kode
alert
maka memakai kode :
<div class='AHSalert'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor.
</div>
- jika sobat mau memakai kode
notice
maka memakai kode :
<div class='AHSnotice'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor.
</div>
begitu seterusnya,..
Kode itu disimpan dimana???
- bila sobat ingin memakai saat loading blog(saat di halaman utama) maka CSS dari widget ini sobat bisa taruh di kode
<b:skin>
atau memakai kode<style>
- bila sobat ingin memakai saat hanya di halaman posting maka CSS dari widget ini sobat bisa taruh di tag kondisional,jadinya seperti apa?? seperti contoh dibawah ini :
<b:if cond='data:blog.pageType == "item"'>
<style>
.AHSalert,.AHSnotice,.AHSsuccess,.AHSinfo,.AHSseries{margin:5px 0;border:2px solid #ddd;padding:.8em .8em .8em 3.6em;text-align:left}.AHSalert{background:#fbe3e4 url(http://2.bp.blogspot.com/-m199bF-51Y8/UD-xoPclOMI/AAAAAAAAA2g/v0Ph5F33LTU/s1600/MBT+alert.png) no-repeat scroll .8em .4em;color:#8a1f11;font:bold 15px Trebuchet MS;border-color:#fbc2c4}.AHSnotice{background:#fff6bf url(http://1.bp.blogspot.com/-axW-b4k19rA/UD-xrlRIRCI/AAAAAAAAA20/WyWG5-lKfJw/s1600/MBT+notice.png) no-repeat scroll .8em .4em;color:#514721;font:bold 15px Trebuchet MS;border-color:#ffd324}.AHSsuccess{background:#CCFEBF url(http://3.bp.blogspot.com/-Ey_f4tLqWaw/UD-xsS60hmI/AAAAAAAAA28/q8aIYetyEwc/s1600/MBT+success.png) no-repeat scroll .8em .4em;color:#264409;font:bold 15px Trebuchet MS;border-color:#c6d880}.AHSinfo{background:#DFE7FE url(http://2.bp.blogspot.com/-jH9ysEu0PdI/UD-xqU42isI/AAAAAAAAA2s/vHFYlXqooEY/s1600/MBT+info.png) no-repeat scroll .8em .4em;color:#205791;font:bold 15px Trebuchet MS;border-color:#92cae4}.AHSseries{background:#9FCFFF url(http://1.bp.blogspot.com/-fB8_ur4gKYQ/UFLkgDuNEdI/AAAAAAAABAM/9Ig3cqe1f40/s1600/MBT+series.png) no-repeat scroll .8em .4em;color:#444;font:bold 15px Trebuchet MS;border-color:#099CEE}.AHSnotice a{color:#514721}.AHSsuccess a{color:#264409}.AHSinfo a{color:#205791}.AHSseries a:link{color:#19109F}.AHSseries a:hover{color:#1950CF}.AHSerror a,.AHSalert a{color:#8a1f11}
</style>
</b:if>
bagaimana sobat?? sudah mengerti?? bila masih ada yang perlu ditanyakan silahkan langsung tanya saja,oke??
Sumber:http://ah-shared.blogspot.com/2013/10/membuat-blok-catatan-tips-alert-note-diblog.html
Label:
Tutorial Blog
Pada
Sabtu, Desember 14, 2013
anda harus menyimpan link blog ini sebagai penciptanya, design by Blog Krizeer kalau tidak saya akan buat postingan tentang PLAGIAT template blog ini, dan saya akan menyuruh teman saya untuk memposting tentang PLAGIAT template. Dan juga anda akan merasakan serangan yang pastinya harga diri anda jadi turun.
BalasHapushttp://yoga-tc.blogspot.com/
bukan sedikit yang samanya sob, tapi semuanya 100% sama :p
HapusMaaf Sob tidak 100% sama. Coba diperhatikan Menu navigasi, Footer saya tidak hilangkan kotak widgetnya, menu searchnya juga beda kok. cuman yang sam itu menu komentar sama bacground postingannya sob..
Hapus