Bagaimana cara membuat blogger template mulai dari nol?

Dalam tutorial ini, ada beberapa trik dan tips sederhana untuk membuat blogger template mulai dari nol pada "Blogger Editor HTML", baik pemula ataupun yang sudah sering dilakukan oleh perancang tempale profesional. Dalam hal ini, Anda tidak akan ragu lagi dengan membuat original template sendiri; bahwa kreasi sendiri mungkin lebih menarik, dan menjadi perhatian penuh untuk lebih berkreasi ... berkreasi ... dan terus berkreasi. Selain itu, Anda akan lebih aman dalam menggunakan kode pilihan sendiri dan tentunya dapat membuatnya secara lebih efisien, sederhana, ringan, dapat menggunakan interkasi JavaScript seperlunya, kode template lebih sedikit, tetapi tetap menarik bagi pengunjung Blogger Blogspot atau domain publik Anda. Dengan menambah wawasan tutorial ini, silahkan berpetualang di halaman ini.

Perlu diketahu bahwa membuat template yang baik adalah tidak sedikit waktu. Mereka membayar waktu untuk mengerjakan elemen-elemen HTML tersebut, tapi saya yakin sepenuh hati; bahwa Anda juga dapat membuatnya jauh lebih baik.

Biasanya mereka membuat template yang lebih keren kurang lebih satu minggu atau lebih. Dan yang paling utama adalah template tersebut mampu berkolaborasi dengan mesin telusur Google dan cepat di index oleh Google dan halaman utama yang ingin Anda rangking di mesin pencari. Pengujian template tersebut juga melalui tahapan yang berbeda-beda dan tergantung pada Google kembali mengindex dan merayapi dengan benar pada halaman milik Anda. Walaupun begitu, saya senang dengan Anda dengan optimis yang tinggi untuk dapat membuatnya karya-karya "Free templete Blogger" yang dapat dibagikan kepada rekan-rekan terkasih dengan kesabaran Anda yang tinggi, dan tentunya Anda senang dalam berkreasi bersama Google Blogger yang menyeediakan domain secara gratis.

Blogger saat perintisan pertamanya adalah menjadi produk pertemanan yang paling baik untuk berbagi konten yang bermanfaat secara gratis kepada semua orang. Anda dapat berbagi pengalaman, kebahagiaan atau apapun yang Anda bahas dalam artikel Blogger Blogspot. Anda dapat banyak pengetahuan dalam berbagai tujuan Anda hanya dengan cara online.

Blogger merupakan salah satu Produk yang diluncurkan pada tanggal: 23 Agustus 1999. Blogger adalah layanan penerbitan blog yang memungkinkan blog multi-pengguna dengan entri bertanda waktu. Ini dikembangkan oleh Pyra Labs, yang dibeli oleh Google pada tahun 2003. Blog-blog tersebut dihosting oleh Google dan umumnya diakses dari subdomain blogspot.com.

Untuk mengurangi waktu Anda dalam membaca post ini. Yuk kita mulai.
Anda dapat membukanya dengan cara login. Jika Anda diarahkan membuat judul Blog; silahkan tulis judul. Kemudian Anda akan diarahkan membuat alamat link terkait nama produk Anda. Jika alamat link belum terpakai, Anda dapat melanjutkan ke halaman post. Buatlah posting setidaknya satu untuk menguji halaman tinjauan. Apabila alamat link tidak sesuai dengan judul produk Anda, Anda dapat menyesuikan dengan nama link agar alamat link dan judul produk sesuai untuk Google Penelusuran.
Lanjutkan ke theme - Banyak contoh fitur-fitur template gratis yang disediakan oleh Blogger. Anda dapat melihatnya pada tombol "View Blog". Link akan mengarahkan ke halaman beranda posting Anda pada halaman baru dan halaman post pertama anda. Kemudian pilih "Temes - Edit HTML". Ketika masuk halaman tersebut Anda dapat melihat struktur kode-kode serta elemen-element yang dimaksud dan template standart Blogger untuk Anda gunakan. Anda dapat melakukan uji dan tinjau.

Bagaimana penyiapan HTML?

Mengawali pembuatan template, anda dapat menggunakan area pada Blogger yang kosong untuk membuat template sendiri. Saya selalu menggunakan HTML5 standart W3C atau "The World Wide Web Consortium". W3C adalah organisasi standar internasional utama untuk World Wide Web (disingkat WWW atau W3). Secara umum template yang dibagikan dan disedikan oleh Blogger.com sulit dimengerti oleh para pengguna Blogger pemula, apa lagi cara memodif template tersebut akan lebih kesulitan. dan kemudian; Bagaimana cara membuat blogger template mulai dari nol?

HTML awal

Standar HTML setidaknya seperti di bawah ini.

<html>
<head>
</head>
<body>
</body>
</html>

Diatas adalah HTML standar. Namun jika Anda menggunakan dalam "Blogger Edit HTML" dan lakukan save, maka kode tersebut tidak dapat digunakan begitu saja. Cara menambahkan basik template yang perlu diperhatikan adalah sebagai berikut :

1. b:skin - berisikan CSS yang biasanya digunakan dalam Blogger.
2. b:section - Widget sesi untuk menkoordinir keberadaan elemen Blogger.

Bagian-bagian tesebut merupakan salah satu elemen-elemen yang harus ada dalam bagian Edit HTML pada Blogger atau bahasa code yang harus ada satu: b:skin dan b:section untuk melakukan tanggapan permintaan server di Edit HTML pada Blogger. Lebih jelasnya silahkan perhatikan data-codetype HTML berikut ini dan penambahan elemen HTML lainnya.

Menambahkan b:skin dan b:section ke Editor Blogger.

Dibawah ini adalah salah satu contoh bahasa code yang sudah dapat ditanggapi di HTML Editor Blogger. Silahkan save untuk mencobanya.

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html>
<head>
	<!-- b:skin -->
	<b:skin></b:skin>
</head>
<body>
	<!-- b:section -->
	<b:section class='sidebar' id='first-sidebar' showaddelement='yes' />
</body>
</html>

Perlengkapan lainnya

Berikutnya adalah salah satu metode coding yang sering saya gunakan untuk membuat template. Jadinya akan terlihat seperti di bawah ini.

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<HTML lang='en'>
<head>

<!-- Bagian: Meta Charset -->
<meta charset='utf-8' />
<meta content='IE=edge' http-equiv='X-UA-Compatible' />
<meta content='width=device-width, initial-scale=1' name='viewport' />

<!-- Bagian: Judul Situs -->
<title>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<data:blog.pageTitle/>
	<b:else/>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
	<data:blog.pageName/> | <data:blog.title/><b:else/> 404 | <data:blog.title/>
</b:if>
</b:if>
</title>
<!-- Bagian SEO Title Tag: 1. Beranda, 2. Posting, 3. Page, dan 4. Respon error 404 -->

<!-- Bagian: All head content -->
<b:include data='blog' name='all-head-content' />

<!-- Bagian: Skin -->
<b:skin></b:skin>

</head>
<body>

<!-- Bagian: Header -->
<header>
</header>

<!-- Bagian: Post -->
<b:section class='main' id='main-post' showaddelement='yes'>
	<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog' />
</b:section>

<!-- Bagian: Aside dan Sidebar -->
<aside>
	<b:section class='sidebar-1' id='sidebar' showaddelement='yes' />
</aside>

<!-- Bagian: Footer -->
<footer class='footer-wrapper' id='footer-wrapper'>
</footer>
</body>
</HTML>

Lakukan save dan muat ulang halaman tersebut, Web Design sudah dimulai dengan menampilkan post yang Anda unggah dalam halaman secara default. Jika anda belum membuat halaman post, Anda dapat membuatnya terlebih dahulu agar template anda berfungsi dan dapat melanjutkan pengeditan. Setelah muat ulang halaman tersebut maka halaman akan terlihat sangat sederhana. Selanjutnya Anda dapat mengatur gaya CSS kode yang Anda inginkan untuk menampilan jauh lebih keren dan melengkapi widget dengan sebaik-baiknya.

Keterangan:

Dalam pembahasan ini, saya mengulas sesuai pengetahuan selama ini saja:

1. Elemen di atas sudah mendukung HTML5. Doctype adalah HTML5. HTML huruf besar memberi tanda pada elemen untuk tidak menggunakan tambahan element dari blogger secara otomatis.
2. html lang="id" adalah bahasa Indonesia, biasanya string ini menunjukan bahasa yang terbaca pada halaman untuk mewakili elemen lainnya. Jika bahasa Anda adalah bahasa English maka html lang="en". Selanjutnya bagian html tersebut juga dapat diikuti string acak lain.
3. meta charset="utf-8" adalah metode yang sering digunakan saat ini.
4. meta content="IE=edge" http-equiv="X-UA-Compatible" adalah pemberitahuan bahwa template tersebut mendukung Internet Explore pada windows ataupun browser sejenisnya. X-UA-Compatible akan memberikan efek tampilan pada pengaturan templat yang Anda buat.
5. b:skin adalah salah satu kode dari HTML Edit pada Blogger yang tidak dapat dihilangkan. Sehingga saya menetapkannya di elemen ini.
6. CSS atau Cascading Style Sheets adalah bahasa style sheet yang digunakan untuk menggambarkan penyajian dokumen yang ditulis dalam bahasa markup. Style adalah bagian terpenting pada gaya CSS untuk elemen-elemen yang akan Anda buat nantinya.
7. HTML adalah bagian dari keseluruhan elemen-elemen yang menjadikan template tersebut berfungsi.
8. JavaScript adalah bahasa pemrograman komputer berorientasi objek yang biasa digunakan untuk membuat efek interaktif di browser web. Anda dapat meminimalkan kode untuk membantu mempercepat pemuatan atau pengunduhan halaman. Halaman yang telah dioptimalkan dan cenderung memberikan pengalaman pengguna pada kinerja situs web.

Pembahasan

Dalam bagian Head, Anda dapat menyertakan beberapa elemen untuk mempersiapkan tag (Pembuka dan Penutup) untuk mengelola bahasa markup Style CSS dan bahasa pemrograman efek interaktif JavaScript. Anda dapat meyisipkan kode setelah tag pembuka, dan sebelum tag penutup.

<!-- Bagian: Skin / CSS For Blogger -->
<b:skin><![CDATA[
/*CSS Setting*/
...
]]></b:skin>

<!-- Bagian: Style CSS -->
1. Cara Pertama.
<style>
/* Tulis code CSS anda dibawah ini */
...
</style>

2. Cara Kedua.
<style><![CDATA[
/* Tulis code CSS anda dibawah ini */
...
]]></style>


<!-- Bagian: JavaScript -->
1. Cara Pertama.
<script>
// Tulis code JavaScript anda dibawah ini
...
</script>

2. Cara Kedua.
<script>//<![CDATA[
// Tulis code JavaScript anda dibawah ini
...
//]]></script>

Keterangan:

CDATA didalam JavaSript biasanya adalah kode yang mengalami penolakan saat save pada Edit HTML pada Blogger. Misalkan: kode "&" dan pencampuran "CSS, HTML" dalam satu paket didalam JavaSript. Jika dibiarkan begitu saja dalam paket penyimanan Widget HTML kemungkinan akan baik-baik saja, namun kemungkinan tidak terbaca atau kemungkinan muncul dalam bentuk yang berbeda di halaman. Anda dapat membedakan JavaSript tersebut dengan menguji dengan cara Pertama atau Kedua.

1. Bagian HEAD

Terpenting di bagian HEAD atau para perancang template sering terdapat elemen-elemen dibawah ini:

1. Meta charset.
2. Bagian Judul, dan respon 404 (error_page). Error page ini dapat dimodifikasi dengan tanggapan halaman tidak ditemukan.
3. Style adalah gaya pemograman CSS interaktif. Misalnya adalah group CSS pada halaman depan dan belakang (Halaman Posting), Halaman statis ataupun lainnya.
4. JavaScript atau efek interaktif.

Di bagian HEAD biasanya terdapat string acak seperti dibawah ini. Sedangkan validasi menurut W3C adalah menggunakan metode 1 di bawah ini. Sedangkan yang ke 2 adalah cara Blogger mendeteksi kepergunaan element tersebut setelah HTML di digulir ulang.

Metode 1. HTML berhuruf besar.
<HTML lang='en'>
...
</HTML>

Metode 2. html berhuruf kecil.
<html>
</html>

Metode 2 setelah digulir ulang menjadi seperti dibawah ini.
<html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:templateUrl='indie.xml' lang='en' 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'>
...
</html>

Bagaiman cara merubah (all head content) agar valid?

Pada all head content pada Blogspot statis maka terlihat seperti ini:

<!-- Bagian: All head content -->
<b:include data='blog' name='all-head-content'/>

Dibawah ini saya mengganti dan menambahkan: rel canonical secara manual pada "all head content" dan perubahan meta content di bagian head.

<!-- Bagian: Canonical -->
<link expr:href='data:blog.url' rel='canonical'/>

<!-- Bagian: hreflang -->
<link expr:href='data:blog.url' hreflang='x-default' rel='alternate'/>

<!-- Bagian: Perubahan all head content -->
<meta content='blogger' name='generator'/>
<link expr:href='data:blog.homepageUrl + &quot;favicon.ico&quot;' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&quot;' expr:title='data:blog.title + &quot; - RSS&quot;' rel='alternate' type='application/rss+xml'/>
<link expr:href='&quot;http://www.blogger.com/feeds/&quot; + data:blog.blogId + &quot;/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'><b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/></b:if></b:if>

<!-- Bagian: Meta Property dan Meta Content -->
<meta expr:content='data:blog.metaDescription' property='description'/>
<meta content='Keyworlds Situs' name='keywords'/>

Keterangan:

hreflang adalah acara halaman memberi tahu Google tentang versi halaman yang dilokalkan. Tindakan ini akan membantu Google Penelusuran mengarahkan pengguna ke versi halaman yang paling sesuai menurut bahasa atau wilayah. Perlu diperhatikan bahwa jika Anda tanpa melakukan tindakan apa pun, Google mungkin tetap menemukan versi bahasa alternatif di halaman Anda, namun sebaiknya Anda secara eksplisit menandai halaman khusus bahasa atau wilayah. Jika blog Anda menggunakan bahasa English maka hreflang="en" atau merujuk ke negara yang sesuai dengan wilayah yang berbahasa English.

Canonical adalah halaman dengan URL kanonis yang ditentukan untuk mereka di situs web Anda.
URL Canonical adalah menciptakan URL duplikat. Dalam banyak kasus, URL duplikat ditangani melalui pengalihan 301 redirect. Namun terkadang, misalnya ketika produk yang sama muncul dalam dua kategori dengan dua URL yang berbeda dan keduanya harus ditayangkan, Anda dapat menentukan halaman mana yang harus dianggap sebagai prioritas dengan bantuan tag rel="canonical". Ini harus diterapkan dengan benar di dalam tag head halaman dan arahkan ke versi halaman utama yang ingin Anda rangking di mesin pencari. Atau, jika Anda dapat mengonfigurasi server, Anda dapat menunjukkan URL kanonis menggunakan header HTTP rel="canonical".

2. Bagian BODY

Gambaran tentang; dimana sebuah website terlihat pada fitur-fitur website pada browser. Nah, apa saja yang termasuk dalam bagian BODY? Setidaknya ada bagian-bagian terpenting yang harus Anda kerjakan dan modifikasi pada bagian gaya CSS berikut ini:

1. Header.
2. Navbar atau menu.
3. Widget Blog Posts.
4. Sidebar.
5. Footer.

Mana yang lebih menarik, kreasi Anda atau karya orang lain? Tapi saya yakin sepenuh hati bahwa Anda juga dapat membuat template jauh lebih baik. Tidak cukup sampai di petualangan ini, untuk menambah petualangan bersama saya, Anda dapat melanjutkan beberapa bagian mendasar dari sebuah template di: Bagian-bagian Terpenting Template Blogger.

Jika masih terdapat pertanyaan atau kekurangan pada: Bagaimana cara membuat blogger template mulai dari nol? Jangan sungkan untuk menambahkan pada kolom komentar di bawah ini. Happy Blogging.