![Cara Lengkap Membuat Template Blogger Sendiri √ Cara Lengkap Membuat Template Blogger Sendiri [Bagian 1]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPaHj78x5VWRHcuN3LEilQaCbCSlqI3DGEYTK_ZtkBqGRx6DGtZ8A-U2SrADNip3FoSh2XfTPiowGnNFE34x0KR7M-HBB48YfsxXs22jbNI5vXD6yosboT7jcyplRy51AtD3GpPqANJ5uW/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, teman perlu memahami dasar-dasar arahan Hypertext Markup Language (HTML) dan Cascade Style Sheet (CSS), selain itu akan lebih baik jikalau teman juga menguasai arahan JavaScript (JS).
Pertama-tama akan aku jelaskan apa-apa saja yang akan ada dalam penggalan template blog, disini aku bagi menjadi 5 bagian, mulai dari penggalan 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 teman modifikasi), Footer (bisa berisi widget atau diisi dengan sajian khusus sesuai cita-cita teman dan di tambahkan copyright dibagian paling bawah). Misal tampilan dasar untuk template blog yang akan kita buat ialah menyerupai berikut ini.
![Cara Lengkap Membuat Template Blogger Sendiri √ Cara Lengkap Membuat Template Blogger Sendiri [Bagian 1]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyB8HxEMN7PHz2AB9Hz1HPFJgbQxCPC2k4Ibl6gji4m3ZuwEUhlLcATH0Nhgo8Vw269B9kyHOTS0oZmLiTjA6OaWVsQCzStOx2ZZ_F_0H5QIsf4EvM8uYppH8LVuTeuU_6wVAq9Wli7dA8/s640/arlinadesign.gif "√ Cara Lengkap Membuat Template Blogger Sendiri [Bagian 1]")
Baiklah, pertama-tama kita akan membentuk arahan HTML dasar yang dibutuhkan 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 arahan HTML di blogger pertama-tama silakan buka dashboard blogger sobat. Lalu pada menu-menu yang ada pilih Template kemudian klik Edit HTML.
Jika teman memasang arahan menyerupai diatas pada blogger, tentu teman akan mendapat pesan kesalahan. Karena pada arahan dasar HTML blogger kita memerlukan tag
<b:section> dan <b:skin> dengan hukum penggunaan masing-masing. Makara jikalau ditambahkan kedua elemen tersebut maka arahan HTML dasar kita akan menjadi menyerupai 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 penggalan layout atau Tata Letak, jadi jikalau arahan dengan tag b:section tersebut telah ditambahkan maka pada penggalan tata letak akan bertambah daerah 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 arahan CSS didalamnya. Namun kita tidak sanggup menghilangkan <b:skin> dan hanya memakai arahan <style> di dalam arahan blog alasannya ialah akan di deteksi sebagai kesalahan, pada tag <b:skin> biasanya di isi dengan arahan CSS dasar (default) yang diperlukan.Kedua arahan tersebut saja bergotong-royong sudah cukup untuk sanggup dikatakan arahan 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 eksklusif menuju ke Tata Letak kemudian tambah widget/gadget, tetapi kita harus menambahkannya memakai arahan tertentu.
Sekarang teman ingat kita telah menciptakan "bagian" (section) pada blog untuk menempatkan widget dan perhatikan pada arahan sebelumnya bahwa
id dari section yang dibentuk bernilai Posting jadi kita bertujuan untuk menempatkan widget yang menampilkan postingan blog pada section tersebut. Pertama hilangkan arahan epilog pada penggalan simpulan dari tag section, sehingga kodenya menjadi <b:section class='main' id='Posting'> (perhatikan perbedaannya dengan arahan sebelumnya), kemudian tambahkan arahan <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 arahan kita kini menjadi menyerupai 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 teman (jika telah ada artikel yang telah diterbitkan), beserta dengan beberapa embel-embelnya. Nah selanjutnya kita melangkah ke proteksi title yang akan tampil pada titlebar browser, alasannya ialah jikalau diperhatikan pada penggalan title bar browser hanya menampilkan URL dari blog dan itu sangat tidak yummy dipandang.
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 arahan 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 mengakibatkan 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 dibutuhkan dalam arahan HTML blogger. Berikut ini ketiga arahan 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 arahan yang kita buat semenjak awal akan menjadi menyerupai 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 arahan HTML blog tersebut kemudian reload atau restart halaman editor HTML blogger dan lihat apa yang terjadi, arahan blog teman ternyata bertambah panjang. Sobat tidak perlu heran, hal ini dikarenakan beberapa hal, pertama penulisan arahan 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, teman sanggup melihat-lihat sendiri apa kegunaan dari arahan tersebut melalui bentuk dan bahasanya. Makara secara keseluruhan hasil terakhir arahan 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 teman 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 teman tanyakan silakan sampaikan pada kotak komentar yang ada dibawah atau sanggup juga melalui halaman contact blog ini. Terima kasih.
Sumber http://www.maringngerrang.com/