Di artikel sebelumnya, sudah kita bahas tutorial caraedit template/theme blogger. Gimana mudah bukan ? apa masih bingung ? Nah, di artikel ini akan kita bahas lagi secara lebih jelas ya. Temen-temen bisa sekaligus praktek.


Oke, di sini kita akan pake template dari dari ArlinaDzgn “Vienna Mag” versi premium dan “Publister” dari Sora Blogger Tamplates ya gais. Semoga dengan artikel ini bisa membantu temen-temen ngedit blog nya ya.


Buat temen-temen yang mau templatenya, silahkan download di “Free Premium Blogger Template – Shazarft 2020”. Untuk cara download nya silahkan baca di “Cara Lewati Iklan di Safe Link”.


Yang pertama, kita mulai dari Vienna Mag dulu ya


Buka Demo Vienna Mag


Demo Vienna Mag silahkan buka musarizalalfath.blogspot.com
Demo Publishter silahkan buka alumnibinaulummah.blogspot.com


Buka Dokumentasi Vienna Mag




Cara Edit Template Blog


Edit Navigation




Seperti yang sudah dijelaskan di artikel sebelumnya, bahwa ada dua cara edit template. Yang pertama melalui edit html dan yang ke dua melalui widget. Di sini, dijelaskan navigasi  pengeditannya di lakukan melalui edit html.


Oke, kalau begitu, silahkan buka :


Blogger – Theme – Edit html
[edit html]


Untuk cari code yang mau di edit, silahkan klik ctrl+f. Kemudian masukkan kode mana yang mau di edit, lalu klik enter. Kita akan langsung di arahkan ke kode tersebut.


*Kalau di ctrl+f tidak bisa, silahkan kamu scroll manual kodenya.


Sebagai contoh, kita mau edit Top Navigation seperti gambar di atas.





Nah, di sini, tinggal kita ganti kodenya. Misalnya About di ganti Profil atau mau membuat link nya. Untuk menambahkan link, ubah kode # menjadi link yang ingin kamu tempatkan. Lalu klik save.


Setelah berhasil, kamu udah mengedit bagian Top Navigasi. Buat ngeceknya, silahkan buka blog mu lalu klik Top Navigasinya.


Edit Navigasi



Tidak hanya mengubah yang sudah ada, kamu juga bisa menambah atau mengurangi navigasi yang ada. Kalau mau nambah ya tinggal copy saja codenya lalu tempelkan di bawahnya. Kalau mau ngurangi, tinggal hapus aja kodenya.


Contoh :


Kode Original

<nav class='top-menunav'>
            <ul>
              <li><a href='#' title='About Us'><i class='fa fa-user'/> About</a></li>
              <li><a href='#' title='Our Sitemap'><i class='fa fa-list'/> Sitemap</a></li>
              <li><a href='#' title='Contact us'><i class='fa fa-envelope'/> Contact</a></li>
              <li><a href='#' title='Disclaimer'><i class='fa fa-check-circle'/> Disclaimer</a></li>
<li class='doremi join'><a href='#' rel='nofollow' target='_blank' title='Join Our Site'><i class='fa fa-plus'/><span class='inv'/></a></li>
<li class='doremi gplus'><a href='#' rel='nofollow' target='_blank' title='Follow us on Google+'><i class='fa fa-google-plus'/><span class='inv'/></a></li>
<li class='doremi facebook'><a href='#' rel='nofollow' target='_blank' title='Follow us on Facebook'><i class='fa fa-facebook'/><span class='inv'/></a></li>
<li class='doremi instagram'><a href='#' rel='nofollow' target='_blank' title='Follow us on instagram'><i class='fa fa-instagram'/><span class='inv'/></a></li>
<li class='doremi twitter'><a href='#' rel='nofollow' target='_blank' title='Follow us on Twitter'><i class='fa fa-twitter'/><span class='inv'/></a></li>
            </ul>
            <a href='#' id='pull'>MENU</a>
          </nav>

Kode Custom (yang udah di ganti)

<nav class='top-menupro'>
            <ul>
              <li><a href='http://musarizalalfath.blogspot.com/2017/11/musa-rizal-al-fath.html' title='About Us'><i class='fa fa-user'/> About</a></li>
              <li><a href='https://musarizalalfath.blogspot.com/p/loading-toc.html' title='Our Sitemap'><i class='fa fa-list'/> Sitemap</a></li>
              <li><a href='https://musarizalalfath.blogspot.com/p/contact-us.html' title='Contact us'><i class='fa fa-envelope'/> Contact</a></li>
              <li><a href='https://www.instagram.com/musarizalalfath_' title='Disclaimer'><i class='fa fa-check-circle'/> Disclaimer</a></li>
<li class='doremifa join'><a href='http://musarizalalfath.blogspot.com/' rel='nofollow' target='_blank' title='Join Our Site'><i class='fa fa-plus'/><span class='inv'/></a></li>
<li class='doremifa gplus'><a href='https://www.instagram.com/musarizalalfath_' rel='nofollow' target='_blank' title='Follow us on Google+'><i class='fa fa-google-plus'/><span class='inv'/></a></li>
<li class='doremifa facebook'><a href='https://facebook.com/musarizalalfathblogspotcom-1572077283111147' rel='nofollow' target='_blank' title='Follow us on Facebook'><i class='fa fa-facebook'/><span class='inv'/></a></li>
<li class='doremifa instagram'><a href='https://www.instagram.com/musarizalalfath_' rel='nofollow' target='_blank' title='Follow us on instagram'><i class='fa fa-instagram'/><span class='inv'/></a></li>
<li class='doremifa twitter'><a href='https://twitter.com/musarizalalfath' rel='nofollow' target='_blank' title='Follow us on Twitter'><i class='fa fa-twitter'/><span class='inv'/></a></li>
            </ul>
         <a href='#' id='pull'>MENU</a>
          </nav>


Nah, itulah kira-kira cara edit template melalui edit html. Buat navigasi yang lain cara nya juga sama. Seperti main navigation misalnya.


<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==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' type='text' value='Search...'/></td>
<td class='search-button'><input id='search-button' type='submit' value=''/></td></tr></tbody></table></form>
</nav>


Sama aja, tinggal dirubah, dikurangi, atau ditambah.


Ingat, kode dimulai dengan <ul> dan diakhiri dengan <li>


Oiya, editnya hati-hati ya. Jangan sampai salah kode. Kalau Cuma ga bisa di save sih gapapa. Nanti kalau sampai templatenya error kan jadi repot juga. Apalagi gatau dimana problemnya. Makanya, lebih baik di back up dulu, biar pas ngedit ada kesalahan nggak perlu edit dari awal lagi.


Caranya ada di artikel “Cara Download dan Upload Template Blog”


Oke, selanjutnya kita tambahkan Site Map


Menambahkan Site Map


1. Copy code berikut :

 
<div id="bp_toc">
Loading TOC. Please wait....</div>
<script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/daftar-isi-simple.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>

2. Buka Page/Halaman
3. Buat Halaman Baru/New Page
4. Paste code tadi di bagian HTML


*ingat ! HTML bukan Compose


5. Publish
6. Klik view lalu copy link nya
7. Buka Theme - Edit Html
8. ctrl+f lalu tulis sitemap
9. Ubah # dengan url yang sudah di copy tadi, lalu save


Dah, selesai.
Code # yang kamu ganti dengan url link tadi berfungsi buat navigasi di halaman blogmu. Waktu di klik, nanti akan menuju ke link yang kamu masukkan itu.
Dah, jelas ya. Kira-kira begitu. Itu kan baru edit yang melalui HTML. Selanjutnya kita coba bahas bersama cara edit yang melalui Widget. 


Edit Widget

Di sini kita masih pake Vienna Mag ya.
Setiap widget itu dibuat karna ada tujuan dan fungsinya. Jadi sebisa mungkin jangan dihapus. Tapi kalau mau dihapus juga gapapa sih. Hapus aja widget yang engga dipake.


Kalaupun engga mau di hapus, bisa dihidden dulu, siapa tau siatu saat kepakek kan ? caranya nanti kita bahas di artikel yang lain ya.


Oke, meskipun widget itu sudah ada sejak customnya, tapi enggak bisa langsung kita pake gitu aja. Harus kita isi dulu. Caranya gimana ? caranya emang tiap template beda-beda sih. Tapi konsepnya sama.


caranya ada di dokumentasi template


Kita mulai dari ngisi widget  Ayo Lebih Baik (seperti demo di musarizalalfath.blogspot.com).


Cara Mengisi Widget dengan Postingan


1. Buka Layout
2. Cari Widget yang mau di edit
3. Ubah nama kalau namanya mau di ubah, lalu isi konten dengan salah satu label



*labelnya yang udah ada di postingan kamu ya.
4. save


Coba cek di blog mu. Di refresh dulu biar muncul. Dan taraaaa, amazing, bisa kan ?? kan kan kan ???


Sekarang kita edit yang “Publister”. Di template ini kebanyakan editnya lewat widget, kalau Vienna Mag kebanyakan lewat html. Oke, kita coba edit main menu nya ya.


1. Buka Widget
2. Cari Widget yang mau di ubah
3. Tinggal di edit


Ubah nama buat ngubah nama. Isi link nya dengan url link yang mau kamu masikkan. Hapus yang perlu dihapus, dan tambahin yang perlu ditambahin.


4. Save


Yeeeaay...! well done, kamu berhasil. Jadi temen-temen kira-kira begitu ya tutorial cara edit template nya. Itu merupakan konsep dasarnya. Bisa diterapkan di template blogger mana aja. semoga artikel ini membantu ya.


Kapan-kapan kita bahas lebih jauh lagi di artikel selanjutnya ya. Kali ini sampai di sini dulu.


Jangan cuman paham langkahnya, tapi pahami juga konsepnya