Cara Mengedit Template VioMagz V.3 2019

Memang sudah tidak asing lagi bagi para kalangan blogger dengan Template VioMagz V.3, alasan menggunakan template tersebut sudah jelas karena untuk meningkatkan pagespeed dari blog. Namun yang menjadi perhatian adalah karena umumnya template viomagz ini digunakan sehingga tidak ada pembeda dimulai dari pemilihan warna header, footer, serta link yang ditautkan pada blog. Pada kesempatan ini, saya akan memberikan tutorial bagaimana cara mengedit template VioMagz v.3.

Sebelum melakukan proses editing, ada baiknya kalian sudah mengerti bagian apa saja yang perlu diedit, pada postingan ini saya akan memberikan tutorial dasar sehingga template viomagz yang kalian gunakan terlihat berbeda dengan pengguna template viomagz pada umumnya.

Lakukanlah langkah pengamanan template, dengan cara backup template kalian sebelum melakukan editing ya!.

1. Cara Edit Bagian Header

Sama seperti proses edit template pada umumnya, silahkan membuka halaman edit HTML pada blog kalian masing-masing, lalu cari kode seperti di bawah ini pada blog kalian.

<Variable name="header.background.kiri" description="Warna Header Kiri" type="color" default="#222222" value="#555555"/>
<Variable name="header.background.kanan" description="Warna Header Kanan" type="color" default="#222222" value="#555555"/>

Sesuai dengan namanya pada script di atas, menjelaskan bahwa kode di atas berfungsi untuk merubah warna pada bagian header blog untuk template VioMagz, kode warna yang saya kasih warna biru menandakan variabel yang dapat kalian ganti menyesuaikan warna apa yang ingin kalian gunakan.

Bila kalian ingin menggunakan efek shading, kalian dapat melakukan kombinasi warna dengan perpaduan warna sesuai keinginan kalian masing-masing, bila ingin menggunakan 1 warna saja cukup menyamakan kode warna untuk bagian header kiri dan kanan.

2. Cara Edit Bagian Body dan Post

Nah, setelah melakukan kombinasi warna untuk header. Tahap selanjutnya adalah bila kalian menginginkan mengganti warna background dari blog kalian dari warna putih menjadi warna lain nya, ataukah warna background pada kolom artikel kalian ingin berbeda dari warna background blog, kalian dapat dengan mudah cukup mencari kode berikut.

<Variable name="body.background.color" description="Body" type="color" default="#ffffff" value="#ffffff"/>

Kode di atas digunakan untuk edit bagian background pada blog kalian, dan tanda biru merupakan kode warna yang dapat kalian ganti menyesuaikan selera anda masing-masing.

<Variable name="posts.background.color" description="Warna Wrapper" type="color" default="#ffffff" value="#ffffff"/>

Kode di atas digunakan untuk edit bagia background artikel, dan tanda biru merupakan kode warna yang dapat kalian gunakan untuk menyesuaikan selera anda masing-masing.

3. Cara Edit Bagian Footer

Untuk melakukan edit warna pada bagian footer, sama seperti cara di atas sebelumnya. Karena kalian hanya diminta untuk mengganti kode warna saja dan menyesuaikan selera anda masing-masing.

<Variable name="footer.background.color" description="Footer" type="color" default="#222222" value="#222222"/>

Kode warna di atas digunakan untuk melakukan edit pada bagian footer blog anda masing-masing, kode warna biru digunakan untuk mengganti warna sesuai selera.

4. Cara Edit Warna Link

Pada bagian ini, setelah kalian telah melakukan seluruh editing pada bagian header, footer, body, dan lain lain. Edit warna link digunakan untuk menyesuaikan warna link yang ada di blog, sehingga tampilan blog kalian dapat terlihat sinkron.

<Group description="Warna Link" selector=".main-outer">
<Variable name="body.link.color" description="Link Color" type="color" default="#332A33" value="#332A33"/>
<Variable name="body.link.visited.color" description="Visited Color" type="color" default="#332A33" value="#332A33"/>
<Variable name="body.link.hover.color" description="Hover Color" type="color" default="#555555" value="#555555"/>
</Group>

Kode di atas digunakan untuk melakukan edit pada warna link, warna merah dan biru merupakan kode warna yang dapat kalian gunakan untuk mengganti warna sesuai selera masing-masing untuk mendapatkan tone warna yang indah.

5. Cara Edit Bagian Back To Top

Editing warna back to top juga menjadi salah satu pertimbangan yang baik, hal ini ditujukan untuk menguatkan warna yang telah kita ganti sebelumnya, sehingga tampilan warna back to top akan menjadi warna penegas bahwa blog kita berbeda seperti pada default template yang disediakan.

<Group description="Back to Top" selector="#back-to-top">
<Variable name="backtp.background.color" description="Background" type="color" default="#555555" value="#555555"/>
<Variable name="backtp.color" description="Color" type="color" default="#ffffff" value="#ffffff"/>
</Group>

Kode di atas merupakan deskripsi dari bagian komponen back to top yang ada di blog, kode warna biru merupakan kode yang dapat kalian ganti menyesuaikan selera anda masing-masing.

Bila telah melakukan ke lima langkah tahapan di atas, secara otomatis template VioMagz yang kalian gunakan akan terlihat berbeda dengan template VioMagz secara default yang berwarna biru. Untuk edit navigasi mungkin proses nya mudah seperti di atas, cukup mencari kode berikut.



Pada bagian bawahnya terdapat menu yang dapat kita edit sesuai kebutuhan kita, kalian bisa menghapus atau juga menambahkan menu navigasi. Contoh di bawah merupakan menu navigasi yang terdapat pada blog ini.

<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>Privacy Policy</a></li>

Kode warna yang berwarna biru dapat kalian ganti menyesuaikan link blog kalian masing-masing, sedangkan kode warna merah dapat kalian ganti sesuai deskripsi atau judul singkat dari navigasi blog kalian masing-masing. Untuk melakukan edit pada menu navigasi bagian header, caranya sama seperti edit menu navigasi pada bagian footer.

Oke, semoga bermanfaat bagi teman-teman blogger yang telah membeli Template VioMagz V.3 2019, jika ada pertanyaan silahkan sampaikan di kolom komentar !

Mawardi Teko