Ditulis oleh: Ditulis pada: 3/10/2014
Satu lagi saya bagikan sebuah template gratis yang responsive dan valid HTML5 yang saya namai dengan Kompi Males. Berawal ketika penyakit males saya kambuh dan cari obat di apotek dan warung ternyata tidak ada obatnya heheheh...
Akhirnya saya coba obati dengan kutak-katik template Kompi Banget untuk membuat tampilan lainnya. Selain itu juga untuk memperbaiki beberapa kesalahan yang ada pada template sebelumnya.
Template Kompi Males ini saya buat dengan warna putih abu-abu biar kesannya lebih kalem. Beberapa kesalahan pada template sebelumnya saya perbaiki termasuk responsivenya. Dan penampakannya seperti pada gambar di bawah ini.
Fitur Template Kompi Banget:
- Responsive
- Valid HTML5 (homepage dan postpage)
- Valid CSS3
- Full title tag pada link blog.
- Title blog dan postingan yang dinamis.
- Breadcrumb
- Print this page
- Tombol Back To Top dan Go To Down
- Toggle Sidebar
- Custom Pager di postpage.
- Error Page 404
- Slot Iklan
- Dll.
Kustomisasi
Untuk mengganti logo blog silahkan ganti url gambarnya pada kode di bawah ini. Silahkan buat logo blog dengan tinggi dan lebar yang sama.
<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<img alt='logo blog' height='90' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivac0ECrqEfAR61gpqU1bgnVkqp0fvFYMQjJja9fujaTZbhi82BlIqHbS1xPnDfml128w4LG4gQyMdbpRatAT-MQAtTFnHmJ-CDGna1IEjb7dVhMAO-Wr68DHeIwJcHa_3Yrb-rup2BiQ/s1600/titlekompimales.png' title='Kompi Males' width='212'/>
<b:else/>
<a expr:href='data:blog.homepageUrl' expr:title='data:title' itemprop='url'><span itemprop='name'><img alt='logo blog' height='90' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivac0ECrqEfAR61gpqU1bgnVkqp0fvFYMQjJja9fujaTZbhi82BlIqHbS1xPnDfml128w4LG4gQyMdbpRatAT-MQAtTFnHmJ-CDGna1IEjb7dVhMAO-Wr68DHeIwJcHa_3Yrb-rup2BiQ/s1600/titlekompimales.png' title='Kompi Males' width='212'/></span></a>
</b:if>
</b:includable>
Untuk merubah feed blog pada kotak subscribe di bawah postingan silahkan simak pada postingannya di link di bawah ini.
Dan saya juga menambahkan slot ekstra dengan lebar 100% di bawah header menu dan di atas footer. Bisa Anda gunakan untuk slot iklan atau lainnya dengan menambahkan gadget HTML/JavaScript di tata letak.
UPDATE
Ma'af ada yang kelupaan hehehee... saya lupa menyimpan kode showDummy di templatenya. Bagi yang telah menggunakan template ini silahkan copy kode di bawah ini:
<b:if cond='data:top.showDummy'>
<data:top.dummyBootstrap/>
</b:if>
Dan simpan pada kode berikut tepat di atas penutup </b:includable> untuk kode <b:includable id='main' var='top'> sehingga menjadi seperti berikut ini:
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
<b:includable id='main' var='top'>
.......................
.......................
.......................
<b:if cond='data:top.showDummy'>
<data:top.dummyBootstrap/>
</b:if>
</b:includable>
Atau silahkan simak postingannya: http://www.kompiajaib.com/2014/02/solusi-error-validasi-html5-dari-kode.html atau silahkan download ulang (link downloadnya sudah saya perbaiki dengan file yang sudah diupdate/diperbaiki).
UPDATE Ke-2 (15 Maret 2014)
Ada perbaikan untuk responsive pada Firefox, untuk mengatasi sidebar yang tidak mau turun silahkan cari kode berikut:
@media screen and (max-width: 770px){
Kemudian geser ke bawah sedikit temukan kode di bawah ini:
#sidebar-wrapper{float:none;text-align:center;margin:0 auto}
Kemudian ganti dengan kode di bawah ini:
#sidebar-wrapper,.sidebar1-wrapper,.sidebar2-wrapper,.sidebar3-wrapper{width:100%;text-align:center;margin:0 auto}
Atau silahkan download ulang (link downloadnya sudah saya perbaiki dengan file yang sudah diupdate/diperbaiki).
UPDATE Ke-3 (16 Maret 2014)
Ada perbaikan untuk logo blog template Kompi Males, untuk mengatasi silahkan simak postingannya pada link di bawah ini
- Silahkan simak: Update Perbaikan Untuk Logo Blog Kompi Males
Atau silahkan download ulang templatenya pada link download di atas (link downloadnya sudah saya perbaiki dengan file yang sudah diupdate/diperbaiki).
UPDATE Ke-4 (01 Juli 2015)
Perbaikan di beberapa bagian untuk meningkatkan kecepatan loading blog diantaranya dengan menghilangkan Jquery Library untuk menghindari blocking render js di PageSpeed Insights.
Untuk beberapa bagian yang menggunakan show hide, mengganti jquery dengan pure javascript. Mengganti jenis Google Font dan menambahkan font Awesome, dan mengganti beberapa bagian lainnya yang bisa Anda lihat pada demonya.
Bagi yang ingin mencoba template Kompi Males dengan update terbaru kali ini, silahkan download pada tombol download di atas.
UPDATE Ke-5 (21 Februari 2016)
Silahkan simak postingan tentang update template Kompi Males v5.00 ini pada link postingan di bawah ini.