Posts

TEST KECEPATAN TEMPLATE BLOG MOBILE 📱, MANA LEBIH AKURAT TESTMYSITE ATAU PAGE INSIGHT?

Image
Zaman sudah mobile 📱 , Google sudah memberikan warning dan akan memfinalti blog yang tidak mobile. 84% orang mengakses dan membaca di internet pada saat ini adalah via mobile hape atau ponsel ketimbang laptop apalagi desktop yang gedenya minta ampun. Namun membuka dan membaca halaman web di ponsel juga sering terbentur pada tampilan yang minim alias tidak optimal dan kecepatan yang tidak maksimal.
Itulah mengapa istilah responsive dan mobile friendly menjadi populer dikalangan blogger dan websider. Kita akan membahas yang mana diantara dua tool Goole dibawah berikut yang paling tepat untuk menguji kecepatan loading blog mobile 📱 kita, mana yang lebih baik untuk tes kecepatan blogger mobile? Tentu saja masing masing memiliki kelebihan, namun dua duanya tidak akan bisa membuat site kita menjadi cepat. Kecepatan blog kita pada saat zaman serba mobile 📱 ini tergantung beberapa hal, misal:
Blog harus responsive dan yang jelas harus mobile friendly, test blog mobile anda dengan memasukan…

INGIN MENJADI DESAINER TEMPLATE BLOG? HINDARI KESALAHAN KECIL INI DALAM MENDESAIN TEMA

Image
Kesalahan adalah normal dalam pekerjaan baik itu desain, presentasi, menulis hingga profesi olahraga. Namun jenis jenis kesalahan juga bisa berdampak berat dan lama bagi seseorang. Jika sobat hanya melakukan kesalahan presentasi di dalam acara sebuah pesta keluarga dampaknya bisa berubah jadi lucu. Tapi jika sobat melakukan kesalahan pada sebuah pekerjaan yang berisiko kehilangan nyawa maka dampaknya sangat besar bukan hanya bagi sobat tapi juga orang lain yang mencintai kita.

Begitu juga dalam bisnis, desain, arsitektur. Kesalahan bisa berakibat fatal hilangnya nama baik dan kesempatan berikut masa depan. Membangun kepercayaan bisnis dari awal setelah kehilangan kepercayaan tidaklah semudah pada saat kita memulai hal tersebut pada waktu sebelumnya. Ibarat tali sudah putus jika disambung akan terlihat buhulnya kata pepatah. Kesalahan dan kegagalan bisa dijadikan pelajaran, tetapi harganya terlalu mahal.

PENGALAMAN MENGGUNAKAN TEMPLATE TEMPLATE PREMIUM BERBELI

Percayalah bukan hanya ki…

APAKAH TEMPLATE CONTEMPO HYBRID ITU?

Image
1.PERBEDAAN LAY OUT PADA OPSI DESAINER BLOGGER
Saya jelaskan karena banyak yang mengira Contempo Hybrid itu adalah Contempo default. Walaupun dibuat berdasarkan Tema Contempo, contempo hybrid memiliki banyak sekali perbedaan dengan contempo default bahkan beberapa orang yang telah menggunakannya menyangka Contempo Hybrid adalah template klasik blogger.

Lay out Contempo Hybrid, sudah beda dengan contempo asli, perhatikan baik baik lay outnya contempo asli:
Blog post berada disebelah kanan, sedangkan pada Contempo Hybrid Blog Post dipindah kesebelah kiri, lay out sebelah kanan berubah fungsi menjadi sidebar. Perhatikan lay out contempo hybrid yagn kami buat dibawah ini: Dan perombakan besar besaran dilakukan terhadap: Lay out blogger Contempo menjadi HybridHeading blogger Contempo menjadi HybridMenu Navigasi Contempo menjadi samasekali baru dan berbeda menjadi: Navigasi HybridMerombak elemen CSS HTML untuk tampilan skinMenambah kode css untuk merobah lay outMembuang beberapa widget dan g…

CARA MENGHAPUS NAVBAR PADA TEMPLATE CONTEMPO

Image
Ada beberapa teman blogger yang berpendapat navbar tidak bisa dihapus. Saya tidak sependapat, selagi navbar berbentuk widget/gagdet dalam tema, itu hanyalah sekelompok untaian kode yang dapat di hapus, termasuk pada navbar pada template terbaru Blogger: Contempo.
Kecuali jika pertanyaannya adalah, bolehkan Navbar ini dihapus? Itu terdengar sedikit ambigu, Blogger tidak pernah terang terangan memberikan statement bahwa itu tidak boleh. Jadi pada saat setiap saya mengedit template saya selalu menghapusnya karena tidak pernah menggunakannya samasekali. Saya menggantikannya dengan gagdet atau widget lain yang lebih sering saya pakai.

Sekali lagi selagi gagdet atau widget adalah sebentuk untaian kode didalam kurung siku, kita dapat menghapus, mengedit dan memodifikasinya!

Tetapi sebenarnya Contempo tidak memerlukan navbar, jikapun ada terdapat navbar itu adalah dikarenakan karena sobat telah menggunakan template yang berbeda sebelumnya, maka jika ingin menghapusnya ikuti petunjuk dibawah …

UPDATE CONTEMPO HYBRID: LAY OUT FIXED

Image
Jika kebetulan anda pernah menggunakan template Contempo Hybrida, anda pasti akan menemukan lay out seperti gambar berikut:
Tampilan titik titik adalah Menu navigasi custom yang saya buat, tampilan lay out ini tentu saja mengganggu sebagian pengguna walaupun tidak berpengaruh apa apa pada performa blog, saya sebenarnya berencana mau merapikannya dan menjadikannya seperti lay out gagdet/widget default blogger. Akan tetapi karena kesibukan saya hanya bisa menyembunyikannya dengan cara sebagai berikut: Masuk ke blogger>>Dasbor>>Tema>>Edit HTMLKopi kode dibawah ini:body#layout .outer-wrapper {width:970px} body#layout .content-wrapper {width:970px} body#layout #header {width:300px;float:left;margin-top:30px} body#layout #header2 {width:500px;float:right} body#layout .main-wrapper {width:550px} body#layout .sidebar-wrapper,.sidebar1-wrapper {width:300px;float:right} body#layout #footer {width:970px} .footer {width:215px;float:left} body#layout ul {display: none}

Tapi tungg…

CARA MENAMBAHKAN BREADCRUMBS YANG RESPONSIVE UNTUK TEMPLATE CONTEMPO HIBRID

Image
Struktur template contempo beda dengan template blogger tua atau klasik jadi untuk menambahkan breadcrumbs kita memakai kode yang berbeda, kode yang memberikan perintah responsive.

Masuk ke tema contempo sobat: Masuk ke pengaturanpilih theme atau temapilih opsi editHTML Pada kotak HTML cari kode <b:includable id='main'> Atau ketik saja di kotak pencarian diatas kotak editor HTML, bisa juga dengan memilih "LOMPAT KE WIDGET" seperti gambar:
Jika sudah ketemu hapus kode tersebut dan ganti dengan kode panjang di bawah ini:
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span><data:blog.pageName/></span>
</div>
<b:e…

APAKAH ARTI KEGAGALAN BAGI ANDA?

Image
"Saya telah gagal ngeblog" begitu pernyataan pada saat sesi tanya jawab via messenger dan wechat, dan sobat pergi tidak kembali kembali lagi berarti kegagalan adalah akhir segalanya. Sobat hanya berdiri sampai disitu, setelah itu berakhir. Sedih saya menuliskannya karena banyak juga dari kita yang memiliki sifat "mudah menyerah dan berhenti karena berputus asa".
Sebagai blogger saya juga bekerja dan tidak menganggap ngeblog sebagai mata pencarian untuk menghidupi hidup, namun jika iya tentu saya sangat bersyukur, blog sebagai hobi tidaklah buruk bahkan dia sangat bermanfaat. Saya tidak akan memberikan contoh yang muluk muluk: Mas Sugeng pembuat template VioMagz yang terkenal itu mengaku tidak punya pendidikan yang memadai tapi menurut saya dia hebat, dari cara kesederhanaan gaya menulisnya saya angkat topi, itu adalah cara berinteraksi yang hampir sempurna menurut saya karena hampir setiap yang dia sampaikan akan mudah dimengerti oleh pembaca, buat apa menulis rum…

CARA PASANG EMOJI KOMENTAR BLOGSPOT TEMPLATE CONTEMPO

Image
Biar seru dan blog menjadi lebih interaktif  terkadang kita memang harus berusaha menarik perhatian dengan cara apapun, salah satunya misalnya anda bisa memasang opsi emoji pada tema blog anda jika sebelumnya saya sudah memberikan tips memasang emoji ini pada tema blogger klasik biasa kali ini saya mencoba trik memasangnya ke tema atau template Contempo, untuk sementara saya cobakan saja memasang di tema Contempo Hybrid ciptaan saya sendiri.
Langkah pertama: Pada tema contempo baik yang default maupun yang hybrid (buatan saya): Masuk ke dasbor pengaturan bloggerPilih temaPilih opsi editHTML Jika sudah masuk ke halaman pengeditan HTML blogger cari kode berikut:   <h4 id='comment-post-message'><data:messages.postAComment/></h4>
(Pada tema klasik tertulis sbb: = <h4 id='comment-post-message'><data:postCommentMsg/></h4>)

Perhatikan perbedaannya tidak akan berdampak apa apa pada efek kode yang akan kita pasang.
Langkah kedua: copy kode dibaw…

CARA MENAMBAHKAN EMOTICON KE DALAM KOMENTAR BLOG

Image
Dengan emoticon yang dapat dipasang  pada sistem komentar blog, blog akan terasa bertambah interaktif. Diharapkan ara pengunjung akan menjadi betah mengunjungi blog anda blog anda berubah jadi lebih interaktif persis kayak Medsos gitu lho....(lol) Tapi benar! medsos adalah sebuah contoh strategi website yang paling sukses menjaring pengunjung. Siapa tahu dengan cara ini blogger sobat menjadi semakin ramai layak dicoba :)
Jelas yang saya pakai adalah tema bawaan blogger alias "default theme" dengan mengetikan kode ":g" misalnya sudah cukup untuk memunculkan emoticon sesuai gambar yang tersedia (20 emoji).
Caranya: Masuk kepengaturan blogpilih temaPilih opsi editHTMLCari kode dibawah ini untuk komentar flat:
<h4 id='comment-post-message'><data:postCommentMsg/></h4>

Sedangkan kalau untuk Repl atau menjawab komentar cari kode dibawah ini:

<div class='post-footer-line post-footer-line-3'>

Letakan atau copy-paste kode berikut dibawah t…

CARA MEMBUAT MENU PENCARIAN LAYAR PENUH

Sebenarnya membuatnya hanya membutuhkan tiga elemen: HTML, CSS dan JavaScript.

Sobat pernah lihat menu kaca pembesar pada template template premium? Bentuknya kaca pembesar dan jika di klik akan muncul kotak pencarian, contohnya Viomagz buatan Mas Sugeng, nah kita akan mencoba membuatnya dengan menerapkannya pada template bawaan blogger saja, namun kalau bisa dimodifikasi agar menjadi lebih responsive tema bawaan tersebut terlebih dahulu.
Perhatikan Contoh demo:







×



Menu Pencarian Layar PenuhKlik ikon kaca pembesar dibawah ini, lalu klik ikon X diatas kanan layar untuk menutup.







Sudah lihat?
Kodenya telah saya modifikasi sebagai berikut agar mudah di terapkan:

<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"></link>
<style>
body {
    font-family: Arial;
}

* {
    box-sizing: border-box;
}

.openBtn {
    background: #f1f1f1;
    border: none;
    padding: 1…