Inilah dia template contempo redesain dengan tampilan sidebar di kanan halamannya

halo gen Z!

Untuk blog personal jujur saja Aku tidak terlalu menyukai tampilan sidebar. Halaman blog dengan tampilan postingan lega sepertinya lebih bagus untuk kebutuhan blogging minimalis, cepat loading dan maksimal. Sedangkan untuk menampilkan iklan dapat di atur melalui lapak lapak yang tersedia baik kanan, kiri, atas dan bawah halaman. Bahkan tentu saja dapat di letakan dengan mudah di tengah tengah postingan.

Yang penting tidak mengganggu pembaca. Jika target kita adalah manusia. Maafkan jika aku membahasnya sedikit saja ya...

Akan tetapi hal itu tentunya subjektif. Tergantung selera masing masing orang juga. Karena sebenarnya halaman dengan sidebar itu adalah desain klasik semasa internet belum di akses melalui perangkat mobile. Lalu bisakah template dengan sidebar dilipat atau disembunyikan di tampilkan pada ukuran layar tertentu menggunakan @media query? Apalagi jika sidebarnya di pindahkah dan ditampilkan ke kanan.

Contohnya template contempo dan Essential?

Tentu saja bisa. 

Bisa banget. 

Hanya saja harus menambahkan dan menulis ulang satu persatu pendeklarasiannya menurut jumlah widget yang dipergunakanan oleh halaman blog secara default. Kalian yang belajar CSS pasti mengerti jika bundle CSS berperan sebagai 'pengatur' dan ia hanya dapat mendeklarasikan pengaturannya sesuai dengan ID atau class masing masing widget di dalam HTML. Ia yang berperan bagaimana HTML di tampilkan kehadapan pemirsa. Dalam bentuk template.

OK, kita dapat menyiasatinya dengan override, menimpa ulang perintah ke dalam HTML, benar itu bekerja tapi melawan prinsip 'clean template' dimana seharusnya kode CSS harus diminimalkan demi kecepatan. Ada dua perintah yang tidak sama. Namun perintah terakhir yang dijalankan. Sisanya adalah trash.

Eh apapula itu override? Setiap programmer harus tahu, Override adalah teknologi yang memungkinan class turunan atau subclass atau kadang juga disebut child, di mana subclass atau child ini bisa mengubah variabel yang ada di parentclass, parent berarti orang tua atau induk. 

Mengubah di sini bisa berarti menggantikan perintah, membuat perintah baru, mengembangkan perintah, dan memodifikasi perintah.

Panjang ceritanya. Bisa duduk di depan kelas jika harus menjelaskannya. Tetapi dengan asumsi, ketika kalian berminat membaca halaman ini, itu artinya kalian sudah mengerti dasar dasar HTML, CSS, dan Javascript. 

Contempo Hybrid?

template contempo dengan sidebar dan menu hamburger

DEMO

||

REQUEST

Template yang Aku bagikan ini adalah contempo bisa juga Essential yang telah di tampilkan sidebarnyanya layaknya template klasik. Aku mengumpulkan materialnya dari inspeksi browser dan akhirnya dapat menyusun ulang antarmukanya dengan baik. Sudah cukup baik menuruk aku. Dan model ini bukan model baru, ini desain model lama. 

Aku juga sedang mendesain agar tampilan homepagenya menjadi grid sementara halaman postingannya memiliki sidebar. Namun secara desain jelas ini bukan desain baru, karena template sidebar adalah desain template tua, lawas alias klasik.

Tapi yang jelas ia adalah contempo karena bundel label desainnya adalah:

<b:template-script async='true' name='indie' version='1.0.0'/>

Setiap contempo bawaan aslinya memliki cap itu.

Lalu template ini aku dandani seperti biasanya. 

• Navigasi responsif dan adaptif dengan hamburger menu beranimasi
• Breadcrumbs untuk data struktur yang lebih SEO
• Related Posts
• Tombol berbagi
• Auto metatag
• Dan lain lain

Dan jadilah ia sebuah tampilan contempo dengan gaya klasik karena memiliki sidebar di kanannya. Cara mengedit menu menu navbarnya sama dengan template sebelumnya dan postingannya telah kami tulis di halaman blog ini.

Kesimpulan:

Bagi kalian yang masih menyukai desain lawas klasik, tentunya sidebar kanan adalah hal yang bagus, karena ia juga dapat menampilkan banyak hal melalui lapak tersebut. Namun bagi pencinta desain minimalis modern, tentu hal tersebut tidak lagi terlalu diminati.

Jadi template ini adalah contempo yang di desain ulang menjadi tampak klasik karena memiliki sidebar di kanannya.

Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini! Share:

SHARE YA:

TIPS AGAR TEMPLATE BLOGGER MOBILE KLASIK BISA BERLARI SECEPAT AMP

Speed control 

SEDERHANAKAN!
Segala yang kita inginkan selalu ada harganya. Tidak terkecuali blogging, jika sobat inginkan sebuah tema atau template blog yang lengkap cantik dan berhiaskan banyak gadget, dapat dipastikan halaman bloggernya akan segera menjadi lambat. Sementara kita tahu kecepatan adalah hal yang vital  bagi teknik SEO di dunia blogging zaman sekarang.

Trik ini cocok bagi anda yang sudah terlanjur menggunakan template mobile klasik biasa: Jangan ragu membuang widget widget dan atribut yang tidak penting, atau cari saja alternatif yang lain yang materialnya lebih alami untuk bloggger.

Itu bukan mitos melainkan alasan karena memang tuntutan teknis sang mesin pencari. Semua jenis algoritma web tidak akan dapat menafikan itu. Jika kita membuat robot di dunia nyata sekalipun, jika segala hal membutuhkan kecepatan maka yang cepatlah yang akan menang.

Tidak perduli sobat menggunakan template AMP atau template klasik responsive biasa jika halaman web sobat dapat berlari lebih cepat maka blog sobat akan di index lebih cepat dan tiba di garis finish lebih duluan!

Semakin cepat loading halaman sebuah blog semakin besar peluangnya untuk di rekomendasikan oleh mesin pencari kepada para pengunjung sebaliknya halaman blog yang lambat akan "diabaikan" oleh mesin pencari karena terlalu banyak memakan sumber daya: yakni waktu. Diibaratkan hanya pengunjung pengunjung yang "tersesat" yang mampir dan saat mereka menemukan kenyataan blog kita susah di akses, mereka akan segera kabur mencari halaman lain. Mereka akan menemukan halaman yang cepat dan ramai pengunjungnya dan segera berinteraksi disana.

1. REMOVE GADGET/WIDGET FOLLOWER.

Sebenarnya gadget apapun akan memberatkan loading blog. Namun Gagdet Follower atau pengikut: Sobat boleh coba pasang gaget ini dan test pada GMETRIX dan klik YSLOW perhatikan link prioritas yang disarankan untuk di hapus maka link daripada gagdet "Follower" ini pasti masuk, test juga di Google pagespeed insight. Mengapa ini terjadi? Karena Gadget ini memuat banyak link eksternal dari profile para blogger pengikut berikut link halaman mereka.

Jika sobat tidak merasa penting penting amat dengan gagdet ini lebih baik tidak usah dipasang, namun Gagdet ini juga sangat bermanfaat terhadap performa blog karena menjadi hampir mirip backlink yang selalu di kejar kejar oleh para blogger sampai saat ini. Sayangnya menurut saya karena dia mengurangi kecepatan loading template blog sampai 10% secara sangat signifikan, Gagdet ini harus diperbaiki karena sangat mengurangi pengoptimalan SEO dari segi kecepatan.

Kecepatan adalah hampir menjadi harga mati sebuah blog di zaman sekarang, jika sobat mengutamakan kecepatan JANGAN PASANG GADGET FOLLWER INI. Lepaskan dan relakan saja dia pergi. Sobat silahkan pasang gadget popularpost atau label karena beberapa gadget memang sangat ringan dan tidak memberatkan loading halaman blog.

Saya juga sangat menyarankan jika tidak penting penting amat jangan memasang banner atau LOGO yang mengandung link dari blogspot orang lain kecuali memang ada bisnis yang menguntungkan.

Misalnya pada side bar blog sobat hindari pemasangan widget yang menampilkan LOGO namun juga mengandung link aktif ke blogspot orang lain. Kekeliruan kita menyangka itu adalah cara bertukaran backlink, namun melalui analisa SEO yang lebih mengutamakan kecepatan atribut atribut itu untuk masa sekarang hanya akan menjadi sampah didalam template sobat. Apalagi Algoritma Google selalu berubah rubah setiap waktu. Pemilik link juga tidak terlalu diuntungkan dengan hal ini.

Alternatif: Jadilah lebih aktif di kolom komentar dan rajin blogwalking.

2. GANTI TOMBOL SHARE PIHAK PIHAK KETIGA.

Saya sangat suka dengan tombol share AddThis, selain memudahkan kita berbagi agar postingan kita dibaca di beberapa medsos. AddThis sangat lengkap, hampir semua platform berbagi dia punya. AddThis juga telah menghilangkan tombol GPlus.

Tentu saja AddThis membantu pengoptimalisasian halaman blog, misalnya melalui tool newsletter, opsi related post dan laporan trafik blog. Akan tetapi AddThis sangat berat dan mengurangi  hampir 12% kecepatan blog

JANGAN PASANG TOMBOL BERBAGI INI jika sobat mengutamakan kecepatan blog!

Alternatif: pasang AddToAny. Tombol AddToAny memiliki hampir semua platform yang dimiliki oleh AddThis, namun sampai saat ini AddToAny belum menghapus tombol GPlus. Mungkin akan dilakukan pas tiba hari "H"-nya nanti. AddToAny walaupun juga membebani kecepatan namun terasa jauh lebih enteng.

Cara bekerja API kedua aplikasi web ini mungkin berbeda yang disesuaikan dengan target dan kebutuhan masing masing mereka. Jadi saya menyarankan jika sobat membutuhkan tombol berbagi dari pihak ketiga yang simple, ringan dan tidak memberatkan loading sobat bisa memilih memasang AddToAny.

Namun jika sobat memilki sedikit pengatahuan kode HTML lebih baik membuat sendiri tombol tersebut. Saya menggunakan tombol berbagi AddToAny.

3. HILANGKAN LINK AWSOME

Jika diatas tadi kita membahas gagdet yang bisa dipasang melalui pengaturan pada dasbor blogger blogspot, kali ini kita harus merombak template melalui opsi >>pengaturan>>tema>>edit HTML.
Agar supaya halaman blogger dapat menampilkan ikon ikon awsome maka di dalam tag <head> harus di pasang link awsome, seumpama melatakan link pemanggil ikon atau font awsome dibawah ini diatas tag </head>:

<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

Pada daftar YSLOW di GMetrix link ini secara nyata membebani kecepatan hingga beberapa puluh kilobyte, sekian prosen dari ukuran template sederhana secara keseluruhan. Saya menyarankan jika "pernik-pernik" hiasan tidak terlalu penting mengapa kita harus menanamkan link yang dapat menunda kecepatan? Lebih baik menggunakan tema yang sederhana dan menghiasinya langsung dari internal template.

Misalnya, ketika membuat template ini saya juga memasang  link "pemanggil" font awsome 5 yang lebih kompatibel dengan HTML 5 ketimbang link contoh diatas, linknya adalah:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"/>

Tetapi samasekali tidak ringan, dan cukup signifikan merugikan kecepatan maka saya segera membersihkannya melalui halaman editor HTML blogspot.

Alternatif:
Jika blog tetap menginginkan ikon pasang saja ikon SVG, secara default (bawaan) template blogger juga menggunakan ini. Untuk memahami cara menggunakannya saya berencana akan membuatkan tutorial sederhananya.

Saya juga berfikir mungkin trik CSS bisa membantu membuat blog saya sedikit "berwarna"
Dan pada halaman editor HTML bagian dimana CSS ditempatkan saya mencari elemen elemen yang dapat saya manipulasi untuk merubah tampilan blog. Contohnya:

1. Border dash. Saya dapat menuliskan perintah CSS untuk membuat border, style dan mewarnainya. Membentuk bulat dan lengkungannya.
2. Mengurangi penggunaan JavaScript. Saya hanya terpaksa menggunakannya ketika harus menambahkan fungsi "klik" pada menu navigasi terutama yang mengandung menu dropdown.
3. Warna CSS. Saya membuat warna gradasi dengan kode HEX, rgb untuk mengkombinasikan dua warna. Sesekali saya gunakan bahasa program tingkat tinggi he he he dengan menuliskan "blue" utnuk warna biru.

Trik diatas saya praktekan pada tema blog ini yang walaupun memiliki konten konten berat dan gambar gambar ilustrasi yang beratnya juga tidak karuan ternyata mampu berlari pada kecepatan 92 pada pengujian PageSpeed. Dan problem blog ini masih pada head expires yang belum bekerja pada pengujian GMetrix bagian YSlow-nya.

4. HINDARI PEMAKAIAN JAVASCRIPT

Saya hanya memasang satu kode javascript untuk keperluan mengaktifkan fungsi dropdown pada menu navigasi blog ini. Saya ada menyinggung perihal WebAssembly yang diklaim jauh lebih cepat loading dibanding dengan JavaScript.

Tapi saya belum tahu cara menerapkannya untuk menggantikan tugas mulia dari JavaScript ini. Misalnya pada template ini saya hanya memasang perintah JavaScript diatas didalam tag <body>:

<script>
function myFunction() {
  var x = document.getElementById(&quot;Header1&quot;);
  if (x.className === &quot;topnav&quot;) {
    x.className += &quot; responsive&quot;;
  } else {
    x.className = &quot;topnav&quot;;
  }
}
</script>

Intinya jika anda ingin tema blognya cepat jangan terlalu banyak memasang dan menggunakan JavaScript, pemasangan javascript yang berlebihan selain memberatkan loading secara signifikan juga akan mempengaruhi prilaku dan tampilan template yang menjadi buruk.

5. GUNAKAN FORMAT GAMBAR WEBP

Sebelum menambahkan gambar kedalam postingan, berupa konten atau artikel sebaiknya "convert" terlebih dahulu gambar tersebut menjadi format  WEBP. Dalam setiap penjelasan terkait perihal kecepatan loading halaman blog, pihak ahli dan Google akan mengingatkan kita untuk menggunakan format gambar terbaru yang lebih ringan dan kompatibel pada halaman web yakni format baru gambar WEBP .

Webp adalah format gambar digital terbaru dari Google.

Webp mampu mereduksi ukuran gambar sampai 25%  nyaris tanpa kehilangan kualitasnya dibanding format JPG atau PNG. Sehingga jika anda seorang pengembang web, penggunaan webp pada gambar yang diunggah akan mempercepat situs yang anda buat. Selain itu, Weppi juga mendukung gambar bergerak/animasi, seperti pada format gambar GIF, yang mana tidak bisa dilakukan oleh format JPG dan PNG.

Beruntungnya hari ini Browser browser utama mulai mendukung Webp ya karena keuntungan beban yang ringan dan alasan kecepatan loading tadi. Dan lebih menyenangkan lagi pada zaman dimana kita sudah bisa ngeblog melalui tablet dan hape Android yang mana aplikasi converter gambar untuk merobah format JPG,PNG dan lainnya kedalam format WEBP. Anda bisa mendownloadnya di Play Store.

Oleh karenaGoogle sangat merekomendasikan template blog yang cepat sehingga mereka juga mengemukakan projek AMP. Google juga terang terangan mengingatkan arti penting sebuah kecepatan dan mengapa sebuah halaman yang cepat akan diutamakan.

Itu bukan mitos melainkan alasan teknis mesin pencari. Semua jenis algoritma tidak apat menafikan itu. Jika kita membuat robot di dunia nyata sekalipun, jika segala hal membutuhkan kecepatan maka yang cepatlah yang akan menang.

Tidak perduli apakah kita menggunakan template AMP atau template klasik responsive biasa jika halaman web kita dapat berlari lebih cepat maka blog kita harus di index lebih cepat dan tiba di garis finish lebih duluan!

Semakin cepat loading halaman sebuah blog semakin besar peluangnya untuk di rekomendasikan oleh mesin pencari kepada para pengunjung sebaliknya halaman blog yang lambat akan "diabaikan" oleh mesin pencari kaerna terlalu banyak memakan sumber daya: yakni WAKTU. Diibaratkan hanya pengunjung pengunjung yang "tersesat" yang mampir dan saat mereka menemukan kenyataan blog kita susah di akses, mereka akan segera kabur mencari halaman lain. Mereka akan menemukan halaman yang cepat dan ramai pengunjungnya dan segera berinteraksi disana. Alasan ini fair dan cukup adil.

www.editblogtema.net

SHARE YA:

Template keren Contempo re-desain

Empat varian terbaru template blogger memiliki layout versi ke-3. Seperti yang sering saya ingatkan: Sampai saat ini template template premium berbeli bahkan masih menggunakan dasar layout versi 2 contohnya viomagz, cobalah inspeksi melalui browser inspection element.

Perbedaannya tidaklah terlalu penting karena semua template memiliki kelebihan dan kekurangan masing masing tidak ada yang sempurna. Tapi dianjurkan ngeblog menggunakan template dengan layout versi ke-3.

Tapi jika panasaran ingin tahu perbedaannya perhatikan contoh berikut:
Editblogtema:

 <?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3'b:responsive='true' b:templateUrl='rockpool.xml' b:templateVersion='1.3.0' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>Perhatikan Viomagz masih b:version='2' 

Viomagz: 

 <?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:responsive='true' b:version='2' class='v2'
expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
.........
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: VioMagz
Version: 2.7.5 (25 juli 2018)
Designer: Mas Sugeng
----------------------------------------------- */

Adapun template klasik pendahulu kedua jenis template diatas adalah satu satunya template yang memiliki desain layout versi awal atau versi pertama. Kodenya tampak sebagai berikut:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="<$BlogLanguageDirection$>">
............
-----------------------------------------------
Blogger Template Style
Name:     Rounders
Date:     27 Feb 2004
----------------------------------------------- */

Nah saya hanya menawakan satu lagi template berbasis contempo (layout versi ke-3) yang telah saya modifikasi:

1. Memiliki Navigasi fixed dengan sub-menu dropdown. Menu akan tetap berada diatas jika halaman konten di scroll keatas, sebaliknya bar menu akan menghilang ketika halaman konten di scroll kebawah berganti dengan bar menu bawaan yang akan menampilkan tombol sidebar saya telah mengatasi hal ini dengan mengubah nilai z-indexnya.
2. Breadcrumbs versi ke 3 dari bung Franky. Breadcrumbs ini ternyata sangat dinamis pada saat diterapkan kedalam template contempo melebihi ketika dia diterapkan ke dalam template notable dan emporio.
3. Memiliki Related posts
4. Tombol berbagi lengkap Addthis
5. Tombol Back to top CSS.
6. Selebihnya bisa di edit melalui blogger theme design.
7. Thumbnail dipindah dari kiri ke kanan

Trik memindahkan thumbnail dari kiri ke kanan pada homepage contempo sederhana saja. Cukup masuk ke pengaturan blogger, pilih tema, lalu pilih edit HTML dan cari kode berikut:

.post-body .snippet-thumbnail{
.post-body .snippet-thumbnail{
float:$(startSide);
margin:0;
margin-$endSide:2em;
max-height:128px;
max-width:128px
}
.post-body .snippet-thumbnail img{
max-width:100%
}

Perhatikan kode yang saya sorot warna kuning, robah statemen default itu menjadi:

.post-body .snippet-thumbnail{
.post-body .snippet-thumbnail{
float:right;
margin:0;
margin-$endSide:2em;
max-height:128px;
max-width:128px
}
.post-body .snippet-thumbnail img{
max-width:100%
}

Beruntung sintaksnya sudah mirip bahasa manusia, jadi dalam beberapa hal memudahkan pemahaman kita dalam memanipulasi tampilan sebuah template. Secara keseluruhan memodifikasi tema contempo mirip saja dengan memodifikasi template emporio, notable dan soho. ikuti tutorial saya sebelumnya, maka sobat akan bisa memodifikasi contempo dengan sempurna.

Lihat DEMO TEMPLATE

Tentu saja sobat bisa memilikinya dengan gratis. Request saja.

www.editblogtema.net

SHARE YA:

CARA MEMBUAT WATERMARK PADA LAY OUT BLOGGER MENGGUNAKAN CSS

Gambar watermark buatan editblog

Gambar diatas adalah Lay Out Contempo Hybrid dan boleh dikatakan saya telah membuang lebih separoh gagdet bawaan tema contempo dan menambahkan separoh gagdet atau widget klasik pilihan yang terbaik untuk membentuk template yang satu ini. Saya juga telah mengkompres kode kode yang saya tambahkan kedalam HTML, satu satunya ganjalan paling serius pada loading kecepatan tema ini adalah ukuran gambar yang sebagian "enggan" saya kecilkan karena pertimbangan estetika.

Kalau sobat perhatikan pada gambar (ditunjukan oleh marking anak panah warna merah) kanan atas lay out saya juga telah menempatkan sebuah watermark cantik, jika sobat ingin membuatnya cukup melalui cara berikut:

1. Masuk kepengaturan blogger
2. Pilih tema
3. Pilih Edit HTML
4. Cari kode: (lebih mudah dengan cara tekan ctrl+f)

]]></b:skin>

<b:template-skin>

<![CDATA[

Yang sobat cari itu sebenarnya adalah kode yang telah saya sorot warna kuning, karena tepat dibawah kode tersebut sobat pastekan kode dibawah ini:

body#layout, body#layout div.section { font-family: Arial, sans-serif;}body#layout { max-width: 1040px;}body#layout .sidebar-sticky { z-index:0;}body#layout #wrapper { overflow: unset;}body#layout #header-container { height: auto;}body#layout:before { content: "ContempoHybrid ultimate";    position: absolute;    top: 20px;    right: 20px;    z-index: 1;    padding: 10px 20px;    font-size: 18px;    color: #87CEEB;    background: #FFE4E1;    border-radius: 20px;    border: 1px solid #d6d6d6;}body#layout .widget-content { box-shadow: none;}

Save template. Perhatikan kode yang saya sorot merah pink yakni: ContempoHybrid Ultimate Silahkan sobat ganti dengan nama template hasil desain sobat sendiri. Kode ini dapat dipasang pada template contempo biasa dengan cara yang sama seperti petunjuk diatas.

Kode ini juga terpasang pada template template premium yang harganya selangit, dan juga pada lay out VioMagz-nya Mas Sugeng dan seperti sobat lihat kode ini menghasilkan watermark yang indah.

Jika sobat ingin merobah warna tulisan silahkan ganti kode HEX yang saya sorot biru dan jika sobat ingin merobah warna latar watermark silahkan sobat ganti kode HEX yang saya sorot warna kuning.

SHARE YA:

Templat blogspot Super Cepat

Tema ini contempo dan memiliki kecepatan 9,8 melalui PageSpeed dan 100 pada GMetrix setelah diuji pada editblogtema yang luamayan berat karena dipenuhi oleh kode kode demo dan gambar. Dan memiliki kecepatan cukup (sedang ) pada pengujian TestMySite.WithGoogle.

Pada pengujian tema atau templat buatan editblog mampu mencapai kecepatan mobile hingga skor 98. Itu sudah hebat. Sedangkan pengujian random pada GMetrix menghasilkan skor 100 pada kecepatan:

Hasil diatas pada gambar tergolong hebat. Namun bagaimana dengan hasil uji coba pada TesMySite? Bagaimana skornya?

Seperti kita ketahui untuk mencapai kecepatan pada testmysite sangat sulit karena kecepatan mobile masih dibelakang desktop. Jika sobat tidak percaya silahkan uji tema sobat yang sobat pakai sekarang di:

THINK WITH GOOGLE

Kecepatan paling bagus hanya mendapatkan skor 1.4 detik, itu sudah sangat hebat!

Kalau kecepatan template blog sampean bisa mencapai 0,8 detik saya angkat topi deh. Saya telah mencoba beberapa tema buatan saya hanya model AMP dan yang tidak banyak menggunakan atributlah yang dapat bertemu dengan kecepatan tersebut. Itupun, pada pengujian AMP yang saya lakukan saya hanya menggunakan 13 Artikel dengan jumlah gambar format Jpg 2000 yang sama dengan jumlah artikel.

Saya berjanji akan melakukan perbaikan pada proyek berikutnya hingga kecepatan sebuah template bisa mencapai 0,5 detik! ini terdengar ambisius ya he he he...

Spek tema yang saya edit ini adalah sebagai berikut:

1. Basis: Contempo, varian warna hijau
2. Group CSS Headernya saya pangkas nilainya dari minimal 480px menjadi 75px dengan nilai default 450px. Ini penting untuk menghilangkan ciri ciri contempo bawaan dan akan terasa gunanya pada saat sobat meletakan script iklan diatas postingan.
3. Posisi tombol pencarian dan Judul di adjust untuk membuat header lebih dinamis.
4. Sidebar saya hilangkan (sembunyikan melalui pengaturan @mediascreen) dan saya ganti dengan kustom sidebar tombol  menu dropdown, berguna sebagai menu navigasi yang responsive dan mobile friendly, sidebar ini saya desain cukup cantik hanya dengan memanipulasi kode CSS. Sebelum membuatnya saya sudah melakukan sedikit survey sama teman teman di kafe untuk menguji sebarapa jauh mata bisa menilai secara visual paduan warna dan bentuk visual halaman web. Tanggapan mereka terutama yang cewek cukup bagus kok.
5. Penting: Tombol sidebar dibuat Fixed tidak akan hilang pada saat konten di scroll keatas dan kebawah.
6. Background dibuang disamping untuk menghindari kredit juga mengurangi beban loading template. 
7. Mengkompress hampir seluruh elemen HTML, menyatukan beberapa tautan JavaScript-demi kecepatan
8. Script bersih dan mengikuti basis tema blogspot-sesuai prosedur.

Silahkan Lihat DEMO 

Silahkan tekan tombol merah kanan atas untuk membuka sidebar atau navigasi template blog ini, dan tekan kembali untuk menutupnya. Silahkan eksplorasi untuk membuktikan keceptannya.

Berminat? Saya gratiskan kok. Saya tidak menjual template. Projek saya semuanya opensource. Saya misalnya tidak mempermudah pengeditan sidebar dengan membuat pintasannya kedalam lay out. Tujuan saya agar sobat bisa mengedit tema sendiri dan terbiasa dengan kode kode HTML.
Namun jangan kuatir template ini juga masih bisa di edit melalui opsi desainer tema blogger pada dasbor atau pengaturan default (bawaan) blogspot.

Tips tambahan: untuk mempercepat loading pada pengaturan gadget popularpost hilangkan centang gambar/thumbnail pada opsi popular post tersebut, sehingga popular post hanya akan menampilkan snippet tanpa thumbnail gambar. Ini berguna untuk menghindari kekosongan expires header blog contempo pada pengujian kecepatan GMetrix bagian YSlow.

Silahkan request kodenya saya akan kirimkan.
www.editblogtema.net

SHARE YA:

MERUBAH GAYA JUDUL POSTINGAN TEMPLATE CONTEMPO VIA CSS

Prinsip pembuatan sebuah template fast loading adalah: kesederhanaan. Apabila sobat telah mengikuti tutorial demi tutorial yang telah saya posting didalam blog ini sobat akan "hampir" menguasai trik pembuatan template model bawaan blogspot terbaru terutama contempo. Namun sederhana bukan berarti tidak stylish apalagi jelek. Prinsip sederhana itu justeru indah dan tidak akan membosankan.

Secara default (bawaannya) Contempo memiliki style judul yang terlalu menumpu ke kiri atau dalam istilah penulisan "Left Aligned" saya kurang sreg ketika membuka tampilan seperti itu melalui tampilan layar hape atau mobile. Perhatikan gambar dibawah ini:

Pada gambar diatas saya telah membuat judul itu berubah menjadi lebih "Justify" bagaimana triknya?

HANYA CSS

Dibanding template template bawaan blogspot yang lebih tua atau yang lebih klasik, Contempo memiliki lebih banyak aba aba CSS yang dapat kita manfaatkan untuk merubah tampilan halaman web kita tidak ada diperlukan penambahan apa apa, cukup merubah aba aba atau perintah pengaturan melalui CSS-nya.

Banyaknya jumlah aba aba CSS juga menjadi pertanda kedatangan project AMP pada waktu itu (Tahun 2017).

Masuk kepengaturan atau dasbor blogger:

1. Pilih tema atau theme
2. Pilih Edit HTML
3. Cari dan edit kode berikut dibawah ini (gunakan ctrl+f untuk menampilkan kotak pencarian pada bagian atas halaman editor HTML):

.post-title {

Atau lebih lengkapnya (perhatikan kode yang saya sorot kuning):

.post-title {

  font: $(posts.title.font);

  float: $(startSide);

  margin: 0 0 8px 0;

  max-width: calc(100% - 48px);

}

Robah saja bagian yang saya sorot kuning sehingga kode akan terlihat sebagai berikut:

.post-title {

  font: $(posts.title.font);

  float: $(startSide);

  margin: 0 0 8px 0;

  max-width: 100%;

}

Save template. Sangat mudah, bukan?

www.editblogtema.net

SHARE YA:

CONTEMPO HYBRID ULTIMATE VARIAN 3 - UPDATED

Updated: Apa yang baru?

FITUR FITUR BARU:

1. Template disederhanakan
2. Tentu saja lebih SEO friendly
3. UI dan UX baru: Responsive dan Mobile banget
4. Lebih gesit, bersih dan lebih ringan dan menjadi supercepat
5. Menu Navigasi lebih responsive dan stylish dengan warna gradasi. Dibuat dan dikembangkan berdasarkan tutorial W3school 
6. Tombol pencarian di perbaharui, lebih responisve, lebih alami dengan "search input" warna biru akan muncul dibawah (sebelumnya diatas, banyak yang komplin)
7. Kecepatan semakin di tingkatkan antara lain dengan membuang link link sampah dari tombol share pihak ketiga, kode kode CSS dan JavaScript bawaan yang tidak terpakai dan menambahkannya dengan tombol berbagi addtoany yang lebih ringan. Silahkan cek di Gmetrix atau Silahkan cek halaman demo di tes kecepatan Google PageSpeed
8. Perbaikan pada tampilan Tablet khusus navigasi pada menu dropdown yang terlalu rapat ke kanan sehingga menyulitkan tindakan penampil.
9. Memperbaiki posisi snippet dan thumbnail pada homepage
10. Memiliki dan menambahkan opsi xFrame untuk meningkatkan opsi  keamanan pada "https"
11. Mengganti link ikon Awsome dengan link Awsome 5 yang lebih valid HTML 5
12. Meniadakan link Gplus pada tombol berbagi, kami akan menambahkan tombol tombol berbagi baru antara lain: Google feed, Wordpress, dll.

Menu Navigasi dropdown jauh lebih responsive dari sebelumnya, klik saja Gambar dibawah ini untuk melihat laman asli:

Tampilan tablet dan mobile:

Sobat lihat tampilan Contempo Hybrid untuk layar sedang tablet dan layar kecil hape diatas? Itulah Contempo Hybrid Ultimate v3 update, tampilan mobile adalah prioritas pada zaman now.

Skor kecepatan mobile : 95, desktop 100

ADA PERTANYAAN?

Silahkan hubungi dengan mengklik tanda amplop 

yang dapat sobat gunakan untuk berkorespondensi dengan kami

DEMO

Link Dowload: 

www.editblogtema.net

SHARE YA:

CARA MENGHILANGKAN NAVIGASI DAN SIDEBAR BAWAAN CONTEMPO

Kalau sobat perhatikan gambar peraga dibawah ini sobat mungkin pangling apa benar ini template contempo? Tampilan pada laptop, tablet dan pada layar ponsel tampak serasi. Namun pada layar desktop yang lebih besar akan sedikit beda karena sidebarnya masih terlihat. Saya sengaja membiarkan hal tersebut untuk memberi memaksimalkan template pada layar yang lebih besar.

Apa yang berbeda?

1. Latar warna dibuang habis
2. Heading di rombak habis
3. Menu navigasi plus kotak pencarian bawaan dibuang mulai pada layar laptop hingga ponsel dan diganti dengan menu navigasi dan kotak pencarian buatan saya sendiri.
4. Sedikit modifikasi struktur HTML/CSS

Jika sobat bosan dengan tampilan Contempo bawaan (default) dan ingin merombak habis Navigasi serta menghilangkan sidebar Contempo atau menyederhanakan templatenya sobat bisa mencari kode dibawah ini (letaknya biasanya dibaris 2832 pada halaman HTML):

<b:if cond='data:view.isSingleItem'>
                  <a class='return_link' expr:href='data:blog.homepageUrl'>
                    <b:include data='{ button: true, iconClass: &quot;back-button rtl-reversible-icon flat-icon-button ripple&quot; }' name='backArrowIcon'/>
                  </a>
                <b:else/>
                  <b:include data='{ button: true, iconClass: &quot;hamburger-menu flat-icon-button ripple&quot; }' name='menuIcon'/>
                </b:if>

Hapus saja seluruh kode diatas dan save tema dan lalu ikuti petunjuk dibawah ini:

1. Masuk kepengaturan blogger
2. Pilih Tema
3. Pilih tombol edit HTML
4. Cari kode kode utama: </header>, </head> dan </body> saya tandai dengan huruf berwarna merah untuk mempermudah panduan.

Kalau sudah siap perhatikan kode dibawah ini yang saya sorot dengan warna warna: Biru,Kuning, Merah

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {margin:0;font-family:Arial}

.topnav {
  overflow: hidden;
  background-color: #6495ED;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.active {
  background-color: #6495ED;
  color: white;
}

.topnav .icon {
  display: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 17px;    
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}

.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

.dropdown:hover .dropdown-content {
  display: block;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}
</style>
</head>
<body>

<div class="topnav" id="myTopnav">
  <a href="#home" class="active">Beranda</a>
  <a href="#news">Berita</a>
  <a href="#contact">Hubungi</a>
  <div class="dropdown">
    <button class="dropbtn">Dropdown 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div> 
  <a href="#about">About</a>
  <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
</div>

<div style="padding-left:16px">
  <h2>Menu Navigasi responsive dengan "dropdown"</h2>
  <p>Untuk menguji menu navigasi ini responsive atau tidak, coba periksa halaman melalui hape dan laptop atau tablet sobat.</p>
  <p>Tentu saja tekan tombol "Dropdown" yang muncul pada barisan menu untuk memunculkan menu menu dropdown tersebut.</p>
</div>

<script>
function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
</script>

</body>
</html>

1. Kode kode yang saya sorot warna biru seluruhnya harus diletakan diatas kode </head>
2. Kode kode yang saya soroti warna kuning seluruhnya harus diletakan diatas kode </header> bukan </head> ya. Cari saja dengan menekan ctrl+c pada keyboard laptop dan letakan seluruh kode yang saya sebutkan tadi diatas atau dibawah kode tersebut.
3. Kode kode yang saya sorot warna merah seluruhnya harus diletakan diatas kode </body>

Save template. 

Jika sobat ada yang mencobanya dan terjadi error, atau belum mengerti bagaimana memasang link pada menu, jangan sungkan sungkan bertanya kepada kami ya...

Untuk membuktikannya silahkan lihat DEMO

www.editblogtema.net

SHARE YA: