Tutorial cara edit template/theme blogger lengkap mulai dari yang paling dasar, tanpa ribet.
Setelah sebelumnya di artikel “Cara Download Template Blog” kita udah sukses gimana cara download
dan upload template blog. maka di artikel ini akan kita bahas bersama secara
lengkap cara edit template blog.
Gimana sih cara edit template blog ? apakah sulit ? ya dibilang
sulit sih enggak, tapi dibilang gampang juga enggak. Jadi ya gampang-gampang
susyah.
Edit tempate/theme blog berbeda dengan membuat atau
membangun template. Enggak sesusah itu maksudnya. Kita enggak harus paham html,
css,
ataupun javascript. Yang penting kita paham konsep aja sih.
Sebelum kita bahas ke tutorialnya, buat temen-temen yang
belum tahu cara download dan upload template ke blog. Aku saranin buat baca “Cara Download dan Upload Template Blog” terlebih dahulu.
Oke lanjut,
Sebenernya, cara edit template/theme udah ada di file
template yang udah kita download lho. Itulah salah satu alasan kenapa di
artikel sebelumnya dijelaskan kalau jangan hapus file templatenya.
Oiya, setiap template itu punya cara editnya
masing-masing. Karna beda template widget dan code nya juga beda.
Beda template, beda cara editnya
Template blog, kodenya dimulai dengan
<ul>
Dan di akhiri dengan
<li>
Coba perhatikan kode berikut :
*kode berikut merupaka kode untuk top navigation di template
Vienna Mag
<nav class='top-menunav'> <ul> <li><a href='#' title='About Us'><i class='fa fa-user'/> About</a></li>
Oke, langsung ke tutorial cara editnya aja ya. Tapi sebelum itu, aku pengen jawab pertanyaan di bawah ini dulu :
“Kak, edit template bisa nggak pake smartphone ?”
Jawaban singkatnya, bisa.
Jawaban panjangnya, bisa pake smartphone, tapi lebih baik
pake laptop/komputer. Kenapa ?
Pertama, di komputer kamu bisa pake ctrl+f buat cari kode yang mau di edit, sedangkan di hp enggak
bisa. Jadi kalau pake hp harus cari manual satu-satu. Padahal rata-rata
template blog itu terdiri lebih dari 3000 baris.
Kedua, di komputer ada cursor nya, sedangkan di hp enggak ada. Jadi di komputer lebih enak
kalau mau ngeblog mana yang mau di
edit, atau menghapus dan menambahkan kode.
Ketiga, di handphone, kalau sinyal nya enggak bener-bener
bagus dan hape nya bukan hape kentang, nanti loading nya bakal lama. Bisa bikin
olahraga emosi kalau buat yang enggak sabaran.
Ketiga, di laptop bisa memanfaatkan ctrl+c untuk copy code, ctrl+x
untuk memindah kode, ctrl+v untuk
menempelkan/meletakkan kode, dan ctrl+z
untuk undo jika ada yang salah.
Lagi pula, kalau lewat komputer, kita bisa enak dan
leluasa buat pindah-pindah tab satu ke tab yang lainnya. Sedangkan di handphone
agak ribet.
Buka Dokumen Template yang udah kamu extract
Buat yang belum tahu cara extract nya, silahkan baca “Cara Extract File RAR dan ZIP”. Seperti
yang udah di jelaskan di atas, dan di singgung di artikel sebelumnya, “Jangan Hapus File”.
Meskipun yang akan di upload ke blog cuman file yang
berbentuk .xml tapi file yang lain itu juga penting. File itu dibuat karna ada
fungsinya.
1. Logo
Biasanya, di file template ada logonya. Fungsinya apa
coba ? di beberapa template, itu pakek nya logo sebagai identitas blog nya. Kadang,
kita ga bisa Cuma pake nama yang ada di blog, bisa enggak bisa, bisa error atau
miss font.
Nah, logo tersebut bisa kita manfaatkan untuk membuat
logo blog kita sendiri. Logo tersebut di jadikan sebagai acuan ukuran. Jadi bisa
“PAS” waktu di upload ke blog.
2. Dokumentasi
Seperti yang udah di singgung di atas, setiap template
punya code nya masing-masing, punya widgetnya masing-masing, dan cara editnya
masing-masing. Makanya, setiap template ada dokumentasi nya.
Tujuannya untuk memudahkan user ngedit templatenya. Dokumentasi
ini biasanya berbentuk url short cut menuju link tertentu. Di sana, ada
tutorial edit templatenya.
Untuk ngedit template, ada dua cara. Cara pertama melalui
widget. Cara kedua melalui kode. Kalau editnya lewat widget, buka di bagian layout. Sedangkan kalau editnya lewat kode,
buka di bagian theme edit html.
Nah, dari sini, langkah pertama edit template adalah
dengan membuka dokumentasinya. Lalu kita pahami, kita cari mana yang mau kita
edit. Oiya, serambi kita ngedit template, alangkah baiknya kalau kita juga buka
demo templatenya sebagai acuan kita
buat ngeditnya.
Contoh Dokumentasi
*dokumentasi vienna mag (versi premium)
Kalau kamu mau templatenya, kamu bisa download di “Free Premium Blogger Template” (gratis).
Contoh Edit via Kode
<nav id='nav' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'> <a class='menu-slide' href='#'><i class='fa fa-list'/> Menu</a> <ul class='nav vienna-mainmenu'> <li><a class='active' href='/'><span itemprop='name'><i class='fa fa-home'/> Home</span></a></li> <li><a href='#' itemprop='url'><span itemprop='name'>Fitur</span></a> <ul> <li><a href='#' itemprop='url'><span itemprop='name'>Sitemap 1</span></a></li> <li><a href='#' itemprop='url'><span itemprop='name'>Sitemap 2</span></a></li> <li><a href='#' itemprop='url'><span itemprop='name'>Tag and Styling</span></a></li> </ul> </li> <li><a href='#' itemprop='url'><span itemprop='name'>Menu 1</span></a> <ul> <li><a href='#' itemprop='url'><span itemprop='name'>Submenu 1</span></a></li> <li><a href='#' itemprop='url'><span itemprop='name'>Submenu 2</span></a></li> <li><a href='#' itemprop='url'><span itemprop='name'>Kota</span></a> <ul> <li><a href='#' itemprop='url'><span itemprop='name'>Jakarta</span></a></li> <li><a href='#' itemprop='url'><span itemprop='name'>Bandung</span></a></li> <li><a href='#' itemprop='url'><span itemprop='name'>Sukabumi</span></a></li> <li><a href='#' itemprop='url'><span itemprop='name'>Cianjur</span></a></li> </ul> </li> </ul> </li> <li><a href='#' itemprop='url'><span itemprop='name'>Menu 2</span></a> <ul> <li><a href='#' itemprop='url'><span itemprop='name'>Submenu 1</span></a></li> <li><a href='#' itemprop='url'><span itemprop='name'>Submenu 2</span></a></li> <li><a href='#' itemprop='url'><span itemprop='name'>Submenu 3</span></a> <ul> <li><a href='#' itemprop='url'><span itemprop='name'>Item 1</span></a></li> <li><a href='#' itemprop='url'><span itemprop='name'>Item 2</span></a></li> <li><a href='#' itemprop='url'><span itemprop='name'>Item 3</span></a></li> <li><a href='#' itemprop='url'><span itemprop='name'>Item 4</span></a></li> </ul> </li> </ul> </li> <li><a href='#' itemprop='url'><span itemprop='name'>Menu 3</span></a> <ul> <li><a href='#' itemprop='url'><span itemprop='name'>Submenu 1</span></a></li> <li><a href='#' itemprop='url'><span itemprop='name'>Submenu 2</span></a></li> <li><a href='#' itemprop='url'><span itemprop='name'>Submenu 3</span></a> <ul> <li><a href='#' itemprop='url'><span itemprop='name'>Item 1</span></a></li> <li><a href='#' itemprop='url'><span itemprop='name'>Item 2</span></a></li> <li><a href='#' itemprop='url'><span itemprop='name'>Item 3</span></a></li> <li><a href='#' itemprop='url'><span itemprop='name'>Item 4</span></a></li> </ul> </li> </ul> </li> <li><a href='#' itemprop='url'><span itemprop='name'>Mobile</span></a></li> <li><a href='#' itemprop='url'><span itemprop='name'>Error Page</span></a></li> </ul> <form action='/search' id='search-form' method='get' style='display: inline;'><table><tbody><tr><td class='search-box'><input id='search-box' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value='';' type='text' value='Search...'/></td> <td class='search-button'><input id='search-button' type='submit' value=''/></td></tr></tbody></table></form> </nav>
Itu adalah kode main menu. Ngeditnya, ganti kode nama menu dengan menu yang ingin kalian buat. Ganti kode # dengan url link
nya agar bisa di buka (diklik).
contoh :
<li><a href='http://indoitlearning.blogspot.com/2020/03/indo-it-learning.html' itemprop='url'><span itemprop='name'>Profil</span></a>
Contoh Edit via Widget
Ganti nama menunya dengan nama menu yang ingin kamu buat.
Nah, kurang lebih begitulah tutorial cara edit template. Gimana
masih bingung nggak ? tenang, nanti kita bahas lebih lanjut sekalian praktek di
artikel selanjutnya ya. Oke, semoga artikel ini bermanfaat.
Selanjutnya, yuk belajar "Cara Edit Template Blog #2"
Selanjutnya, yuk belajar "Cara Edit Template Blog #2"
0 Comments