CSS : Using WordPress Background Header to Blogger

Begitu menarik melihat template wordpress milik Andreas Viklund, sayang sekali meilhat tampilan header dan font yang tertata rapi bagaiman gambar utuh itu hanya tersedia di wordpress.
Coba perhatikan teman kita di wordpress yang blognya menggunakan template ini :

http://andress.wordpress.com/
http://backupdelicious.wordpress.com/

Saya ingin sekali mengambil template headernya untuk ditampilkan di blogger.Untuk itu saya coba view source di backupdelicios untuk mencari file CSS nya.
Ini dia :

#container {
color:#303030;
margin:0;
min-width:770px;
padding:0;
text-align:left;
width:100%;

} #sitename {
color:#ffffff;
height:92px;
margin:0 20px 10px;
text-align:left;
}
#sitename h1,#sitename h2 {
font-weight:400;
margin:0;
padding:0;
}
#sitename h1 {
font-size:2.4em;
padding-top:20px;
}
#sitename h1 a {
color: #ffffff;
text-decoration: none;
letter-spacing: 10px;
}
#sitename h2 {
font-size:1.6em;
}

ok, untuk itu saya cari CSS serupa yang ada di blogger saya ;

#header {
width:660px;
margin:0 auto 10px;
border:1px solid #ccc;}
#blog-title {
margin:5px 5px 0;
padding:20px 20px .25em;
border:1px solid #eee;
border-width:1px 1px 0;
font-size:200%;
line-height:1.2em;
font-weight:normal;
color:#666;
text-transform:uppercase;
letter-spacing:.2em;
}
#blog-title a {
color:#666;
text-decoration:none;
}
#blog-title a:hover {
color:#c60;
}

dan hasil dari penggabungan ini yaitu :

#header {
width:660px;
margin:0 auto 10px;
border:1px solid #ccc;
background:#f0f0f0 url(http://backupdelicious.wordpress.com/wp-content/themes/andreas09/images/bodybg-blue.jpg) repeat-x;
}
#blog-title {
color:#ffffff;
height:92px;
margin:0 30px 10px;
text-align:left;
}
#blog-title h1,#blog-title h2 {
font-weight:600;
margin:0;
padding:0;

}
#blog-title h1 {
font-size:2.4em;
padding-top:18px;
}
#blog-title h1 a {
color: #ffffff;
text-decoration: none;
letter-spacing: 10px;
}
#blog-title h2 {
font-size:1.2em;
color: #ffffff;
text-transform:lowercase;
}

sedang dibawah [body] saya ganti menjadi :

dan hasilnya….bisa anda lihat disini 😀

2 pemikiran pada “CSS : Using WordPress Background Header to Blogger

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s