Cara Membuat Template Blogspot: Layout CSS Part1

<div style='background-color: none transparent;'></div>
Halo sobat,

Sorry nih hari ini agak maleman postingnya, pada tutorial kali ini saya akan membahas tentang "Cara Membuat Template Blogspot: Layout CSS Part1". Jika anda ingin membuat template blogspot pasti yang anda butuhkan pertama kali adalah layout css.

Nah saya udah buat video tutorialnya untuk anda. Isi dari video tutorial ini adalah untuk membuat outerwrapper, header, sidebar, menu dan posting.
Video tutorialnya adalah sebagai berikut:






Lanjutannya:


Untuk sourcenya anda bisa mengambilnya di bawah ini:


<!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>Untitled Document</title>
<style type="text/css">
<!--
body {
    background-color: #FFFFFF;
    margin: 0px;
}
#outer-wrapper {
    border-right-width: 2px;
    border-left-width: 2px;
    border-right-style: solid;
    border-left-style: solid;
    border-right-color: #999999;
    border-left-color: #666666;
    height: 1000px;
    width: 900px;
    margin-right: auto;
    margin-left: auto;
}
#outer-wrapper #header {
    height: 100px;
    width: auto;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: #333333;
}
#outer-wrapper #header #logo {
    float: left;
    height: 80px;
    width: 300px;
    border: 1px solid #666666;
    margin: 10px;
}
#outer-wrapper #header #banner {
    float: right;
    height: 80px;
    width: 500px;
    border: 1px solid #666666;
    margin: 10px;
}
#outer-wrapper #menu {
    height: 35px;
    width: auto;
    background-color: #CCCCCC;
}
#outer-wrapper #content-wrapper {
    height: 600px;
    width: 850px;
    margin-right: auto;
    margin-left: auto;
    border: 1px solid #999999;
    margin-top: 10px;
}
#outer-wrapper #content-wrapper #posting {
    float: left;
    height: 600px;
    width: 600px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #999999;
}
#outer-wrapper #content-wrapper #sidebar {
    float: right;
    height: 600px;
    width: 240px;
}
-->
</style>
</head>

<body>
<div id="outer-wrapper">
  <div id="header">
    <div id="logo">Content for  id "logo" Goes Here</div>
    <div id="banner">Content for  id "banner" Goes Here</div>
  </div>
  <div id="menu">Content for  id "menu" Goes Here</div>
  <div id="content-wrapper">
    <div id="posting">Content for  id "posting" Goes Here</div>
    <div id="sidebar">Content for  id "sidebar" Goes Here</div>
  </div>
</div>
</body>
</html>
Semoga tutorial yang saya berikan bermanfaat, Besok kita buat sidebar bawah dan juga menu. Jangan sampai ketinggalan ya.

11 komentar:

Blogger Boja mengatakan...

Makasih Mas ilmu yang sangat bermanfaat...

Cheat Game4u mengatakan...

Teruskan gan.. saya akan mengikuti

Habil DS mengatakan...

mantap..!! ane ikutin teruss..!!

Onho mengatakan...

Just say " I LIKE IT "

Viyan Pradita mengatakan...

Ikutan nyimak sambil praktek :D
Lanjutkan Masbos \m/

gembel mengatakan...

makasi mas

ari bojes mengatakan...

izin comot gan... mantap...!!! maju terus..

Mars Seven.Blogspot.com mengatakan...

sukron yo mas bro atas ilmu ne..................

rudi mengatakan...

like..sip mantab..ini yang aku cari..makasih boss

Yan Chriestiano mengatakan...

walau gagal tapi sudah membaca

doble boyler mengatakan...

wah, ini baru yang namanya ilmu ga pelit,,hehehe
terimakasih banyak, saya akan giat belajar nih, kalau begini caranya,,hehe

Posting Komentar

Kirimkan komentar yang berbobot untuk membangun kredibilitas anda, Komentar dengan link sampah/spam akan saya hapus.