Cara Lengkap Menciptakan Template Blogger Sendiri [Bagian 2]
![Cara Lengkap Membuat Template Blogger Sendiri Cara Lengkap Membuat Template Blogger Sendiri [Bagian 2]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw4wZKkkX1yjCpXluU6HBHoaRR2Uy_qcrjlIuvn-J_kqt-2bbb9gS-3-ZMOPPQWhWt1cUGI2T6dvhnP6J0Bu3tfkh-ugSN_XDCF8iF0EeVF6vrNz3h5M1Usd8adRjAgCORlwqKqvkpvYA4/s640/notebook+photography.jpg "Cara Lengkap Membuat Template Blogger Sendiri [Bagian 2]")
Dalam posting kali ini aku akan melanjutkan pembahasan dari posting sebelumnya yaitu pada Cara Lengkap Membuat Template Blogger Sendiri [Bagian 1]. Pada bab kedua ini aku akan fokus membahas ihwal bagaimana cara menambahkan bagian-bagian lain pada template blogger buatan sendiri ini, bab lain yang aku maksud ialah header, sidebar, serta footer. Sebenarnya tanpa sidebar template blog juga sanggup dikatakan lengkap alasannya ialah beberapa template ada yang mempunyai tampilan tanpa sidebar. Tetapi kita akan menciptakan yang secara umumnya saja jadi untuk modifikasi lainnya yang berafiliasi dengan tampilan akan aku bahas pada Cara Lengkap Membuat Template Blogger Sendiri [Bagian 3]. Selain itu aku juga belum menambahkan menu, sajian blog sanggup kita atur belakangan.
Baiklah, tujuan kita ialah menambahkan bagian-bagian lain pada template blogger buatan sendiri ini. Sekarang kita telah hingga pada section yang berisi widget untuk menampilkan posting blog. Makara di blog hanya tampil posting-posting blog (kalau ada). Pertama kita akan menambahkan header untuk blog. Header dalam hal ini berisi judul blog beserta deskripsi blog. Berikut ini kemajuan terakhir dari arahan blog yang kita buat.
<?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>Pertama-tama tambahkan atribut
showaddelement='no' pada tag <b:section> sehingga jadinya menjadi <b:section class='main' id='Posting' showaddelement='no'>, hal ini bertujuan supaya pada section tersebut tidak ada tombol tambah gadget/widget. Setelah itu jangan simpan dulu, selanjutnya kita akan menambahkan section gres diatasnya. Tambahkan arahan <b:section id='Header' maxwidget='1' showaddelement='no'> diatas tag section sebelumnya, jadi dalam body terdiri dari arahan ibarat berikut.<body> <b:section id='Header' maxwidget='1' showaddelement='no'/> <b:section class='main' id='Posting' showaddelement='no'> <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog' version='1' visible='true'> <!-- TERDAPAT KODE PANJANG DISINI --> </b:widget> </b:section> </body>Kemudian tambahkan section gres untuk sidebar dibawah section posting. Sehingga kini kita mempunyai 3 section didalam tag body. Hasilnya ibarat berikut ini.
<body> <b:section id='Header' maxwidget='1' showaddelement='no'/> <b:section class='main' id='Posting' showaddelement='no'> <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog' version='1' visible='true'> <!-- TERDAPAT KODE PANJANG DISINI --> </b:widget> </b:section> <b:section id='Sidebar'/> </body>Nah, selanjutnya kita akan menambahkan judul blog dan deskripsi blog pada bab section Header. Sama ibarat sebelumnya, hapus epilog pada section Header kemudian tambahkan arahan berikut dibawah section Header.
<b:widget id='Header1' locked='true' title='Koala Kumal (Header)' type='Header' version='1'> <b:includable id='main'> <b:if cond='data:useImage'> <b:if cond='data:imagePlacement == "BEHIND"'> <!-- Show image as background to text. You can't really calculate the width reliably in JS because margins are not taken into account by any of clientWidth, offsetWidth or scrollWidth, so we don't force a minimum width if the user is using shrink to fit. This results in a margin-width's worth of pixels being cropped. If the user is not using shrink to fit then we expand the header. --> <b:if cond='data:mobile'> <div id='header-inner'> <div class='titlewrapper' style='background: transparent'> <b:include name='title'/> </div> <b:include name='description'/> </div> <b:else/> <div expr:style='"background-image: url(\"" + data:sourceUrl + "\"); " + "background-position: " + data:backgroundPositionStyleStr + "; " + data:widthStyleStr + "min-height: " + data:height + "_height: " + data:height + "background-repeat: no-repeat; "' id='header-inner'> <div class='titlewrapper' style='background: transparent'> <b:include name='title'/> </div> <b:include name='description'/> </div> </b:if> <b:else/> <!--Show the image only--> <div id='header-inner'> <a expr:href='data:blog.homepageUrl' style='display: block'> <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/> </a> <!--Show the description--> <b:if cond='data:imagePlacement == "BEFORE_DESCRIPTION"'> <b:include name='description'/> </b:if> </div> </b:if> <b:else/> <!--No header image --> <div id='header-inner'> <div class='titlewrapper'> <b:include name='title'/> </div> <b:include name='description'/> </div> </b:if> </b:includable> <b:includable id='description'> <div class='descriptionwrapper'> <p class='description'><span><data:description/></span></p> </div> </b:includable> <b:includable id='title'> <b:if cond='data:blog.pageType != "item"'> <b:if cond='data:blog.pageType != "static_page"'> <h1 class='title'> <div class='menu-hadi' onclick='openNav()'><i class='fa fa-navicon'/></div> <a expr:href='data:blog.homepageUrl' expr:title='data:blog.title' itemprop='url'> <span itemprop='headline'><data:title/></span> </a> </h1> <b:else/> <h2 class='title'> <div class='menu-hadi' onclick='openNav()'><i class='fa fa-navicon'/></div> <a expr:href='data:blog.homepageUrl' expr:title='data:blog.title' itemprop='url'> <span itemprop='name'><data:title/></span> </a> </h2> </b:if> <b:else/> <h2 class='title'> <div class='menu-hadi' onclick='openNav()'><i class='fa fa-navicon'/></div> <a expr:href='data:blog.homepageUrl' expr:title='data:blog.title' itemprop='url'> <span itemprop='name'><data:title/></span> </a> </h2> </b:if> </b:includable> </b:widget>Sehingga hasil dari arahan yang kita buat sejauh ini ialah ibarat berikut ini.
<body> <b:section id='Header' maxwidget='1' showaddelement='no'/> <b:widget id='Header1' locked='true' title='Koala Kumal (Header)' type='Header' version='1' visible='true'> <!-- TERDAPAT KODE PANJANG DISINI --> </b:widget> <b:section class='main' id='Posting' showaddelement='no'> <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog' version='1' visible='true'> <!-- TERDAPAT KODE PANJANG DISINI --> </b:widget> </b:section> <b:section id='Sidebar'/> </body>Nah, kini kita sudah memasang beberapa komponen di blog, diatanranya header, main, dan sidebar. Seperti yang aku bahas pada posting bab pertama kita akan menciptakan 5 komponen, sehingga kita tinggal menambahkan 2 komponen yang kurang, yaitu footer dan menu.
Nah, untuk menambahkan footer, ini sama saja dikala menambahkan header dan sidebar, kita memakai section. Kenapa memakai section? Hal ini lantaran kita akan mengatur pada bab footer sanggup ditambahkan widget. Sobat sanggup mengaturnya sendiri nanti pada template yang berbeda jikalau ingin memasang elemen tertentu pada bab footer namun disini kita akan mencoba menciptakan bab footer sanggup diisi dengan widget/gadget.
Makara selanjutnya tambahkan lagi section dibawah section sidebar, beri nilai ID "footer" kemudian biarkan dibawahnya tetap kosong ibarat pada section sidebar. Makara kini arahan yang kita miliki ialah ibarat berikut ini.
<body> <b:section id='Header' maxwidget='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='Koala Kumal (Header)' type='Header' version='1' visible='true'> <!-- TERDAPAT KODE PANJANG DISINI --> </b:widget> </b:section> <b:section class='main' id='Posting' showaddelement='no'> <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog' version='1' visible='true'> <!-- TERDAPAT KODE PANJANG DISINI --> </b:widget> </b:section> <b:section id='Sidebar'/> <b:section id='Footer'/> </body>Kemudian dibawahnya teman sanggup menambahkan copyright supaya terlihat lebih formal dan sanggup menawarkan identitas pembuat template blog tersebut. Ada beberapa hal yang perlu teman ketahui dalam pembuatan copyright, silakan pelajari lebih lanjut.
Selanjutnya kita akan menambahkan sajian pada bab atas blog. Berdasarkan citra yang aku berikan pada bab pertama, kita akan menciptakan sajian yang sejajar dengan judul dan deskripsi blog. Makara penempatannya kita akan letakkan berdekatan dengan section header. Makara letakkan arahan berikut dibawah section header atau sempurna diatas section posting.
<nav id='navmenu'> <ul id='menu'> <li><a href='#'>Home</a></li> <li><a href='#'>About</a></li> <li><a href='#'>Sitemap</a></li> <li><a href='#'>Contact</a></li> </ul> </nav>Sehingga jadinya arahan yang kita miliki kini ialah ibarat berikut ini.
<body> <b:section id='Header' maxwidget='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='Koala Kumal (Header)' type='Header' version='1' visible='true'> <!-- TERDAPAT KODE PANJANG DISINI --> </b:widget> </b:section> <nav id='navmenu'> <ul id='menu'> <li><a href='#'>Home</a></li> <li><a href='#'>About</a></li> <li><a href='#'>Sitemap</a></li> <li><a href='#'>Contact</a></li> </ul> </nav> <b:section class='main' id='Posting' showaddelement='no'> <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog' version='1' visible='true'> <!-- TERDAPAT KODE PANJANG DISINI --> </b:widget> </b:section> <b:section id='Sidebar'/> <b:section id='Footer'/> <!-- COPYRIGHT JIKA PERLU --> </body>Sekarang arahan yang kita buat sanggup dibilang sudah mempunyai komponen yang lengkap menurut sasaran yang aku berikan pada Cara Lengkap Membuat Template Blogger Sendiri [Bagian 1], namun selanjutnya kita akan masuk pada bab pra mengatur tampilan komponen yang telah kita buat tersebut, jadi kita akan menciptakan pembiasaan sebelum mengatur tampilannya memakai CSS. Silakan baca pada Cara Lengkap Membuat Template Blogger Sendiri [Bagian 3].
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.
