Index Labels

Home » Blogging» Cara Pintas Buat Template Blogger dengan Mudah - Update 2016

Cara Pintas Buat Template Blogger dengan Mudah - Update 2016

. . No comments:
Di tahun 2016 ini, sudahkah anda 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.
Cara membuat template blogger
Logo Blogger (Source: www.google.com)
Apabila anda 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.

Apa sih Fungsi tag – tag blogger itu? Seperti halnya pemrograman PHP, jika Anda 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, Anda hanya perlu memahami dasar – dasarnya saja sehingga lambat laun akan merasa terbiasa.

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

Perhatikan, dibawah ini adalah kode template HTML(5) awalnya:

<!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 &copy; 2013 <a href="http://1stwebdesigner.com"> 1stwebdesigner </a> </p> </footer> </body> </html>

Dan dibawah ini adalah template HTML5 diatas yang sudah termodifikasi:

<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html> <html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://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 &#169; 2013 <a href='http://1stwebdesigner.com'>1stwebdesigner</a></p> </footer> </body> </html>

Simpan template diatas 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 dirubah, hanya disisipi beberapa tag - tag Blogger untuk menyesuaikan standart template yang diperbolehkan

Sedikit penjelasan:

Section <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> 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='Judulnye 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.
Advertisement:

Advertisement:

Baca Juga

Jangan membuat komentar spam, ya?.