Pengaturan Template Framework Blogger
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 "
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
Dalam icon template ini saya menggunakan icon SVG, Jika Anda ingin mengubah icon logo apple silahkan ikuti panduan dibawah ini.
Buka daftar icon yang tersedia di URL Material Icon
Buka edit HTML Template dengan cara Blogger > Tema / Theme > Edit HTML
Klik CTRL + F pada keyboard dan masukan text " <svg height='20' style='vertical-align: -2px;' viewBox='0 0 512 512' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M349.13 136.86c-40.32 0-57.36 19.24-85.44 19.24-28.79 0-50.75-19.1-85.69-19.1-34.2 0-70.67 20.88-93.83 56.45-32.52 50.16-27 144.63 25.67 225.11 18.84 28.81 44 61.12 77 61.47h.6c28.68 0 37.2-18.78 76.67-19h.6c38.88 0 46.68 18.89 75.24 18.89h.6c33-.35 59.51-36.15 78.35-64.85 13.56-20.64 18.6-31 29-54.35-76.19-28.92-88.43-136.93-13.08-178.34-23-28.8-55.32-45.48-85.79-45.48z' fill='currentColor'/><path d='M340.25 32c-24 1.63-52 16.91-68.4 36.86-14.88 18.08-27.12 44.9-22.32 70.91h1.92c25.56 0 51.72-15.39 67-35.11 14.72-18.77 25.88-45.37 21.8-72.66z' fill='currentColor'/></svg> lalu klik tombol " ENTER "
Apabila sudah ketemu dengan bagian kode yang saya sebutkan diatas, silahkan hapus kode tersebut dan buka halaman website yang dibuka tadi.
Cari kode icon logo yang diinginkan. Salin kode ikon SVG yang Anda inginkan, lalu letakan dibagian kode SVG yang dihapus sebelumnya.
Jika sudah klik tulisan " SIMPAN "
Mengaktifkan Widget Featured Postingan
Buka Blogger > Tata Letak / Layout > Featured > Edit
 |
| 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
 |
| Lebar Tema |
Klik " SIMPAN " untuk menyimpan hasilnya.
Merubah Warna dan Background Tema
Masih dimenu yang sama " Sesuaikan "
Pilih > Background / Latar Belakang
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.
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 "
Post a Comment
<i rel="pre"></i>for code blocks<i rel="blockquote"></i>to quote somebody<i rel="code"></i>for a few words of code<i rel="img">URL image<i>to paste in an image (it'll need to be hosted somewhere else though)