BAGAIMANA CARANYA MENAMBAHKAN WARNA DAN UKURAN THUMBNAIL PADA TEMA CONTEMPO?

Warna dan elemen CSS adalah sangat penting dalam sebuah desain web dan oleh karena sedang membahas Contempo saya juga menyinggung Tema bawaan Contempo yang memiliki 4 varian misalnya pertanyaan yang mendasar perihal perbedaannya apa? Hanya warna.

Sedangkan Contempo hybrid yang sedang saya kelola juga memiliki 4 varian namun perbedaan desainnya  jauh: Infinity dan gradient misalnya telah dibuat dengan cara yang berbeda. Apalagi jika dibanding dengan basic dan ultimate, namun yang menjadi pavorite saya sebagai pembuatnya adalah dua varian: Gradient dan Infinity. Cobalah sobat membuat desain Contempo sobat sendiri plus varian variannya.

Tampilan tema Contempo Hybrid varian gradient pada laptop

Namun kita tidak sedang bicara contempo hybrid, kita sedang membahas temaplate atau tema contempo asli, default yang memiliki peluang hampir tidak terbatas untuk di modifikasi

Saya menyukai contempo dan juga template terbaru lainnya karena:

1. Kodenya CSS 
2. Mudah di edit
3. Ringan dan tidak perlu penambahan kode lagi jika ingin merobah fungsi dan tampilannya
4. Hasil edit karena CSS tidak berpengaruh pada kecepatan blog.

1. MEMBUAT GAMBAR THUMBNAIL POPULAR POST MENJADI BULAT

Untuk memiliki sidebar popular dibagian kanan sidebar sobat hanya perlu mengedit CSS dengan "memperbolehkan" separator atau pembatas sidebar "terlihat" pada ukuran layar tertentu. Sobat bisa lihat contoh seperti apa bentuk desain editblogtema yang sedang saya pakai sekarang, murni hasil mengedit tema contempo bawaan blogger.

Langkah pertama mempercantik tampilan popular post yang sudah kita miliki adalah: masuk kepengaturan blogger>pilih TEMA> pilih opsi edit HTML, lalu cari kode dibawah ini melalui kotak pencarian di halaman HTML blogger:

.PopularPosts .item-thumbnail img {
  height: 88px;
  padding: 0;
  width: 88px;
 border-radius: 100px;
}

Hanya dengan kode ini sobat dapat merobah bentuk gambar atau image persegi menjadi bulat atau berbentuk lingkaran dan melalui kode css ini sobat dapat merobah ukuran thumbnail pada kode CSS ini saya menambahkan sebaris kalimat CSS lagi yakni: border-radius: 100px; dimana nilai 100px dapat dirobah sesuai dengan bentuk bingkai thumbnail yang sobat inginkan, bentuk bulat 180 derajat maka nila tersebut harus diganti menjadi 180px

Sedangkan untuk memperbesar gambar thumbnail anda hanya perlu merobah ukuran  height: 88px; dan  width: 88px; menjadi lebih besar atau lebih kecil angka dan nilanya.

Pada contempo asli bawaan yang belum di customisasi kode css ini ada namun sidebarnya tentu saja "hidden" karena sidebarnya belum diatur. Kode aslinya adalah sebagai berikut:

.PopularPosts .item-thumbnail img {

  height: 88px;

  padding: 0;

  width: 88px;

}

 Kalau sobat menambahkan widget popular posts melalui dasbor atau lay out blogger makan letak populer postnya tidak disamping kanan sidebar melainkan dibawah pada layar desktop dan laptop.

2. Mewarnai sidebar (termasuk popular post) dengan warna gradient (kombinasi dua warna halus):

Sekali lagi berterimakasihlah kepada Contempo dengan kode CSSnya dan lalu jika sobat telah memasang popular post pada blog contempo sobat maka sobat  cari kode css berikut:

.sidebar-container,
.sidebar-container .sidebar_bottom {
  background-color:

$(sidebar.backgroundColorBottom);
}
lalu sobat letakan kode CSS yang saya telah buat dan sangat sakti di bawah ini dan letakan atau pastekan di antara dua kode yang telah saya sorot merah:

background:;
background:-webkit-linear-gradient(right,#fff 0%,#FFEFD5 75%);

Jadinya seperti berikut:

.sidebar-container,
.sidebar-container .sidebar_bottom {
  background-color:
background:;
background:-webkit-linear-gradient(right,#fff 0%,#FFEFD5 75%);
$(sidebar.backgroundColorBottom);
}

Jangan lupa Save tema blogger contempo sobat.

Tanpa tambahan kode buatan saya: border-radius: 100px; tentu saja.

3. MENGATUR JARAK ATAU MARGIN KONTEN UTAMA DENGAN SIDEBAR

Ini adalah problem yang anehnya paling sering ditanyakan kepada saya di forum Google Help, yakni bagaimana caranya mengatur jarak margin antara postinganatau konten utama dengan sidebar yang terdiri dari popular post, profile, follower dsb.

Sebenarnya menurut saya fitur pengaturan tersedia di opsi "blogger theme designer" pada pengaturan template, akan tetapi entah mengapa sebagian template pemirsa kehilangan opsi tersebut setelah melakukan custom template, maka tidak ada cara lain selalin masuk kepengaturan edit HTML, dan cari kode dibawah ini:

@media screen and (max-width: 1200px){
.blog-name {
    margin-left: 0%;
}
.fghjs {
    margin-left: 0%;
}

Jika ingin merapatkan jarak antara konten utama dan sidebar silahkan ganti nilai prosentasi default 0% kedua margin left menjadi 1%

4. MENGATUR UKURAN DAN BENTUK THUMBNAIL HOMEPAGE UTAMA BLOGGER
Sobat cari kode dibawah ini pada halaman opsi edit HTML:

.post-body .snippet-thumbnail {
    margin: 0 3vw 3vw 0;
  }
  .post-body .snippet-thumbnail img {
    height: 28vw;
    width: 28vw;
    max-height: 85px;
    max-width: 85px;
border-radius: 100px;
  }
  div.widget.PopularPosts div.item-thumbnail {
    margin: 0 3vw 3vw 0;

penambahan kode border radius: 100px  (sorot merah) diatas adalah buatan saya sendiri untuk membentuk image bulat tampilan homepage mobile/hape sedangkan untuk thumbnail homepage desktop temukan kodenya sbb:

.post-body .snippet-thumbnail img {
  max-width: 200%;
border-radius: 100px;
}

Ubah nilai radius: 100px menjadi 180px untuk menghasilkan lingkaran bulat 180 derajat.

Cari saja kodenya di dalam halaman HTML blogger dengan cara masuk ke opsi edit HTML, kode kode CSS contempo telah di susun sedemikian rapi dan terorganisir sehingga mudah ditemukan sekaligus sederhana di edit.

5. INGIN MEROBAH BACKGROUND TEMPLATE CONTEMPO DENGAN MUDAH?

Begini caranya:
Pada pengaturan blogger pilih Tema>pilih edit HTML, cari kode berikut:

.Blog .blog-posts .post-outer-container, #page_body .FeaturedPost {
  background: $(posts.background.color);
  min-height: 40px;
  padding: 30px 40px;
  width: auto;
}

Perhatikan kode yang saya sorot warna merah, misalnya sobat pingin merobah warna background template contempo menjadi azzure maka letakan kode azzure begini:

  background: #F0FFFF $(posts.background.color);

kode warna HEX #F0FFFF adalah kode warna azzure sedangkan kalau sobat ingin back ground warna putih silahkan masukan kode HEX: #fff

Jika ingin background berwarna gradient paduan dua warna halus cukup masukan kode : background: background:;

background:-webkit-linear-gradient(right,#fff 0%,#FFEFD5 75%);$(posts.background.color);

Mudah sekali bukan?

Selamat mencoba...