Cara Buat Template Blogger Sendiri

Cara membuat template blogger sesuai keinginan sendiri. Memulai dari yang paling sederhana.


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

BLOGGER: 8
  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

Name

Adsense,2,Blockquote,1,Blogger,17,Blogger Tool,1,Blogspot,1,Contact Form,3,CSS,23,CSS3,1,Domain,1,Font,2,Halaman,3,HTML,5,JavaScript,17,jQuery,6,Komentar,2,Page Loading,1,SEO,1,Share Button,1,Sidebar,1,Tag Kondisional,1,Tema,11,Trik,1,Website,1,WordPress,2,
ltr
item
Jelas in Blog: Cara Buat Template Blogger Sendiri
Cara Buat Template Blogger Sendiri
Cara membuat template blogger sesuai keinginan sendiri. Memulai dari yang paling sederhana.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtyXjVJQHnX9nle7M6prjAEqxLTybdwOw8bkMcN9aHP3BHiyO3GQuP-sye6xBx3m6kI8w83QRQdSjl3dV2-uhjkCWd2Z0zEO41b5ax7kMBUhgY2wGsPFLO8_PwSi6aH5th59T3ZNefjUc/s1600/clone+template+kangismet%25282%2529.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtyXjVJQHnX9nle7M6prjAEqxLTybdwOw8bkMcN9aHP3BHiyO3GQuP-sye6xBx3m6kI8w83QRQdSjl3dV2-uhjkCWd2Z0zEO41b5ax7kMBUhgY2wGsPFLO8_PwSi6aH5th59T3ZNefjUc/s72-c/clone+template+kangismet%25282%2529.png
Jelas in Blog
https://jelasinblog.blogspot.com/2013/12/cara-buat-template-blogger-sendiri.html
https://jelasinblog.blogspot.com/
https://jelasinblog.blogspot.com/
https://jelasinblog.blogspot.com/2013/12/cara-buat-template-blogger-sendiri.html
true
2350744749749285503
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content