Sebelumnya silahkan anda baca dulu Struktur Lengkap Template Blog untuk memahami posisi dan fungsi dari elemen Outer Wrapper ini. Setelah itu baru kembali lagi kesini dan mengikuti tutorial cara membuatnya di bawah ini.
Jika sudah, sekarang silahkan login ke dasbor Blogger anda. Setelah dasbor terbuka, lihat pada panel menu sebelah kiri. Nanti akan tampak tampilan seperti ini:
Lalu kliklah pada bagian Tema, sehingga terbuka tampilan seperti ini:
Lalu sekarang klik pada tombol Edit HTML (sebelumnya jangan lupa, untuk berjaga-jaga backup dulu template blog anda sebelum dilanjutkan).
Nah itulah semua kode yang terdapat pada template blog anda, sesuai template yang anda gunakan sebelumnya. Kode tersebut jumlahnya sangat banyak. Baik kode pemrograman HTML, JavaScript, PHP maupun CSS. Tapi jika anda membuat template sendiri dari awal, maka kode yang akan anda temukan tidak sebanyak itu. Tapi hanya beberapa kode dasar saja seperti template blank.
Jika template anda masih bawaan Blogger, maka tidak perlu lagi anda membuat elemen Header. Karena elemen tersebut sudah ada. Tapi jika anda membuat template sendiri dari awal, maka baru perlu anda melanjutkan panduan ini untuk membuar elemen Outer wrapper pada template. Caranya?
Anda hanya memerlukan sepasang kode sederhana ini:
<div id='outer-wrapper></div>
Yang perlu anda waspadai adalah cara menyisipkannya kedalam template blog anda. Pastikan sepotong tag pembukanya anda letakann tepat dibawah tag <body> pembuka. Dan tag penutupnya tepat diatas tag </body> penutup. Bagan lengkapnya adalah seperti ini:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<HTML>
<head>
<b:skin><![CDATA[]]></b:skin>
<style type='text/css'>
#content-wrapper{
width:1000px;
}
#main {
float: left;
width: 600px;
padding: 20px;
border-left: 1px solid #ddd;
}
</style>
</head>
<body>
<div id='outer-wrapper'>
<div id='content-wrapper'>
<b:section class='main' id='main'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'></b:widget>
</b:section>
</div>
<div class='clear'/>
</div>
</body>
</HTML>
<!DOCTYPE html>
<HTML>
<head>
<b:skin><![CDATA[]]></b:skin>
<style type='text/css'>
#content-wrapper{
width:1000px;
}
#main {
float: left;
width: 600px;
padding: 20px;
border-left: 1px solid #ddd;
}
</style>
</head>
<body>
<div id='outer-wrapper'>
<div id='content-wrapper'>
<b:section class='main' id='main'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'></b:widget>
</b:section>
</div>
<div class='clear'/>
</div>
</body>
</HTML>
Setelah itu untuk pengaturan tampilannya, jangan lupa sisipkan kode CSS dibawah ini tepat setelah kode <style type='text/css'> :
#outer-wrapper{
width:1000px;
margin:0 auto;
font-size:15px;
}
width:1000px;
margin:0 auto;
font-size:15px;
}
Sehingga total kode akhirnya menjadi seperti ini:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<HTML>
<head>
<b:skin><![CDATA[]]></b:skin>
<style type='text/css'>
#outer-wrapper{
width:1000px;
margin:0 auto;
font-size:15px;
}
#content-wrapper{
width:1000px;
}
#main {
float: left;
width: 600px;
padding: 20px;
border-left: 1px solid #ddd;
}
</style>
</head>
<body>
<div id='outer-wrapper'>
<div id='content-wrapper'>
<b:section class='main' id='main'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'></b:widget>
</b:section>
</div>
<div class='clear'/>
</div>
</body>
</HTML>
<!DOCTYPE html>
<HTML>
<head>
<b:skin><![CDATA[]]></b:skin>
<style type='text/css'>
#outer-wrapper{
width:1000px;
margin:0 auto;
font-size:15px;
}
#content-wrapper{
width:1000px;
}
#main {
float: left;
width: 600px;
padding: 20px;
border-left: 1px solid #ddd;
}
</style>
</head>
<body>
<div id='outer-wrapper'>
<div id='content-wrapper'>
<b:section class='main' id='main'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'></b:widget>
</b:section>
</div>
<div class='clear'/>
</div>
</body>
</HTML>
Jika sudah, jangan lupa klik tombol Simpan Tema seperti dibawah ini.
Yang perlu anda ingat, tag outer ini berada pada bagian paling luar di dalam area body template. Jadi kalau ada sudah ada kode lain sebelumnya, maka tag outer, tetap berada di bagian paling luar dari kode tersebut. Tapi tidak keluar dari area body (lihat panduan: Skema HTML template Blogger)
Jika sudah benar penulisan dan posisinya, maka kliklah tombol Simpan template. Nah setelah ini baru anda lanjutkan dengan menambahkan elemen Header, Sidebar dan Footer blog.
mantap bosku..
Balas