Cara Lengkap Menciptakan Template Blogger Sendiri [Bagian 1]
![Cara Lengkap Membuat Template Blogger Sendiri Cara Lengkap Membuat Template Blogger Sendiri [Bagian 1]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbHzaRJW0Yt87-bkaJ6I1ce4Tktky2v0z3lNZEexXy1EEOOwXBL0MIsKQVCXc1qdGcckXI7n2LAeOugISwx5lWNjvBg5jSCGxTZ0XmKek9FsStRNQhO7LGNGWzF9wWYmkum4KzOAMoGBR5/s640/book+photography.jpg "Cara Lengkap Membuat Template Blogger Sendiri [Bagian 1]")
Dalam posting kali ini aku akan membahas perihal cara lengkap menciptakan template blog sendiri di Blogger. Untuk menciptakan template blog sendiri, sahabat perlu memahami dasar-dasar aba-aba Hypertext Markup Language (HTML) dan Cascade Style Sheet (CSS), selain itu akan lebih baik jikalau sahabat juga menguasai aba-aba JavaScript (JS).
Pertama-tama akan aku jelaskan apa-apa saja yang akan ada dalam bab template blog, disini aku bagi menjadi 5 bagian, mulai dari bab paling atas diantaranya ialah Header (yang berisi judul dan deskripsi blog), Menu (yang berisi menu-menu blog sobat), Main (bagian yang berisi posting blog sobat, kolom komentar, page navigation dll), Sidebar (berisi gadget/widget yang sanggup sahabat modifikasi), Footer (bisa berisi widget atau diisi dengan sajian khusus sesuai harapan sahabat dan di tambahkan copyright dibagian paling bawah). Misal tampilan dasar untuk template blog yang akan kita buat ialah ibarat berikut ini.
![Cara Lengkap Membuat Template Blogger Sendiri Cara Lengkap Membuat Template Blogger Sendiri [Bagian 1]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBHRYtwaZ-VVjik2tYDZvCW5t-PwCkSHTMLv1hJFp_Q7tuiWB0_0CXUOlWx3_hBvghJCQrYWXxhM4jfxokGSvw7o1GWzIbOx3s3_t6QzvJ2iOzqBpQFmz7dorq06wTwSNBI7QCGmyOe3eh/s640/Based+Template+Design.png "Cara Lengkap Membuat Template Blogger Sendiri [Bagian 1]")
Baiklah, pertama-tama kita akan membentuk aba-aba HTML dasar yang diharapkan di blogger. Pada HTML dasar ini kita hanya memenuhi hukum yang benar-benar dasar dari penggunaan HTML dan hukum dari Blogger itu sendiri. Untuk bentuk dasar dari HTML yang kita kenal ialah sebagai berikut.
<!DOCTYPE html> <html> <head> </head> <body> </body> </html>Sobat sanggup mencoba memasangnya di blog sobat. Untuk memodifikasi aba-aba HTML di blogger pertama-tama silakan buka dashboard blogger sobat. Lalu pada menu-menu yang ada pilih Template kemudian klik Edit HTML.
![Cara Lengkap Membuat Template Blogger Sendiri Cara Lengkap Membuat Template Blogger Sendiri [Bagian 1]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8m9MRga4NqkIgaBjMuy6u-UQTyGUXuVgfPTRjmDEp3OHfL5YNxencH8ABnSEl_rZ6CZzjBCTPs7ZznTn9tMiaLURbe2RzBbzHGgVYInaoEYBnqUXd4z9EV1oPz0nOwzY1sagGWBcrBnhu/s640/Screenshot_45.png "Cara Lengkap Membuat Template Blogger Sendiri [Bagian 1]")
Jika sahabat memasang aba-aba ibarat diatas pada blogger, tentu sahabat akan mendapat pesan kesalahan. Karena pada aba-aba dasar HTML blogger kita memerlukan tag
<b:section> dan <b:skin> dengan hukum penggunaan masing-masing. Makara jikalau ditambahkan kedua elemen tersebut maka aba-aba HTML dasar kita akan menjadi ibarat berikut ini.<!DOCTYPE html> <html> <head> <b:skin><![CDATA[ ]]></b:skin> </head> <body> <b:section class='main' id='Posting'/> </body> </html>Nah, akan aku jelaskan kedua elemen yang ditambahkan tersebut, pertama
<b:section> merupakan tag khusus pada blogger yang dipakai untuk menciptakan "bagian" atau kerangka yang sanggup ditambahkan objek tertentu dengan fungsi tertentu melalui bab layout atau Tata Letak, jadi jikalau aba-aba dengan tag b:section tersebut telah ditambahkan maka pada bab tata letak akan bertambah kawasan untuk sanggup meletakkan widget, sedangkan <b:skin> ialah tag khusus pula yang ada pada blogger yang fungsinya kurang lebih sama dengan tag <style>, yaitu untuk meletakkan aba-aba CSS didalamnya. Namun kita tidak sanggup menghilangkan <b:skin> dan hanya memakai aba-aba <style> di dalam aba-aba blog lantaran akan di deteksi sebagai kesalahan, pada tag <b:skin> biasanya di isi dengan aba-aba CSS dasar (default) yang diperlukan.Kedua aba-aba tersebut saja sebetulnya sudah cukup untuk sanggup dikatakan aba-aba HTML blog kita diterima oleh blogger, tetapi jikalau dilihat pada tampilan blog yang terjadi malah TIDAK ADA TAMPILAN SAMA SEKALI. Hal ini terjadi lantaran kita belum menambahkan widget di blog yang berfungsi untuk menampilkan postingan, untuk menambahkan widget tersebut kita tidak sanggup pribadi menuju ke Tata Letak kemudian tambah widget/gadget, tetapi kita harus menambahkannya memakai aba-aba tertentu.
Sekarang sahabat ingat kita telah menciptakan "bagian" (section) pada blog untuk menempatkan widget dan perhatikan pada aba-aba sebelumnya bahwa
id dari section yang dibentuk bernilai Posting jadi kita bertujuan untuk menempatkan widget yang menampilkan postingan blog pada section tersebut. Pertama hilangkan aba-aba epilog pada bab simpulan dari tag section, sehingga kodenya menjadi <b:section class='main' id='Posting'> (perhatikan perbedaannya dengan aba-aba sebelumnya), kemudian tambahkan aba-aba <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog' visible='true'/> dibawahnya kemudian kita beri epilog untuk tag section dengan </b:section>. Makara aba-aba kita kini menjadi ibarat berikut ini.<!DOCTYPE html> <html> <head> <b:skin><![CDATA[ ]]></b:skin> </head> <body> <b:section class='main' id='Posting'> <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog' visible='true'/> </b:section> </body> </html>Setelah itu coba lihat pada blog sobat, akan muncul postingan blog sahabat (jika telah ada artikel yang telah diterbitkan), beserta dengan beberapa embel-embelnya. Nah selanjutnya kita melangkah ke sumbangan title yang akan tampil pada titlebar browser, lantaran jikalau diperhatikan pada bab title bar browser hanya menampilkan URL dari blog dan itu sangat tidak yummy dipandang.
![Cara Lengkap Membuat Template Blogger Sendiri Cara Lengkap Membuat Template Blogger Sendiri [Bagian 1]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmjTP-KtRL0L4fmUzvtQt_d5uFUZF_kKrdIO4V7W4qf9B82YNNa9sTK7GpuYPt97xRgxplEbbBQ_QA2JpaSYutzV_D9lxK7AMSes4_SyLQvMsAKaiQ3c3Gk9_ShhzBXa4DfYksHUh8qQP8/s1600/Screenshot_44.png "Cara Lengkap Membuat Template Blogger Sendiri [Bagian 1]")
Untuk mengatasi hal tersebut sederhananya kita cuma perlu menambahkan
<title>Judul</title> didalam <head>. Tetapi tentu tidak semua halaman di blog mempunyai title yang sama, misal halaman posting tentunya harus berjudul sesuai dengan judul posting begitupun halaman-halaman lain. Makara biar lebih teratur tambahkan aba-aba berikut dibawah <head>.<!-- SEO Title Tag --> <b:if cond='data:blog.pageType == "index"'> <title><data:blog.pageTitle/></title> <b:else/> <b:if cond='data:blog.pageType == "archive"'> <title>Archive untuk <data:blog.pageTitle/></title> <meta content='noindex,nofollow,noarchive' name='robots'/> <b:else/> <b:if cond='data:blog.pageType == "error_page"'> <title>Halaman Tidak Ditemukan | <data:blog.title/></title> <b:else/> <title><data:blog.pageName/> | <data:blog.title/></title> </b:if> </b:if> </b:if>Kemudian tambahkan pula tag meta charset, tag meta untuk menyebabkan blog kita blog yang responsive atau yang biasa disebut sebagai mobile friendly kemudian tambahkan pula tag link untuk mengatur gambar favicon blog. Ini merupakan kode-kode dasar selanjutnya yang diharapkan dalam aba-aba HTML blogger. Berikut ini ketiga aba-aba yang aku maksud tersebut.
<meta charset='utf-8'/> <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/> <link expr:href='data:blog.homepageUrl + "favicon.ico"' rel='icon' type='image/x-icon'/>Sehingga secara keseluruhan aba-aba yang kita buat semenjak awal akan menjadi ibarat berikut ini.
<!DOCTYPE html> <html> <head> <meta charset='utf-8'/> <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/> <link expr:href='data:blog.homepageUrl + "favicon.ico"' rel='icon' type='image/x-icon'/> <!-- SEO Title Tag --> <b:if cond='data:blog.pageType == "index"'> <title><data:blog.pageTitle/></title> <b:else/> <b:if cond='data:blog.pageType == "archive"'> <title>Archive untuk <data:blog.pageTitle/></title> <meta content='noindex,nofollow,noarchive' name='robots'/> <b:else/> <b:if cond='data:blog.pageType == "error_page"'> <title>Halaman Tidak Ditemukan | <data:blog.title/></title> <b:else/> <title><data:blog.pageName/> | <data:blog.title/></title> </b:if> </b:if> </b:if> <b:skin><![CDATA[ ]]></b:skin> </head> <body> <b:section class='main' id='Posting'> <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog' visible='true'/> </b:section> </body> </html>Sekarang coba simpan aba-aba HTML blog tersebut kemudian reload atau restart halaman editor HTML blogger dan lihat apa yang terjadi, aba-aba blog sahabat ternyata bertambah panjang. Sobat tidak perlu heran, hal ini dikarenakan beberapa hal, pertama penulisan aba-aba tag HTML beberapa ada yang kurang lengkap jadi blogger melengkapinya kemudian yang kedua blogger menambahkan kode-kode lebih lengkap pada widget yang menampilkan postingan blog, sahabat sanggup melihat-lihat sendiri apa kegunaan dari aba-aba tersebut melalui bentuk dan bahasanya. Makara secara keseluruhan hasil terakhir aba-aba blog yang kita buat pada pembahasan ini adalah.
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html> <html 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> <meta charset='utf-8'/> <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/> <link expr:href='data:blog.homepageUrl + "favicon.ico"' rel='icon' type='image/x-icon'/> <!-- SEO Title Tag --> <b:if cond='data:blog.pageType == "index"'> <title><data:blog.pageTitle/></title> <b:else/> <b:if cond='data:blog.pageType == "archive"'> <title>Archive untuk <data:blog.pageTitle/></title> <meta content='noindex,nofollow,noarchive' name='robots'/> <b:else/> <b:if cond='data:blog.pageType == "error_page"'> <title>Halaman Tidak Ditemukan | <data:blog.title/></title> <b:else/> <title><data:blog.pageName/> | <data:blog.title/></title> </b:if> </b:if> </b:if> <b:skin><![CDATA[ ]]></b:skin> </head> <body> <b:section class='main' id='Posting'> <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog' version='1' visible='true'> <!-- TERDAPAT KODE PANJANG DISINI --> </b:widget> </b:section> </body> </html>Nah, kini template yang sahabat buat sanggup dibilang telah selesai jikalau ditinjau dari diterima atau tidaknya oleh blogger. Untuk pembahasan perihal mengatur tampilannya, menambahkan header, footer serta sidebar akan aku bahas pada Cara Lengkap Membuat Template Blogger Sendiri [Bagian 2].
Mungkin cukup sekian dari saya, semoga sanggup bermanfaat, kalau ada yang ingin sahabat tanyakan silakan sampaikan pada kotak komentar yang ada dibawah atau sanggup juga melalui halaman contact blog ini. Terima kasih.
