EDITBLOGTEMA

Ternyata CSS cukup sakti dan jika Kalian memiliki sedikit kreatifitas ia akan menjadi alat seni yang indah dan menakjubkan. Dalam kesempatan kali ini saya akan berbagi bagaimana caranya menerapkan header bergelombang sederhana dan beranimasi ke halaman template blog terbaru, baiklah kita mulai. Kita akan melakukan percobaan terhadap template essential karena ia adalah varian kelima dan paling mirip dengan contempo. Artinya bisa diterapkan ke essential berarti bisa juga diterapkan ke template contempo bahkan bisa juga ke soho, emporio dan notable.  Ini hanya percobaan dasar yang saya ambil dari beberapa referensi milik Daniel Österman yang saya modifikasi. Mudah dan hanya dibutuhkan pengaturan CSS. 1. LANGKAH PERTAMA Ok, masuk ke pengaturan blogger blogspot Pilih Tema Pilih Edit HTML Di dalam editor HTML blogger blogspot cari kode </head> dan letakan kode CSS berikut di atasnya:    <style>@import url(//fonts.googleapis.com/css?family=Lato:300:400); body {   margin:0; } h1 {

Mengapa saya akhirnya membuat template blogger sendiri adalah berawal dari rasa ingin tahu yang besar terhadap desain tampilan halaman web. Pertama kali saya menggunakan templat standar dari dasbor blogger hanya bertahan seminggu karena pada saat blogwalking, saya melihat halaman blog para blogger sangat keren. Dan saya tidak membuang waktu untuk mencari tahu. template contempo indigo DEMO    DOWNLOAD Ternyata mereka membeli template template tersebut, mereka menyebutnya dengan template premium. Wah keren, Guys,  saya segera akrab dengan halaman halaman penyedia template premium sebut saja,  Gooyabi,  Envanto,  Bloggertheme dll.  Saya sudah beli hingga selusin template, dan semenjak itu gonta ganti template melulu anehnya saya merasa semua template tidak ada yang memuaskan. Padahal diantaranya ada yang dibeli hingga seharga 350ribuan.  Akhirnya saya berhenti membeli desain desain hebat tersebut. Dan mulai berfikir, bagaimana sih caranya membuat template sendiri? 

Gambar tempilan 4 template terbaru blogger secara default P ertanyaan diatas bukan untuk mereka yang telah menggunakan template model lama setelah bertahun tahun ngeblog. Pertanyaan diatas ditujukan kepada pengguna baru, karena Google jelas telah membuat 4 template terbaru untuk dengan tujuan jelas untuk menjawab tantangan waktu, mengupgrade tampilan dan meningkatkan fitur keamanan. Ke empat template ini masing masing sudah sangat responsif, mobile friendly dan memiliki header yang dapat di modifikasi untuk memiliki menu navigasi yang responsive plus tombol dan kotak pencarian yang hebat. Jadi semua fitur dasar premium dapat kita miliki setelah memodifikasinya. Dan yang penting ketimbang template  template lawas template template terbaru ini support layout blogger versi ke-3 4 template blogger terbaru berikut masing masing memiliki 5 varian dengan warna warna berbeda adalah template yang berbeda dengan template model lama, secara default ke empat template ini dibuat dengan l

DEMO DOWNLOAD S ederhana yang saya maksud adalah tidak menggunakan font awsome atau link gambar dengan deklarasi URL seperti contoh: https://1.bp.blogspot.com/-...jpg. Keunggulannya adalah: Sederhana Cepat loading atau tidak membebani loading Hanya HTML CSS Langkah pertama Caranya adalah: LETAKAN CSS Masuk kepengaturan blogger Pilih tema (atau theme kalau bahasa Inggris) Pilih sesuaikan (atau Customize kalau bahasa Inggris) Dari sini kita telah masuk ke opsi "Blogger theme designer" Pilih lanjutan (Advance kalau bahasa Inggris) Pada sebelah kanan muncul menu dropdown scroll menu keatas hingga ketemu tambahkan CSS (ADD CSS) yang letaknya paling bawah. Klik menu tersebut akan muncul kotak blanko CSS kosong. Selanjutnya copy kode css dibawah ini pastekan kedalam kotak blanko CSS kosong tadi: .btn{list-style:none;text-align:center;margin:10px!important;padding:10px!important;font-size:14px;clear:both;display:inline-block;text-decoration:none!imp

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' xmln

Mengapa kita harus menggunakan template layout versi ke 3 sekarang? "On occasion, we will issue Blogger template upgrades to fix bugs or add new features" demikian salah satu alasannya. Saya membuat dan memodifikasi beberapa puluh template memang beberapa diantaranya masih menggunakan layout versi ke 2 namun telah di custom sedemikan rupa, silahkan klik image thumbnail gambar dibawah gambar utama dari kiri ke kanan untuk melihat tampilan template template buatan editblogtema satu persatu  (tekan image thumbnail dibawah gambar satu persatu): Catatan: template dengan layout versi 2 adalah tema simple yang saya buat berdasarkan template sederhana. Green notable adalah template re-desain terbaru dari editblogtema. Saya sedang mempergunakannya sekarang untuk sementara. Apa bedanya template suppot desain versi 3 dan 2? Jelas beda. Versi 2 adalah template versi yang sudah  tua. Sedangkan layout versi 3 hadir mulai tahun 2017, baru berumur 2 tahun yakni empat varian

Seperti biasa setiap 6 bulan saya membuat template baru berdasarkan template default namun tentu saja dengan tampilan dan fitur yang berbeda. Dan membagikannya hanya bagi siapa yang mau. Template kali ini saya namakan green Notable, dasarnya diadopsi dari tema notable terkemuka keluaran 2017 blogger. Warna ini mewakili keselamatan lingkungan. Mungkin sebagai catatan  sebagian fiturnya adalah sebagai berikut: Full navigation! 3 jenis Navigasi menu khas editblog sekaligus dengan kustom warna hijau dan putih. Tetap dapat diedit melalui desain tema blogger. Related posts simple Breadcrumbs versi ke-3 Tema blogger versi ke -3 (generasi ke-3)* *Generasi pertama template blogger adalah template klasik yang hanya cocok pada display desktop pada awal awal blogger diperkenalkan ke dunia. Lalu seiring dengan kebutuhan Google merilis template versi generasi kedua seperti: Simple, Perjalanan, PT. Keren sekali, Jendela dst. Dan tema versi generasi ketiga adalah empat varian yang

Akhirnya update saya lakukan setelah seminggu "EditblogTema Klasik" ini saya buat. Template ini adalah bagian dari projek non-AMP dan sekarang saya pergunakan untuk percobaan menulis Novel, cerbung, dan cerita pendek. Tidak didaftarkan ke Google webmaster, tapi ajaibnya sebagian konten kontennya malahan telah terindex otomatis, saya rasa memang mesin pencari Google memang tidak pernah pilih kasih he he he... Lihat  DEMO Template ini pada awalnya saya buat, boleh percaya boleh tidak, dibuat hanya dengan hape OPPO A3 dan Tablet Samsung Galaxy S2. Karuan saja template ini lebih ke "mobile oriented" dasarnya adalah template default simple classic blogspot, tapi jangan salah penambahan elemennya membuat dia ini jadi berubah ganteng, cakep, cantik dan ayu. He he he...Tapi dia adalah template HTML Classic. Speks: FITUR MOBILE DESKTOP Klasik/modern Ya, sekarang support versi 2 dan versi 3 Ya, sekarang support versi 2 dan versi 3 Valid HTML

Saya ingin berbagi tema baru contempo yang telah saya modifikasi. Template ini Responsive dan mobile friendly. Header telah saya pangkas nilainya dari default 480px menjadi 100px untuk menghasilkan tampilan nan klasik. Selain itu saya menambahkan menu navigasi dalam bentuk tombol "fixed" untuk memudahkan navigasi kehalaman yang sobat inginkan. Jangan kuatir, selain menu navigasi tersebut semua hal yang sobat butuhkan untuk memodifikasi template ini dapat dengan mudah dilakukan melalui dasbor/pengaturan blogger, yakni pada opsi "Desainer Blogger" Perubahannya adalah: Tombol menu navigasi pure HTML CSS (no JavaScript) Menyembunyikan sidebar contempo untuk semua ukuran layar (soba bisa mengembalikannya kapan saja) Flatten Header - Menghilangkan tampilan snippet-thumbnail yang terlalu menjulur tinggi pada homepage. Mengganti Latar Blog dengan animasi Matrix. Modifikasi X-Frame untuk keamanan. Dan beberapa modifikasi CSS ringan lainnya Template ini cocok u

Updated: Apa yang baru? FITUR FITUR BARU: Template disederhanakan Tentu saja lebih SEO friendly UI dan UX baru: Responsive dan Mobile banget Lebih gesit, bersih dan lebih ringan dan menjadi supercepat Menu Navigasi lebih responsive   dan stylish dengan warna gradasi. Dibuat dan dikembangkan berdasarkan tutorial W3school  Tombol pencarian di perbaharui, lebih responisve, lebih alami dengan "search input" warna biru akan muncul dibawah (sebelumnya diatas, banyak yang komplin) 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 Perbaikan pada tampilan Tablet khusus navigasi pada menu dropdown yang terlalu rapat ke kanan sehingga menyulitkan tindakan penampil. Memperbaiki posisi snippet dan thumbn