Download Template Valid HTML5 dan CSS3 - Kompi Banget

Setelah beberapa hari tidak share template kali ini saya akan share template keren, responsive, valid html5 buatan mas adhy kompiajaib.com . Template ini seperti yang di kutip dari blognya mas adhy, dikatakan bahwa template ini menggunakan struktur HTML 5 dan juga schema.org, dan kata mas adhy juga template ini memang sangat sederhana namun, mas adhynya sendiri cukup puas bisa menyusun sesuai kemampuan yang dia punya.

Fitur-fitur template Kompi Banget:

1. Sudah valid HTML5 dan CSS3 baik di homepage maupun di postpage (Silahkan Anda cek sendiri).
2. Responsive, bisa dicek DI SINI.
3. Design template flat ui.
4. Full title pada semua link dan gambar (100%).
5. Postmeta di homepage, postingan, dan halaman statis.
6. HCard Author dan Update di homepage, postingan, dan halaman statis.
7. Markup Authorship terverifikasi.
8. Back to Top
9. Spammer detected pada komentar.
10. Breadcrumb 
11. 1 kolom pada halaman statis.
12. Dan lain-lain yang bisa Anda coba sendiri pada demonya.

DEMO | DOWNLOAD

Perhatian! Untuk mendownload di DataFileHost silahkan hilangkan tanda centang pada tulisan "Use our download manager and get recommended downloads" di bawah tombol download.

Kustomisasi:

1. Untuk mengganti logo blog silhkan temukan kode berikut:

<b:includable id='title'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
   <img alt='title-blog' height='60' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcfqx6WbrxyxTh1uyklWS2_2Mm_Y7UY0E8fkVUF4BbMpIb1nu9iqsQ80zEZyQ0w-5ec3dfHV9WgUgjLiD0AjHCzmV9rC_Q9Q7JOjqy2lxKJ15QTA5DQ9KJ25ZTWjtykmuiy5b-c0uQHxhU/s1600/titlekompibanget.png' title='Kompi Banget' width='260'/>
  <b:else/>
    <a expr:href='data:blog.homepageUrl' itemprop='url' title='Kompi Banget'><span itemprop='name'><img alt='title-blog' height='60' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcfqx6WbrxyxTh1uyklWS2_2Mm_Y7UY0E8fkVUF4BbMpIb1nu9iqsQ80zEZyQ0w-5ec3dfHV9WgUgjLiD0AjHCzmV9rC_Q9Q7JOjqy2lxKJ15QTA5DQ9KJ25ZTWjtykmuiy5b-c0uQHxhU/s1600/titlekompibanget.png' title='Kompi Banget' width='260'/></span></a>
  </b:if>
</b:includable>

Silahkan ganti URL logonya / gambarnya dengan logo blog / gambar Anda sendiri, untuk titlenya sesuaikan dengan nama blog Anda.

2. Untuk widget yang disembunyikan pada tanda plus (+) adalah widget recent post per label, silahkan temukan kode berikut untuk mengganti labelnya.

<div id='box2'>
<div class='box-plusmenu'>
    <div class='content-wrapper'>
<div class='content-box2'>
<div class='recent-label'>
  <span class='title-label'>Jelajah</span>
<script type='text/javascript'>var numposts = 1;var showpostthumbnails = true;var displayseparator = false;var showpostdate = false;var showpostsummary = true;var numchars = 160;</script>
<script src='/feeds/posts/default/-/Jelajah?orderby=updated&amp;amp;alt=json-in-script&amp;amp;callback=labelthumbs' type='text/javascript'/>
<a href='http://kompibanget.blogspot.com/search/label/Jelajah?max-results=6' style='float:right;font:normal 11px Arial;padding:5px 0;' title='More on this category'>More on this category &#187;</a>
</div>
<div class='recent-label'>
  <span class='title-label'>Wisata</span>
<script type='text/javascript'>var numposts = 1;var showpostthumbnails = true;var displayseparator = false;var showpostdate = false;var showpostsummary = true;var numchars = 160;</script>
<script src='/feeds/posts/default/-/Wisata?orderby=updated&amp;amp;alt=json-in-script&amp;amp;callback=labelthumbs' type='text/javascript'/>
<a href='http://kompibanget.blogspot.com/search/label/Wisata?max-results=6' style='float:right;font:normal 11px Arial;padding:5px 0;' title='More on this category'>More on this category &#187;</a>
</div>
<div class='recent-label'>
  <span class='title-label'>Liburan</span>
<script type='text/javascript'>var numposts = 1;var showpostthumbnails = true;var displayseparator = false;var showpostdate = false;var showpostsummary = true;var numchars = 160;</script>
<script src='/feeds/posts/default/-/Liburan?orderby=updated&amp;amp;alt=json-in-script&amp;amp;callback=labelthumbs' type='text/javascript'/>
<a href='http://kompibanget.blogspot.com/search/label/Liburan?max-results=6' style='float:right;font:normal 11px Arial;padding:5px 0;' title='More on this category'>More on this category &#187;</a>
</div>
<div class='close2'>&#10006;</div>
      </div>
</div>
      </div>
    </div>

Silahkan ganti semua nama labelnya dengan label blog Anda yang ingin ditampilkan pada kode-kode berikut, begitu pula dengan title widget-nya.

<script src='/feeds/posts/default/-/Liburan?orderby=updated&amp;amp;alt=json-in-script&amp;amp;callback=labelthumbs' type='text/javascript'/>

Dan

<a href='http://kompibanget.blogspot.com/search/label/Liburan?max-results=6' style='float:right;font:normal 11px Arial;padding:5px 0;' title='More on this category'>More on this category &#187;</a>

3. Untuk widget Subscribe di Sidebar, silhakan copy kode HTML-nya dari postingan berikut:

• Membuat Email Subscribe Widget Flat UI

Kemudian paste-kan di gadgetnya. Jangan lupa untuk mengganti akun FeedBurner-nya.

4. Untuk Widget Popular Post silahkan atuh dengan thumbnail dan snippet, kemudian cari kode berikut:

<!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>

Kemudian ganti dengan kode di bawah ini:

<!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' expr:title='data:post.title' target='_blank'>
                    <img alt='thumbnail' expr:src='data:post.thumbnail' expr:title='data:post.title' height='90' width='70'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>

5. Untuk Facebook gunakan kode di bawah ini dan simpan di gadget-nya.

<div class="fb-like-box" data-href="https://www.facebook.com/kompiajaib" data-width="285" data-height="300" data-colorscheme="dark" data-show-faces="true" data-header="false" data-stream="false" data-show-border="false"></div>

Silahkan ganti URL-nya dengan URL Facebook Anda.

6. Untuk Google Plus gunakan kode di bawah ini dan simpan di gadget-nya.

<div style='padding:8px 0 0 12px;'>
<div class='g-plus' data-action='followers' data-height='300' data-href='https://plus.google.com/117950600521728942551' data-source='blogger:blog:followers' data-theme='LIGHT' data-width='300'></div>
</div>

Silahkan ganti URL-nya dengan URL Profil Google Plus Anda.

Agar letak widgetnya sesuai demo, silahkan copy seluruh kodenya dari notepad kemudian block semua kode di edit HTML dan paste kode yang tadi dicopy dari notepad.

Sekian postingan saya tentang Download Template Valid HTML5 dan CSS3 - Kompi Banget semoga template ini bermanfaat dan membuat blog anda terlihat menarik.

Tweet