Contoh Kode CSS untuk Background Header Blogger Template Designer
Anda bisa mencoba contoh ini menggunakan Dreamwaver, Adobe Dreamweaver CS5 dan CS5.5 atau memasang di blog. Apabila digunakan untuk blog, gunakan kode CSS yang telah diberi tanda. Anda dapat mengatur ukuran background image dengan merubah nilai pada properti CSS background-size:808px 160px;, dimana 808px adalah lebar background image sedang 160px merupakan tinggi background image.DEMO Background Header dg Kode CSS
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Creating a Background Image in Blog Header with CSS Code</title>
<style type="text/css">
#header-inner{
margin:50px auto;
padding:4px;
width:808px;
height:160px;
border:2px solid #000;
background:#999;
}
/* Kode CSS yang diperlukan untuk membuat background header Blogger Template Designer - START */
#header-inner{
position:relative;
background:#666 url('http://gubhugreyot-image-post.googlecode.com/files/gubhugreyot_bridge-900-200.jpg') center no-repeat;
background-size:808px 160px;
}
#header-inner:before{
position:absolute;
display:block;
width:58px;
height:50px;
left:60px; /* code by: http://gubhugreyot.blogspot.com */
top:0px;
content:url('https://lh5.googleusercontent.com/-WVnUd2BO_UQ/TzvcQeXo4XI/AAAAAAAAAL8/av3xRaGcXjw/h120/gubhugreyot-animasi-pesawat-terbang-02.gif');
}
#header-inner:after{
position:absolute;
display:block;
font-size:27px;
color:red; /* code by: http://gubhugreyot.blogdetik.com */
text-shadow:1px 1px 1px #000;
right:20px;
bottom:10px;
content:"http://gubhugreyot.blogspot.com";
}
/* Kode CSS yang diperlukan untuk membuat background header Blogger Template Designer - END */
</style>
</head>
<body>
<div id="header-inner"></div>
</body>
</html>
aduh saya binggung dech, tolong beri penjelasan yg lebih detail donk?
ReplyDeletemy blog : tonisukses.blogspot.com
This comment has been removed by the author.
ReplyDeleteMas gimana tuh bikin awan di header
ReplyDeleteSama efek 3D comentnya
marulifamily.blogspot.com
Bikin awannya Berjalan gimana tu kang
ReplyDeleteaku bingung ...semuanya bagus ..bagus ..blog anda hebat , menarik ...aku suka ?
ReplyDeleteterima kasih gan, sangat bermanfaat buat nyubi seperti saya.
ReplyDeletenumpang copas kode css headernya gan. haturnuhun
my blog: letsgodesign.blogspot.com
haduh newbis ...pusing yah...tapi udah lumayan pusing juga dari pada ga pusing sama sekali
ReplyDelete