Bagaimana cara membuat kerangka template blogspot dari awal? Pada dasarnya, cara membuat template blogspot atau disebut file website dianggap sama seperti pada website umumnya. Kesamaan itu karena memakai kode pemrograman HTML, CSS yang sebagai standar membuat website. Adapun pemrograman PHP atau lainnya, penggunaannya cenderung pada kebutuhan sesuai CMS itu sendiri, lebih bersifat penambahan. Dasar HTML karena sebagai kerangka website. Sedangkan CSS adalah pengaturan keindahan suatu website. Tanpa HTML dan CSS tidak akan bisa menciptakan sebuah website yang bagus.
Namun, pembuatan kerangka template blogspot memiliki cara khusus tersendiri yang berbeda dengan CMS yang lain. Mengapa? Karena blogspot bagian dari CMS Blogger sehingga pengaturan pembuatan website sesuai perintah yang ada di blogger yaitu terletak pada elemen section.
Lalu bagaimana langkah praktis membuat kerangka template blogspot dari awal?
Pembuatan Kerangka Template Website
Ingat, kerangka template website berbeda dengan template kerangka blog yakni yang berasal dari CMS blogger. Walaupun berbeda, anda harus membuat kerangka dasarnya terlebih dahulu. Langkah dasar yang akan dibuat jangan ditiru untuk diterapkan di Blogger. Ini hanya sekedar gambaran besar membuat kerangka template blog.Berikut kerangkanya:
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Anda silahkan mencopy-paste ke blogger. Anda bisa lihat ketidakberhasilannya. Padahal, itu adalah standar kerangka website untuk pemrograman HTML. Hal ini karena Blogger memiliki aturannya sendiri.
Mematuhi Kerangka Template Blogspot Sesuai CMS Blogger
Pembuatan kerangkan template blogspot di dalam CMS blogger memiliki aturan tersendiri khususnya dalah masalah section. Seperti aturan section HTML5, anda bisa menuliskan dengan <section></section>. Tetapi di dalam CMS Blogger, anda tidak bisa menuliskan seperti itu. Silahkan anda mencoba, hasilnya akan error. Lalu bagaimana? Berikut kerangkan template blogspot dasar yang direstui CMS Blogger.<html>
<head>
<title>Judul</title>
<b:skin><![CDATA[/*
]]></b:skin>
</head>
<body>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Posting Blog' type='Blog'>
</b:widget>
</b:section>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
<b:section class='footer' id='footer1' preferred='yes' >
<b:widget id='HTML1' locked='true' title='Posting Blog' type='Blog'>
</b:widget>
</b:section>
</body>
</html>
Begitulah aturan dasar penulisan membuat kerangka template blogspot yang terintegrasi dengan CMS Blogger walaupun belum dianggap sempurna. Paling tidak, anda paham langkah dasarnya. Tentunya, ada beberapa pengembangan seperti menambahkan atribut blogspot yang terstandarkan atau yang bebas ditulis untuk membuat widget/gatget di area Tata Letak.
1. Contoh pengaturan elemen dengan atribut yang terstandarkan CMS Blogger.com
Navbar1
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Posting Blog' type='Blog'>
</b:widget>
</b:section>
Header1
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Posting Blog' type='Blog'>
</b:widget>
</b:section>
Blog1
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'>
</b:widget>
</b:section>
Ketika anda melihat hasil di tampilan blogspot, anda hanya melihat halaman putih. Kemungkinan belum ada pengaturan CSS.
2. Contoh pengaturan elemen dengan atribut yang tidak terstandarkan CMS Blogger.com
Ada banyak elemen yang atribut-nya memang di luar dari aturan yang telah ditentukan Blogger. Hal ini bisa ditandai dengan HTML di dalam “id” yang ada di elemen widget. Penulisan HTML harus berbeda yang biasanya dibedakan dengan angka seperti HTML1, HTML2 dan lainnya.<b:section class='main' id='main' showaddelement='no'>
<b:widget id='HTML1' locked='true' title='Posting Blog' type='Blog'>
</b:widget>
</b:section>
Seperti hasil kerangka template yang sudah ditampilkan, seperti itulah hasil pada widget yang bebas ini.
Menerapkan Tag Kondisional Blogger Dengan Benar
Pembuatan template blog di Blogger, salah satunya, sangat ketat dalam penggunaan tag kondisional. Hal ini karena tampilan postingan dan halaman index alias homepage dan yang lainnya harus berbeda. Tag kondisional bisa diterapkan dalam elemen HTML atau CSS.Untuk masalah pengaturan tag kondisional, penulis sudah menjelaskan pada artikel sebelumnya di label ini. Namun penulis akan menjelaskan bagaimana seharusnya menerapkan. Penulis akan menjelaskan secara singkat saja sebagai gambaran besar langkah berikutnya.
1. Kode Khusus Untuk Editing CSS Dan Widget Khusus di Homepage
Misalkan anda ingin menampilkan postingan dengan warna beraneka ragam di halaman homepage anda. Biasanya, di halaman homepage menampilkan ringkasan halaman posting yang terdiri dari jumlah yang sudah di setting, misal 10 halaman singkat postingan. Anda ingin memberikan warna-warni pada halaman ini namun tidak pada halaman khusus artikel. Maka pengaturan kodenya seperti ini.<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
.post{padding:20px;margin-bottom:10px;border:0px solid rgba(0,0,0,0.14);transition:all .3s}
.post{-webkit-box-shadow: 6px 6px 4px -4px rgba(224,224,224,1);
-moz-box-shadow: 6px 6px 4px -4px rgba(224,224,224,1);
box-shadow: 6px 6px 4px -4px rgba(224,224,224,1);}
.post{border-radius: 0px 0px 15px 0px;
-moz-border-radius: 0px 0px 15px 0px;
-webkit-border-radius: 0px 0px 15px 0px;
border: 0px solid #000000;
}
</b:if>
</b:if>
Kode di atas mengartikan bahwa border melengkung hanya berlaku di halaman homepage untuk tampilan artikel.
Karena kode di atas hanya berlaku untuk homepage, maka anda tidak akan melihat hasil perbahan bila tidak ada kode khusus yang bisa berlaku untuk halaman postingan. Hasilnya harus seperti ini yang bisa ditampilkan di semua halaman.
.post {background:#fff;position:relative;margin:0px;padding:0;}
Kode di atas mengartikan bahwa tampilan artikel di halaman posting atau homepage tetap memiliki background putih dan lainnya.
2. Kode Khusus Untuk Editing CSS Dan Widget Khusus di Halaman Artikel
Pembahasan ini sebaliknya dari yang di atas. Bila anda hanya menggunakan kode umum .post {background:#fff;position:relative;margin:0px;padding:0;} maka hal ini akan berlaku untuk halaman postingan alias artikel dan juga halaman lain seperti homepage dan statis. Mungkin anda menginginkan ada desain khusus hanya berlaku di halaman artikel. Maka, anda harus menerapkan hal ini.<b:if cond='data:blog.pageType == "item"'>
h1.post-title.entry-title, h2.post-title.entry-title {background:#34495e;color:#fff;font-size:1.5em;font-weight:400;padding:15px;margin:auto;}
</b:if>
Kode di atas mengartikan bahwa area judul artikel memiliki backgroud berwarna biru yang tidak akan tampil di halaman statis.
Sekarang, anda mulai paham bukan bagaimana membuat kerangka paling dasar template blogspot?
EmoticonEmoticon