Kompi Banget - Template Blogger Valid Html5 Dan Css3

Setelah kurang lebih dua tahun saya berguru di dunia blogging, jadinya saya mencoba menciptakan template blog sesuai dengan pengetahuan yang saya dapatkan.

Karena saya cukup usang mempelajari dan memakai template dari Maskolis, tentunya kerangkan templatenya juga banyak mengadopsi dari template-template Maskolis. Begitu pun dengan tampilan dan lainnya banyak terilhami dari kang Ismet alasannya yaitu saya juga banyak berguru dari Beliau.

Pada template Kompi Banget ini saya memakai struktur HTML5 dan juga schema.org. Mungkin template ini sangat sederhana namun saya cukup puas bisa menyusunnya sesuai kemampuan saya, oleh alasannya yaitu itu saya namai template ini dengan nama Kompi Banget. Dan mungkin struktur template inilah yang akan saya gunakan pada template-template selanjutnya (Jika ada waktu dan kesempatan...hehehehe).

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.

DOWNLOAD

Kustomisasi:

1. Untuk mengganti logo blog silhkan temukan instruksi 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/AVvXsEhupJ8ci1o5d4oWkH-Pqyc_e6suVAVvBaensg1GTRv5lb5bMSIxAefI47MJVJsM27oB795c8y7KwXN_S-KiSYQ9SfldiobHNTuTCyVve9eCxf4GJ4HDVuw94e8AK-DTTPZkSSiWC9qIr12S/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/AVvXsEhupJ8ci1o5d4oWkH-Pqyc_e6suVAVvBaensg1GTRv5lb5bMSIxAefI47MJVJsM27oB795c8y7KwXN_S-KiSYQ9SfldiobHNTuTCyVve9eCxf4GJ4HDVuw94e8AK-DTTPZkSSiWC9qIr12S/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 (+) yaitu widget recent post per label, silahkan temukan instruksi 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 instruksi 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, lalu cari instruksi 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 instruksi 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 instruksi 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 instruksi 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 lalu block semua instruksi di edit HTML dan paste instruksi yang tadi dicopy dari notepad.

Sumber https://www.kompiajaib.com/

Share this post