Beranda Blogging Cara Membuat Template Blogger Responsive HTML5, Langsung Praktek

Cara Membuat Template Blogger Responsive HTML5, Langsung Praktek

Oleh
Syafaat
Last updated on

Tutorial Membuat Template Blogger Blogspot – Di tahun yang sudah semakin berkembang seperti sekarang ini, sudahkah kalian para Blogger, terutama yang menggunakan platform Blogspot, mampu membuat template sendiri? Mampu membuat template Blogger adalah sebuah kebanggaan tersendiri, kita dapat berkreasi membuat beraneka macam template sesuai keinginan atau sekedar hanya memodifikasi template yang sudah ada agar sesuai selera.

Template blogger responsive HTML5
Template blogger responsive HTML5

Apabila kamu telah memahami HTML, CSS dan dasar – dasar Javascript, maka membuat template blogger bukan lagi perkara yang sulit dilakukan, karena pada dasarnya template blogger terdiri atas susunan tag HTML dan CSS yang disipi tag – tag XML khusus dari Blogger. Tag – tag Blogger tersebut sifatnya pattern dan tidak bisa dirubah – rubah, sehingga untuk menggunakannya mau tidak mau kita harus menghafalkan fungsinya. Jangan khawatir, tag Blogger bukanlah bahasa pemrograman yang membutuhkan nalar ekstra untuk memahaminya, tag – tag Blogger sangat mudah untuk di kuasai bagi siapa saja.

Sebelum praktek membuat template blogger, baiknya kita ketahui terlebih dulu apa Fungsi tag – tag blogger itu? Seperti halnya pemrograman PHP, jika kamu pernah mendengar tentang komunikasi data MySQL dengan PHP, maka tidak jauh beda dengan tag Blogger yang fungsinya adalah sebagai bahasa komunikasi ke database server Blogger sehingga bisa ditampilkan data – data post di halaman web, menyimpan pengaturan halaman (Page), menyimpan pengaturan widget, menampilkan waktu post, menampilkan author, dsb.

Untuk itu syarat utama bagi siapapun yang ingin mampu membuat template Blogger sendiri adalah menguasai terlebih dahulu HTML, CSS dan dasar – dasar Javascript. Tidak perlu susah payah, kamu hanya perlu memahami dasar – dasarnya saja sehingga lambat laun akan merasa terbiasa.

Agar tidak panjang lebar dan terlalu lama, maka disini saya memilih template HTML5 biasa yang sudah jadi, template ini gratis sebagai bahan belajar dari 1stwebdesigner, disini kita hanya berusaha mengkonversi atau mengubahnya menjadi template yang kompetibel Blogger. Download template dasar tersebut dan lihat demonya.

Cara Membuat Template Blogger

Perhatikan, dibawah ini adalah kode template HTML5 awalnya. Silakan copy dan paste di Notepad++ atau Editor lain favorit kamu. Simpan dengan ekstensi .html:

<!DOCTYPE html>
<html lang=”en”>
<head>
<title> 1WD HTML5 theme </title>
<meta charset=”utf-8″ />
<link rel=”stylesheet” href=”style.css” type=”text/css” />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″> </head>
<body class=”body”>
<header class=”mainHeader”> <img src=”img/logo.gif”>
<nav>
<ul>
<li class=”active”> <a href=”#”> Home </a> </li>
<li> <a href=”#”> Portfolio </a> </li>
<li> <a href=”#”> Blog </a> </li>
<li> <a href=”#”> Contact </a> </li>
</ul>
</nav>
</header>
<div class=”mainContent”>
<div class=”content”>
<article class=”topcontent”>
<header>
<h2> <a href=”#” rel=”bookmark” title=”Permalink to this POST TITLE”> Second article </a> </h2> </header>
<footer>
<p class=”post-info”> This was posted on the 2nd of March 2013 by Christian Vasile </p>
</footer>
<content>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
<p> At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. </p>
</content>
</article>
<article class=”bottomcontent”>
<header>
<h2> <a href=”#” rel=”bookmark” title=”Permalink to this POST TITLE”> First post </a> </h2> </header>
<footer>
<p class=”post-info”> This was posted on the 5th of March 2013 by Christian Vasile </p>
</footer>
<content>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
</content>
</article>
</div>
<aside class=”top-sidebar”>
<article>
<h2> Top Sidebar </h2>
<p> Discover how to use new techniques to achieve an outstanding, cross-browser HTML5. </p>
</article>
</aside>
<aside class=”middle-sidebar”>
<article>
<h2> Middle Sidebar </h2>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
</article>
</aside>
<aside class=”bottom-sidebar”>
<article>
<h2> Bottom Sidebar </h2>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod expedita distinctio. </p>
</article>
</aside>
</div>
<footer class=”mainFooter”>
<p> Copyright © 2013 <a href=”https://www.androphedia.com”> 1stwebdesigner </a> </p>
</footer>
</body>
</html>

HTML5 Mentahannya, sebelum dimodifikasi

FIle style.css-nya kita copy pastekan menjadi satu file html dan dibawah ini adalah template HTML5 di atas yang sudah termodifikasi:

<?xml version=”1.0″ encoding=”UTF-8″ ?>
<!DOCTYPE html>
<html b:version=’2′ class=’v2′ expr:dir=’data:blog.languageDirection’ xmlns=’https://www.w3.org/1999/xhtml’ xmlns:b=’https://www.google.com/2005/gml/b’ xmlns:data=’https://www.google.com/2005/gml/data’ xmlns:expr=’https://www.google.com/2005/gml/expr’>
<head> <title><data:blog.pageTitle/></title> <meta content=’width=device-width,initial scale=1,minimum-scale=1,maximum-scale=1′ name=’viewport’/> <meta content=’text/html;charset=UTF-8′ http-equiv=’Content-Type’/> <meta content=’IE=edge,chrome=1′ http-equiv=’X-UA-Compatible’/> <b:include data=’blog’ name=’all-head-content’/> <b:skin><![CDATA[
/* ———————————————– Blogger Template Style Name: Template Wussh… Designer: Syafaatfm URL: www.facebook.com/syafaatfm ———————————————– / / =========================== ======= Body style ======== =========================== / body { background: #E0E0E0; color: #000305; font-size: 87.5%; / Base font size: 14px / font-family: ‘Trebuchet MS’, Trebuchet, ‘Lucida Sans Unicode’, ‘Lucida Grande’, ‘Lucida Sans’, Arial, sans-serif; line-height: 1.429; margin: 0; padding: 0; text-align: left; } .body { clear: both; margin: 0 auto; width: 70%; } / =========================== ========= Headings ======== =========================== / h2 { font-size: 1.571em } / 22px / h3 { font-size: 1.429em } / 20px / h4 { font-size: 1.286em } / 18px / h5 { font-size: 1.143em } / 16px / h6 { font-size: 1em } / 14px / h2, h3, h4, h5, h6 { font-weight: 400; line-height: 1.1; margin-bottom: .8em; } .Header h1 { padding: -9999px 0; } / =========================== ======= Anchor style ====== =========================== / a { outline: 0; } a img { border: 0px; text-decoration: none; } a:link, a:visited { color: #CF5C3F; padding: 0 1px; text-decoration: none; } a:hover, a:active { background-color: #CF5C3F; color: #fff; text-decoration: none; } / =========================== ===== Main Navigation ===== =========================== / .mainHeader nav { background: #666; font-size: 1.143em; height: 40px; line-height: 30px; margin: 0 auto 30px auto; text-align: center; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } .mainHeader nav ul { list-style: none; margin: 0 auto; } .mainHeader nav ul li { float: left; display: inline; } .mainHeader nav a:link, .mainHeader nav a:visited { color: #fff; display: inline-block; height: 30px; padding: 5px 23px; text-decoration: none; } .mainHeader nav a:hover, .mainHeader nav a:active, .mainHeader nav .active a:link, .mainHeader nav .active a:visited { background: #CF5C3F; color: #fff; text-shadow: none !important; } .mainHeader nav li a { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } .mainHeader img { width: 30%; height: auto; margin: 3% 0; } / =========================== ======= Content Area ====== =========================== / .mainContent { overflow: hidden; line-height: 25px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } .topcontent { background-color: #FFF; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 3% 5%; margin-bottom: 3%; } .bottomcontent { background-color: #FFF; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 3% 5%; } .content { width: 68%; float: left; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } .post-info { font-style: italic; color: #999; font-size: 85%; } / =========================== ======== Sidebar ========== =========================== / .top-sidebar { width: 24%; float: left; margin-left: 2%; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; background-color: #FFF; padding: 2% 3%; margin-bottom: 2%; } .middle-sidebar { width: 24%; float: left; margin-left: 2%; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; background-color: #FFF; padding: 2% 3%; margin-bottom: 2%; } .bottom-sidebar { width: 24%; float: left; margin-left: 2%; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; background-color: #FFF; padding: 2% 3%; } / =========================== ========= Footer ========== =========================== / .mainFooter { width: 100%; float: left; margin-top: 2%; margin-bottom: 2%; padding-left: 0; background-color: #666; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; color: #FFF; } .mainFooter p { width: 91%; margin: 2% auto; } / =========================== ====== Media Queries ====== =========================== */
@media only screen and (min-width: 150px) and (max-width: 780px) {
.body {
clear: both;
margin: 0 auto;
width: 90%;
font-size: 90%;
}
.mainHeader nav {
background: #666;
font-size: 1.143em;
height: 160px;
line-height: 30px;
margin-bottom: 0;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainHeader nav ul {
list-style: none;
margin: 0 auto;
padding-left: 0;
}
.mainHeader nav li {
margin-left: 0 auto;
width: 100%;
}
.mainHeader nav a:link,
.mainHeader nav a:visited {
color: #FFF;
display: block;
height: 30px;
padding: 5px 0;
text-decoration: none;
}
.mainHeader nav a:active,
.mainHeader nav .active a:link,
.mainHeader nav .active a:visited {
background: #CF5C3F;
color: #fff;
text-shadow: none !important;
}
.mainHeader nav li a {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainHeader img {
width: 100%;
height: auto;
margin-bottom: 3%;
}
.mainContent {
overflow: hidden;
line-height: 25px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin-top: 4%;
margin-bottom: 2%;
}
.topcontent {
background-color: #FFF;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 2% 5%;
margin-bottom: 4%;
}
.bottomcontent {
background-color: #FFF;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 2% 5%;
}
.content {
width: 100%;
float: left;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.post-info {
display: none;
}
.top-sidebar {
width: 86%;
float: left;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background-color: #FFF;
margin-top: 4%;
margin-left: 0;
padding: 0 7%;
margin-bottom: 0;
}
.top-sidebar p {
width: 90%;
}
.middle-sidebar {
width: 86%;
float: left;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background-color: #FFF;
margin-top: 4%;
margin-left: 0;
padding: 0 7%;
margin-bottom: 0;
}
.middle-sidebar p {
width: 90%;
}
.bottom-sidebar {
width: 86%;
float: left;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background-color: #FFF;
margin-top: 4%;
margin-left: 0%;
padding: 0 7%;
margin-bottom: 1%;
}
.bottom-sidebar p {
width: 90%;
}
.mainFooter {
width: 100%;
float: left;
margin: 2% 0;
padding-left: 0;
background-color: #666;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
color: #FFF;
}
.mainFooter p {
width: 86%;
margin: 2% auto;
}
}
]]></b:skin> </head> <body class=’body’> <b:section class=’header’ id=’header’ maxwidgets=’1′ showaddelement=’no’> <b:widget id=’Header1′ locked=’true’ title=’Cara Download Premium – Free And Premium Tutorial (Header)’ type=’Header’ /> </b:section> <header class=’mainHeader’> <nav><ul> <li class=’active’><a href=’#’>Home</a></li> <li><a href=’#’>Portfolio</a></li> <li><a href=’#’>Blog</a></li> <li><a href=’#’>Contact</a></li> </ul></nav> </header> <!– content wrapper start –> <div class=’mainContent’> <!– post wrapper start –> <div class=’content’> <article class=’topcontent’> <content> <b:section class=’main’ id=’main’ showaddelement=’no’> <b:widget id=’Blog1′ locked=’true’ title=’Posting Blog’ type=’Blog’ /> </b:section> </content> </article> </div> <!– post wrapper end –> <!– post wrapper start –> <aside class=’top-sidebar’> <article> <b:section class=’sidebar’ id=’sidebar’ preferred=’yes’/> </article> </aside> <!– post wrapper end –> </div> <!– content wrapper end –> <div class=’clear’/> <footer class=’mainFooter’> <p>Copyright © 2013 <a href=’https://www.androphedia.com’>1stwebdesigner</a></p> </footer> </body> </html>

Script HTML5 sudah dikonversi menjadi template valid blogger.

Simpan template di atas dengan ekstensi terserah.xml, kemudian upload ke Blogger dashboard untuk melihat hasilnya.

Kalian tinggal mempelajari perbedaan kedua script HTML diatas, copy dan salin ke Notepad++ agar supaya terlihat lebih jelas. Tidak ada yang diubah, hanya disisipi beberapa tag – tag Blogger untuk menyesuaikan standart template yang diperbolehkan

Penjelasan Fungsi Tag Blogger

Section <b:section class=’header’ id=’header’ maxwidgets=’1′ showaddelement=’no’> 

Dalam membuat template blogger, Section adalah bagian yang berfungsi untuk mengambil data dari database Blogger.

  • class = Fungsi CSS class akan diterapkan pada bagian ini, bisa di modifikasi sesuka hati.
  • id = id css.
  • maxwidgets = Jumlah widget yang diperbolehkan pada section (bagian) ini.
  • showaddelement = yes or no, untuk menampilkan “Tambahkan Gadget” pada halaman Layout.

Widget <b:widget id=’Header1’locked=’true’ title=’Judulnya Blog’ type=’Header’ />

  • id = optional, berfungsi untuk memberi nama pada widget, nama widget harus unik dan tidak boleh sama dengan lainnya.
  • locked = true or false, jika di set true maka widget tidak bisa di hapus pada halaman layout dan begitu pula sebaliknya.
  • title = optional, jika tidak di set maka blogger akan mensetnya secara otomatis.
  • type = Penting, untuk menentukan tipe widget apa yang hendak dibuat, contoh: untuk header maka type widgetnya Header , untuk menampilkan postingan maka type widgetnya Blog , untuk HTML/Javascript maka type widgetnya HTML.

Demikian tutorial singkat cara membuat template blogger sendiri. Semoga bisa dipahami dan bermanfaat buat kalian semua. Mengalami masalah? Silakan tulis komentar agar saya bisa membantunya.

Download file latihannya untuk bahan belajar di rumah. Jika masih ada ragu, jangan sungkan untuk bertanya lewat kolom komentar di bawah.

Password: www.jegulo.com

ARTIKEL TERKAIT