Ditulis oleh: Ditulis pada: 2/01/2016
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.