On sale: 50% New Price for Template Blogger
Get Discon:
New Theme!

Viospaper Pro v.3.2.0 for Blogs and Magazine

Template Blogger majalah terbaik dan paling banyak digunakan. Update template akan didapatkan setelah melakukan pembelian.

Keuntungan yang didapat :

  • Dukungan dari perancang
  • Gratis update template selamanya
  • Link footer dapat dihapus

Syarat & Ketentuan :

  • Dilarang dibagikan ulang & dijual ulang

Harga Promo - Rp.200.000 - Rp.100.000

Halaman ini adalah tentang panduan template blogger Framework untuk mengatur bagian-bagian pengaturan template agar berjalan sesuai dengan tampilan didemo.

Langkah pertama adalah menganti template versi standar yang dipakai diblog sebelumnya. Silahkan baca panduan lewat link dibawah ini.


Daftar Isi :
  • Mengatur Data Meta Tag Template
  • Mengatur Menu Link Navigasi
  • Menganti Icon Logo Blog
  • Mengaktifkan Widget Featured Postingan
  • Memasang Kode Iklan
  • Membuat Halaman Kontak
  • Mengatur Lebar Tampilan
  • Merubah Warna Template sesuai Keinginan

Data Meta Tag Template

Pada dasarnya saya ingin membuat meta tag ini otomatis saja tanpa perlu diatur ke mode HTML. Namun karena ada beberapa data dari blogger.com yang kurang lengkap maka saya tambahkan secara manual dan itu harus dirubah sesuai dengan data-data milik Anda.

Buka edit HTML

Silahkan Anda edit kode dibawah ini dibagian bawah kode <head>

<meta content='xnxx' name='google-site-verification' rel='google'/>
<meta content='xnxx' name='dmca-site-verification' rel='dmca'/>
<meta content='xnxx' name='yandex-verification' rel='yandex'/>
<meta content='xnxx' name='msvalidate.01' rel='bing'/>
<meta content='xnxx' name='p:domain_verify' rel='pinterest'/>

Penjelasan :

  • Bagian yang saya beri tanda merah ' xnxx ' ganti dengan kode unik milik Anda.
  • google-site-verification untuk bagian kode uniknya bisa didapatkan di Google Webmaster
  • dmca-site-verification untuk kode uniknya bisa didapatkan di DMCA Protection
  • yandek-verification kode uniknya bisa didapatkan di Yandex.Webmaster
  • msvalidate.01 kode uniknya bisa didapatkan di Bing Webmaster
  • p:domain_verify kode uniknya bisa ikuti panduan Pinterest

Jika kode diatas tidak dirubah apakah akan berpengaruh kebagian index mesin pencarian?

Tidak terlalu berpengaruh, tapi sedikit memberikan efek untuk memberitahukan kemesin pencari bahwa blog yang menggunakan kode ini adalah kepemilikan Anda.

Masih dibagian edit HTML cari kode yang mirip seperti dibawah ini.
<meta content='https://www.facebook.com/URL-PROFILE-FB' property='article:author'/>
<meta content='https://www.facebook.com/URL-FANPAGE-FB' property='article:publisher'/>
<meta content='xnxx' property='fb:app_id'/>
<meta content='xnxx' property='fb:admins'/>
Penjelasan :
  • URL-PROFILE-FB ubah dengan URL Profil facebook Anda
  • URL-FANSPAGE-FB ubah dengan URL Link halaman facebook milik Anda.
  • fb:app_id ubah kode " xnxx " dengan ID Aplikasi Facebook Anda.
  • fb:admins ubah kode " xnxx " dengan ID Admin dengan cara akses ke Find my Facebook

Ubah juga bagian kode dibawah ini.
<meta content='xnxx' name='twitter:site'/>
<meta content='xnxx' name='twitter:creator'/>

Penjelasan :
  • Ubah bagian kode " xnxx " sesuai penjelasan dibawah
  • twitter:site ubah dengan nama user Twitter contoh > @rian_seo
  • twitter:creator ubah dengan nama akun Twitter Anda, contoh > @rian_seo

Jika langkah diatas sudah selesai diikuti maka klik tombol " SIMPAN "

Dokumentasi Framework

Mengatur Menu Link Dropdown

Buka Blogger > Tata letak / Layout > Menu LinkList > Edit

Susunan Menu Link Standar tanpa Menu Dropdown :

<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a></li>
<li><a href='#'>Menu 3</a></li>
<li><a href='#'>Menu 4</a></li>

Penjelasan :

Jika ingin menambah menu menjadi dropdown maka harus menambahkan kode seperti contoh dibawah ini :

<li>
<a href='#'>Menu Dropdown</a>

 <ul>
<li><a href='#'>Menu Dropdown 2</a>
<ul>
<li><a href='#'>Sub Menu 1</a></li>
<li><a href='#'>Sub Menu 1</a></li>
</ul>
</li>
</ul>

</li>

Silahkan atur menu link sesuai kebutuhan dan jangan lupa ganti kode " # " dengan link URL yang Anda inginkan.

Untuk text tulisan silahkan ubah sesuai dengan keinginan.

Menganti Icon Logo Blog

Dokumentasi Framework

Dalam icon template ini saya menggunakan Ionicons v5, Jika Anda ingin mengubah icon logo apple silahkan ikuti panduan dibawah ini.

Buka daftar icon yang tersedia di URL Ionicons

Buka edit HTML Template dengan cara Blogger > Tema / Theme > Edit HTML

Klik CTRL + F pada keyboard dan masukan text " name='logo-apple' lalu klik tombol " ENTER "

Dokumentasi Framework

Apabila sudah ketemu dengan bagian kode yang saya sebutkan diatas, silahkan buka halaman Ionsicons yang dibuka tadi.

Cari kode icon logo yang diinginkan.

Sebagai contoh, saya ingin menggunakan logo icon model Firefox silahkan lihat gambar dibawah ini.

Dokumentasi Framework

Klik icon yang dinginkan maka nanti akan muncul kode seperti contoh dibawah ini.

Dokumentasi Framework

Silahkan kamu catat tulisan nama iconnya saja contohnya > " logo-firefox " dan ganti tulisan " logo-apple " dengan text yang dicatat tadi.

Jika sudah klik tulisan " SIMPAN "

Mengaktifkan Widget Featured Postingan

Buka Blogger > Tata Letak / Layout > Featured > Edit

Dokumentasi Framework
Tata Letak

Pilih postingan yang ingin di Tampilkan.
  • Postingan terakhir yang dipublikasikan > Tampilan dari postingan terakhir dari blog Anda.
  • Semua label > Semua daftar postingan yang ada diblog, silahkan pilih salah satu label tertentu untuk menampilkan postingan sesuai dengan kategori blog.

Memasang Kode Iklan

Masih dimenu tata letak, silahkan Anda edit widget yang bertulisan " Advertisement " dengan kode iklan milik Anda.

Membuat Halaman Kontak

Buka Blogger > Halaman > Tambahkan Halaman baru > Beri judul " Kontak "

Ubah postingan menjadi mode HTML.

Salin kode dibawah ini dan paste dihalaman tadi dalam mode HTML.

<div class="contact-form-widget"> <form name="contact-form"> <span class="ctitles">Name :</span> <input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" type="text" value="" /> <span class="ctitles">Email Addres<span class="swajib">*</span> :</span> <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" type="text" value="" /> <span class="ctitles">Your Message <span class="swajib">*</span> :</span> <textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" rows="10"></textarea> <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Submit" /> <br /> <div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"> </div> <div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"> </div> </form> </div> <script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>

Klik " Publikasikan "

Mengatur Lebar Ukuran Tampilan Tema

Buka Blogger > Tema / Theme > Sesuaikan / Costumize

Pilih tulisan > Sesuaikan Lebar

Dokumentasi Framework
Lebar Tema

Klik " SIMPAN " untuk menyimpan hasilnya.

Merubah Warna dan Background Tema

Masih dimenu yang sama " Sesuaikan "

Pilih > Background / Latar Belakang

Dokumentasi Framework

Pada dasarnya tema ini tidak menggunakan gambar untuk bagian latar backgroundnnya, namun jika ingin memakai gambar pada tampilan tema bisa dengan mengklik " Gambar latar / Background "

Ada dua pilihan :
  • Memakai gambar sesuai gambar yang disediakan blogger langsung.
  • Menggunakan gambar latar sesuai keinginan yang tersimpan di memory Laptop Anda.

Merubah Warna Tema Sesuai Selera

Klik > Lanjutkan > Pilih bagian yang ingin diubah mulai dari warna, ukuran font dan jenis font.

Dokumentasi Framework

Sampai tahap ini semua pengaturan dari tema sudah dilakukan dengan benar. Jadi pastikan Anda mengikuti panduan diatas dengan teliti dan benar agar tidak ada kekeliruan.

Mengatasi Masalah Komentar tidak Muncul versi Mobile

Karena kode dari template ini masih mempertahankan kode data blogger versi lama, maka ada beberapa tampilan yang belum mendukung kususnya dibagian komentar versi mobile.

Silahkan Buka Blogger > Tema > Setelan Seluler > pilih Desktop

Klik " SIMPAN "

Reviews

2021's Best Selling Blogger Themes