Vamor, Free Responsive Blogger Template (Update)

Sudah lama sekali saya tidak posting artikel pada blog ini sehubung kesibukan saya di dunia offline. Di sela kesibukan saya, saya terpikirkan untuk membagikan template yang saat ini digunakan pada blog ini yang saya beri nama Vamor.

Saya berharap dengan membagikan template ini secara gratis, dapat memberikan dampak positif bagi blog saya. Seperti dengan namanya, Vamor, semoga dengan dibagikannya template ini dapat meningkatkan Vamor(Pamor) blog saya. Hihi.

Vamor merupakan sebuah template blogger yang cocok untuk blog bertipe personal atau blog yang fokus membahas satu topik dengan desain yang simple, minimalis, responsive, clean, dan fast loading.

Desain template ini terinspirasi dari blog milik Mas Sugeng dan PanduanIM yang mengutamakan sisi kenyamanan pengunjung blog dalam membaca artikel dengan desain yang simple alias nggak neko-neko.

Fitur Vamor Blogger Template

Berikut ini adalah beberapa fitur serta kelebihan pada template ini:

• Custom Mobile Template
• SEO Optimized
• Responsive Design
• Ads Optimized
• Font Awesome Ready
• Breadcrumb Navigation
• Auto Readmore
• Related Posts Widget
• Share Buttons
• Fast Loading
• Custom 404 Page
• Quick Search Form
• Multi Comment (Disqus & Blogger)
• Numbered Page Navigation
• Footer Link
• Dan masih banyak lagi…

Bagi yang tertarik untuk menggunakan template ini, berikut link download dan demonya:

• Demo
• Download

Template ini saya bagikan secara gratis. Saya hanya berharap kepada para pengguna untuk tidak menghapus credit link pada template ini. Hitung-hitung Anda menghargai jeri payah saya dalam membuat dan membagikan template ini secara gratis. Karena, membuat template itu nggak mudah loh.

Namun, saya juga memberikan alternatif lain bagi Anda yang tetap ingin menghapus credit link pada template ini dengan cara memberikan donasi sebesar Rp. 50.000 kepada saya. Berikut keuntungan jika Anda memberikan donasi :

• Mendapatkan Support atau Bantuan Edit Tampilan Gratis
• Mendapatkan Update Gratis versi terbaru yang langsung saya kirim ke email Anda
• Template tanpa credit link di bagian Footer

Untuk Anda yang berminat memberikan donasi kepada saya, silahkan hubungi saya melalui Contact Form dengan mengisi 'Donasi Vamor Blogger Template' pada kolom Isi Pesan. Setelah itu, saya akan mengirimkan No. Rekening saya ke email Anda.

Selain melalui contact form, Anda juga dapat menghubungi saya melalui WA/SMS di 089672374919.

Donasi Anda sangat berharga bagi saya untuk terus berkarya.

Kostumisasi

1. Mengganti Komentar Disqus

Silahkan ganti kode USERNAME-DISQUS dengan username Disqus blog Anda.

2. Memasang Search Box Widget

<div class="search-why">
<form action="/search?q=">
<input class="search-form" name="q" placeholder="Search here and hit enter" required="required" title="Cari Tulisan di Sini" type="text" />
<button class="search-button" title="Search" type="submit"><i class="fa fa-search"></i></button>
<span style="clear: both;display:block"></span>
</form>
</div>

3. Hapus Quickedit

Jika menambahkan widget baru di sidebar atau di footer, silahkan hapus kode <b:include name='quickedit'/>.

Bagaimana pendapat Anda mengenai template ini? Atau Anda punya saran untuk pengembangan template ini selanjutnya? Silahkan tuangkan di kolom komentar di bawah, ya.

UPDATE

v.1.3 - 22/11/2016 :

• Fix Error Console
• Custom Mobile Template
• Intinya lebih baik dari versi sebelumnya :)

Cara Membuat Notification Boxes di Blogger

Notification Boxes (Kotak Pemberitahuan) atau Messages Boxes (Kotak Pesan) sangat berguna untuk menginformasikan berbagai pesan penting kepada pembaca, seperti pesan error, pesan sukses, pesan peringatan, dan lain sebagainya, dengan masing-masing tampilan kotak memiliki warna yang berbeda. Hal ini biasanya digunakan pada bagian postingan blog yang membagikan trik, template, dan sejenisnya. Pesan yang dibagikan biasanya berikatan dengan isi postingan.

Berikut adalah contoh penggunaan Notification Box oleh Mas Sugeng pada salah satu postingan blognya :

Untuk itu, kali ini saya bagikan Notification Boxes yang sudah responsive yang juga dipercantik dengan ikon dari Font Awesome. Sehingga, setiap jenis Kotak memiliki warna dan ikon yang berbeda.

Jadi, untuk Anda yang ingin menggunakan kotak pemberitahuan ini, pastikan telah memasang script Font Awesome. Jika belum, silahkan salin kode di bawah ini dan letakan di atas kode </head>

<link href='//netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>

Jika sudah, sekarang lanjut ke pokok pembahasannya. Dalam tutorial ini, saya akan membagikan cara membuat berbagai jenis kotak pemberitahuan yang paling sering digunakan, yaitu :

1. Information Box
2. Success Box
3. Warning Box
4. Error Box

Cara Membuat Notification Boxes di Blog

Silahkan letakan kode CSS berikut ini di atas kode ]]></b:skin> atau </style>

/* CSS3 Notification Boxes by WahyuPratama.id */
.why-info, .why-success, .why-warning, .why-error {
    padding:10px;
    margin:10px 0;
    display: block;
    font-style: normal;
}
.why-info:before, .why-success:before, .why-warning:before, .why-error:before {
    font-family:FontAwesome;
    display: block;
    font-style:normal;
    font-weight:400;
    speak:none;
    display:inline-block;
    text-decoration:inherit;
    width:1em;
    margin-right:.2em;
    text-align:center;
    font-variant:normal;
    text-transform:none;
    line-height:1em;
    margin-left:.2em;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale
}
.why-info:before {
    content:"\f05a";
}
.why-success:before {
    content:'\f00c';
}
.why-warning:before {
    content:'\f071';
}
.why-error:before {
    content:'\f057';
}
.why-info {
    color: #00529B;
    background-color: #BDE5F8;
}
.why-success {
    color: #4F8A10;
    background-color: #DFF2BF;
}
.why-warning {
    color: #9F6000;
    background-color: #FEEFB3;
}
.why-error {
    color: #D8000C;
    background-color: #FFBABA;
}

Setelah itu, silahkan simpan perubahan template.

Cara Penggunaan

Terakhir, Anda hanya perlu menyisipkan beberapa kode HTML berikut ini untuk menampilkan kotak pemberitahuan di dalam postingan blog Anda, halaman statis, sidebar widgets, atau di bagian lain yang Anda inginkan.

1. Information Box

This is an info message.

<div class="why-info">Teks Anda Di sini</div>

2. Success Box

This is a success message.

<div class="why-success">Teks Anda Di sini</div>

3. Warning Box

Consider this a warning.

<div class="why-warning">Teks Anda Di sini</div>

4. Error Box

This is an error message.

<div class="why-error">Teks Anda Di sini</div>

Sekian tutorial yang dapat saya bagikan. Jika Anda mengalami kesulitan, silahkan sampaikan melalui kolom komentar di bawah ini.

Menyembunyikan atau Menghapus Widget Atribusi Blogger

Widget Atribusi Blogger seringkali ditemui pada blog yang masih menggunakan template standar (bawaan) dari Blogger. Widget ini menampilkan hak cipta Blogger yang bertuliskan "Powered by Blogger" atau "Diberdayakan oleh Blogger" di bagian sidebar atau footer sebuah blog.

Tidak seperti widget lainnya, widget atribusi terkunci secara default dan tidak memiliki tombol hapus sehingga tidak bisa dihapus secara manual.

Meski begitu, sebenarnya ada 2 (dua) cara yang dapat Anda lakukan untuk menyembunyikan atau bahkan menghapus secara permanen Widget Atribusi Blogger ini melalui edit HTML template blog Anda.

1. Menyembunyikan Widget Atribusi

Untuk menyembunyikan widget atribusi kita hanya perlu menambahkan CSS "display:none" saja.

1. Buka Blogger > Template > Edit HTML
2. Cari (CTRL+F) kode ]]></b:skin>
3. Salin dan letakkan kode berikut ini di atas kode ]]></b:skin>

#Attribution1{height:0;visibility:hidden;display:none}

4. Simpan template.

Dengan melakukan cara ini, Anda telah berhasil menyembunyikan tulisan "Diberdayakan oleh Blogger" tetapi widget tersebut masih tetap terpasang di tata letak blog Anda.

2. Menghapus Widget Atribusi

Cara ini dapat Anda gunakan untuk menghapus widget atribusi secara permanen dari template blog Anda. Sehingga dapat mengurangi beban loading blog Anda.

1. Buka Blogger > Template > Edit HTML
2. Pilih "Lompat ke widget" lalu klik "Attribution1"

3. Hapus seluruh kode widget atribusi mulai dari <b:widget> sampai </b:widget>

Atau jika diekspan akan kode tersebut akan terlihat seperti di bawah ini. Hapus semua kode tersebut.

<b:widget id='Attribution1' locked='true' title='' type='Attribution' visible='true'>
<b:includable id='main'>
<b:if cond='data:feedbackSurveyLink'>
<div class='mobile-survey-link' style='text-align: center;'>
<data:feedbackSurveyLink/>
</div>
</b:if>

<div class='widget-content' style='text-align: center;'>
<b:if cond='data:attribution != &quot;&quot;'>
<data:attribution/>
</b:if>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

4. Simpan template.

Sekian, jika Anda membutuhkan bantuan silahkan berikan komentar di bawah ini.

Memperbaiki Error Tombol Share Template Fastest Magz dan Evo Magz

Beberapa akhir ini para pengguna template Fastest Magz dan Evo Magz buatan Mas Sugeng, mengalami kebingungan ketika melihat Tombol Share yang semula berada tepat di bawah postingan tiba-tiba pindah posisi menjadi ke atas menutupi judul postingan.

Sebenarnya hal ini disebabkan karena class yang digunakan dalam widget Tombol Share ini adalah share-buttons.

Baru-baru ini Blogger telah meng-update CSS Reset Stylesheet Blogger (Widget CSS Bundle Blogger). Salah satu update terbarunya adalah menambahkan kode CSS untuk class share-buttons.

Sehingga, hal inilah yang menyebabkan posisi Tombol Share pada template Fastest Magz dan Evo Magz mengalami perubahan.

Untuk mengatasi masalah itu sebenarnya sangat mudah. Silahkan ikuti langkah-langkah berikut ini.

Memperbaiki Error Tombol Share pada Template Fastest Magz dan Evo Magz

1. Cari kode css berikut ini.

.share-buttons {
 margin:0 0;
 height:67px;
 float:left;
}
.share-buttons .share {
 float:left;
 margin-right:10px;
 display:inline-block;
}
.share-buttons .tweet {
 margin-top: 41px;
}

Hapus semua kode tersebut dan ganti dengan kode di bawah ini.

.share-buttonsx {
 margin:0 0;
 height:67px;
 float:left;
}
.share-buttonsx .share {
 float:left;
 margin-right:10px;
 display:inline-block;
}
.share-buttonsx .tweet {
 margin-top: 41px;
}

2. Selanjutnya, cari kode seperti berikut ini.

<div class='share-buttons-box'>
<div class='share-buttons'>

Hapus kode tersebut dan ganti dengan kode di bawah ini.

<div class='share-buttonsx-box'>
<div class='share-buttonsx'>

Kemudian simpan template dan lihat halaman postingan Anda. Semoga posisi Tombol Share telah kembali normal seperti semula. Jika ada yang perlu ditanyakan, silahkan berikan komentar. Terima kasih.

Cara Mendaftar Google Analytics serta Memasang Tracking ID di Blog

Apa itu Google Analytics? Google Analytics merupakan layanan gratis dari Google yang dapat memberikan insight yang sangat berharga mengenai pengunjung sebuah blog atau website. Menggunakan Google Analytics untuk blog merupakan hal yang sangat penting untuk membantu pengembangan blog. Apalagi, jika blog yang digunakan untuk keperluan bisnis online.

Dengan menggunakan layanan ini, Anda tidak akan pernah kehilangan data pengunjung blog Anda. Selain itu, Anda juga dapat mengetahui secara detail karakteristik demografi pengunjung blog Anda. Mulai dari bagaimana mereka bisa sampai ke blog Anda, bahasa yang digunakan, lokasi, jenis kelamin, usia, perilaku, penggunaan web browser, penggunaan devices, dan masih banyak lagi insight yang sangat berharga yang bisa Anda dapatkan.

Tentunya, masih banyak lagi fitur-fitur pada Google Analytics yang dapat membantu Anda dalam mengukur dan meningkatkan kinerja blog yang Anda miliki. Semua data-data yang diberikan pada layanan tersebut dapat Anda pahami dan memanfaatkannya sebaik mungkin sehingga Anda tahu siapa pengunjung blog Anda, bagaimana mereka bisa menemukan blog Anda, dan konten apa yang sebenarnya diinginkan oleh pengunjung blog Anda. Sehingga blog Anda akan lebih baik lagi kedepannya.

Bagaimana? Apakah tertarik menggunakan Google Analytics untuk blog Anda? Jika tertarik, silahkan ikuti langkah-langkah berikut ini.

Cara Mendaftar Google Analytics

1. Kunjungi situs Google Analytics
2. Klik Masuk dan silahkan masuk menggunakan Akun Google yang Anda miliki.
3. Setelah masuk, maka akan tampil halaman seperti di bawah ini. Silahkan klik Pendaftaran.

4. Silahkan lengkapi formulir pendaftaran. (Pastikan opsi yang Anda pilih adalah Website bukan Aplikasi).
5. Jika sudah terisi semua, silahkan klik Dapatkan ID Pelacak.
6. Kemudian akan muncul Pop-up mengenai Perjanjian Persyaratan Layanan Google Analytics atau lebih dikenal dengan TOS.
7. Setelah Anda klik Saya Setuju, maka berarti Anda telah melewati tahap pendaftaran dan Anda akan dibawa ke halaman akun Anda. Di halaman tersebut, terdapat kode berupa ID Pelacakan (Tracking ID) yang harus Anda pasang pada blog Anda.

Memasang ID Pelacakan (Tracking ID) Google Analytics di Blog

Sebenarnya ada 2 (dua) cara yang dapat Anda gunakan untuk memasang ID Pelacakan Google Analytics di Blog Anda. Sebelum melakukan salah satu cara yang saya berikan, pastikan Anda telah masuk ke akun Blogger Anda.

Cara Pertama : Meletakkan JavaScript Tracking Google Analytics pada Template

1. Salin Kode JavaScript Tracking Google Analytics Anda.

2. Pilih menu Template dan klik Edit HTML.
3. Kemudian, letakkan kode yang telah Anda salin tepat di atas </head>.
4. Terakhir, simpan template Anda.

Cara Kedua : Memasukkan ID Pelacakan pada Pengaturan Blogger Anda

1. Salin ID Pelacakan pada halaman Google Analytics.

2. Pilih menu Setelan > Lainnya.
3. Letakkan ID Pelacakan yang telah Anda salin di kolom ID Properti Web Analytics.

4. Terakhir, klik Simpan Setelan.

Dengan terhubungnya blog yang Anda miliki dengan Google Analytics tentunya akan memberikan keuntungan lebih untuk Anda. Apakah Anda sudah merasakan manfaat menggunakan Google Analytics untuk blog Anda? Silahkan bagikan pengalaman Anda pada kolom komentar di bawah ini.