wiblogger

Materi 11: Lebih jauh tentang Custom Theme Blogger

Materi 11: Lebih jauh tentang Custom Theme Blogger

Pada materi sebelumnya, telah kita bahas beberapa hal terkait Menu Theme pada dashboard blog. Satu diantaranya adalah mengenai ketersediaan Theme Bawaan Blogger. Sebagai informasi tambahan, kebanyakan blogger lebih cendrung memilih untuk menggunakan Custom Theme dibandingkan dengan Theme Bawaan Blogger. Pada materi ini, sedikit akan kita tinjau mengenai Custom Theme Blogger.

Image by dribbble.com

Daftar isi:
  1. Apa itu Custom Theme ?
  2. Alasan kenapa para blogger lebih memilih Custom Theme
  3. Custom Theme versi Gratis
  4. Custom Theme versi Premium (Berbayar)
  5. Haruskah saya menggunakan theme versi Premium ?
  6. Akhir Pembahasan


1. Apa itu Custom Theme Blogger

Custom Theme adalah semua theme yang Bukan merupakan theme bawaan blogger. Ada banyak situs yang menyediakan theme blogger, baik itu tersedia secara gratis maupun premium (berbayar).


2. Apa yang membuat seorang blogger lebih cendrung menggunakan custom theme ?

Untuk pertanyaan yang satu ini, alasan umum kebanyakan blogger lebih memilih menggunakan custom theme adalah ketersediaan desain. Ya, seperti yang telah disinggung sebelumnya, ada banyak situs yang menyediakan theme blogger yang bisa anda gunakan baik itu secara gratis maupun berbayar.

Kita tahu bahwa ketersediaan pilihan theme bawaan blogger sangatlah terbatas. Jika anda melakukan pencarian pada google dengan kata kunci "Free Blogger themes", atau "Free Blogger Templates", terdapat banyak sekali situs yang menyedikan themes blogger gratis. Desain dan fitur yang ditawarkan juga sangat beragam, mulai dari optimalisasi dalam segi SEO, widget yang unik dan lain sebagainya. Dan pada akhirnya, semua tergantung pada selera dan kebutuhan anda.

3. Custom theme versi gratis

Meskipun theme jenis ini bisa anda dapatkan secara gratis, umumnya setiap theme memiliki Credit Link. Ini merupakan salah satu cara yang dilakukan oleh developer theme untuk mempromosikan situs mereka. Anda sebagai pengguna theme gratis ini tidak diizinkan untuk menghapus / memanipulasi credit link ini.

Credit link adalah sebuah link text yang mengarah ke situs developer theme. Link ini umumnya terletak pada bagian bawah theme (footer). Untuk fitur, umumnya theme versi gratis ini memiliki fitur yang tidak jauh berbeda dengan versi premium. Hanya saja, pada versi premium, pengguna akan mendapatkan beberapa layanan khusus yang ditawarkan oleh developer.


4. Custom theme versi Premium (Berbayar)

Pada theme versi premium, umumnya terdapat beberapa layanan khusus yang diberikan oleh developer theme, salah satu diantaranya sebut saja misalnya Premium Support (Dukungan). Dengan layanan ini, anda bisa (berhak) menghubungi developer theme jika suatu waktu mendapati masalah pada theme. Hal ini tentunya akan sangat membantu jika anda belum begitu familiar dengan koding theme blogger. Untuk harga, pada umumnya harga pembelian theme premium blogger berkisar antara 100.000 sampai 250.000 / theme (personal license).

5. Haruskah saya menggunakan theme versi Premium ?

Seperti yang telah dijelaskan pada paragraf sebelumnya. Jika dilihat dari sisi fitur, umumnya setiap pengembang theme akan memberikan fitur yang tidak jauh berbeda pada kedua versi. Pada versi premium, beberapa keistimewaan yang ditawarkan lebih cendrung pada Layanan.

Jika anda masih dalam tahap belajar, menggunakan theme versi gratis sudah lebih dari cukup. Namun, bagi anda yang hendak menjalankan kegiatan blogging secara serius dan tidak ingin ambil pusing untuk masalah koding theme dan berbagai permasalahan yang mungkin akan dihadapi diwaktu mendatang, menggunakan theme versi premium mungkin bisa menjadi pilihan anda.

Tutorial terkait custom theme:


6. Akhir Pembahasan

Pada tahap ini, berbagai hal yang berhubungan dengan dashboard blog telah anda kuasai. Tutorial berkaitan dengan blogger.com lainnya bisa anda temukan pada label Tutorial Blogger. Selanjutnya, kita akan mulai belajar tentang SEO blog.


Mulai belajar SEO blog
Materi 10: Lebih Jauh Tentang Menu Theme (Tema) pada Dashboard Blog

Materi 10: Lebih Jauh Tentang Menu Theme (Tema) pada Dashboard Blog

Daftar isi:
  1. Antarmuka Utama Menu Theme
  2. Backup / Restore Theme
  3. Theme Bawaan Blogger
  4. Tentang Blogger Theme Designer
  5. Fitur Edit HTML Blogger


1. Antarmuka Utama Menu Theme pada Dashboard Blog

Menuju pada menu "Theme" (tema) yang terdapat pada dashboard blog. Halaman ini akan menampikan Preview blog. Tepatnya adalah 2 versi preview yaitu preview untuk tampilan versi desktop dan preview untuk tampilan versi mobile.

Tentang menu theme tema blogger


2. Backup & Restore Theme

Pada antarmuka menu Theme ini, pada posisi pojok kanan atas, terdapat tombol Backup / Restore.

tombol backup dan restore theme blogger

Sebelum anda melakukan perubahan apapun pada tema blog, sebagai langkah antisipasi kesalahan, pastikan anda melakukan backup terlebih dahulu. Lebih jauh tentang bagaimana cara melakukan backup theme bisa anda baca pada post: Cara Backup Theme / Tema di Blogger.


3. Theme Bawaan Blogger

Pada menu Theme ini, dapat anda lihat bahwa ada banyak pilihan theme bawaan blogger yang bisa anda terapkan pada blog. Secara keseluruhan, jumlah theme bawaan blogger ini adalah sebanyak 54 themes yang dikelompokkan kedalam beberapa kategori.

daftar tema bawaan blogger

Untuk menerapkan theme, klik pada theme yang anda kehendaki. Akan terbuka antarmuka preview, klik Apply to Blog.


Sedikit meninjau tentang theme bawaan blogger, diantara kategori-kategori theme yang tersedia, 4 diantaranya (Contempo, Soho, Emporio, Notable) merupakan theme bawaan baru yang ditambahkan oleh blogger pada Maret 2017. Empat kategori theme ini memiliki versi layout dan widget yang berbeda dibandingkan dengan theme yang terdapat dalam kategori lainnya (theme lama). Perbedaan versi ini juga mempengaruhi antarmuka dan konfigurasi pada menu layout (Tata letak) yang telah dibahas pada materi sebelumnya.


4. Tentang Blogger Theme Designer

Apa itu Blogger Theme Designer ?, Secara sederhana, Theme Designer adalah sebuah fitur yang memungkinkan kita untuk dapat melakukan berbagai penyesuaian pada desain blog tanpa harus berurusan dengan koding. Pada menu ini, anda bisa melakukan beberapa hal yang berkaitan dengan editing theme. Hal ini seperti misalnya mengganti background (Latar belakang), Main color (Warna utama), Jenis Font dan lain sebagainya. Untuk masuk ke antarmuka Theme Designer, klik Customize.

fitur customize blogger

Antarmuka yang terbuka selanjutnya inilah yang disebut sebagai Blogger Theme Designer.

Tentang blogger theme designer

Pada tab Background (Latar belakang), anda bisa mengatur warna utama theme. Perubahan pada bagian ini akan mempengaruhi desain theme secara keseluruhan.

cara mengganti background gambar blog diblogger

Untuk mendapatkan lebih banyak pilihan, anda bisa beralih ke tab Advanced (Tingkat lanjut). Disini, anda bisa melakukan editing secara khusus untuk bagian-bagian tertentu.

cara mengganti warna jenis ukuran font blog

Setiap kali anda melakukan perubahan, klik Apply to Blog untuk menyimpan pengaturan.

cara mengganti font judul blog


5. Tentang Edit HTML Theme

Sebuah blog tersusun atas tag-tag HTML. Pada Edit HTML, Anda dapat melihat dan melakukan editing terhadap kode-kode HTML (xml) penyusun blog anda. Untuk membuka HTML Editor Theme, klik "Edit HTML".

tentang fitur edit html blogger

Anda akan melihat kode-kode penyusun blog pada HTML Editor ini.

Antarmuka html editor blogger
Antarmuka HTML Editor Blogger

Lebih jauh tentang HTML Editor ini tidak akan saya bahas pada halaman ini. Anda akan mempelajari beberapa fungsi yang terdapat pada HTML Editor ini secara bertahap pada materi-materi selanjutnya.

Sekarang, anda sedikit banyak telah mengerti tantang berbagai hal yang dapat anda lakukan pada Menu Theme ini. Selanjutnya, kita akan meninjau tentang Custom Theme Blogger.

FreshOptimz - Theme Blogger dengan Desain yang Elegant, Clean, Fast loading dan SEO Friendly

FreshOptimz - Theme Blogger dengan Desain yang Elegant, Clean, Fast loading dan SEO Friendly

FreshOptimz adalah theme premium pertama yang diterbitkan pada blog wiBlogger.com ini. Meskipun ini adalah theme pertama, dalam masa perancangan, sebisa mungkin saya menghindari adanya update besar-besaran dikemudian hari. Dengan kata lain, desain dan Coding theme ini telah dirancang dengan sangat mendalam dan optimal untuk semua type halaman blog. Keseriusan dalam perancangan theme ini pula yang menjadi penyebab utama terhentinya update materi pada blog wiBlogger.com selama berbulan-bulan ^_^.

Desain

Untuk desain, secara default theme ini sedikit banyak masih mengadopsi theme yang terpakai pada blog wiBlogger ini. But dont worry !, theme FreshOptimz ini juga telah mendukung Theme Designer. Itu artinya, anda bisa dengan mudah melakukan penyesuaian desain melalui antarmuka Customize Blogger (Blogger Theme Designer).

Coding

Untuk coding theme, terutama algoritma javascript yang dirancang, anda akan menemukan beberapa Trobosan baru yang mungkin hanya akan anda jumpai pertama kali pada theme ini. Pada theme freshOptimz ini, algoritma javascript yang diterapkan telah teroptimasi dengan sangat baik, baik itu untuk pembaca blog (real human) maupun untuk mesin pencari (Search Engine). Selain itu, coding pada theme ini hanya memanfaatkan Pure Javascript (Javascript murni). Dengan kata lain, pada theme FreshOptimz ini, saya menghindari penggunaan liblary-library javascript (Seperti jQuery misalnya) yang cendrung kurang efektive dan akan menambah beban loading halaman.


Fitur Theme


Full Responsive (Detail)
Desain yang Responsive adalah salah satu faktor penting yang harus diperhatikan dalam memilih theme. Hal ini karena pengguna yang mengakses internet melalui perangkat mobile semakin meningkat dari waktu ke waktu. Ada banyak theme responsive yang tersedia, namun "Apakah mereka memang dibuat secantik mungkin pada semua layar ?!" ini mungkin akan menjadi pertanyaan yang lain lagi.

Premium theme blogger mobile responsive
Screenshot Responsive Tester at http://ami.responsivedesign.is

live Checker:

Setiap theme yang terdapat pada wiBlogger.com memiliki desain full responsive. Theme yang dirancang tidak hanya sekedar mampu menyesuaikan ukuran layar, setiap detail serta aspek lainnya yang juga sangat mempengaruhi tampilan pada ukuran layar tertentu juga sangat diperhatikan.
Smart Algorithm
Theme ini telah teroptimasi dengan sangat mengedepankan pengalaman pengguna yang baik. Ini adalah tentang bagaimana upaya optimalisasi yang dilakukan terhadap cara kerja script (dan berbagai koding lainnya) dalam mengolah, memanipulasi dan manampilkan data / informasi kepada client (Web Browser). Dengan algoritma yang diancang, dalam kurun waktu tertentu, client tidak perlu memuat ulang informasi-informasi yang sama (untuk element-element tertentu) yang telah dimuat sebelumnya. Algoritma ini secara bersamaan akan meningkatkan kecepatan loading halaman pada perangkat client.
Valid Struktur Data Markup
Struktur Data Markup merupakan faktor penting pada halaman web. Ini adalah tentang bagaimana informasi pada halaman web disampaikan. Sebuah mesin pencari (Google, Bing misalnya) akan membaca struktur data dalam menganalisa content pada halaman web. Struktur data akan membantu crawl mesin pencari untuk dapat menganalisa (dengan benar) setiap bagian atau isi yang terdapat pada halaman web.

Live Checker:
Fast Loading
Loading blog yang cepat tentunya sangat penting untuk membuat pengunjung blog anda semakin betah. Tidak hanya itu, kecepatan muat halaman juga dipercaya oleh sebagian besar pelaku SEO sebagai salah satu parameter yang akan mempengaruhi ranking halaman pada hasil penelusuran search engine. Untuk tujuan ini, tidak hanya real page speed yang telah dioptimalkan, Score page speed versi search engine google untuk theme freshOptimz ini juga terbilang sangat baik.

Fast loading blogger theme

Live Checker:
Auto-Resize Thumbnails
Setiap Gambar / Thumbnails pada elemen-elemen tertentu telah dirancang sedemikian rupa untuk dapat menyesuaikan resolusi thumbnails pada ukuran layar tertentu. Hal ini demi memastikan agar gambar yang dimuat memiliki ukuran yang sesuai dengan apa yang tampak pada pembaca yang pada akhirnya akan membuat load halaman menjadi optimal.
SEO Friendly
Selain masalah desain, sisi SEO juga sangat diutamakan. Tidak hanya baik dimata pembaca, theme FreshOptimz ini telah dirancang sedemikian rupa untuk dapat memberikan nilai positif dimata Search Engine (terutama Google.com). Beberapa diantaranya adalah seperti penerapan Dinamik Tag Heading, Optimalisasi Loading halaman, Optimalisasi struktur HTML dan lain sebagainya.
Cross-browser Compatibility
Ini akan memastikan desain blog anda tampil konsisten pada berbagai browser modern yang berbeda. Tidak peduli browser yang digunakan visitor, apakah melalui Internet Explorer, Mozila Firefox, Chrome, Opera, atau browser modern lainnya, tampilan blog tetap tertata dengan sangat baik.
Unlimited Design Color
Walaupun secara default theme FreshOptimz ini didesain dengan nuansa hijau. Dengan fitur ini, anda dapat dengan mudah mengganti beberapa background, color untuk bagian-bagian tertentu melalui antarmuka Theme Designer Blogger.

Blogger theme - dukungan theme designer
Responsive Auto Navigation Menu
Selain dengan desain yang sederhana dan eye-catching, Menu Navigasi pada theme ini juga bersifat responsive. Pana Menu Navigasi ini, jumlah item yang terexpand akan secara otomatis disusuaikan berdasarkan ukuran layar browser.

Menu Navigasi theme freshoptimz
Simple and User Friendly Page Navigation (with Page Info)
Pada theme FreshOptimz ini, Navigasi Halaman dibuat dengan berfokus pada pengalaman pengguna yang baik. Untuk kepentingan kecepatan loading halaman, navigasi halaman yang dibuat masih memanfaatkan navigasi default blogger dengan sedikit Custom HTML dan Javascript. Hal yang akan membedakan Navigasi ini dengan navigasi default blogger adalah adanya informasi halaman yang sedang aktif. Selain itu, algoritma javascript yang dibuat untuk menampilkan informasi ini telah dirancang sedemikian rupa untuk dapat memberikan hasil yang optimal, terutama untuk kecepatan loading halaman.

Template Fresh Optimz - Navigasi Halaman SEO friendly and Fast Loding
User Friendly Breadcrumbs (with Post Info)
Dengan memanfaatkan informasi yang telah diload pada Page Navigation, secara bersamaan sistem theme ini juga memberikan informasi post yang sedang aktif (terlihat) pada halaman index (Homepage, label, search by update dan search query).

Theme blogger dengan breadcrumb seo friendly
Related Posts with Auto-resize Thumbnails
Related Posts (Artikel Terkait) adalah salah satu fitur / bagian penting pada blog untuk memastikan agar pembaca blog anda bisa dengan mudah mendapatkan update-update yang serupa. Ini juga sangat baik untuk SEO. Selain itu, menampilkan related posts pada halaman posting juga akan (berpotensi) meningkatkan Pageview halaman anda. Pada theme FreshOptimz ini, Related Posts yang dibuat juga telah dilengkapi dengan thumbnail yang tentunya akan membuat blog anda terlihat lebih profesional.

Template blogger dengan artikel terkait bergambar (Thumbnail)

Tidak hanya desain yang diperhitungkan disini, optimalisasi ukuran thumbnail serta algoritma javascript yang dirancang juga menjadi prioritas utama. Ukuran thumbnail yang dimuat pada related posts ini akan selalu optimal disemua layar perangkat (Auto-Resize).
Show Post by Label Ready
Custom Widget untuk menampilkan posts berdasarkan label / kategori tertentu. Pada widget posts by label ini, algoritma javascript telah dirancang sedemikian rupa agar tidak terlalu membebani loading halaman

template blogger gratis yang mendukung post by label
Easy Post Image-sizing
Lebar (maksimal) content pada halaman posting telah disesuaikan untuk dapat memberikan kemudahan dalam mengatur ukuran gambar pada post yang ideal. Anda tidak perlu melakukan editing ukuran gambar post secara manual pada mode HTML untuk menjaga loading halaman tetap optimal, cukup pilih opsi "X-large" pada ukuran gambar, maka gambar telah memiliki ukuran yang sesuai dengan lebar content.

Theme blogger dengan lebar post yang ideal
Social Share ready
Dengan fitur ini, pengunjung blog anda dapat dengan mudah membagikan artikel blog anda ke teman-teman media social mereka (facebook, twitter dan Google plus).

ema blogger elegan hijau dengan fitur keren dan responsive
Fitur-fitur lainnya
Beberapa fitur lainnya yang juga telah disematkan pada theme FreshOptimz ini adalah:
  • Subscribe Box Widget
    Fitur ini memungkinkan pembaca blog anda untuk dapat berlanggangan artikel melalui email.
  • Recent Posts Widget
    Menampilkan daftar Artikel terbaru.
  • Social Pages Widget
    Memungkinkan anda untuk dapat menautkan Fanspage dari berbagai jejaring sosial populer.
  • Custom Popular Posts Widget
    Widget Postingan Terpopuler Blog.
  • Custom Featured Post Widget
    Menampilkan post unggulan.
  • Post Admin Box
    Menampilkan deskripsi singkat tentang penulis blog pada halaman posting.
  • Facebook Open Graph
    Tampilan post yang dibagikan ke jejaring sosial facebook akan terlihat lebih profesional.
  • Twitter Card
    Tampilan post yang dibagikan ke jejaring sosial twitter akan terlihat lebih profesional.
  • Custom Search No Result Page
    Lihat langsung demo Search No Result page DISINI
  • Custom Error Page
    Lihat langsung demo Error page DISINI
  • Custom Thread Comment
    Fix masalah loading halaman yang disebabkan oleh sistem komentar default blogger.
  • dan masih banyak lagi. Kunjungi halaman Demo Freshoptimz Theme untuk melihat secara langsung desain dan fitur theme freshOptimz.


Detail Theme

NamaFreshOptimz
Rilis06 September 2017
Versi saat ini1.17.09.2
Change log Versi 1.17.09.2 - Fix Script Menu Navigasi (11/09/2017)
Versi 1.17.09.1 - Rilis pertama (06/09/2017)
Dukungan Bahasa
  • Bahasa Indonesia
  • English
Dukungan Widgets
  • Featured post
  • Popular posts
  • Recent posts
  • Posts by label
  • Related posts (embedded)
  • Social pages
  • Email subscription
  • Label
  • Blog pages
  • Auto Expanded Navigation (embedded)
Fitur SEO
  • Full Responsive
  • Valid Struktur Data Markup (Blog posting)
  • Fast Loading
  • Dinamic Tag Heading
  • Breadcrumbs
  • Auto-resize Thumbnails
  • No Duplicate Content Meta Tag
  • dll
Penempatan Adsense
  • Atas posting
  • Bawah posting
  • Tengah (Dalam) posting
Dokumentasi
  • Panduan Instalasi
  • Panduan Penerapan Shortcodes
  • Panduan Pemasangan Adsense
  • Informasi dukungan widget (By Section)
  • Premium Support Link


Mengingat banyaknya fitur dan keistimewaan yang tertanam pada theme FreshOptimz ini, jika saya tidak salah: "Bahkan pada versi gratis sekalipun, theme FreshOptimz ini mungkin jauh lebih baik dibandingkan dengan sebagian besar theme blogger yang banyak tersedia diluar sana". Sekali lagi, jika saya tidak salah ^_^


Download Theme (Free Version)

Pada versi gratis, terdapat satu buah Credit link (link yang mengarah ke blog wiBlogger.com sebagai pengembang theme) pada bagian footer. Anda tidak diizinkan untuk menghapus Credit Link ini. Larangan ini juga termasuk pada berbagai kegiatan editing lainnya yang bertujuan menghilangkan, menyamarkan, menyembunyikan dan / atau membuat Credit Link menjadi tidak terlihat.



Solusi: Tidak Bisa Install Theme / Template Blogger : "We were unable to save your theme. Your theme could not be parsed as it is not well-formed..."

Solusi: Tidak Bisa Install Theme / Template Blogger : "We were unable to save your theme. Your theme could not be parsed as it is not well-formed..."

Gagal instal tema blogger

Pesan lengkap (English):
We were unable to save your theme. Your theme could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly. XML error message:(SyntaxError) : Unexpected token <

Indonesia:
Kami tidak dapat menyimpan tema Anda. Tema Anda tidak dapat diuraikan karena tema tidak terbentuk dengan baik. Pastikan semua elemen XML ditutup dengan benar. Pesan error XML:(SyntaxError) : Unexpected token <

Pesan diatas saya dapati ketika melakukan proses instalasi theme dengan metode upload (metode standar). Bagi anda yang mendapati pesan kesalahan yang sama, uraian dan solusi berikut ini mungkin akan sangat membantu ^_^.

ANALISA PENYEBAB KESALAHAN

Hingga saat ini, penyebab munculnya pesan diatas belum juga saya ketahui. Namun, saat pertama mendapatkan pesan diatas, hal pertama yang saya lakukan adalah memeriksa koding theme. Check and recheck, hasilnya NIHIL ^_^.

Tidak berhenti disitu, analisa tetap saya lanjutkan dengan menggunakan metode yang lebih sederhana. Berikut adalah 2 metode analisa yang saya coba dan membawa saya pada kesimpulan bahwa "Kesalahan bukan terletak pada koding theme".

METODE 1: Membuat sebuah file xml theme sederhana

Pada analisa ini, saya membuat sebuah file xml dasar yang saya yakini telah terbentuk dengan benar.

mengatasi syntacerror saat instal theme blogger

Saat file xml diatas diupload, pesan kesalahan tetap saja muncul. Saya sangat yakin bahwa tidak ada kesalahan pada koding theme diatas. Lalu apa yang salah ?, lanjut ke percobaan selanjutnya ^_^.

METODE 2: Menginstal theme yang dulunya bisa diinstal

Ya, disini saya mencoba menginstal theme yang dulunya bisa saya instal tanpa hambatan. Lagi-lagi hasilnya tetap sama, pesan error tetap saja muncul.


Berdasarkan 2 percobaan diatas, satu-satunya kesimpulan yang saya dapatkan adalah bahwa "Kesalahan bukan terletak pada koding theme".

Lah, jadi apa yang salah ?

I don't know bro ^_^

Yaudah, solusinya aja gimana deh ?

Kalau solusi sih gampang ^_^


SOLUSI

Pada intinya, cara instal theme alternatif ini adalah dengan cara insert full kode xml langsung kedalam HTML Editor Blogger. Untuk lebih mudahnya, pada panduan dibawah, file xml yang saya gunakan adalah file xml dasar yang digunakan pada tahap analisa diatas. Berikut langkah-langkahnya:

Pertama-tama, Backup theme anda, untuk tutorial bagaimana cara backup theme blogger bisa anda baca DISINI.

Buka file xml theme dengan Text editor. Untuk text editor, recomendasi menggunakan Notepad++.

cara instal theme blogger terbaru

Copy semua kode xml yang terbuka pada text editor. Selanjutnya, Login ke Dashboard Blog anda, pada submenu Theme, klik Edit HTML.

tidak bisa upload tema di blogger

Pada antarmuka HTML Editor yang terbuka, Hapus semua kode theme. Selanjutnya, Paste kode xml yang tadi anda copy melalui text editor ke HTML Editor. Terakhir Save theme.

cara instal template hasil download blogger


Dengan proses instalasi seperti diatas, apakah widget lama masih tetap ada ?

Tidak ..! widget lama akan hilang (terhapus). Lagipula, jika anda memiliki widget khusus pada theme lama, kemungkinan besar style untuk widget ini tidak akan tersedia pada theme baru. So, baik hilang ataupun tidak, itu sama saja. Anda tetap harus melakukan penyesuaian pada widget ^_^.
Tutorial: Cara Membuat Laman About us, Contact us, Privacy, dan disclaimer Blog

Tutorial: Cara Membuat Laman About us, Contact us, Privacy, dan disclaimer Blog

Setelah sebelumnya kita telah membahas tentang perbedaan antara laman dan posting blog, pada materi kali ini, kita akan mulai membuat beberapa laman khusus. Laman-laman khusus yang dimaksud disini adalah About Us, Contact Us, Privacy Policy, dan Disclaimer.

Seberapa penting sih laman khusus ini untuk blog saya ?, Apakah blog saya harus mempunyai semua laman yang disebutkan ?

Tidak juga... Ini kembali lagi kepada "Apa tujuan dari blog anda ?!". Beberapa halaman khusus diatas tidak begitu anda perlukan jika blog yang anda kelolah hanya berupa Blog Pribadi yang isinya hanya curhatan semata. ^_^. Namun, jika tujuan blog anda adalah untuk menghasilkan uang (Monetizing), beberapa halaman khusus diatas bisa jadi hal pertama yang anda butuhkan. Terlebih lagi jika anda berniat untuk memonetize blog anda dengan media periklanan Google Adsense.

Tips:

Setting URL Laman

Sebelum mulai membuat sebuah laman, seperti yang telah saya sebutkan pada materi Perbedaan laman dan post, dalam pembuatan laman, kita tidak bisa melakukan setting url dengan leluasa. Sistem blogger akan secara otomatis men-generate (membuatkan) url untuk laman yang kita buat. Dengan sedikit trik sederhana ini, kita akan membuat URL laman menjadi lebih terkendali dan tentunya tampak bagus ^_^. Sebelum itu, 2 hal yang mungkin perlu diketahui terkait URL laman yang di-generate oleh sistem blogger ini adalah:

  1. Jika Judul Laman Ditentukan, URL yang digenerate akan menyesuaikan judul. Untuk judul laman yang panjang, hanya beberapa kata yang terdapat pada judul yang akan dijadikan bagian url laman.
  2. Jika Judul Laman Tidak Ditentukan (dikosongkan), URL laman yang digenerate akan kurang lebih menjadi namablog.blogspot.com//p/blog-page1.html, dengan angka "1" sebelum ".html" adalah angka yang digenerate secara random (acak).

Tambahan:
Berkaitan dengan informasi pada daftar pertama (Judul laman ditentukan), tidak selamanya judul laman akan digenerate sebagai url laman. Ada keadaan dimana walaupun judul laman dibuat, url tetap digenerate dengan format default, misal (http://www.wiblogger.com/p/blog-page36.html). Terlebih lagi jika koneksi internet ditempat anda tidak begitu bagus, kemungkinan besar url yang digenerate akan berformat default.

Alasan untuk keadaan ini adalah karena blogger memiliki fitur Auto-Save yang akan secara otomatis menyimpan post atau laman ke draf pada interval (selang waktu) tertentu. Jika judul laman yang diketikan dilakukan setelah proses auto-save pertama berjalan, Url laman yang digenerate akan memiliki format default. Atau, jika pengetikan judul baru dilakukan sebagian dan fitur auto-save pertama telah berjalan, hanya text yang diketikkan sebelum auto-save ini berjalan yang akan digenerate kedalam url laman.

Berdasarkan sistem blogger tersebut, tentu akan sangat tidak baik jika laman tersebut merupakan salah satu laman penting blog, sebut saja misalnya laman Contact, Privacy dan lain sebagainya. Tentu akan lebih baik dan profesional jika url ini mengikuti judul laman (Misal untuk Contact us: http://www.wiblogger.com/p/hubungi-kami.html). So, kita akan menghindari hal semacam ini dengan sedikit teknik / prosedur dasar.

Tutorial dasar untuk memastikan URL laman yang ter-generate agar tetap sesuai dengan yang dikehendaki

Untuk mulai membuat laman, pada menu "Pages" (laman), klik "New Page" (Laman Baru).


Setelah antarmuka Editor Laman terbuka, ketikkan judul laman sesegera mungkin (semakin cepat semakin bagus). Setelah judul telah ditentukan, selanjutnya "Publikasikan" laman.


Sekarang, Cek URL laman dengan mengunjungi laman yang telah dibuat.


Dengan langkah diatas, seharusnya URL Laman yang ter-generate akan sesuai dengan Judul laman (dalam contoh ini adalah "Hubungi Kami").


Jika URL telah sesuai, selanjutnya Edit untuk membuat konten laman secara keseluruhan ^_^. Disini anda juga bisa melakukan perubahan untuk Judul laman sesuai keinginan anda tanpa ada perubahan pada URL laman ^_^.


Catatan:
Untuk memastikan URL laman tetap terkendali, pastikan anda melakukan prosedur diatas setiap kali hendak menerbitkan halaman statik baru pada blog anda (Terutama untuk pembuatan halan penting blog).

Tutorial:

Membuat Halaman About Us (Tentang kami)

Singkatnya, halaman About Us / Tentang Kami adalah halaman yang dibuat untuk memberikan berbagai informasi terkait profil blog yang dikelolah. Halaman ini biasanya diisi dengan misi, visi, dan latar belakang blog. Jika anda menginginkannya, anda juga bisa bercerita tentang diri anda (dalam hal ini adalah sebagai admin) pada halaman ini. Untuk situs yang dikelolah oleh Team, pada halaman about us ini juga sering kali dijadikan tempat untuk memperkenalkan para contributor blog.

Disini, saya tidak akan memberikan text siap saji untuk pembuatan halaman About Us. Logikanya, jika anda sendiri tidak bisa menjelaskan apapun tentang blog anda, Apa mungkin saya yang sudah jelas bukan pemilik dari blog anda ini malah lebih handal dari anda ?, kalaupun iya, emang harus saya gitu ya ?. So, jangan manja, bikin sendiri ^_^. Atau bagi anda yang masih ngotot ingin nyontek, bisa lihat halaman About Us blog ini. Masih ngeluh juga ?, Tutup halaman ini dan berhenti berpikir untuk menjadi blogger ^_^.

Membuat Halaman Contact Us (Hubungi kami)

Halaman Contact Us bisa dikatakan sebagai halaman yang wajib ada sebagai salah satu halaman penting blog. Terlebih lagi jika blog yang anda kelolah merupakan media pemasaran produk anda. Dengan adanya halaman kontak ini, pembaca blog bisa dengan mudah menghubungi anda terkait hal apapun yang terdapat pada blog anda dengan tidak mengesampingkan privasi anda sebagai pemiliki blog tentunya.

Kabar baiknya, blogger.com sendiri telah menyediakan fasilitas ini sebagai salah satu gadget default blogger. Untuk bagaimana membuat halaman Contact Us di blogger, berikut langkah-langkahnya:

Buka menu Tata Letak / Layout yang terdapat pada Dashboard blog. Klik salah satu link "Add a Gadget". Anda bisa mengklik link Add a Gadget / Tambahkan Gadget dibagian mana saja. Untuk contoh ini saya misalkan melalui link yang terdapat pada element "Sidebar".


Akan terbuka window baru pada browser. Klik pada menu "More Gadgets" dan pilih "Contact Form" (Formulir Kontak).


Selanjutnya akan muncul pengaturan Title (Judul), Untuk mudahnya biarkan secara default (Contact Form), dan klik "Save".


Pada tahap ini, layanan formulir kontak telah berhasil diaktifkan. Anda bisa mengunjungi blog anda untuk melihat widget kontak yang telah ditambahkan pada elemen yang dipilih (pada contoh ini adalah sidebar).


Penambahan gadget contact us diatas akan menampilkan formulir komentar pada semua halaman blog. Pada tutorial ini, kita akan membuat halaman contact us secara khusus yaitu pada laman static blog. Sebelum itu, terlebih dahulu akan kita hapus kode widget contact form ini melalui Edit HTML.

Menghapus Kode Widget Contact Form

Karena disini kita akan membuat halaman contact pada laman static, terlebih dahulu kita akan menghapus kode yang akan menampilkan formulir kontak pada semua halaman. Penghapus kode ini akan kita lakukan melalui "Edit HTML". Sebelum itu, pastikan anda melakukan Backup template terlebih dahulu, untuk tutorial bagaimana cara backup template bisa anda baca DISINI.

Sekarang kita mulai tahap penghapusan kodenya. Pada menu "Template", klik "Edit HTML".


Pada antarmuka HTML Editor yang terbuka, klik pada "Jump to widget", kemudian pilih "ContactForm1".


Anda akan dibawa pada baris kode Widget Contact Form. Pada keadaan awal, hanya tag pembungkus widget yang akan terlihat. Klik tombol Expand yang terdapat pada samping kiri tag widget untuk menampilkan isi atau sub tag dari widget tersebut (atau bisa juga dilakukan dengan mengklik "..." yang terdapat diantara tag pembuka dan penutup widget. Lebih jelasnya perhatikan gambar dibawah ini:


Tampilan setelah tag widget ter-expand kurang lebih seperti berikut:


Selanjutnya Expand tag <b:includable id='main'> ... </b:includable> yang terdapat didalam tag widget ContactForm1 untuk menampilkan semua kode widget contact form. Tampilan semua kode contact form ini kurang lebih seperti berikut:


Sekarang tugas anda adalah menghapus semua kode yang terdapat diantara kode <b:includable id='main'> dan </b:includable> yang terdapat dalam tag widget ContactForm1.


Jika anda melakukannya dengan benar, seharusnya kode widget Contact From ini kurang lebih akan seperti berikut:


Terakhir, Simpan Template dan tutup antarmuka HTML Editor.


Sekarang kembali kunjungi blog anda, jika proses penghapus telah dilakukan, seharusnya formulir kontak sudah tidak terlihat pada blog.

Cara membuat Halaman Contact Us (Laman static)

Sebelum anda membaca lebih jauh, untuk lebih efektifnya, pastikan anda telah membaca post Perbedaan Laman dan Post yang telah diterbitkan sebelumnya untuk mengetahui beberapa informasi terkait laman static yang mungkin tidak akan saya jelaskan ulang pada halaman ini ^_^.

Kembali pada pembuatan halaman contact us pada laman static, untuk lebih mudahnya, disini saya telah menyiapkan kode HTML dan CSS yang bisa langsung anda gunakan untuk formulir kontak anda. Adapun tampilan formulir kontak ini kurang lebih akan terlihat seperti halaman Contact Us wiBlogger.com.


Oke, kita mulai pada pembuatan halaman Contact Us. Silahkan buat halaman statik baru dengan judul "Contact Us" atau "Hubungi Kami". Pastikan anda mengikuti langkah-langkah pada tahap prosedur dasar sebelumnya). Copy dan Paste semua Kode dibawah ini ke Editor Laman (dengan Mode HTML).

Kode HTML dan CSS Contact Form:
<p>Tambahkan text pembuka untuk formulir kontak versi anda sendiri disini ^_^</p>

<div class='widget ContactForm' id='ContactForm1'>
  <div class='contact-form-widget'>
  <div class='form'>
  <form name='contact-form'>
    <p>Nama</p>
    <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
    <p>E-mail <span class='red-color'>*</span></p>
    <input placeholder=" Email balasan akan dikirim ke sini" class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
    <p>Pesan <span class='red-color'>*</span></p>
    <textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'>
    </textarea>
    <input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Kirim Pesan'/>
    <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
    <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
  </form>
  </div>
  </div>
</div>
<!-- Contact Form Style by wiBlogger.com Start -->
<style type='text/css'>
#ContactForm1 {
    padding: 4%;
    border: 3px dashed #ababab;
    background: #f6f7f8;
}

#ContactForm1_contact-form-name {
    width: 300px;
    height: 20px;
    max-width: 95.5%;
    margin-top: 7px;
    margin-bottom: 10px;
    padding: 2%;
}

#ContactForm1_contact-form-email {
    width: 300px;
    height: 20px;
    max-width: 95.5%;
    margin-top: 7px;
    margin-bottom: 10px;
    padding: 2%;
}

#ContactForm1_contact-form-email-message {
    width: 93.5%;
    height: 150px;
    margin-top: 10px;
    padding: 3%;
    resize: none;
}

.contact-form-widget select,.contact-form-widget option {
    height: 40px;
    width: 307px;
}

#ContactForm1_contact-form-submit {
    border: 0;
    padding: 10px 30px;
    font-size: 20px;
    background: #659100;
    color: #fff;
    margin-top: 20px;
    box-shadow: 0 0 10px #426e19 inset;
}

#ContactForm1_contact-form-submit:hover {
    box-shadow: none;
}

#ContactForm1_contact-form-error-message {
    text-align: center;
    padding: 0px 20px;
    margin-top: 15px;
    color: #D41C1C;
}

#ContactForm1_contact-form-error-message img {
    display: none;
}
</style>



Sebelum "Mempublikasikan / Memperbarui" halaman kontak anda, pastikan setting pada Line break yang terpilih adalah "Press Enter for line break" (Poin 3 pada gambar diatas).

Membuat Halaman Privacy Policy (Kebijakan privacy)

Apa itu Halaman Privacy Policy ?, Singkatnya, halaman privacy policy (Kebijakan privasi) adalah sebuah halaman / dokumen yang berisi tentang berbagai informasi yang berkaitan dengan pengolahan dan penggunaan data (klien). Ini bisa dibilang sebagai pernyataan / dokumen hukum yang menginformasikan tentang bagaimana suatu situs dalam mengumpulkan, mengolah, dan menggunakan data klien.

Tujuan pembuatan halaman Privacy Policy adalah untuk menginformasikan kepada klien tentang data-data apa saja yang di-record oleh situs yang bersangkutan yang (biasanya) dilakukan secara otomatis saat klien mengakses situs tersebut. Pada halaman privacy policy, ini umumnya akan berisi tentang informmasi prosedur standar perusahaan hosting dalam mengumpulkan, mengolah dan menggunakan data klien.

Cara membuat halaman privacy policy

Pada tahap pembuatan halaman privacy ini, kita akan menggunakan salah satu layanan Privacy Generator yang cukup banyak digunakan oleh para blogger. Hamun, sebelum kita masuk pada cara membuat halaman privacy policy, perlu anda ketahui bahwa sejatinya, informasi yang terdapat pada halaman privacy policy ini tidaklah sama antara satu situs dengan situs lainnya. Ya, hal ini karena prosedur pengolahan data pada suatu situs tidak selalu sama dengan situs lainnya. Oleh karena itu, selain dengan memanfaatkan informasi yang di-generate oleh Privacy Generator, anda bisa menambahkan informasi-informasi terkait pengolahan data lainnya sesuai dengan prosedur situs anda.

Info:
Layanan Privacy Policy Generator yang kita gunakan disini hanya mendukung Bahasa Inggris (belum saya temukan page generator yang mendukung bahasa indonesia). Anda bisa tetap menggunakan bahasa inggris untuk halaman privacy anda atau jika memang diperlukan, anda bisa menterjemahkan hasil generate ini kedalam bahasa indonesia.

Untuk mulai membuat halaman privacy, kunjungi Privacy Policy Online. Terdapat beberapa informasi yang harus diisi / disesuaikan.


Your Site TitleKetikkan Judul Blog anda disini
Your Site UrlKetiikan URL / Domain blog disini
Contact LinkIsi dengan URL halaman Contact Us blog anda
Email AddressMasukkan Email Contact disini
Email EnscryptionPilih: Encrypt Email
Info CookiesPilih: Yes, My site uses cookies
Info AdvertiserSilahkan beri tanda checklist pada setiap media advertiser yang anda gunakan pada blog anda, pada gambar contoh pengisian dibawah, karena halaman privacy ini dibuat untuk blog wiBlogger.com yang untuk saat ini belum menggunakan layanan periklanan apapun, tidak ada satupun dari daftar advertiser yang saya pilih

Berikut adalah contoh pengisian pada halaman privacy online generator untuk blog wiBlogger.com:


Setelah data-data / informasi yang diperlukan telah anda isi dan sesuaikan, klik "Generate HTML".


Anda akan dibawa pada halaman yang berisi kode HTML dokumen privacy policy yang telah dibuat. Copy semua kode HTML yang terdapat pada box / textarea.


Paste kode HTML yang telah di-Copy diatas ke Editor Laman dengan Mode HTML.


Untuk lebih baiknya, sebelum halaman anda publikasikan, anda bisa melakukan sedikit editing untuk beberapa bagian dokumen yang diperlukan. Seperti misalnya merapikan tanda baca, memberikan format list pada daftar informasi tertentu, memberikan informasi tambahan sesuai dengan prosedur pengolahan data situs anda dan lain sebagainya.

Membuat halaman Disclaimer (Sanggahan)

Apa itu halaman Disclaimer ?, Disclaimer atau sanggahan adalah dokumen yang menyatakan "Penolakan" terhadap Pertanggungjawaban atas content (baik itu informasi, opini, dll) tertentu yang terdapat pada situs yang bersangkutan. Sederhanaya, dokumen disclaimer ini menyatakan bahwa situs yang bersangkutnya tidak selamanya akan memiliki akses dan / atau kontrol untuk setiap content yang terdapat atau mengarah pada situs tersebut. Pada halaman discraimer ini, umumnya akan mengandung suatu persetujuan / perjanjian yang harus disetujui oleh setiap pengguna situs. Isi / poin dari persetujuan ini adalah "Pengguna situs setuju pada setiap ketentuan yang terdapat pada halaman disclaimer dan membebaskan pengelolah / admin situs dari tanggung jawab / tuntutan apapun dikemudian hari". Sebagai referensi, anda bisa membaca halaman Disclaimer wiBlogger.com ^_^.

Cara membuat halaman disclaimer

Tidak banyak tutorial yang saya tulis untuk keperluan ini. Anda bisa membuat dokumen disclaimer versi anda sendiri berdasarkan jenis content pada situs anda (lagi-lagi: lihat halaman Disclaimer wiBlogger.com untuk mendapatkan referensi informasi dalam pembuatan halaman disclaimer). Atau, untuk anda yang mau instan, anda juga bisa memanfaatkan layanan Privacy Policy Generator untuk membuat halaman disclaimer blog anda melalui menu "Disclaimer Generator". Untuk data-data yang diperlukan sama saja dengan tahap pembuatan halaman privacy policy diatas.


4 Halaman diatas merupakan halaman-halaman yang umumnya dimiliki oleh sebagian besar situs di internet. Anda bisa menambahkan halaman lainnya sesuai dengan kebutuhan situs anda.

Menampilkan link laman pada blog
Untuk menampilkan link laman pada blog, anda bisa menggunakan widget Pages (Laman). Lakukan prosedur penambahan widget seperti biasa dengan cara pergi ke menu Layout / Tata Letak pada dashboard blog, klik Add a Gadget pada bagian yang dikehendaki.

Tambahkan widget laman

Selanjutnya, pada pilihan widget yang muncul, pilih Pages (Laman).

Pilih pages widget

Pada jendela konfigurasi widget, pilih laman mana saja yang akan anda tampilkan dengan memberikan checklist pada masing-masing laman yang ingin ditampilkan.

Konfigurasi laman

Akhir bahasan, jika anda bingung tentang informasi apa saja yang harus anda sampaikan pada pembuatan beberapa laman diatas, anda bisa melakukannya secara bertahap dan mengupdate beberapa informasi dikemudian hari sesuai dengan perkembangan situs anda. Bagi anda yang memiliki pertanyaan seputar pembuatan atau hal lainnya terkait laman blog, silahkan gunakan form komentar dibawah.
Subscribe To Our Newsletter
Dengan berlangganan feed kami, anda akan mendapatkan setiap updates yang diterbitkan pada situs wiBlogger.com langsung melalui akun email anda.
×
Jangan tampilkan lagi