") no-repeat 250px 50px; width:700px; margin:0 auto; text-align:left; font:normal normal 100% Verdana,Arial,Sans-Serif; } #header-wrapper { display: none; } #main-wrapper { width:450px; float:right; padding:100px 0 20px; font-size:85%; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } #main { background:url("http://www.blogblog.com/dots_dark/bg_minidots2.gif") -100px -100px; padding:20px 10px 15px; } #sidebar-wrapper { width:200px; float:left; font-size:85%; padding-bottom:20px; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } #sidebar { background:url("http://www.blogblog.com/dots_dark/bg_minidots2.gif") 150px -50px; padding:40px 10px 15px; width:200px; width/* */:/**/180px; width: /**/180px; } /* Title & Description ----------------------------------------------- */ .Header h1 { margin:0 0 .5em; line-height: 1.4em; font: normal bold 250% Helvetica,Arial,Sans-serif; color: #88dddd; } .Header h1 a { color:#88dddd; text-decoration:none; } .Header .description { margin:0 0 1.75em; color: #99cc77; font: normal normal 100% Helvetica, Arial, Sans-serif; } /* Links ----------------------------------------------- */ a:link { color:#ddaa77; } a:visited { color:#779999; } a:hover { color:#779999; } a img { border-width:0; } /* Posts ----------------------------------------------- */ h2.date-header { margin:0 0 .75em; padding-bottom:.35em; border-bottom:1px dotted #556677; text-transform: lowercase; letter-spacing:.3em; color: #77bbcc; font: normal bold 100% Verdana, Sans-serif; } .post { margin:0 0 2.5em; } .post h3 { margin:.25em 0; line-height: 1.4em; font: normal bold 95% Verdana,Sans-serif; font-size: 130%; font-weight: bold; color:#99cc77; background:url("http://www.blogblog.com/dots_dark/bg_post_title_left.gif") no-repeat left .25em; padding-top:0; padding-right:0; padding-bottom:1px; padding-left:45px; } .post h3 a { text-decoration:none; color: #99cc77; } .post h3 a:hover { color: #aabbcc; } .post p { margin:0 0 .75em; line-height:1.6em; } .post-footer { margin:0; } .uncustomized-post-template .post-footer { text-align: right; } .uncustomized-post-template .post-author, .uncustomized-post-template .post-timestamp { display: block; float: left; margin-right: 4px; text-align: left; } .post-author, .post-timestamp { color:#99cc77; } a.comment-link { /* IE5.0/Win doesn't apply padding to inline elements, so we hide these two declarations from it */ background/* */:/**/url("http://www.blogblog.com/dots_dark/icon_comment_left.gif") no-repeat left .25em; padding-left:15px; } html>body a.comment-link { /* Respecified, for IE5/Mac's benefit */ background:url("http://www.blogblog.com/dots_dark/icon_comment_left.gif") no-repeat left .25em; padding-left:15px; } .post img { margin-top:0; margin-right:0; margin-bottom:5px; margin-left:0; padding:4px; border:1px solid #556677; } .feed-links { clear: both; line-height: 2.5em; } #blog-pager-newer-link { float: left; } #blog-pager-older-link { float: right; } #blog-pager { text-align: center; } /* Comments ----------------------------------------------- */ #comments { margin:0; } #comments h4 { margin:0 0 10px; border-top:1px dotted #556677; padding-top:.5em; line-height: 1.4em; font: bold 110% Georgia,Serif; color:#9c7; } #comments-block { line-height:1.6em; } .comment-author { background:url("http://www.blogblog.com/dots_dark/icon_comment_left.gif") no-repeat 2px .35em; margin:.5em 0 0; padding-top:0; padding-right:0; padding-bottom:0; padding-left:20px; font-weight:bold; } .comment-body { margin:0; padding-top:0; padding-right:0; padding-bottom:0; padding-left:20px; } .comment-body p { margin:0 0 .5em; } .comment-footer { margin:0 0 .5em; padding-top:0; padding-right:0; padding-bottom:.75em; padding-left:20px; color:#996; } .comment-footer a:link { color:#996; } .deleted-comment { font-style:italic; color:gray; } /* More Sidebar Content ----------------------------------------------- */ .sidebar h2 { margin:2em 0 .75em; padding-bottom:.35em; border-bottom:1px dotted #556677; line-height: 1.4em; font: normal bold 95% Verdana,Sans-serif; text-transform:lowercase; color:#77bbcc; } .sidebar p { margin:0 0 .75em; line-height:1.6em; } .sidebar ul { list-style:none; margin:.5em 0; padding:0 0px; } .sidebar .widget { margin: .5em 0 1em; padding: 0 0px; line-height: 1.5em; } .main .widget { padding-bottom: 1em; } .sidebar ul li { background:url("http://www.blogblog.com/dots_dark/bullet.gif") no-repeat 3px .45em; margin:0; padding-top:0; padding-right:0; padding-bottom:5px; padding-left:15px; } .sidebar p { margin:0 0 .6em; } /* Profile ----------------------------------------------- */ .profile-datablock { margin: 0 0 1em; } .profile-img { float: left; margin-top: 0; margin-right: 8px; margin-bottom: 5px; margin-left: 0; border: 4px solid #345; } .profile-data { margin: 0; line-height: 1.5em; } .profile-textblock { clear: left; margin-left: 0; } /* Footer ----------------------------------------------- */ #footer { clear:both; padding:15px 0 0; } #footer p { margin:0; } /* Page structure tweaks for layout editor wireframe */ body#layout #sidebar, body#layout #main, body#layout #main-wrapper, body#layout #outer-wrapper, body#layout #sidebar-wrapper { padding: 0; } body#layout #sidebar-wrapper, body#layout #sidebar { padding: 0; width: 240px; } -->

Sabtu, 29 Maret 2008


Untuk membuat alert message seperti di atas caranya sangatlah mudah,cuman dua langkah untuk melakukannya.

1. Simpan kode di bawah ini, di dalam kode Css template kita. gt;.

.alert { background: #fff6bf url(http://i120.photobucket.com/albums/o190/jaloewig/jaloe/alert%20message/information.png) center no-repeat;
background-position: 15px 50%; /* x-pos y-pos */
text-align: left;
padding: 5px 20px 5px 45px;
border-top: 2px solid #ffd324;
border-bottom: 2px solid #ffd324;
}

contohnya saya menyimpan kode alert message tersebut di atas kode ini.

/* Header ----------------------------------------------- */
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

kemudian kita tekan SIMPAN TEMPLATE. Beres sudah pekerjaan kita. Untuk mencoba apakah tulisan bergaya Alert Message ini berjalan. buat postingan, kemudian dalam editor blogspot kita menulisnnya ke dalam bentuk Html jadi tekan tulisan EdIT HTML. Tulisan-nya seperti ini.

DI SINILAH KITA MENULISKAN KATA-KATA
MUTIARA ATAU PESAN

Kalau kita mau merubah warna background atau icon-nya tinggal ganti saja kode yang bertuliskan warna putih berikut ini :
Background : #FFF6BF Url (http://alamatgambarkamu/);
Sedangkan untuk menganti warna border :
Border-top: 2px Solid #ffd324;

Tidak ada komentar: