Cara Lengkap Setting dan Optimasi Template VioMagz V.2.8



Di bawah ini adalah panduan cara pemasangan serta pengaturan template premium VioMagz. Silakan dibaca secara pelan-pelan dan teliti supaya templatenya terpasang dengan baik dan benar.

Memasang Template
Hal pertama yang perlu dilakukan tentu saja memasang template yang sudah dibeli ke blog milik sobat.

Berikut langkah-langkahnya:
#1. Pertama pastikan sobat sudah meng-unzip file template yang didownload. Di dalam file .zip terdapat file berekstensi .xml, nah file tersebut yang akan diupload atau pasang ke blog.
#2. Kedua saya merekomendasikan untuk melakukan backup template yang akan diganti.
Caranya:
  • Login ke “Blogger” > Masuk ke menu “Tema”
  • Klik “Backup / Pulihkan”
  • Klik “Download tema”
#3. Selanjutnya sobat tinggal mengupload file template ke blog.
Caranya:
  • Login ke “Blogger” > Masuk ke menu “Tema”
  • Klik “Backup / Pulihkan”
  • Klik “Choose File”
  • Pilih file template di Komputer > Klik “Upload”
#4. Template sudah berhasil terpasang.

Mengedit Menu Navigasi
Pada template VioMagz terdapat dua menu navigasi. Menu Navigasi pertama terletak di sebelah kanan Header, dan yang kedua terletak di atas Footer.

Untuk mengedit kedua menu navigasi sobat harus mengeditnya melalui menu Edit HTML.
Login ke “Blogger” > Masuk ke menu “Tema” > Klik “Edit HTML”.
Menu Navigasi Pertama (Sebelah Kanan Header)
Cari kode ini di dalam kode template:
<!-- menu navigasi header start -->
<ul>
  <li><a href='#'>Menu</a></li>
  <li><a href='#'>Menu</a></li>
  <li><a href='#'>Menu</a></li>
  <li><a href='#'>Menu</a>
  <ul>
 <li><a href='#'>SubMenu1</a></li>
 <li><a href='#'>SubMenu2</a></li>
 <li><a href='#'>SubMenu3</a></li>
  </ul>
  </li>
  <li><a href='#'>Menu</a>
  <ul>
 <li><a href='#'>SubMenu1</a></li>
 <li><a href='#'>SubMenu2</a></li>
 <li><a href='#'>SubMenu3</a></li>
 <li><a href='#'>SubMenu4</a></li>
  </ul>
  </li>
</ul>
<!-- menu navigasi header end -->
Edit text dengan background berwarna merah dengan URL tujuan dan warna hijau dengan nama menu yang diinginkan.
  • Menghapus Menu
    Untuk menghapus salah satu menu cukup hapus dari kode <li> sampai </li>. Misalnya ingin menghapus menu “SubMenu4” maka hapus kode :
    <li><a href='#'>SubMenu4</a></li>
  • Menambah menu
    Untuk menambahkan menu, copy kode ini:
    <li><a href='#'>NamaMenu</a></li>
    Paste kode tersebut di atas kode :
    </ul>
    <!-- menu navigasi header end -->
  • Menambah Menu dengan SubMenu
    Untuk menambahkan menu dengan submenu, copy kode ini :
    <li><a href='#'>NamaMenu</a>
      <ul>
     <li><a href='#'>NamaSubMenu1</a></li>
     <li><a href='#'>NamaSubMenu2</a></li>
      </ul>
    </li>
    Paste kode tersebut di atas kode :
    </ul>
    <!-- menu navigasi header end -->
  • Jangan lupa sesuaikan URL tujuan menu dan Nama menunya.
Menu Navigasi Kedua (Di Atas Footer)
Cari kode ini di dalam kode template:
<!-- menu navigasi footer start -->
<ul>
  <li><a href='#'>About</a></li>
  <li><a href='#'>Contact</a></li>
  <li><a href='#'>Privacy Policy</a></li>
  <li><a href='#'>Disclaimer</a></li>
</ul>
<!-- menu navigasi footer end -->
Edit text dengan background berwarna merah dengan URL tujuan dan yang berwarna hijau dengan nama menu yang diinginkan.
Jika sudah diedit semua, jangan lupa klik “Simpan tema”
Untuk menghapus dan menambah menu caranya sama seperti menu pertama, hanya bedanya untuk menu di atas footer tidak support submenu.

Menambahkan Tombol Media Sosial
Secara default tombol social media tidak terpasang ketika template baru pertama kali diupload.
Untuk memasangnya silakan ikuti langkah di bawah:
  • Login ke “Blogger” > Masuk ke menu “Tata Letak”
  • Klik “Tambahkan Gadget” di atas Footer
  • Pilih Gadget “HTML/JavaScript”
  • Selanjutnya tambahkan kode di bawah ini pada bagian Konten:
    <!-- social media button start -->
    <ul class='nav-social'>
      <li><a class='fcb' href='https://www.facebook.com/' rel='nofollow'><i class='fa fa-facebook-square fa-2x'/></a>
      </li>  
      <li><a class='igicon' href='https://www.instagram.com/' rel='nofollow'><i class='fa fa-instagram fa-2x'/></a>
      </li>
      <li><a class='gpl' href='https://plus.google.com/' rel='nofollow'><i class='fa fa-google-plus-square fa-2x'/></a>
      </li>
      <li><a class='twt' href='https://twitter.com/' rel='nofollow'><i class='fa fa-twitter-square fa-2x'/></a> 
      </li>
      <li><a class='ytb' href='https://www.youtube.com' rel='nofollow'><i class='fa fa-youtube fa-2x'/></a> 
      </li>
    </ul>
    <!-- social media button end -->
  • Jangan lupa klik “Simpan”
Jangan lupa rubah URL yang bertanda hijau di atas dengan URL profil social media milik sobat.

Menambahkan Widget Featured Post
Untuk memasang widget Featured Post caranya sangatlah mudah.
Caranya:
  • Login ke “Blogger” > Masuk ke menu “Tata Letak”
  • Klik “Tambahkan Gadget” tepat di atas Posting Blog
  • Pilih Gadget “Entri yang Diunggulkan”
  • Setelah itu tinggal pilih artikel mana yang ingin ditampilkan pada Featured Post
  • Jika sudah, klik “Simpan”
Modifikasi Tampilan Template
Sobat bisa dengan mudah mengganti warna, background, dan juga font pada template ini melalui menu Desainer Tema Blogger.
Caranya:
  • Login ke “Blogger” > Masuk ke menu “Tema” 
  • Klik tombol “Sesuakan”
  • Setelah itu klik “Tingkat Lanjut”
  • Pada menu tersebut sobat bisa merubah background dan juga warna template sesuai keinginan.
Menampilan Kotak Berlangganan FeedBurner
Template ini sudah tersedia fitur kotak berlangganan via email menggunakan feedburner, tapi secara default tidak ditampilkan.
Untuk menampilkannya silakan ikuti langkah-langkah berikut:
  • Login ke “Blogger” masuk ke menu “Tema” > Klik “Edit HTML
  • Cari kode ini :
    <b:include data='post' name='relatedpost'/>
  • Jika ketemu, tambahkan kode ini tepat di bawahnya :
    <b:include data='post' name='postsubscribebox'/>
  • Selanjutnya cari kode ini :
    https://feedburner.google.com/fb/a/mailverify?uri=BlogMasSugeng
    Ganti yang saya tandai merah dengan ID FeedBurner milik sobat
  • Cari lagi kode ini :
    <input name='uri' type='hidden' value='BlogMasSugeng'/>
    Ganti yang saya tandai merah dengan ID FeedBurner milik sobat
  • Terakhir klik “Simpan tema
Membuat Loading Template Super Cepat
Loading template ini sebenarnya sudah cukup cepat tanpa harus melakukan modifikasi apapun.
Tapi jika masih merasa kurang, sobat bisa membuatnya lebih cepat lagi dengan melakukan beberapa modifikasi.
Dalam keadaan default loading template VioMagz sebenarnya sudah cukup cepat tanpa harus mengorbankan tampilan menjadi terlalu simpel. Tapi jika sobat benar-benar tergila-gila dengan kecepatan dan tidak keberatan untuk mengorbankan tampilan, di bawah ini saya tuliskan panduan cara membuat template VioMagz menjadi super cepat.

Menonaktifkan Navbar
Hal pertama yang bisa dilakukan adalah menonaktifkan Navbar pada template. Menonaktifkan Navbar tidak mempengaruhi tampilan template. Navbar pada template VioMagz sebenarnya sudah disembunyikan menggunakan CSS, namun navbar tersebut masih aktif meskipun tidak terlihat.
Untuk menonaktifkannya silakan ikuti langkah-langkah berikut:
  • Login ke Blogger > Masuk ke menu “Tata Letak”
  • Klik edit pada bagian widget Navbar (letaknya di atas Header)
  • Selanjutnya pilih “Off”
  • Klik “Simpan”
  • Selesai
Menghilangkan Thumbnail Postingan di Homepage
Cara yang ketiga mulai sedikit merubah tampilan template, yaitu dengan menghapus thumbnail postingan di homepage.
Caranya seperti berikut:
  • Login ke Blogger > Masuk ke menu “Tema”
  • Klik tombol “Edit HTML”
  • Cari dan hapus kode ini pada template:
    <b:include data='post' name='postthumbnail'/>
  • Selanjutnya cari kode CSS ini :
    .info-1, .info-2, h2.post-title, .post-snippet {
     margin-left: 275px;
    }
  • Hapus dan ganti dengan ini:
    .info-1, .info-2, h2.post-title, .post-snippet {
     margin-left: 0px !important;
    }
  • Jika sudah, klik “Simpan tema”
Menghilangkan Fitur Numbered Page Navigation
Fitur Numbered Page Navigation atau navigasi halaman bernomor pada template VioMagz bergantung pada JavaScript.
JavaScript sebenarnya tidak bagus untuk kecepatan loading blog, jadi supaya loading templatenya lebih cepat, sobat bisa menghilangkan fitur ini.
Berikut langkah-langkahnya:
  • Login ke Blogger > Masuk ke menu “Tema”
  • Klik tombol “Edit HTML”
  • Cari dan hapus kode ini pada template:
    <script>
    //<![CDATA[
    if(typeof firstText=="undefined")firstText="First";
    ...
    ...
    ... sampai dengan ....
    ...
    ...
    "+perPage+"#PageNo="+noPage}location.href=pAddress}
    //]]>
    </script>
  • Jika sudah, klik “Simpan tema”
Menghilangkan Thumbnail pada Widget Popular Posts
Jika sobat memasang Widget Popular Posts, silakan atur supaya tidak menampilkan Thumbnail pada judul.

Mengurangi Jumlah Widget yang Terpasang
Terakhir sebisa mungkin untuk tidak memasang terlalu banyak Widget.
Semakin banyak widget yang terpasang, semakin berat loading template.

Source: Panduan Setting Template VioMagz V.1.9

2 Responses to "Cara Lengkap Setting dan Optimasi Template VioMagz V.2.8"

  1. Masalahnya sekarang saya meakai template ini, sudah 3 hari situs saya tidak diindex oleh Google, gimana cara mengatasinya? Kalau secara tampilan sih bagus templatenya tapi kalau lama index google jadi gimana gitu? Bisa bantu mengatasi?

    ReplyDelete
    Replies
    1. Wah... biasanya ga sampe sehari dah di index sob.

      Delete

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel