Cara Buat Template Blogger Sendiri


Pernahkah Anda berkhayal bisa membuat template sesuai keinginan sendiri atau dengan kata lain membuat sendiri template Blogger Anda? Nah, Saya akan tunjukkan bagaimana membuat sendiri template Blogger. Tetapi saya hanya memberikan prinsip-prinsipnya saja. Hasilnya nanti adalah template yang sangat sederhana. Mari mulai. Coba buka Edit HTML Template Anda lalu hapus semua isinya. Copy dan Paste struktur berikut.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name    : Template Nol
Designer: Lalu Abd.Rahman
URL     : www.laluabdrahman.blogspot.com
----------------------------------------------- */

/* Di sini tempat meletakkan kode CSS */

]]></b:skin>
</head>

<body> 
<!-- ini kode judul blog -->
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='My Blog (Header)' type='Header'/>
</b:section>
<!-- judul blog berakhir di sini-->

<!-- ini kode untuk blog1 (posting blog, pst footer, dan komentar) -->
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
<!-- blog1 berakhir di sini-->

<!-- ini kode Sidebar -->
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
</b:section>
<!-- sidebar berakhir di sini -->

<!-- ini kode Footer -->
<b:section class='footer' id='footer'/>
<!-- footer berakhir di sini -->

</body>
</html>

Terlihat lebih sederhana bukan? Coba Anda simpan template kemudian lihat hasilnya? Terlihat polos bukan? Bentuknyapun tidak terlihat seperti sebuah halaman web pada umumnya. Agar letaknya teratur kita perlu mengaturnya melalui CSS. Agar lebih mudah kita harus memasukkan bagian-bagian blog tersebut ke dalam sebuah div atau elemen. Maksudnya?

Misalnya saya akan memasukkan footer blog ke dalam sebuah div dan div tersebut saya beri nama kaki. Maka saya tulis seperti berikut.

<div id='kaki'> 
<!-- ini kode Footer -->
<b:section class='footer' id='footer'/>
<!-- footer berakhir di sini -->
</div> 

Mudah bukan? Selanjutnya perintahlah div tersebut ke kiri ke kanan, berwarna merah dan lain-lain. Misalnya, #kaki { width: 940px;}. Itu artinya saya memerintahkan div kaki agar lebarnya 940px. Begitulah seterusnya. Masukkan bagian-bagian blog ke dalam div atau dengan kata bungkuslah bagian-bagian blog tersebut.

Hasil akhirnya seperti berikut.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name    : Template Nol
Designer: Lalu Abd.Rahman
URL     : www.laluabdrahman.blogspot.com
----------------------------------------------- */

/* Di sini tempat meltakkan kode CSS */

]]></b:skin>
</head>

<body> 
<div id='bungkus'>

<!-- ini kode judul blog -->
<div id='kepala'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='My Blog (Header)' type='Header'/>
</b:section>
</div>
<!-- judul blog berakhir di sini-->

<!-- ini kode untuk blog1 (posting blog, pst footer, dan komentar) -->
<div id='posting'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
<!-- blog1 berakhir di sini-->

<!-- ini kode Sidebar -->
<div id='bilah-sisi'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>
<!-- sidebar berakhir di sini -->

<!-- ini kode Footer -->
<div id='kaki'>
<b:section class='footer' id='footer'/>
</div>
<!-- footer berakhir di sini -->

</div>
</body>
</html>


Jangan lupa hapus /* Di sini tempat meletakkan kode CSS */ ganti dengan CSS berikut.


/* Bungkus tubuh*/ 
#bungkus {
padding: 0;
width: 980px;
margin:0 auto; 
}

/* Bungkus Kepala */ 
#kepala {
width: 980px;
height: 111px;
position: relative;
margin: 0;
padding: 0;
}
/* Bungkus halaman posting*/
#posting{
float: left;
width: 660px;
}
/* Bungkus Sidebar*/
#bilah-sisi {
float: right;
width: 320px;
}

/* Bungkus Kaki */
#kaki { width: 940px; margin: 0 10px; padding: 20px 10px;}

/* Clearing element */
.clear { position: relative; clear: both; height: 0; line-height: 0; margin: 0; padding: 0; border: 0; font-size: 1px; }

Simpan Template Anda lalu lihat hasilnya. Template Anda sudah jadi. Template yang sangat-sangat sederhana. Tetapi sudah terlihat bentuknya. Selanjutnya Anda dapat menambahkan code CSS lainnya, menambahkan border, warna latar belakang, gaya huruf, dan sebagainya atau bahkan memanfaatkan JavaScript untuk tampilan yang lebih kompleks.

Comments

  1. Wah,,pas banget buat aq yg pemula ;)

    ReplyDelete
  2. setelah baca ini kayaknya jadi bikin template

    ReplyDelete
  3. abah mau ini buat template.. tp ini kerangka'y masih ribeut abah mau buatnya..tolong atuh kang tambahin spya langsung beruba template spy utak atik belajarnya langsung bisa.
    ditunggu ku abah nyah kang.... templatenya...

    ReplyDelete
    Replies
    1. Abah, Hoyong kanggo tutorial na, nanging henteu sempet :)

      Delete
    2. tos sempet panginteun ayeuna mah.. di antos atuh kang rahman ..
      1bulan bookmark teu dihapus kumargi nuju ngantosan...

      Delete
  4. Abdi bade nyobian praktek ngadamel template bloggerna ah, mugia tiasa... aamiin...
    salam kenal...

    ReplyDelete

Post a Comment

Popular posts from this blog

Perbedaan JavaScript dan jQuery Beserta Contoh

Cara Menggunakan :before dan :after

Tutorial Sevida v2.4.2 - Responsive Magazine Blogger Template