Kompi Simple, Template Blogger Yang Sederhana Untuk Yang Mau Saja

Kompi Simple, Template Blogger Yang Sederhana Untuk Yang Mau Saja

Bola Hero Gawai

Kompi Simple, Template Blogger Yang Sederhana Untuk Yang Mau Saja

Kompi Simple, Template Blogger Yang Sederhana Untuk Yang Mau Saja
Template blogger kali ini merupakan kelanjutan dari template Kompi New yang sebelumnya saya bagikan. Dengan lebar 950px, template ini cocok untuk personal blog atau untu sharing blog. Seperti template sebelumnya, template ini juga saya beri warna putih dengan garis untuk membedakan tiap elemen.

Sedikit perbaikan dari struktur data, dilengkapi menu melayang dan widget sidebar melayang di tampilan desktop, mobile menu, serta menghilangkan sidebar dan footer di tampilan mobile untuk optimasi blog di perangkat mobile menjadi ciri khas lain dari template ini.

Kini saya bagikan template Kompi Simple ini bagi sahabat Kompi yang mau saja, karena template ini sangat sederhana.


Kustomisasi:

1. Menu
Pada tampilan desktop, template ini memiliki 2 buah menu yaitu page menu di samping header dan menu di bawah header. Namun untuk tampilan mobile, menu-nya saya buat menjadi 1 buah menu dengan show hide.

Untuk menu dengan class='mobile-menu' adalah dari menu di bawah header untuk tampilan mobile.

2. Sosial Media
Silahkan isikan url profil sosial media Anda seperti Facebook, Twitter, Google+, Linkedin, atau Youtube pada kode di bawah ini.


<ul>
  <li><a href='https://www.facebook.com/your-username' itemprop='sameAs' target='_blank' title='Facebook'><i class='fa fa-facebook fa-lg'/></a></li>
  <li><a href='https://twitter.com/your-username' itemprop='sameAs' target='_blank' title='Twitter'><i class='fa fa-twitter fa-lg'/></a></li>
  <li><a href='https://www.google.com/your-username' itemprop='sameAs' target='_blank' title='Google+'><i class='fa fa-google-plus fa-lg'/></a></li>
  <li><a href='id.linkedin.com/in/your-username' itemprop='sameAs' target='_blank' title='LinkedIn'><i class='fa fa-linkedin fa-lg'/></a></li>
  <li><a href='//www.youtube.com/c/your-username' itemprop='sameAs' target='_blank' title='Youtube'><i class='fa fa-youtube fa-lg'/></a></li>
  </ul>

3. Mengganti Kotak Iklan
Untuk mengganti kotak kuning dengan iklan adsense.

Ada 3 kotak iklan,

1. Header


<div class='content-wrapper'>
<div class='iklan-bawahheader'>
  <div style='width:100%;height:90px;background:#f1e791;margin:0 auto'/>
  </div>
  </div>

Ganti kode <div style='width:100%;height:90px;background:#f1e791;margin:0 auto'/> dengan script iklan.

2. Atas Postingan


<div class='iklan-ataspost'>
<div style='width:100%;height:60px;background:#f1e791;margin:0 auto'/>
    </div>

Ganti kode <div style='width:100%;height:60px;background:#f1e791;margin:0 auto'/> dengan script iklan.

3. Bawah Postingan


<div class='iklan-bawahpost'>
<div style='width:100%;height:250px;background:#f1e791;margin:0 auto'/>
    </div>

Ganti kode <div style='width:100%;height:250px;background:#f1e791;margin:0 auto'/> dengan script iklan.

4. Sticky Widget Sidebar
Ini untuk widget sidebar yang paling bawah. Di demo menggunakan widget feature post blogger, jika ingin mengganti dengan lainnya silahkan ganti kode FeaturedPost1 pada javascript di bawah ini dengan ID widget-nya.


function makemeSticky2(e){function t(){var e=s.getBoundingClientRect();e.top<0?(n.className=a+" makesticking2",n.style.width=i+"px"):n.className=a}var n=document.getElementById(e),s=document.createElement("div");n.parentNode.insertBefore(s,n);var i=n.offsetWidth,a=n.className+" makesticky";window.addEventListener("scroll",t,!1)}makemeSticky2("FeaturedPost1");

Test responsive: DI SINI
Test Pagespeed: DI SINI
Test Struktur Data: DI SINI
Test valid HTML5: DI SINI

Pada test validasi HTML5 terdapat 1 buah error, itu berasal dari widget featured post blogger, jadi untuk template-nya sudah valid HTML5.


UPDATE: Karena banyak yang kesulitan ketika widget Featured Post tidak diaktifkan maka Sticky Header juga tidak aktif. Untuk itu kemudian saya perbaiki letak javascriptnya agar jika widget Featured Post tidak diaktifkan, Sticky Header akan tetap bisa berjalan.

Namun jika ingin menggunakan widget sticky widget di sidebar, pengguna masih bisa menggunakan Sticky Widget dengan mengaktifkan widget Featured Post dan meletakannya di bagian paling bawah sidebar atau bisa menggunakan widget lain dengan mengganti kode FeaturedPost1 dengan ID Widget yang akan dijadikan Sticky Widget.

Untuk yang sebelumnya sudah menggunakan template ini dan kesulitan untuk mengaktifkan sticky header tanpa mengaktifkan widget Featured Post, silakan download ulang templatenya di link download di atas.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

10 Comments Add Comment

Bener-bener simple bang... Tertarik juga nich... Salam hormat...

Balas

ijin pakai templatenya mas...

Balas

gan, featured post itu untuk apa sih?

Balas

assalamu alaiku kang. sudah setahun sy pake kompi simple ini. terkendala menambahkan komentar fb dan blog yg show hide. selalu ga berhasil. nuwun kang, templatenya

Balas

Ini yang aku cari kang adhy simple pisan euy...nuhun

Balas

Maksih Master ! Keren

Balas

Mas mau nanya ! CSS Labelnya ditaruh dimana ? mau renov dikit.

Balas

Ijin pakai template nya om

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×