Template keren Contempo re-desain

contempo custom
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


Comments

pilih pola label berikut:

Show more