Kompi Simple, Template Blogger Yang Sederhana Untuk Yang Mau Saja

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

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

Kini aku bagikan template Kompi Simple ini bagi sahabat Kompi yang mau saja, alasannya ialah template ini sangat sederhana.

DEMO

Kustomisasi:

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

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

2. Sosial Media
Silahkan isikan url profil sosial media Anda menyerupai Facebook, Twitter, Google+, Linkedin, atau Youtube pada arahan 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 arahan <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 arahan <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 arahan <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 memakai widget feature post blogger, jikalau ingin mengganti dengan lainnya silahkan ganti arahan 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.

DOWNLOAD

UPDATE: Karena banyak yang kesulitan dikala widget Featured Post tidak diaktifkan maka Sticky Header juga tidak aktif. Untuk itu lalu aku perbaiki letak javascriptnya semoga jikalau widget Featured Post tidak diaktifkan, Sticky Header akan tetap sanggup berjalan.

Namun jikalau ingin memakai widget sticky widget di sidebar, pengguna masih sanggup memakai Sticky Widget dengan mengaktifkan widget Featured Post dan meletakannya di bab paling bawah sidebar atau sanggup memakai widget lain dengan mengganti arahan FeaturedPost1 dengan ID Widget yang akan dijadikan Sticky Widget.

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


Sumber https://www.kompiajaib.com/

Share this post