tutorial Membuat Template Blogger Blogspot \u2013 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.<\/p>\n\n\n\n
Template blogger responsive HTML5<\/p>\n\n\n\n
Apabila kamu telah memahami HTML, CSS dan dasar \u2013 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 \u2013 tag XML khusus dari Blogger. Tag \u2013 tag Blogger tersebut sifatnya pattern dan tidak bisa dirubah \u2013 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 \u2013 tag Blogger sangat mudah untuk di kuasai bagi siapa saja.<\/p>\n\n\n\n
Sebelum praktek membuat template blogger, baiknya kita ketahui terlebih dulu apa Fungsi tag \u2013 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 \u2013 data post di halaman web, menyimpan pengaturan halaman (Page), menyimpan pengaturan widget, menampilkan waktu post, menampilkan author, dsb.<\/p>\n\n\n\n
Untuk itu syarat utama bagi siapapun yang ingin mampu membuat template Blogger sendiri adalah menguasai terlebih dahulu HTML, CSS dan dasar \u2013 dasar Javascript. Tidak perlu susah payah, kamu hanya perlu memahami dasar \u2013 dasarnya saja sehingga lambat laun akan merasa terbiasa.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
Cara Membuat Template Blogger<\/p>\n\n\n\n
Perhatikan, dibawah ini adalah kode template HTML5 awalnya. Silakan copy dan paste di Notepad++ atau Editor lain favorit kamu. Simpan dengan ekstensi .html:<\/p>\n\n\n\n
<!DOCTYPE html><\/p>\n\n\n\n
<html lang=\u201den\u201d><\/p>\n\n\n\n
<head><\/p>\n\n\n\n
<title> 1WD HTML5 theme <\/title><\/p>\n\n\n\n
<meta charset=\u201dutf-8\u2033 \/><\/p>\n\n\n\n
<link rel=\u201dstylesheet\u201d href=\u201dstyle.css\u201d type=\u201dtext\/css\u201d \/><\/p>\n\n\n\n
<meta name=\u201dviewport\u201d content=\u201dwidth=device-width, initial-scale=1.0\u2033> <\/head><\/p>\n\n\n\n
<body class=\u201dbody\u201d><\/p>\n\n\n\n
<header class=\u201dmainHeader\u201d> <img src=\u201dimg\/logo.gif\u201d><\/p>\n\n\n\n
<nav><\/p>\n\n\n\n
<ul><\/p>\n\n\n\n
<li class=\u201dactive\u201d> <a href=\u201d#\u201d> Home <\/a> <\/li><\/p>\n\n\n\n
<li> <a href=\u201d#\u201d> Portfolio <\/a> <\/li><\/p>\n\n\n\n
<li> <a href=\u201d#\u201d> Blog <\/a> <\/li><\/p>\n\n\n\n
<li> <a href=\u201d#\u201d> Contact <\/a> <\/li><\/p>\n\n\n\n
<\/ul><\/p>\n\n\n\n
<\/nav><\/p>\n\n\n\n
<\/header><\/p>\n\n\n\n
<div class=\u201dmainContent\u201d><\/p>\n\n\n\n
<div class=\u201dcontent\u201d><\/p>\n\n\n\n
<article class=\u201dtopcontent\u201d><\/p>\n\n\n\n
<header><\/p>\n\n\n\n
<h2> <a href=\u201d#\u201d rel=\u201dbookmark\u201d title=\u201dPermalink to this POST TITLE\u201d> Second article <\/a> <\/h2> <\/header><\/p>\n\n\n\n
<footer><\/p>\n\n\n\n
<p class=\u201dpost-info\u201d> This was posted on the 2nd of March 2013 by Christian Vasile <\/p><\/p>\n\n\n\n
<\/footer><\/p>\n\n\n\n
<content><\/p>\n\n\n\n
<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>\n\n\n\n
<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><\/p>\n\n\n\n
<\/content><\/p>\n\n\n\n
<\/article><\/p>\n\n\n\n
<article class=\u201dbottomcontent\u201d><\/p>\n\n\n\n
<header><\/p>\n\n\n\n
<h2> <a href=\u201d#\u201d rel=\u201dbookmark\u201d title=\u201dPermalink to this POST TITLE\u201d> First post <\/a> <\/h2> <\/header><\/p>\n\n\n\n
<footer><\/p>\n\n\n\n
<p class=\u201dpost-info\u201d> This was posted on the 5th of March 2013 by Christian Vasile <\/p><\/p>\n\n\n\n
<\/footer><\/p>\n\n\n\n
<content><\/p>\n\n\n\n
<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><\/p>\n\n\n\n
<\/content><\/p>\n\n\n\n
<\/article><\/p>\n\n\n\n
<\/div><\/p>\n\n\n\n
<aside class=\u201dtop-sidebar\u201d><\/p>\n\n\n\n
<article><\/p>\n\n\n\n
<h2> Top Sidebar <\/h2><\/p>\n\n\n\n
<p> Discover how to use new techniques to achieve an outstanding, cross-browser HTML5. <\/p><\/p>\n\n\n\n
<\/article><\/p>\n\n\n\n
<\/aside><\/p>\n\n\n\n
<aside class=\u201dmiddle-sidebar\u201d><\/p>\n\n\n\n
<article><\/p>\n\n\n\n
<h2> Middle Sidebar <\/h2><\/p>\n\n\n\n
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <\/p><\/p>\n\n\n\n
<\/article><\/p>\n\n\n\n
<\/aside><\/p>\n\n\n\n
<aside class=\u201dbottom-sidebar\u201d><\/p>\n\n\n\n
<article><\/p>\n\n\n\n
<h2> Bottom Sidebar <\/h2><\/p>\n\n\n\n
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod expedita distinctio. <\/p><\/p>\n\n\n\n
<\/article><\/p>\n\n\n\n
<\/aside><\/p>\n\n\n\n
<\/div><\/p>\n\n\n\n
<footer class=\u201dmainFooter\u201d><\/p>\n\n\n\n
<p> Copyright \u00a9 2013 <a href=\u201dhttps:\/\/www.androphedia.com\u201d> 1stwebdesigner <\/a> <\/p><\/p>\n\n\n\n
<\/footer><\/p>\n\n\n\n
<\/body><\/p>\n\n\n\n
<\/html><\/p>\n\n\n\n
HTML5 Mentahannya, sebelum dimodifikasi<\/p>\n\n\n\n
FIle style.css-nya kita copy pastekan menjadi satu file html dan dibawah ini adalah template HTML5 di atas yang sudah termodifikasi:<\/p>\n\n\n\n
<?xml version=\u201d1.0\u2033 encoding=\u201dUTF-8\u2033 ?><\/p>\n\n\n\n
<!DOCTYPE html><\/p>\n\n\n\n
<html b:version=\u20192\u2032 class=\u2019v2\u2032 expr:dir=\u2019data:blog.languageDirection\u2019 xmlns=\u2019https:\/\/www.w3.org\/1999\/xhtml\u2019 xmlns:b=\u2019https:\/\/www.google.com\/2005\/gml\/b\u2019 xmlns:data=\u2019https:\/\/www.google.com\/2005\/gml\/data\u2019 xmlns:expr=\u2019https:\/\/www.google.com\/2005\/gml\/expr\u2019><\/p>\n\n\n\n
<head> <title><data:blog.pageTitle\/><\/title> <meta content=\u2019width=device-width,initial scale=1,minimum-scale=1,maximum-scale=1\u2032 name=\u2019viewport\u2019\/> <meta content=\u2019text\/html;charset=UTF-8\u2032 http-equiv=\u2019Content-Type\u2019\/> <meta content=\u2019IE=edge,chrome=1\u2032 http-equiv=\u2019X-UA-Compatible\u2019\/> <b:include data=\u2019blog\u2019 name=\u2019all-head-content\u2019\/> <b:skin><![CDATA[<\/p>\n\n\n\n
\/* \u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2013 Blogger Template Style Name: Template Wussh\u2026 Designer: Syafaatfm URL: www.facebook.com\/syafaatfm \u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2013 \/ \/ =========================== ======= Body style ======== =========================== \/ body { background: #E0E0E0; color: #000305; font-size: 87.5%; \/ Base font size: 14px \/ font-family: \u2018Trebuchet MS\u2019, Trebuchet, \u2018Lucida Sans Unicode\u2019, \u2018Lucida Grande\u2019, \u2018Lucida Sans\u2019, 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 ====== =========================== *\/<\/p>\n\n\n\n
@media only screen and (min-width: 150px) and (max-width: 780px) {<\/p>\n\n\n\n
.body {<\/p>\n\n\n\n
clear: both;<\/p>\n\n\n\n
margin: 0 auto;<\/p>\n\n\n\n
width: 90%;<\/p>\n\n\n\n
font-size: 90%;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
.mainHeader nav {<\/p>\n\n\n\n
background: #666;<\/p>\n\n\n\n
font-size: 1.143em;<\/p>\n\n\n\n
height: 160px;<\/p>\n\n\n\n
line-height: 30px;<\/p>\n\n\n\n
margin-bottom: 0;<\/p>\n\n\n\n
border-radius: 5px;<\/p>\n\n\n\n
-moz-border-radius: 5px;<\/p>\n\n\n\n
-webkit-border-radius: 5px;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
.mainHeader nav ul {<\/p>\n\n\n\n
list-style: none;<\/p>\n\n\n\n
margin: 0 auto;<\/p>\n\n\n\n
padding-left: 0;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
.mainHeader nav li {<\/p>\n\n\n\n
margin-left: 0 auto;<\/p>\n\n\n\n
width: 100%;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
.mainHeader nav a:link,<\/p>\n\n\n\n
.mainHeader nav a:visited {<\/p>\n\n\n\n
color: #FFF;<\/p>\n\n\n\n
display: block;<\/p>\n\n\n\n
height: 30px;<\/p>\n\n\n\n
padding: 5px 0;<\/p>\n\n\n\n
text-decoration: none;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
.mainHeader nav a:active,<\/p>\n\n\n\n
.mainHeader nav .active a:link,<\/p>\n\n\n\n
.mainHeader nav .active a:visited {<\/p>\n\n\n\n
background: #CF5C3F;<\/p>\n\n\n\n
color: #fff;<\/p>\n\n\n\n
text-shadow: none !important;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
.mainHeader nav li a {<\/p>\n\n\n\n
border-radius: 5px;<\/p>\n\n\n\n
-moz-border-radius: 5px;<\/p>\n\n\n\n
-webkit-border-radius: 5px;<\/p>\n\n\n\n
border-radius: 5px;<\/p>\n\n\n\n
-moz-border-radius: 5px;<\/p>\n\n\n\n
-webkit-border-radius: 5px;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
.mainHeader img {<\/p>\n\n\n\n
width: 100%;<\/p>\n\n\n\n
height: auto;<\/p>\n\n\n\n
margin-bottom: 3%;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
.mainContent {<\/p>\n\n\n\n
overflow: hidden;<\/p>\n\n\n\n
line-height: 25px;<\/p>\n\n\n\n
border-radius: 5px;<\/p>\n\n\n\n
-moz-border-radius: 5px;<\/p>\n\n\n\n
-webkit-border-radius: 5px;<\/p>\n\n\n\n
margin-top: 4%;<\/p>\n\n\n\n
margin-bottom: 2%;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
.topcontent {<\/p>\n\n\n\n
background-color: #FFF;<\/p>\n\n\n\n
border-radius: 5px;<\/p>\n\n\n\n
-moz-border-radius: 5px;<\/p>\n\n\n\n
-webkit-border-radius: 5px;<\/p>\n\n\n\n
padding: 2% 5%;<\/p>\n\n\n\n
margin-bottom: 4%;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
.bottomcontent {<\/p>\n\n\n\n
background-color: #FFF;<\/p>\n\n\n\n
border-radius: 5px;<\/p>\n\n\n\n
-moz-border-radius: 5px;<\/p>\n\n\n\n
-webkit-border-radius: 5px;<\/p>\n\n\n\n
padding: 2% 5%;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
.content {<\/p>\n\n\n\n
width: 100%;<\/p>\n\n\n\n
float: left;<\/p>\n\n\n\n
border-radius: 5px;<\/p>\n\n\n\n
-moz-border-radius: 5px;<\/p>\n\n\n\n
-webkit-border-radius: 5px;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
.post-info {<\/p>\n\n\n\n
display: none;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
.top-sidebar {<\/p>\n\n\n\n
width: 86%;<\/p>\n\n\n\n
float: left;<\/p>\n\n\n\n
border-radius: 5px;<\/p>\n\n\n\n
-moz-border-radius: 5px;<\/p>\n\n\n\n
-webkit-border-radius: 5px;<\/p>\n\n\n\n
background-color: #FFF;<\/p>\n\n\n\n
margin-top: 4%;<\/p>\n\n\n\n
margin-left: 0;<\/p>\n\n\n\n
padding: 0 7%;<\/p>\n\n\n\n
margin-bottom: 0;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
.top-sidebar p {<\/p>\n\n\n\n
width: 90%;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
.middle-sidebar {<\/p>\n\n\n\n
width: 86%;<\/p>\n\n\n\n
float: left;<\/p>\n\n\n\n
border-radius: 5px;<\/p>\n\n\n\n
-moz-border-radius: 5px;<\/p>\n\n\n\n
-webkit-border-radius: 5px;<\/p>\n\n\n\n
background-color: #FFF;<\/p>\n\n\n\n
margin-top: 4%;<\/p>\n\n\n\n
margin-left: 0;<\/p>\n\n\n\n
padding: 0 7%;<\/p>\n\n\n\n
margin-bottom: 0;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
.middle-sidebar p {<\/p>\n\n\n\n
width: 90%;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
.bottom-sidebar {<\/p>\n\n\n\n
width: 86%;<\/p>\n\n\n\n
float: left;<\/p>\n\n\n\n
border-radius: 5px;<\/p>\n\n\n\n
-moz-border-radius: 5px;<\/p>\n\n\n\n
-webkit-border-radius: 5px;<\/p>\n\n\n\n
background-color: #FFF;<\/p>\n\n\n\n
margin-top: 4%;<\/p>\n\n\n\n
margin-left: 0%;<\/p>\n\n\n\n
padding: 0 7%;<\/p>\n\n\n\n
margin-bottom: 1%;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
.bottom-sidebar p {<\/p>\n\n\n\n
width: 90%;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
.mainFooter {<\/p>\n\n\n\n
width: 100%;<\/p>\n\n\n\n
float: left;<\/p>\n\n\n\n
margin: 2% 0;<\/p>\n\n\n\n
padding-left: 0;<\/p>\n\n\n\n
background-color: #666;<\/p>\n\n\n\n
border-radius: 5px;<\/p>\n\n\n\n
-moz-border-radius: 5px;<\/p>\n\n\n\n
-webkit-border-radius: 5px;<\/p>\n\n\n\n
color: #FFF;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
.mainFooter p {<\/p>\n\n\n\n
width: 86%;<\/p>\n\n\n\n
margin: 2% auto;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
}<\/p>\n\n\n\n
]]><\/b:skin> <\/head> <body class=\u2019body\u2019> <b:section class=\u2019header\u2019 id=\u2019header\u2019 maxwidgets=\u20191\u2032 showaddelement=\u2019no\u2019> <b:widget id=\u2019Header1\u2032 locked=\u2019true\u2019 title=\u2019Cara Download Premium \u2013 Free And Premium Tutorial (Header)\u2019 type=\u2019Header\u2019 \/> <\/b:section> <header class=\u2019mainHeader\u2019> <nav><ul> <li class=\u2019active\u2019><a href=\u2019#\u2019>Home<\/a><\/li> <li><a href=\u2019#\u2019>Portfolio<\/a><\/li> <li><a href=\u2019#\u2019>Blog<\/a><\/li> <li><a href=\u2019#\u2019>Contact<\/a><\/li> <\/ul><\/nav> <\/header> <!\u2013 content wrapper start \u2013> <div class=\u2019mainContent\u2019> <!\u2013 post wrapper start \u2013> <div class=\u2019content\u2019> <article class=\u2019topcontent\u2019> <content> <b:section class=\u2019main\u2019 id=\u2019main\u2019 showaddelement=\u2019no\u2019> <b:widget id=\u2019Blog1\u2032 locked=\u2019true\u2019 title=\u2019Posting Blog\u2019 type=\u2019Blog\u2019 \/> <\/b:section> <\/content> <\/article> <\/div> <!\u2013 post wrapper end \u2013> <!\u2013 post wrapper start \u2013> <aside class=\u2019top-sidebar\u2019> <article> <b:section class=\u2019sidebar\u2019 id=\u2019sidebar\u2019 preferred=\u2019yes\u2019\/> <\/article> <\/aside> <!\u2013 post wrapper end \u2013> <\/div> <!\u2013 content wrapper end \u2013> <div class=\u2019clear\u2019\/> <footer class=\u2019mainFooter\u2019> <p>Copyright \u00a9 2013 <a href=\u2019https:\/\/www.androphedia.com\u2019>1stwebdesigner<\/a><\/p> <\/footer> <\/body> <\/html><\/p>\n\n\n\n
Script HTML5 sudah dikonversi menjadi template valid blogger.<\/p>\n\n\n\n
Simpan template di atas dengan ekstensi terserah.xml, kemudian upload ke Blogger dashboard untuk melihat hasilnya.<\/p>\n\n\n\n
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 \u2013 tag Blogger untuk menyesuaikan standart template yang diperbolehkan<\/p>\n\n\n\n
Penjelasan Fungsi Tag Blogger<\/p>\n\n\n\n
Section <b:section class=\u2019header\u2019 id=\u2019header\u2019 maxwidgets=\u20191\u2032 showaddelement=\u2019no\u2019><\/p>\n\n\n\n
Dalam membuat template blogger, Section adalah bagian yang berfungsi untuk mengambil data dari database Blogger.<\/p>\n\n\n\n
class = Fungsi CSS class akan diterapkan pada bagian ini, bisa di modifikasi sesuka hati.<\/p>\n\n\n\n
id = id css.<\/p>\n\n\n\n
maxwidgets = Jumlah widget yang diperbolehkan pada section (bagian) ini.<\/p>\n\n\n\n
showaddelement = yes or no, untuk menampilkan \u201cTambahkan Gadget\u201d pada halaman Layout.<\/p>\n\n\n\n
Widget <b:widget id=\u2019Header1\u2019locked=\u2019true\u2019 title=\u2019Judulnya Blog\u2019 type=\u2019Header\u2019 \/><\/p>\n\n\n\n
id = optional, berfungsi untuk memberi nama pada widget, nama widget harus unik dan tidak boleh sama dengan lainnya.<\/p>\n\n\n\n
locked = true or false, jika di set true maka widget tidak bisa di hapus pada halaman layout dan begitu pula sebaliknya.<\/p>\n\n\n\n
title = optional, jika tidak di set maka blogger akan mensetnya secara otomatis.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
Kebutuhan akan digital IT sangat dibutuhkan dalam kegiatan sehari-hari, Bead IT Consultant merupakan pilihan tepat sebagai partner anda,kunjungi website kami dengan klik link ini : www.beadgrup.com<\/a><\/p>\n\r\n