Cara penggunaan Template Kompi Males V.3

Banyak yang bilang kalau jasa redesign template itu nggak pake buku panduan ataupun panduan secara online, lah sekarang ini panduan kompi males blogger template V.3 [Redesign by Firman], bisa anda dapatkan di Firman Blog, silakan cermati dengan baik yah.

Setting Navigasi Template

Silakan anda cari kode di bawah ini dan ganti "#" dengan url blog anda,

<div id='menu-wrapper'>
            <nav id='menu'>
<input type='checkbox'/>
<label>&#8801;<span>Navigation</span></label>
<ul>
<li><a href='/' title='Home'>Home</a></li>
<li><a href='#' title='Menu 1'>Menu 1</a></li>
<li><a class='prett' href='#' title='Drop Menu'>Drop Menu</a>
<ul class='menus'>
<li><a href='#' title='Drop Menu1'>Drop Menu 1</a></li>
<li><a href='#' title='Drop Menu2'>Drop Menu 2</a></li>
<li><a href='#' title='Drop Menu3'>Drop Menu 3</a></li>
</ul>
</li>
<li><a href='#' title='Menu 2'>Menu 2</a></li>
<li><a class='prett' href='#' title='Drop Menu1'>Drop Menu 1</a>
<ul class='menus'>
<li><a href='#' title='Drop Menu 1'>Drop Menu 1</a></li>
<li><a href='#' title='Drop Menu 2'>Drop Menu 2</a></li>
<li><a href='#' title='Drop Menu 3'>Drop Menu 3</a></li>
</ul>
</li>
<li><a class='trigger2' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;amp;langpair=id%7cen&amp;amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='English'>Translate</a></li>
</ul>
</nav>
<span class='plus-menu' id='run2'>&#10010;</span>
  </div>

Ganti Logo

silakan anda cari kode di bawah ini, dan ganti url "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5hZe4YDKI6zS3A1zo3O5qGxKFDOfqGnAHyJDKYPQB96PrJq5sax0b6IVyF2V11Sn5fZ597YB4VWxWRTMGwP7IiR7mslttfopfbHHsNMjr-LX8pmr5Qlr1BWTtrpbNTDSQypb0Mc_bokA/s1600/titlekompimales.png" dengan url gambar anda

<div class='logo-blog'>
  <a href='/' title='Kompi Preett'><img alt='logo blog' height='90' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5hZe4YDKI6zS3A1zo3O5qGxKFDOfqGnAHyJDKYPQB96PrJq5sax0b6IVyF2V11Sn5fZ597YB4VWxWRTMGwP7IiR7mslttfopfbHHsNMjr-LX8pmr5Qlr1BWTtrpbNTDSQypb0Mc_bokA/s1600/titlekompimales.png' title='Kompi Preett' width='212'/></a>
               </div>

Setting Search Google Custom Blog

Buat halaman statis blog agan (Judul : Search, setelah itu klik save) habis itu anda edit halaman search yang agan buat tadi, dan masukan kode ini di postnya (pilih "HTML")

<script>
  (function() {
    var cx = '007207043736399233844:4ln3rglxlcg';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//www.google.com/cse/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:searchresults-only></gcse:searchresults-only>
<style type='text/css'>
table {border:0}
.gsc-webResult .gsc-result {
padding: 10px 0 10px 0;
border: 2px solid #222;
}
.cse .gsc-control-cse .gsc-control-cse {
background-color: #fff;
border: 1px solid #fff;
border: 2px solid #222;
}
</style>

Setelah itu klik save, kemudian agan masuk ke edit HTML Template blogger dan cari kde di bawah ini :

  <div id='box'>
<div id='search'>
<form action='http://blog-kabar-template.blogspot.com/p/search.html' id='searchform' target='_blank'>
<input name='cx' type='hidden' value='partner-pub-007207043736399233844:4ln3rglxlcg'/>
<input name='cof' type='hidden' value='FORID:10'/>
<input name='ie' type='hidden' value='ISO-8859-1'/>
<input id='search-form' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' type='text' value='Search here ...'/>
<button class='search-button' title='Search' type='submit'><img alt='search button' height='21' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw__J_Zlknf0oWhDbZ1mLzro_PIVSZ-GuGKbSlcSpupT5SVQaMDmJkcP8c327FlcAF2BUPxqr8y7-gNXcBu3T25a1Iwp5P-hguuIiTDQzNCq8S_GHSP1w4GoTzQjO9KjXXC6LjHZvCOPA_/s1600/search.png' title='Search' width='21'/>
</button>
</form>
<div class='close'>&#10006;</div>
</div>
      </div>

Kemudian ganti URL "http://blog-kabar-template.blogspot.com/p/search.html" dengan url halaman statis yang agan buat tadi.

Setting Box2

Silakan agan masuk ke edit HTML blog agan dan cari kode di bawah ini.

  <div id='box2'>
<div class='box-plusmenu'>
<div class='content-box2' style='text-align:center'>
  <span style='text-align:center;font:18px Oswald'>Selamat Datang Di Blog Kompi Males</span><br/>
<span style='text-align:center;font:16px &apos;PT Sans Narrow&apos;;'>Terima kasih atas kunjungan Anda di blog Kompi Males,<br/>
  semoga apa yang saya share di sini bisa bermanfaat dan memberikan motivasi pada kita semua<br/>
  untuk terus berkarya dan berbuat sesuatu yang bisa berguna untuk orang banyak.</span>
<div class='close2'>&#10006;</div>
      </div>
</div>
      </div>

Kemudian edit tulisannya.

Kode Pre Postingan

silakan pilih sendiri sesuka anda, ini semua udah tersedia di template yang saya jual ini.

 /* Untuk CSS */

 /* Untuk HTML */

 /* Untuk JavaScript */

 /* Untuk kode JQuery */

 /* Untuk All Kode */

Cara Penulisan kodenya :

<pre class="line-number" data-codetype="CSS"><code class="xml"> /* Untuk CSS */ </code></pre>
<pre class="line-number" data-codetype="HTML"><code class="xml"> /* Untuk HTML */ </code></pre>
<pre class="line-number" data-codetype="JavaScript"><code class="xml"> /* Untuk JavaScript */ </code></pre>
<pre class="line-number" data-codetype="JQuery"><code class="xml"> /* Untuk kode JQuery */ </code></pre>
<pre class="line-number"><code> /* Untuk All Kode */ </code></pre>

Kode anda harus di parse dulu melalui konversi kode (ada kok di komentar blog anda)

Cara membuat Div catatan and note di postingan

Sebenarnya mudah, lihat dulu contohnya di bawah ini :

Penampakan div catatan

Penampakan div note

iya benar ini sama persis kayak di blog kang ismet, karna ane mendapatkannya dari pemiliknya langsung, bila anda mau membuat seperti itu silakan copy kode berikut dan ganti tulisannya,

<div class="catatan">Penampakan div catatan</div>
<div class="note">Penampakan div note</div>

Agar Tetap Valid HTML5

Hapus kode dibawah ini, apabila anda membuat widget baru

<b:include name='quickedit'/>

Bila ada kesulitan dengan panduan di atas bisa PM ane via Facebook [disini]

Latest News

Noval Template