DOWNLOAD TEMPLATE CONTEMPO INDIGO 2

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?  Sejak saat itu saya jadi rajin mengunjungi stackflow, w3school, codepen. Dan belajar web desain dan koding tentu saja dengan waktu yang sangat terbatas di sela sela rutinitas belajar yang padat. 

Jerih payah mulai terlihat setelah lebih satu tahun belajar otodidak,  seseorang yang sudah ahli menyarankan, "jadilah dirimu sendiri". Karena sehebat apapun sebuah desain tidak akan bisa terlepas daripada subjektifitas. Saya merasa itu ada benarnya. Jadi saya akhirnya membuang semua template berbeli dan mulai menggunakan template template buatan sendiri. 

Modifikasi & Redesain

Disamping template yang saya buat sendiri dari NOL, saya mengedit templat template bawaan (default)  blogger dan sebisanya hanya memanfaatkan sumber kode yang sudah ada,  hanya merombak tampilan, merombak elemen dan memodifikasi material desain asli. Saya menyukai model template terakhir (yakni redesain dari tamplate blogger asli)  karena kode keamanannya memenuhi standard keamanan Google. 

Dan memang saya mulai kerasan menggunakan template redesain yang kami redesain sendiri. Terutama yang hasil kerja dari empat varian templat blogger terbaru: contempo, emporio, soho dan notable. Notable rockfol saya terapkan ke site editblogtema.net. Sedangkan contempo indie saya terapkan ke blog: https://www.editblogtemplate.editblogtema.net/

Demikianlah secuil pengalaman saya dari buta koding dan buta desain web, sampai memahami sedikit teknik mendesain template HTML. 

Kesimpulannya (saya tidak bilang ini cocok untuk semua orang) 

• Blogging itu bermanfaat untuk belajar (saya tidak memanfaatkan adsense) 
• Blogging menambah wawasan kita menjadi semakin luas. 
• Melalui blogging terbuka lebar kesempatan belajar khusus koding terutama bahasa pemrograman web seperti CSS, HTML,  Javascript dll. 

Dan masih banyak lagi manfaat manfaat lainnya.

Ada dua template contoh hasil redesain template contempo yang bahkan memiliki tampilan dan fitur premium.  Memanfaatkan sumber code bawaan sehingga menghasilkan sebuah template yang responsif, mobile dan tampil high profile di tangan blogger yang piawai menulis dan mengatur gambar pada halaman blognya.
Template yang headernya di dominasi warna indigo ini memang di desain untuk berbagai kebutuhan blogging, bergaya indie dan mampu tampil pada setiap ukuran layar dengan cara yang memukau.

Ok, sudah kayak promo saja ya, namun benar template ini telah di desain/redesain berbasis template contempo yang bagus, asal kalian tahu saja empat template bawaan blogger terbaru (rilis tahun 2017) mewakili empat aliran desain:

1. Indie (contempo)
2. Fancy (Soho)
3. Vegeclub (emporio)
4. Roockpool (notable)

Jadi sekarang kalian jadi jelas jika contempo adalah beraliran 'indie' bukan.

Tentu saja ini bukanlah template paling hebat di dunia, karena semua hasil karya desain itu pasti mengandung unsur subjektif. Adapun fitur kedua template ini adalah:

• Basis template ini adalah: Blogger theme 'Indie' CONTEMPO.
• Header dan Navbar di rombak menjadi sticky fixed responsif dan mobile friendly.
• Tombol menu pencarian di ganti: Full Screen
• Memiliki sidebar seperti template klasik-neo modern (Sedangkan yang non sidebar memiliki sidebar tersembunyi yang dapat di klik seperti contempo default.
• Tampilan High Profile. Secera keseluruhan tampil Sederhana, elegan, responsif dan mobile friendly
• Breadcrumbs: Yes (hidden)
• Related Posts: Yes
• Tombol berbagi: Bawaan
• Dapat di edit melalui dasbor editor desainer template blogger
• Dominasi warna: Indigo
• Untuk mempercepat loading tampilan thumbnail di tiadakan hanya tinggal snippet, namun thumbnail featured Post tetap tampil.
• Telah dikembangkan selama satu tahun. Dan selama itu terus di uji cobakan ke berbagai niche blogger.

Yang berminat silahkan request saja gratis.

SHARE YA:

APA SAJA KELEBIHAN 4 TEMPLATE TEMPLATE BAWAAN BLOGGER TERBARU?

Gambar tempilan 4 template terbaru blogger secara default

Pertanyaan 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 layout versi ke 3, jauh lebih responsive, lebih cepat dan lebih SEO, namun apa saja kelebihan mereka masing masing?

Silahkan anda menjatuhkan pilihan kepada salah satu dari 4 template terbaru setelah membaca kelebihan masing masing.

Baca juga:
BENARKAH TEMPLATE TERBARU BLOGGER LEBIH AMAN DAN LEBIH ADSENSE FRIENDLY?

Dan masih banyak orang berfikir template baru ini tampilannya sederhana. Mereka keliru, template template ini menyembunyikan banyak fitur tersembunyi; sidebar yang dapat dimanfaatkan menjadi menu, tampilan website global yang modern, sticky header yang dapat dimanfaatkan menjadi double navigasi jika ditambahkan dengan navigasi kustom, hal yang tidak akan anda dapatkan pada template template yang lebih tua.

Yang jelas template template ini adalah presentasi dari generasi baru halaman web, terutama blogger blogspot. Mari kita perhatikan.

1. Contempo (5 varian warna)

Saya tidak akan terkejut betapa banyaknya kelebihan template contempo dan kelima variannya, contempo dapat di modifikasi menjadi tampak berbeda tanpa membuang fitur fiturnya yang responsive, kelebihan di sisi SEO dan keamanannya.

Contempo memiliki struktur heading yang kuat dan unik: Dapat membuat halaman blog cepat terendus robot txt mesin telusur. Saya heran saat heading bawaan di modifikasi ulang oleh sebagian desainer tanpa memberikan efek perubahan apa apa selain memperbanyak elemen HTML di dalam template. Contempo  secara bawaan dapat membantu konten kita menjadi begitu atraktif dimata mesin pencari. Saya curiga susunan elemennya mengacu kepada sisi server Google itu sendiri tanpa kita sadari. Jadi secara kasarnya kita dapat melihat:

1. Header contempo dapat dimodifikasi menjadi memiliki menu navigasi plus kotak pencarian yang sangat responsive dan mobile friendly tanpa perlu mengutak atik edit HTML, cukup melalui pengaturan blogger dan blogger designer theme saja. Jelas material dan elemennya 100% asli.
2. Contempo berpenampilan sangat responsive, modern dan dinamis.
3. Memiliki sidebar yang dapat dijadikan sebagai navigasi menu atau menempatkan gagdet gadget lain. Sidebar juga dapat di tampilkan layaknya template klasik.
4. Bentuk konten jadi menonjol ke header (dalam beberapa kasus banyak pengguna merombaknya menjadi tampilan klasik).

Namun sampai saat ini saya masih menjadikannya sebagai template favorite.

2. Soho (5 varian warna)

gambar style komentar pada template SOHO

Soho memiliki header yang kuat, menonjol dengan gambar yang dapat dirobah robah melalui opsi penggantian latar atau background, memiliki form komentar yang cantik dan dapat diedit melalui opsi "blogger designer theme" dan cocok untuk blog traveling atau tutorial, secara default memiliki beberapa keunggulan:

1. Berpenampilan sangat responsive, modern dan dinamis.
2. Memiliki header dengan gambar latar yang dapat di gonta ganti melalui pengaturan blog sesuai dengan misi blog kita. Seperti halnya Contempo Soho memiliki Header yang dapat dimodifikasi menjadi memiliki menu navigasi plus kotak pencarian yang sangat responsive dan mobile friendly tanpa perlu mengutak atik edit HTML, cukup melalui pengaturan blogger dan blogger designer theme saja. Jelas material dan elemennya 100% asli.
3. Memiliki sidebar yang dapat dijadikan sebagai navigasi menu atau menempatkan gagdet gadget lain.
4. Tampilan homepage yang bisa diatur menjadi GRID (kotak kotak).
5. Kotak pencarian fleksibel: Pada tampilan mobil berbentuk ikon kaca pembesar, akan tetapi pada saat tampil di layar lebih besar seperti: tablet 10" dengan posisi landscape, laptop dan PC dekstop kotak pencarian berubah tampilan menjadi tulisan: "search".
6. Yang kelima ini adalah pavorite saya: Soho memiliki tampilan kolom komentar yang dapat di edit sesuka hati melalui opsi pengaturan :"Blogger theme designer".

Saat tulisan ini dibuat editblogtema menggunakan "editblogtema SOHO" re-desain dengan alasan diatas

3. Emporio (5 varian warna)

Bagi pencinta template dengan model grid modern pada homepagenya, emporio adalah pilihan yang paling tepat, anda dapat memodifikasinya melalui opsi pengaturan, yakni melalui "blogger theme design" namun untuk mendapatkan hasil yang optimal, tentu saja harus mengeditnya melalui editor HTML blogger.

Emporio juga sangat atraktif dalam artian menarik perhatian mesin pencari, sebagai keluarga template bawaan blogger terbaru emporio memiliki kelebihan kelebihan dalam keterhubunganya dengan server blogger dan mesin pencari jauh lebih baik dari segi performanya jika dibandingkan dengan template model lama blogger.

1. Memiliki header dengan gambar latar yang dapat di gonta ganti melalui pengaturan blog sesuai dengan misi blog kita. Seperti halnya Contempo dan Soho, Emporio juga memiliki Header yang dapat dimodifikasi menjadi memiliki menu navigasi plus kotak pencarian yang sangat responsive dan mobile friendly tanpa perlu mengutak atik edit HTML, cukup melalui pengaturan blogger dan blogger designer theme saja. Jelas sekali baik material mapun elemennya 100% original.
2. Berpenampilan sangat responsive, modern dan dinamis.
3. Memiliki sidebar yang dapat dijadikan sebagai navigasi menu atau menempatkan gagdet gadget lain.
4. Tampilan grid pada homepage pada layar besar dengan sidebar. Saya cukup memfavoritkan templat ini karena melalui pengaturan blogger theme design yakni pada bagian "width" atau lebar bisa menjadikannya memiliki sidebar pada ukuran layar tertentu. 
5. Support full video display (youtube, dan video unggahan).

4. Notable (5 varian warna)

Tampilan profile pengarang atau penulis pada template editblogtema-Notable

Notable memiliki header yang menonjol, kuat dan atraktif! Apalagi jika di beri warna yang tepat, secara default memiliki keunggulan:

1. Memiliki header dengan gambar latar yang dapat di gonta ganti melalui pengaturan blog sesuai dengan misi blog kita. Seperti halnya Contempo dan Soho dan Emporio, Notable juga memiliki Header yang dapat dimodifikasi menjadi memiliki menu navigasi plus kotak pencarian yang sangat responsive dan mobile friendly tanpa perlu mengutak atik edit HTML, cukup melalui pengaturan blogger dan blogger designer theme saja. Jelas baik material maupun elemennya 100% asli dan aman.
2. Berpenampilan sangat responsive, modern dan dinamis
3. Memiliki sidebar yang dapat dijadikan sebagai navigasi menu atau menempatkan gagdet gadget lain
4. Kotak pencarian ikon kaca pembesar.
5. Yang keempat ini saya paling suka: Pada template notable penulis bisa menempatkan gambar penulis (author) diatas postingan, bahkan sekalipun jika blog sobat memiliki  banyak penulis, semua penulis akan ditampilkan photo profilenya diatas postingan yang mereka tulis jika anda menggunakan template Notable beserta 5 variannya.
Untuk membentuknya anda cukup mencari kode berikut didalam opsi pengaturan>tema>edit HTML:

body.item-view .Blog .post-author-profile-pic{max-height:100% }

Lalu tambahkan kode berikut  border: solid;
border-radius: 50px; setelah 100% bentuknya akan menjadi seperti berikut:

body.item-view .Blog .post-author-profile-pic{max-height:100%border: solid;border-radius: 50px;}

Save templat.
Template terakhir ini sangat pas buat blog personal, bisnis rumahan, hingga artikel artikel berat

Tidak percaya betapa kerennya konten tulisan dengan profil penulis? Lihat Demonya di: SBBS (semua baik baik saja)
Demikianlah empat template terbaru yang pasti tidak asing lagi bagi para blogger, soalnya usia rilisnya oleh blogger sudah lebih 2 tahun yang lalu. Kita berharap blogger akan menyediakan template template baru lagi dalam waktu dekat dengan kelebihan kelebihannya...

Jika ingin tahu bagaimana merobah tampilan ke empat template ini sampai tidak terlihat seperti template default lagi. Silahkan ikuti tutorial pada blog ini

SHARE YA:

Trik membuat tombol DEMO dan DOWNLOAD sederhana dan ringan hanya dengan CSS

• DEMO
• DOWNLOAD

Sederhana yang saya maksud adalah tidak menggunakan font awsome atau link gambar dengan deklarasi URL seperti contoh: https://1.bp.blogspot.com/-...jpg. Keunggulannya adalah:

1. Sederhana
2. Cepat loading atau tidak membebani loading
3. Hanya HTML CSS

Langkah pertama Caranya adalah:

LETAKAN CSS

1. Masuk kepengaturan blogger
2. Pilih tema (atau theme kalau bahasa Inggris)
3. Pilih sesuaikan (atau Customize kalau bahasa Inggris)
4. Dari sini kita telah masuk ke opsi "Blogger theme designer" Pilih lanjutan (Advance kalau bahasa Inggris)
5. Pada sebelah kanan muncul menu dropdown scroll menu keatas hingga ketemu tambahkan CSS (ADD CSS) yang letaknya paling bawah.
6. Klik menu tersebut akan muncul kotak blanko CSS kosong.
7. 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!important;color:#FFF!important} .btn ul {margin:0;padding:0} .btn li{display:inline;margin:5px;padding:0;list-style:none;} .demo,.download{padding:12px 15px!important;color:#fff!important;font-weight:700;font-size:14px;font-family:Open Sans,sans-serif;text-align:center;text-transform:uppercase;border-radius:3px;opacity:.95;border:0;letter-spacing:2px;transition:all .2s ease-out} .demo {background-color:#3498DB;} .download {background-color:#1ABC84;} .demo:hover {background-color:#60B8F4;color:#fff;border-bottom:2px solid #3498DB; opacity:1;} .download:hover {background-color:#49DDAA;color:#fff;border-bottom:2px solid #1ABC84;opacity:1;} .demo:before {content:'\f135';display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;} .download:before {content:'\f019';display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}

Save template.
Langkah kedua:
Buat tombol download.
Pada saat membuat konten tutorial atau link demo dan download, Masuk ke opsi HTML bukan Compose ya..Letakan kode berikut diposisi manapun sobat suka di dalam konten yang sobat buat:

<div style="text-align: center;"> <ul class="btn"> <li><a class="demo" href="taroh link demo disini" target="_blank">DEMO</a></li> <li><a class="download" href="taroh link konten download disini" target="_blank">DOWNLOAD</a></li> </ul> </div>

url merah adalah link halaman demo contoh dari editblogtema, sedangkan url warna pink adalah link konten yang di download. Kuning adalah deklarasi tombol.

Save template.

Silahkan download template ini. Karena menggunakan template ini blog sobat akan memiliki keunggulan:

1. Template ori dengan sentuhan premium
2. Memiliki semua opsi sebuah template premium
3. Gratis tidak murahan
4. Mudah di edit
5. Sokongan abadi melalui halaman blog tutorial ini
6. Keamanan Google yang tidak perlu diragukan
7. dll

Selamat ngeblog!

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:

GALLERY TEMPLATE EDITBLOGTEMA: LAYOUT VERSI 3

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 terbaru template blogger memiliki layout versi ke-3. Yang ditujukan untuk memperbaiki celah celah desain dan keamanan dan menambahkan fitur fitur baru.

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. Namun karena telah di custom oleh mas Sugeng template menjadi tampak dinamis, mobile dan bagus.

Walaupun 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
----------------------------------------------- */

Kelebihan template re-desain saya:

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. 
3. Memiliki Related posts
4. Tombol berbagi lengkap
5. Tombol Back to top CSS.
6. Selebihnya bisa di edit melalui blogger theme design.
7. DE EL EL..

Declaimer: Jika menemukan beberapa template tidak sesuai dengan DEMO, itu semata semata alasan teknis karena halaman DEMO sedang dipergunakan untuk hal lain.
Request jika sobat berminat. Free.

SHARE YA:

Template blog: Green Notable re-design

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:

1. Full navigation! 3 jenis Navigasi menu khas editblog sekaligus dengan kustom warna hijau dan putih.
2. Tetap dapat diedit melalui desain tema blogger.
3. Related posts simple
4. Breadcrumbs versi ke-3
5. 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 dinamai: Soho, contempo, emporio dan terkemuka yang tetap masih terbilang baru hingga tahun 2019 ini.

Coba Demo

Template ini dibuat untuk memenuhi kebutuhan blogging hobi selingan waktu,  review buku, perjalanan, novel, cerpen dan review produk. Tentu saja cocok untuk blog gado gado. Tampilannya dinamis, modern dan kece. Pokoknya tidak mengecewakan. Proses pembuatannya diuji pada setiap ukuran layar, bahkan template ini sangat cocok buat blogging ponsel atau hape atau smartphone! Perhatikan demo pada video dibawah ini:

Fitur bawaan blogger tidak dihilangkan karena itu adalah standar yang baik untuk ngeblog yang membuat template ini bagus adalah fitur fitur support dan tambahan sesuai dengan kebutuhan blogging up to date.

Ingat saya akan membuat template baru setiap 6 bulan untuk dibagikan secara gratis. Jika belum ada linknya silahkan request untuk mendownloadnya.

Tersedia juga:

1. Contempo-redesign
2. Emporio-redesign
3. Terakhir Notable-redesign
4. Menyusul: Soho-redesign
5. Klasik-modern combine

Salam blogging!

www.editblogtema.net

SHARE YA:

SIMPLE FASCINATE TEMPLATE: A CLASSIC BLOGGER MOBILE THEME UPDATED!

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	Ya	Ya
Dapat di edit via blogger designer	Ya	Ya
Menu Navigasi	full responsive	full responsive
Menu Pencarian	tadinya full responsive Kini : opentab responsive	tadinya full responsive Kini : opentab responsive
Ads ready	Ya	Ya
Back to top	Ya	Ya
BreadCrumb	Ya	tadinya: disable Kini: enabled
Related posts	Ya	tadinya: disabled Kini:enabled
Auto read more	Ya	Ya
Mobile friendly	Ya	-
Responsive	Ya	Ya
Sistem Komentar	Default	Default
Tombol berbagi	AddtoAny	default saja
Font-size	Kustom default	default

MENU NAVIGASI DAN TOMBOL PENCARIAN (Menambahkan menu dropdown)

Menu Navigasi dibuat full responsive untuk semua ukuran layar dan memiliki fitur "fixed" yakni tetap berada diatas dan siap selalu membantu navigasi, sedangkan menu atau tombol pencariannya saya gunakan menu pencarian full screen.

Awalnya Breadcrumb dan related post saya "disable" dari tampilan desktop. Ini kebalikan dari kebiasaan yang men-disable tampilan tersebut untuk versi mobile. Saya faham..saya faham. Tapi jangan kuatir Sekarang semua fitur telah saya "enabled" kecuali popular posts untuk tampilan mobile saya rasa kurang begitu penting karena posisinya dibawah.

Pun, kalau sobat mau utak utik sendiri halaman editor HTML blogger (hitung hitung sambil belajar) sobat akan dapat dengan mudah meng"enable" semua fitur yang sengaja saya kunci. Lagipula saya pasti akan membuat tutorial cara mengedit tema tema ini agar menjadi seperti buatan sobat sendiri.

Dan yang paling penting kecuali menu navigasinya, Template ini juga mudah di edit melalui opsi blogger designer.

CARA MENGEDIT MENU DAN MERUBAH NAMA BLOG:

Masuk kepengaturan blogspot:

• Pada dasbor pilih tema atau theme
• Lalu pilih Edit HTML, dan akan terbuka halaman editorial HTML blogspot.
• Pada halaman editorial HTML cari kode </head> karena dibawahnya terdapat untuaian kode sebagai berikut:

<div class='topnav' id='myTopnav'>

  <a class='active' href='/'><small><h1>NAMA BLOG SOBAT</h1></small></a>

  <a href='LINK SOBAT'>NAMA MENU</a>

<a href='LINK SOBAT'>NAMA MENU</a>

<div class='dropdown'>

    <button class='dropbtn'>More 

      <i class='fa fa-caret-down'/>

    </button>

    <div class='dropdown-content'>

<a href='LINK KOTAK SOBAT'>Formulir Kontak</a>

      <a href='#'>Link 1</a>

      <a href='#'>Link 2</a>

      <a href='#'>Link 3</a>

    </div>

  </div> 

<a href='LINK SOBAT'>Perihal</a>

Ganti tulisan yang saya sorot warna kuning dengan link konten blog sobat sendiri sesuai label yang ingin ditampilkan

Ganti tulisan yang saya sorot merah dengan nama Menu yang sesuai seperti keinginan sobat sendiri.

CARA MENGHILANGKAN OPSI FIXED PADA SIDEBAR:

Untuk sementara saya sedang bereksprimen membuat "sidebar sticky" tanpa JavaScript hasilnya malah jadi "fixed" bagi yang tidak menyukainya silahkan masuk ke pengaturan blogger:

• Pada dasbor pilih tema atau theme
• Lalu pilih Edit HTML, dan akan terbuka halaman editorial HTML blogspot.
• Pada halaman editorial HTML cari kode </head> karena dibawahnya terdapat untuaian kode sebagai berikut:

#PopularPosts1{

  position: fixed;

  top: 10;

margin: 20px;

max-width:320px;

padding-top: 10px;

z-index:60;

 @media screen and (max-width: 800px) 

@media screen and (max-width: 600px)

@media screen and (max-width: 400px) {

  @media screen and (max-width: 320px) {

Hapus saja seluruh kode tersebut dan SAVE tema.

Tampilan image DEMO

Berminat silahkan request.  Tema ini juga telah diminati oleh teman teman dari Rusia dan Amerika. Tidak ada kredit!

Lebih banyak Kunjungi Project template kami DEMO PAGE

www.editblogtema.net

SHARE YA:

Template baru: ContempoHack

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:

1. Tombol menu navigasi pure HTML CSS (no JavaScript)
2. Menyembunyikan sidebar contempo untuk semua ukuran layar (soba bisa mengembalikannya kapan saja)
3. Flatten Header - Menghilangkan tampilan snippet-thumbnail yang terlalu menjulur tinggi pada homepage.
4. Mengganti Latar Blog dengan animasi Matrix.
5. Modifikasi X-Frame untuk keamanan.
6. Dan beberapa modifikasi CSS ringan lainnya

Template ini cocok untuk kegunaan banyak hal. 

1. CARA PEMASANGAN:

1. Buka link download pada menu navigasi diatas halaman editblogtema ini.
2. Klik "Download ContempoHack"
3. Akan keluar opsi: "select an account" sobat mestinya telah memiliki akun Google, jika ya klik salah satu akun google atau gmail sobat
4. Jika sudah akan muncul pilihan untuk melihat kode html contempo, pilih saja salah satu opsi yang sobat miliki dan sudah terpasang di perangkat, biasanya dalam bentu aplikasi office atau lainnya.
5. Klik saja opsi akun yang sudah sobat miliki, jika seluruh kode telah terbuka silahkan copy seluruh kode tersebut.
6. Langkah selanjutnya buka pengaturan blogspot sobat, pilih tema, Back Up terlebih dahulu template sobat. Lalu tiba masanya pilih editHTML.
7. Setelah halaman HTML terbuka hapus seluruh kode di dalam halaman HTML tersebut dan pastekan seluruh kode yang baru sobat copy atau download tadi.
8. Preview terlebih dahulu, jika tidak terjadi apa apa SAVE template.

2. CARA MENGEDIT  TOMBOL NAVIGASI:

Masuk ke pengaturan blogger

1. pilih tema
2. pilih edit HTML 
3. Setelah masuk silahkan cari kode: </head>. Mencarinya lebih mudah dengan cara menekan tombol CTRL+F pada papan ketik dan tuliskan atau copy dan paste kode diatas pada kotak pencarian yang muncul diatas halaman HTML.
4. Tepat dibawah kode </head> terdapat kode berikut:

<div class='dropdown'>

  <button class='dropbtn'>&#9660;</button>

  <div class='dropdown-content'>

    <a href='/'>Beranda</a>

    <a href='#'>Perihal</a>

    <a href='#'>Kontak</a>

 <a href='https://demoblogjuga.blogspot.com/p/daftar-isi.html'>daftar isi</a>

 <a href='https://demoblogjuga.blogspot.com/p/blog-page.html'>kebijakan privasi</a>

  </div>

</div>

Sobat tinggal mengganti  kode kode yang saya sorot warna kuning dengan Judul link yang sobat inginkan dan mengganti tanda pagar (#) atau setiap link yang saya sorot merah dengan link berdasarkan label blog sobat sendiri.

Jangan lupa SAVE template!

Apakah ini mobile (Ponsel/tablet)? Jangan kuatir saya selalu bekerja dengan CSS dan mengerti bagaimana mengatur @media Screen. Pembuatan templat selalu diuji langsung keperangkat perangkat mobile baik real maupun virtual.

Bagaimana dengan status 404? Ini penting untuk melihat prilaku dari respond server.

Saya telah mengatasinya dengan baik. Demikianlah contoh templat CintempoHack yang saya tawarkan dengan gratis.

Silahkan LIHAT DEMO

Untuk memeriksa responsive atau tidaknya pada setiap layar silahkan cek di:

Am I Responsive - ContempoHack

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:

OSIRIS TEMPLATE SEDERHANA UNTUK BLOGSPOT

Ini template ringan berbasis template sederhana bawaan blogger dengan perombakan:

Lihat DEMO

 Saya tidak akan membahas validitas sebuah tema yang pada prinsipnya dibuat berdasarkan tema bawaan blogspot itu sendiri (Tema sederhana). Saya hanya memodifikasinya agar menjadi:

1. Responsive dan mobile friendly
2. Agar memiliki menu navigasi yang keren
3. Agar memiliki tombol atau menu pencarian unik
4. Agar memiliki Read More dan Related post otomatis
5. Agar memiliki back to top unik
6. Mengganti tombol berbagi agar lebih lengkap dan stylish
7. DST

Editblogtema tentu saja akan bersedia membantu jika terjadi kesulitan dalam menginstal dan memakai tema ini.

Jika ingin mencoba silahkan download:

Download

www.editblogtema.net

SHARE YA:

KLASIK AWSOME THEME

Tema ini sangat cocok untuk para pemula bahkan bisa dipakai hingga selanjutnya sambil belajar mengeditnya, karena:

1. Tema ini dibuat berdasarkan template klasik awsome blogger
2. Dibuat stylish dengan menu navigasi, tombol pencarian kaca pembesar, header berwarna infinite.
3. Ads ready dibawah Judul blog, atau bisa pindah pindah kok.
4. Read more dan related post tersedia
5. Mudah di edit melalui opsi editor desain blogger di dasbor atau pengaturan blog.
6. Tentu saja responsive dan mobile friendly.
7. Tombol berbagi custom addthis.
8. Support tersedia anytime melalui komentar blog ini.

Tampilan homepagenya:

Pada gambar diatas tampilan homepagenya tampak simple dengan gambar thumbnail dan snippet yang minimalis sedangkan tampilan halaman kontennya cukup bagus baik dengan tampilan khas template default awsome yang bertambah cantik dan dinamis.

Tampilan halaman kontennya:

Sobat bisa mengunjungi demonya langsung mungkin demo ini akan memiliki waktu terbatas :

Lihat DEMO

Dan untuk mendownloadnya silahkan klik linknya:

Bagaimana dengan kecepatannya? Sobat jangan terlalu percaya dengan kecepatan pagespeed tapi cobalah ukur kecepatan blog sobat di:

TESTMYSITEWITHGOOGLE

Khusus untuk mobile, tema ini sungguh cepat:

Kecepatan itu 3x lipat dari blog editblogtema yang sedang saya pergunakan sekarang, ya wajar karena editblog memiliki konten konten berat, untuk blogger pemula tema diatas saya jamin sangat SEO friendly, kecepatannya akan membuat konten konten sobat cepat terindex oleh mesin telusur Google.

Sangat menunjang kegunaan seluler:

Support kami agar lebih kami dapat membuat lebih banyak tema tema gratis untuk para blogger pemula, semboyan kami adalah "help you by sincere" (membantu dengan tulus) tetap berlaku sampai saat ini.

www.editblogtema.net

SHARE YA: