COLONGAN
Membuat dan menyusun kerangka dasar template blogger
Hal ini adalah langkah pertama dan sangat penting sekali dalam pembuatan template blogger dari awal / dari nol
Jika anda sedang melakukannya, simak cara-caranya berikut ini
Saya anggap anda sudah bisa mencari bagian mengedit template mode html.
Namun bagi yang belum tau lihat gambar berikut ini
Hapus semua kode html yang ada, dan ganti menggunakan kode awal kerangka template berikut ini
kode awal kerangka template :
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>
<head>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='blogger' name='generator'/>
<link expr:href='data:blog.homepageUrl + "favicon.ico"' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default?alt=rss"' expr:title='data:blog.title + " - RSS"' rel='alternate' type='application/rss+xml'/>
<link expr:href='"http://www.blogger.com/feeds/" + data:blog.blogId + "/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<b:else/>
<meta expr:content='data:blog.pageName + " - " + data:blog.title' name='description'/>
</b:if>
</b:if>
<!-- SEO Title Tag -->
<b:if cond='data:blog.url == data:blog.homepageUrl'><title><data:blog.title/></title></b:if>
<b:if cond='data:blog.pageType == "item"'><title><data:blog.pageName/> - <data:blog.title/></title></b:if>
<b:if cond='data:blog.pageType == "archive"'><title>Archive for <data:blog.pageName/></title></b:if>
<b:if cond='data:blog.pageType == "static_page"'><title><data:blog.pageName/></title></b:if>
<b:if cond='data:blog.pageType == "index"'><b:if cond='data:blog.searchLabel'><title><data:blog.title/> - <data:blog.pageName/></title></b:if></b:if>
<b:if cond='data:blog.pageType == "error_page"'><title>Page Not Found</title></b:if>
<b:if cond='data:blog.pageType == "index"'><b:if cond='data:blog.url != data:blog.homepageUrl'><title><data:blog.pageTitle/> - All Post</title></b:if></b:if>
<!-- b:skin -->
<b:skin><![CDATA[
// CSS disini...
]]></b:skin>
<!--<head/>-->
<!-- body di mulai -->
<body>
<b:section class='main' id='main'>
<b:widget id='Blog1' locked='true' title='Postingan Blog' type='Blog'></b:widget>
</b:section>
<!--</body>-->
</HTML>Dari kode tersebut, sama seperti html pada umumnya.
Terdapat tag head dan body.
blog kita hanya mempunyai satu elemen saja pada body yaitu postingan/blog.
Bisa dibilang itu adalah bingkai awal blog kita
Anggap saja kita akan membuat letak elemennya seperti ini
Maka kita akan melakukan perubahan pada elemen body dan membuat pembungkus div pada masing-masing elemennya.
kode bagian bodynya menjadi seperti berikut ini :
<!-- body di mulai -->
<body>
<div id='outer-wrapper'>
<header id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1'>
<b:widget id='Header1' locked='true' title='Header colongan (Header)' type='Header'>
</b:widget>
</b:section>
</header>
<div class='clearfix'/>
<div id='content-wrapper'>
<div id='main-wrapper'>
<b:section class='main' id='main'>
<b:widget id='Blog1' locked='true' title='Postingan Blog' type='Blog'></b:widget>
</b:section>
</div>
<aside id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' showaddelement='yes'></b:section>
</aside>
</div>
<div class='clearfix'/>
<footer id='footer-wrapper'>
<b:section class='footer' id='footer' showaddelement='yes'></b:section>
</footer>
</div>
<!--</body>-->Sekarang kita memiliki bahan struktur dan penempatan elemen baru beserta div pembungkus pada masing-masing elemen.
Div terluar yaitu outer-wrapper dan dilanjutkan beberapa didalamnya.
Jika anda menyimpannya dan mereload halaman browser anda,
Maka biasanya blogger akan menambahkan kode-kode yang ada pada widget tersebut.
Jadi jangan kaget jika akan banyak muncul kode-kode baru yang jumlahnya tidak sedikit, yang paling banyak adalah widget Blog
Jika tadinya kita cuma menulis satu baris kode widget blog ini :
<b:widget id='Blog1' locked='true' title='Postingan Blog' type='Blog'></b:widget>
Lanjut ke struktur dasar.
Dari hasil kita tadi, kode-kode itu strukturnya belum diatur karena belum ada css di dalam tag head
Pada umumnya css blogger berada didalam tag head dan dibungkus dengan kode seperti ini :
<b:skin><![CDATA[
// CSS disini...
]]></b:skin>Namun kita akan mematikan fungsi ini agar blog kita menghapus semua css tersembunyi bawaan blogger yang cukup memberatkan loading blog kita.
Karena syarat blogger, template kita harus memiliki kode b:skin, maka kita tidak bisa menghapusnya. Kita cuma bisa memodifikasinya karena memang b:skin sangat mempunyai peranan penting tersendiri.
Kita menambah css ke 2 menjadi seperti berikut ini :
<!-- b:skin -->
<style type="text/css"><!-- /*<b:skin><![CDATA[
// CSS disini...
]]></b:skin>
<!-- css ke 2 -->
<style type='text/css'>
// CSS 2 disini...
</style>Nah sekarang saatnya menata struktur blog menggunakan CSS.
Tambahkan css berikut ini di bagian CSS ke 2
/* -----------------------------------------------
Blogger Template Style
Name : Nama Template Anda
Date : Tanggal Pembuatan Template Ini
Kontak : www.colongan.com
Disclaimer : please ... Jangan teror aku
----------------------------------------------- */
/* CSS Reset ----------*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,adnav,adheader{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
.cookie-choices-info {position: fixed; top: auto !important; bottom: 0px !important;z-index:999999999}
#navbar-iframe, .quickedit, .status-msg-body, .status-msg-hidden {display:none !important;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,adnav,adheader{display:block;}
*{margin:0;padding:0;}
html{display:block;}
.clear::after {content: '';clear: both; display: table;}
ul,ol{list-style:none;}
/* dasar ----------*/
body {
background:#fff;
margin:0;
padding:0;
color:#232323;
}
a:link, a:visited {
color:#328FCD;
text-decoration:none;
}
a:hover {
color:#0097A7;
text-decoration:underline;
}
a img {
border-width:0;
max-width: 100%;
}
/* struktur ----------*/
#outer-wrapper, #header-wrapper, #footer-wrapper {
width: 100%;
}
#header-wrapper, #footer-wrapper {
background: #232323;
color: #fff;
}
#content-wrapper {
width: 100%;
}
#header, #content-wrapper, #footer {
max-width: 1100px; margin: 0 auto;
}
#main-wrapper {
padding: 0;
width: 65%;
float: left;
}
#sidebar-wrapper {
padding: 0;
width: 35%;
float: right;
}Nah dari sini jika blog anda di kunjungi, sudah terstruktur rapi pada tampilan dekstop.
Dengan postingan blog berada pada sebelah kiri dan sidebar pada sebelah kanan.
Namun pada tampilan Tata letak di blogger, akan tampil seperti ini dan masih kelihatan belum terstruktur.
Disinilah peranan b:skin di perlukan.
Fungsi b:skin setelah saya teliti... ternyata fungsi utamanya adalah menampilkan struktur template blog kita pada tata letak.
Jadi kita akan menyalin struktur utamanya dan menaruhnya di dalam b:skin.
Ingat ambil strukturnya saja dan taruh didalam b:skin bukan warna dan sejenisnya,
Jadinya seperti ini :
<!-- b:skin -->
<style type="text/css"><!-- /*<b:skin><![CDATA[
* {
margin:0;
padding:0;
}
ul, ol {
list-style: none;
}
#outer-wrapper, #header-wrapper, #footer-wrapper {
width: 100%;
}
#content-wrapper {
width: 100%;
}
#header, #content-wrapper, #footer {
max-width: 1100px; margin: 0 auto;
}
#main-wrapper {
padding: 0;
width: 65%;
float: left;
}
#sidebar-wrapper {
padding: 0;
width: 35%;
float: right;
}
]]></b:skin>Nah sekarang struktur blog anda sudah rapi. Baik itu ditampilan blog secara langsung maupun di tampilan tata letak.
Untuk css selanjutnya, taruh saja di css ke 2.
Bukan di b:skin, karena b:skin hanya untuk strukturnya saja.
Jika anda bingung dengan tutorial diatas, mungkin anda kurang teliti atau mungkin pemahaman pembaca lain dengan pemahaman si penulis.
Dari hasil keseluruhan diatas, kita mendapati hasil seperti ini :
hasil akhir :
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>
<head>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='blogger' name='generator'/>
<link expr:href='data:blog.homepageUrl + "favicon.ico"' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default?alt=rss"' expr:title='data:blog.title + " - RSS"' rel='alternate' type='application/rss+xml'/>
<link expr:href='"http://www.blogger.com/feeds/" + data:blog.blogId + "/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<b:else/>
<meta expr:content='data:blog.pageName + " - " + data:blog.title' name='description'/>
</b:if>
</b:if>
<!-- SEO Title Tag -->
<b:if cond='data:blog.url == data:blog.homepageUrl'><title><data:blog.title/></title></b:if>
<b:if cond='data:blog.pageType == "item"'><title><data:blog.pageName/> - <data:blog.title/></title></b:if>
<b:if cond='data:blog.pageType == "archive"'><title>Archive for <data:blog.pageName/></title></b:if>
<b:if cond='data:blog.pageType == "static_page"'><title><data:blog.pageName/></title></b:if>
<b:if cond='data:blog.pageType == "index"'><b:if cond='data:blog.searchLabel'><title><data:blog.title/> - <data:blog.pageName/></title></b:if></b:if>
<b:if cond='data:blog.pageType == "error_page"'><title>Page Not Found</title></b:if>
<b:if cond='data:blog.pageType == "index"'><b:if cond='data:blog.url != data:blog.homepageUrl'><title><data:blog.pageTitle/> - All Post</title></b:if></b:if>
<!-- b:skin -->
<style type="text/css"><!-- /*<b:skin><![CDATA[
* {
margin:0;
padding:0;
}
ul, ol {
list-style: none;
}
#outer-wrapper, #header-wrapper, #footer-wrapper {
width: 100%;
}
#content-wrapper {
width: 100%;
}
#header, #content-wrapper, #footer {
max-width: 1100px; margin: 0 auto;
}
#main-wrapper {
padding: 0;
width: 65%;
float: left;
}
#sidebar-wrapper {
padding: 0;
width: 35%;
float: right;
}
]]></b:skin>
<!-- css ke 2 -->
<style type='text/css'>
/* -----------------------------------------------
Blogger Template Style
Name : Nama Template Anda
Date : Tanggal Pembuatan Template Ini
Kontak : www.colongan.com
Disclaimer : please ... Jangan teror aku
----------------------------------------------- */
/* CSS Reset ----------*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,adnav,adheader{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
.cookie-choices-info {position: fixed; top: auto !important; bottom: 0px !important;z-index:999999999}
#navbar-iframe, .quickedit, .status-msg-body, .status-msg-hidden {display:none !important;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,adnav,adheader{display:block;}
*{margin:0;padding:0;}
html{display:block;}
.clear::after {content: '';clear: both; display: table;}
ul,ol{list-style:none;}
/* dasar ----------*/
body {
background:#fff;
margin:0;
padding:0;
color:#232323;
}
a:link, a:visited {
color:#328FCD;
text-decoration:none;
}
a:hover {
color:#0097A7;
text-decoration:underline;
}
a img {
border-width:0;
max-width: 100%;
}
/* struktur ----------*/
#outer-wrapper, #header-wrapper, #footer-wrapper {
width: 100%;
}
#header-wrapper, #footer-wrapper {
background: #232323;
color: #fff;
}
#content-wrapper {
width: 100%;
}
#header, #content-wrapper, #footer {
max-width: 1100px; margin: 0 auto;
}
#main-wrapper {
padding: 0;
width: 65%;
float: left;
}
#sidebar-wrapper {
padding: 0;
width: 35%;
float: right;
}
</style>
<!--<head/>-->
<!-- body di mulai -->
<body>
<div id='outer-wrapper'>
<header id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1'>
<b:widget id='Header1' locked='true' title='Header colongan (Header)' type='Header'>
</b:widget>
</b:section>
</header>
<div class='clearfix'/>
<div id='content-wrapper'>
<div id='main-wrapper'>
<b:section class='main' id='main'>
<b:widget id='Blog1' locked='true' title='Postingan Blog' type='Blog'></b:widget>
</b:section>
</div>
<aside id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' showaddelement='yes'></b:section>
</aside>
</div>
<div class='clearfix'/>
<footer id='footer-wrapper'>
<b:section class='footer' id='footer' showaddelement='yes'></b:section>
</footer>
</div>
<!--</body>-->
</HTML>
Nah setelah anda berhasil membuat struktur dasar dalam pembuatan template blogger dari awal atau dari nol, tutorial berikutnya adalah pembuatan auto readmore dan breadcrumbs untuk mempermudah anda membangun template.
Setelah itu barulah anda melanjutkan membuat template blogger dari awal atau dari nol menjadi template blogger yang responsive sesuai segala ukuran layar yang diinginkan.
jika ada yang kurang jelas maupun bla bla bla... silahkan coret-coret di kolom komentar.
mungkin juga kamu tertarik untuk membaca ini :
Terima kasih, salam Colongan !
Bantu kami lebih baik lagi.
Apa Reaksi anda tentang blogger :
"Membuat dan menyusun kerangka dasar template blogger" ?
Posting Komentar
Komentar yang melukai perasaan beresiko dihapus Coy... !