Cocoknya Buat Apa Ya Template Kayak Gini?

Sebetulnya template ini terinspirasi dari pertanyaan mas +Candra Rudi  tentang template apa yang cocok buat blog review. Lantas beliau menunjukan sebuah blog wordpress dengan tampilan ramping 1 kolom yang membuat beliau tertarik, namun sayang template wordpress premium.

Dari situ saya berpikiran untuk mencoba membuat template Blogger seperti blog wordpress yang beliau tunjukan. Kemudian saya kutak-katik template Kompi Saja yang kemarin saya bagikan, akhirnya jadilah sebuat template lain dengan 1 kolom. Karena ini dasarnya sama dengan template Kompi Saja, maka template ini saya sebut saja Kompi Doang hehehehe.

Template Kompi Doang


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

Sama dengan Kompi Saja, untuk search box saya sarankan gunakan Google Custom Search yang pernah saya bahas di sini, tinggal cari kode di bawah ini


<div class='searchform'>
<form action='#'>
<input name='cx' type='hidden' value='partner-pub-006106396690849xxxxx:zxyadxxxxxx'/>
........
........

Ganti tanda # dengan url halaman statis tempat menampilkan hasil pencarian dan ganti value partner-pub-006106396690849xxxxx:zxyadxxxxxx dengan kode site Anda sendiri.


Untuk iklan di bawah header 728x90 silahkan cari kode di bawah ini


<div class='content-wrapper'>
<div class='outer-wrapper'>
<div class='belowmenu'>
  <div class='contoh-iklan'/>
  </div>

Silahkan ganti kode <div class='contoh-iklan'/> dengan script iklan Anda. Coba gunakan iklan yang responsive untuk Google Adsense.

Untuk iklan di postingan 300x250 silahkan cari kode di bawah ini. Gunakan juga unik iklan yang responsive.


<div class='post-ontop'>
  <div class='ad-title'>Advertisement</div>
SKRIPT IKLAN DI SINI
      </div>

Untuk widget subscribe di footer, silahkan masukan kode di bawah ini di gadget HTML/JavaScript di Tata Letak.


<div id='subscribe-box'>
                 <p>Sign up here with your email address to receive updates from this blog in your inbox.</p>
             <div class='emailfield'>
              <form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=KompiAjaib&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
               <input name='name' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Your Name&quot;;}' onfocus='if (this.value == &quot;Your Name&quot;) {this.value = &quot;&quot;;}' type='text' value='Your Name'/>
               <input name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Your Email&quot;;}' onfocus='if (this.value == &quot;Your Email&quot;) {this.value = &quot;&quot;;}' type='text' value='Your Email'/>
<input name='uri' type='hidden' value='KompiAjaib'/>
<input name='loc' type='hidden' value='en_US'/>
                <input class='submitbutton' type='submit' value='Subscribe Now!'/>
              </form>
             </div></div>

Silahkan ganti KompiAjaib (ada 2 buah) dengan id FeedBurner blog Anda.

Untuk widget recent posts silahkan masukan kode di bawah ini di gadget HTML/JavaScript di tata letak.


<ul id='recent-posts'></ul>
<script>
//<![CDATA[
var homePage = "http://kompidoang.blogspot.com/",
numPosts = 5;
function recentPosts(a){if(document.getElementById("recent-posts")){var e=a.feed.entry,title,link,content="",ct=document.getElementById("recent-posts");for(var i=0;i<numPosts;i++){for(var j=0;j<numPosts;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t;content+='<li class="recent-posts"><a href="'+link+'" title="'+title+'" target="_blank">'+title+'</a></li>'}ct.innerHTML=content}}var you_script=document.createElement('script');you_script.src=homePage+'/feeds/posts/summary?alt=json-in-script&orderby=published&max-results='+numPosts+'&callback=recentPosts';document.getElementsByTagName('head')[0].appendChild(you_script);
//]]>
</script></ul>

Silahkan homepage-nya ganti dengan url blog Anda.

Dan ketika membuat postingan disarankan untuk menggunakan hanya satu buat gambar di awal postingan, karena gambar di postingan tidak akan terlihat karena saya pindahkan di atas judul postingan.

Untuk photo author akan otomatis menggunakan photo author penulis (photo profil Google Plus), jadi jika ada beberapa penulis di dalam blog, maka otomatis akan sesuai dengan penulisnya.

Untuk validasi HTML5 dan CSS3 silahkan Anda cek sendiri hehehehe...

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments