Tutorial Clone Template KangIsmet

Saya berpendapat template KangIsmet (KI) memang bagus dan banyak yang menyukainya. Perpaduan warnanya nyaman dilihat, ada notifkasi komentar, ada tombol info/readme, dan yang paling menyolok adalah latar belakang thumbnail image berbeda-beda bersesuaian dengan label atau kategori.

Banyak pengunjung KI bertanya bagaimana cara membuat ini dan itu (bagian-bagian blog). Sedikit-sedikit KI memberikan tutorial cara membuat beberapa bagian dalam templatenya, terutama yang sering ditanyakan oleh pengunjung tadi. Tetapi ada juga bagian-bagian yang (sengaja) tidak dijelaskan secara rinci dengan alasan agar pengunjung situs lebih kreatif, begitu kira-kira kata KI.

Saya senang mengintip atau lebih tepatnya mempelajari source code sebuah website, lalu mencoba menirunya. Senang bisa mengetahui apa yang telah mereka buat dan sedikit demi sedikit tahu bagaimana cara membuatnya. Apa yang saya lakukan tersebut sering dikategorikan sebagai cloning. Di dunia blogger, cloning ini "haram". Padahal dalam sains modern (Biologi) cloning adalah salah satu kemajuan luar biasa dan cloning memiliki niche-nya sendiri.

Mengapa komunitas blogger mengharamkan cloning template? Jawabannya adalah karena si cloner melenyapkan author. Artinya apa? Jika Anda tidak menghilangkan author-nya berarti cloning template "HALAL" :)

Satu lagi! Jangan jual template cloning-an ya??!! hehehe..

Peringatan!
Saya sama sekali tidak mengajar Anda untuk melakukan clone template Kang Ismet lalu menjualnya, saya hanya mengajak Anda menikmati "sensasi" memodifikasi sebuah template milik Kang Ismet yaitu template "droidpluss-ki" agar sama dengan template Kang Ismet yang beralamat di blog.kangismet.net (template tersebut telah diluncurkan untuk khalayak dengan "cuma-cuma"). Saya hanya melihat ada peluang. Ketika KI melempar template "droidpluss-ki" ke publik, saya menganggap sebenarnya beliau memberikan tutorial bagaimana membuat template ala Kang Ismet secara tersamar. Nah, saya akan memperjelas yang samar itu. JIKA ANDA MENGERTI LANJUTKAN, JIKA TIDAK - BACA KEMBALI!


Mari kita mulai belajar membuat template ala Kang Ismet

Agar tutorial ini lebih singkat download terlebih dahulu template "droidpluss-ki". Silahkan download di website KangIsmet atau di SINI. Template ini memiliki struktur yang serupa dengan template KangIsmet. KI hanya memindahkan posisi beberapa elemen, memodifikasi sedikit CSS, dan memodifikasi JavaScript.

Pertama, terapkan template "droidpluass-ki" yang telah Anda download.

Setelah template tersebut Anda terapkan marilah kita mulai mengedit template. Kita mulai dari baris atas ya, selanjutnya terus berurutan ke bawah.

1. Hapus CSS ini.
&lt;style type=&quot;text/css&quot;&gt;&lt;!-- /* <b:skin><![CDATA[
#outer-wrapper, #outer-wrapper2 {width: 980px}
#main-wrapper {width: 66%;float:left}
#sidebar-wrapper {width: 30%;float:right}
#footer {width:100%}.footer {float: left;width: 31%;margin: 10px}
*/]]></b:skin> 

lalu ganti dengan CSS berikut.

&lt;style type=&quot;text/css&quot;&gt;&lt;!-- /* <b:skin><![CDATA[
#outer-wrapper, #outer-wrapper2 {width:980px}
#left-group {width:74%;float:left;}
#main-wrapper{width:75%;float:right;}
#sidebar-left {width:17%;float:left;}
#sidebar-right {float:right;width:24%;}
#footer{width:100%}
.footer{float:left;width:31.5%;margin:10px}
#top-menu ul li{list-style: none;}
*/]]></b:skin>

2. Hapus style 1 (yaitu style yang paling pertama Anda temukan, nama style 1 tidak akan Anda temukan dalam template, itu hanya penamaan dari saya). Potongan baris style 1 adalah sebagai berikut,

<style type='text/css'>#navbar-iframe {height:0px;visibility:hidden;display:none;}
header, nav, section, aside, article, footer {display:block;}
/* Use this with templates/template-twocol.html */
body, .body-fauxcolumn-outer {
background:#fff;
margin:0;
padding:0;
color:#2c3e50;...
dan seterusnya, hingga berakhir pada </style>
Ganti semuanya dengan CSS ismet 1.

3. Temukan style 2 berikut lalu hapus,

<b:if cond='data:blog.pageType != &quot;item&quot;'>
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'> 
  <style>
    .post h2{font-size:130%;margin-top:5px !important;margin-bottom:5px !important;font-weight:400;line-height:1.4em;color:#4a4a4a}
    .post{font-weight:400;border-bottom:1px solid #ccc;padding-bottom:5px;}
    #blog-pager{width:90%}
  </style>
</b:if>  
</b:if>

ganti dengan style berikut (style ini untuk gaya di laman depan-homepage).

<b:if cond='data:blog.pageType != &quot;item&quot;'>
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'> 
  <style>
    .post h2{font-size:120%;margin-top:5px !important;margin-bottom:5px !important;font-weight:400;line-height:1.4em;color:#4a4a4a;font-family:Oswald, Arial, Sans-serif;text-transform:uppercase}
    .post{font-weight:400;}
    #blog-pager{width:90%}
    #catcher{height:1450px;}
    .post img{border: 8px solid rgba(255, 255, 255, 0.4);box-shadow:none;transition: all 0.3s ease-out;}
    .post img:hover{border: 8px solid rgba(255, 255, 255, 0.7);box-shadow:none}
  </style>
</b:if>  
</b:if>

4. Hapus style 3 berikut ini.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
  .thumbnail {display:none}
  #blog-pager {font-weight:400;font-size:14px;}
  #blog-pager a{color:#2c3e50}
  #blog-pager a:hover{color:#c34755; text-decoration:none}
</style>
</b:if>

ganti dengan style berikut ini - Style ini untuk gaya di halaman index.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
  .post {border-radius:0 0 4px 4px}
  .thumbnail, #menu::before, #menu::after {display:none}
  #blog-pager {font-family: 'Montserrat', 'Segoe UI',Arial,Tahoma, sans-serif;font-weight:400;font-size:14px;}
  #blog-pager a{color:#2c3e50}
  #blog-pager a:hover{color:#c34755; text-decoration:none}
.breadcrumbs{
 background:#41cac0;
 border-radius:4px 4px 0 0;
 margin-bottom:-20px;
}
.breadcrumbs a{
 color:#defffd;
 text-decoration:none;
}
.breadcrumbs a:hover{
 color:#fff;
 text-decoration:none;
}
.breadcrumbs:before {
 background-color:#33aea5;
 border-radius:4px 0 0 0;
}
</style>
</b:if>

5. Hapus JavaScript Page Navigation dan script setelahnya, jadi ada dua script yang dihapus. Agar lebih mudah menemukannya, temukan <!--Page Navigation Starts--> menggunakan Ctrl+F. Ganti script yang telah dihapus dengan script ismet navi.

6. Gulung lagi kebawah, temukan script terakhir lalu hapus. Ganti script yang telah Anda hapus dengan script ismet lagi.

Script yang saya maksud itu berada tepat di bawah script berikut ini.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='https://googledrive.com/host/0B3pi8P5BWqm1OHB4Zks1aWR0Nnc/postsmiley.js' type='text/javascript'/> 
</b:if>

7. Teruslah ke bawah, temukan bagian berikut, kemudian hapus.

<div id="BounceToTop">
<script type="text/javascript">
</script>
</div>

Simpan template, seharusnya Anda mendapati pesan Error berikut.

Kesalahan saat mengurai XML, baris 3960, kolom 103: 
Element type "pres.length" must be followed by 
either attribute specifications, ">" or "/>".


8. Solusi untuk Error di atas adalah ganti script berikut.

<script type='text/javascript'>var pres=document.getElementsByTagName("pre");for(var i=0;i<pres.length;i++){pres[i].addEventListener("dblclick",function(){var
selection=getSelection();var range=document.createRange();range.selectNodeContents
(this);selection.removeAllRanges();selection.addRange(range)},false)}</script>

Ganti dengan script ini.

<script type='text/javascript'>
var pres = document.getElementsByTagName(&quot;pre&quot;);
for (var i = 0; i &lt; pres.length; i++) {
  pres[i].addEventListener(&quot;dblclick&quot;, function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
</script>

Simpan template, jika semua langkah benar, Template akan berhasil disimpan.

9. Sekarang kembalilah ke atas. Temukan </head>. Hapus semua script yang ada di atasnya. Ada empat script. Hapus semuanya. Script yang saya maksud adalah sebagai berikut.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>var switchTo5x=true;</script>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>stLight.options({publisher: &quot;72bf3752-aa70-4ea8-ae61-01390b990546&quot;, doNotHash: false, doNotCopy: false, hashAddressBar: false});</script>
Setelah dihapus, ganti dengan script dan  stylesheet berikut.

<link href='https://kang-is.googlecode.com/svn/trunk/css/font-awesome.min.css' rel='stylesheet'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<script src='https://googledrive.com/host/0B3pi8P5BWqm1OHB4Zks1aWR0Nnc/allscripts.js' type='text/javascript'></script>
<script type='text/javascript'>
$(function() { $(window).scroll(function() { if($(this).scrollTop()>500) {
$('#BounceToTop').fadeIn(); } else { $('#BounceToTop').fadeOut(); } });
$('#BounceToTop').click(function() { $('body,html').animate({scrollTop:0},800)
.animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100)
.animate({scrollTop:0},50); }); });
</script>
<script type='text/javascript'>//<![CDATA[
      hljs.initHighlightingOnLoad();
//]]>
</script>
<link href='http://kang-is.googlecode.com/svn/trunk/css/lightbox.css' rel='stylesheet' type='text/css'/>
<script src='http://kang-is.googlecode.com/svn/trunk/javascript/lbev2.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function(){$('.lightbox').lightbox()});
//]]>
</script>

10. Simpan lagi template Anda, lihatlah! Sampai disini template KangIsmet sudah menemukan bentuknya. Tetapi tata letaknya masih belum sesuai.

11. Lanjut. Sekarang temukan tag <div id='outer-wrapper'> Cut dan Paste tepat di atas <header id='header-wrapper'>.

12. Copy tag berikut <div id='left-group'> dan Paste tepat di bawah <div id='content-wrapper'>, lalu Copy tag penutup berikut </div><!--/left-group--> dan Paste tepat di atas <aside id='sidebar-wrapper'>. Tag <div id='left-group'> dan </div><!--/left-group--> ini tidak ada dalam template, jadi tidak usah dicari. Copy saja.

13. Copy dan Paste HTML berikut tepat di atas </div><!--/left-group-->

<aside id='sidebar-left'>
<div class='nav-collapse ' id='sidebar' style='overflow: hidden; outline: none;' tabindex='5000'>
<!-- sidebar menu start-->
<ul class='sidebar-menu'>
<li class='active'>
<a class='' href='/'>
<i class='icon-home'></i>
<span>Beranda</span>
</a>
</li>
<li class='sub-menu'>
<a class='' href='javascript:;'>
<i class='icon-cogs'></i>
<span>Tools</span>
<span class='arrow'></span>
</a>
<ul class='sub' style='overflow: hidden; display: none;'>
<li><a class='' href='/p/pre-code-parser.html'>Tag Pre Converter</a></li>
<li><a class='' href='/2010/05/blogger-ad-code-converter-javascript.html'>Ads Converter</a></li>
<li><a class='' href='http://kangismet.net/iframe/visit-site.html?iframe=http://kangismet.net/tool/facebook-id-finder.html' target='_blank'>Facebook ID Finder</a></li>
<li><a class='' href='/p/kode-warna.html'>Kode Warna</a></li>
<li><a class='' href='/p/photoshop-online.html'>Photoshop Online</a></li>
</ul>
</li>
<li class='sub-menu'>
<a class='' href='javascript:;'>
<i class='icon-bookmark'></i>
<span>Webfont Icons</span>
<span class='arrow'></span>
</a>
<ul class='sub' style='overflow: hidden; display: none;'>
<li><a class='' href='/2013/06/daftar-icon-font-awesome-lengkap-dan-css-content-value.html'>Font Awesome</a></li>
<li><a class='' href='/2013/11/elusive-icon-dan-css-value-content.html'>Elusive Icon</a></li>
</ul>
</li>
<li>
<a class='' href='/2012/12/pasang-iklan-di-blog-kang-ismet.html'>
<i class='icon-star'></i>
<span>Pasang Iklan</span>
</a>
</li>
<li>
<a class='' href='/p/oot.html'>
<i class='icon-edit'></i>
<span>Request Tutorial</span>
</a>
</li>
<li>
<a class='' href='/'>
<i class='icon-envelope'></i>
<span>Contact</span>
</a>
</li>
</ul>
<!-- sidebar menu end-->
</div>
</aside> 

14. Lalu ganti <aside id='sidebar-wrapper'> menjadi <aside id='sidebar-right'> lalu Simpan Template.

Sampai di sini template droidpluss sudah mirip dengan template Kang Ismet. Selanjutnya Anda lanjutkan sendiri untuk kesempurnaannya, ANDA PASTI BISA!!! ;)

Atau Anda dapat meneruskannya sekarang :)

Mengganti Header dan menambahkan kotak pencarian


Temukan baris kode berikut:
<div id='top-menuwrapper'>
<div id='top-menuwrap'>
<div id='top-menu'>
<div class='logo'>
  <a href='/'><img alt='DroidPluss' src='http://2.bp.blogspot.com/-AnjNyR9S1mM/UrL4459J5EI/AAAAAAAAGMw/Kk5VnTLr2No/s1600/droidpluss.png'/></a>
  </div>
<ul>
<li><a href='http://droidpluss.blogspot.com/p/kebijakan-privasi.html'>Privacy</a></li>
<li><a href='#'>Contact</a></li>
<li><a href='http://droidpluss.blogspot.com/p/about.html'>About</a></li>
<li><a class='current' href='/'>Daftar Isi</a></li>
</ul>
</div>
</div>
</div>


lalu ganti dengan:
<div id="top-menuwrapper">
    <div id="top-menuwrap">
        <div id="top-menu">
<div class="logo">
                <a href="/">
                    <img src="http://4.bp.blogspot.com/-njQDGs_YlNc/UmjHpciPYWI/AAAAAAAAF6k/6s64x4q-pGw/s1600/kangis-logo-new.png" alt="Kang Ismet"></img>
                </a>
            </div>
            <div id="search-box">
    <form id="cse-search-box" method="get" action="/search">
        <input id="search-text" type="text" value="Cari di sini ..." onfocus="if(this.value==this.defaultValue)this.value=''" onblur="if(this.value=='')this.value=this.defaultValue;" name="q"></input>
        <button id="search-button" type="submit">
            Search
        </button>
    </form>
</div>
        </div>
    </div>
</div>

Sekarang <div id="search-box">.......</div> ada dua. Hapus saja yang kedua yang terletak di atas </header>.

Okay, lanjutkan lagi, sekarang letakkan:
<nav id="menu"></nav>

tepat di atas
<div id='content-wrapper'>

Mengganti Sosial Media


Temukan baris kode berikut,
<div id='stickywidget'>
          <h3>Sosial Media</h3>
<div class='fb-like' data-action='like' data-href='https://www.facebook.com/DroidPluss' data-layout='standard' data-share='false' data-show-faces='false' data-width='285' style='margin-bottom:5px'/>
<div><a class='twitter-follow-button' data-lang='id' href='https://twitter.com/DroidPluss'>Ikuti @DroidPluss</a></div>
<script type='text/javascript'>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script>
<div class='g-follow' data-annotation='bubble' data-height='20' data-href='//plus.google.com/117142020356474912742' data-rel='author'/>
<div class='g-plusone' data-count='true' data-href='http://droidpluss.blogspot.com' data-size='medium' data-width='100'/>
</div>

ganti dengan yang ini.

<div id='stickywidget'>
          <h3>Sosial Media</h3>
<div class='fb-like' data-action='like' data-href='https://www.facebook.com/NAMA_ANDA' data-layout='standard' data-share='false' data-show-faces='false' data-width='285' style='margin-bottom:5px'/>
<div><a class='twitter-follow-button' data-lang='id' href='https://twitter.com/NAMA_ANDA'>Ikuti @NAMA_ANDA</a></div>
<script type='text/javascript'>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script>
<div class='g-follow' data-annotation='bubble' data-height='20' data-href='//plus.google.com/ID_GOOGLE_PLUS_ANDA' data-rel='author'/>
<div class='g-plusone' data-count='true' data-href='http://NAMA_ANDA.blogspot.com' data-size='medium' data-width='100'/>
</div>

Ganti Notifikasi Komentar

Temukan code ini.

home_page:"http://blog.kangismet.net",max_result:18,

ganti alamat home page dengan URL blog Anda. Contoh:

home_page:"http://NAMA_BLOG_ANDA",max_result:18,


Memunculkan kembali Credit dan Footer

Temukan CSS berikut,

#footer{background:#c9ccd1;width:100%;padding:0;position:relative;clear:both;display:none}
.footer-wrapper{color:#2c3e50;font-size:14px;height:100%;line-height:15px;overflow:hidden;padding:0}
.footer{float:left;width:31.5%;margin:10px}
.footer .widget{margin-bottom:30px}
.footer h2{font-size:17px;padding-bottom:8px;margin-bottom:8px;line-height:1.3em;text-transform:uppercase;color:#4a4a4a;font-family:Oswald, Arial, sans-serif;font-weight:normal}
.footer .widget-content{line-height:17px}
.footer ul{list-style:none;color:#EAE9E8;margin:0;padding:0}
.footer li{text-indent:0;line-height:1.2em;margin:0;padding:2px 0 3px 0px;font-size:14px;}
.footer a:link,.footer li a:visited{color:#2c3e50;text-decoration:none}
.footer li a:hover{color:#fff}
  #credit{background:#2c3e50;text-align:center;font-size:14px;padding:20px 0;margin-bottom:-51px;color:#c94e5c;display:none}
#credit a{color:#27a491;text-decoration:none}
#credit a:hover{color:#c9ccd1;text-decoration:none}

kemudian ganti dengan yang ini.

#footer{width:100%;padding:0;position:relative;clear:both;}
.footer-wrapper{color:#666;font-size:14px;height:100%;line-height:15px;overflow:hidden;padding:0}
.footer{float:left;width:30.5%;margin:10px}
.footer .widget{margin-bottom:30px}
.footer h2{font-size:20px;padding-bottom:8px;margin-bottom:8px;line-height:1.3em;color:#666;font-weight:normal}
.footer .widget-content{line-height:17px}
.footer ul{list-style:none;color:#666;margin:0;padding:0}
  .footer li{text-indent:0;line-height:1.4em;margin:0;padding:2px 0 3px 0px;font-size:14px;text-shadow:0 -1px 0px #000}
.footer a:link,.footer li a:visited{color:#777;text-decoration:none}
.footer li a:hover{color:#999}
#credit{background:#121114;text-align:center;font-size:14px;padding:20px 0;margin-bottom:-51px;color:#555;}
#credit a{color:#239189;text-decoration:none}
#credit a:hover{color:#407dad;text-decoration:none}


Ganti Nama Author dan ID Google Plus

Penting!! Nama author atau penulis artikel masih menggunakan nama Kang Ismet (KI) dan ID Google Plus-nya. Saya tidak tahu mengapa KI melakukan itu dan tidak menginformasikannya kepada pengunjung. Tapi kita anggap saja KI lupa. Jadi meskipun nama author sudah diganti dengan nama Anda tetapi jika di hover yang muncul adalah nama KI bukan nama Anda, dan link-nya mengarah pada URL Google Plus KI. Orang yang tahu ini bisa menganggap blog Anda tidak professional.

Temukan link berikut,
href='https://plus.google.com/113292956133224747560' rel='publisher' title='Kang Ismet

kemudian ganti dengan milik Anda. Ganti no ID 113292956133224747560 dengan ID Anda, ganti nama KI dengan nama Anda yang tampil di artikel.

Semoga tutorial ini cukup jelas.

Agar lebih maknyos baca tutorial berikutnya: membuat background warna-warni berdasarkan label :)

Komentar

  1. Minta yg sudah jadi dong ;)

    BalasHapus
  2. ilmu yang bermanfaat sob. Jadi semangat desaign lagi :]

    BalasHapus
  3. buka mediafire lola -_- bisa pakai kode langsung sob?

    BalasHapus
    Balasan
    1. Iya mediafire lambat loading. Sy pindahin ke pastebin.

      Hapus
    2. sob saya nemu blog nih. Dasarannya sm droidpluss tapi di modif jadi seperti blog ini http://ngudang.blogspot.com bise beri tutorialnya :]

      Hapus
    3. Itu ngambil tampilannya Taufik (dte.web.id) ya?
      Nanti saya coba buat tuto-nya :)

      Hapus
    4. Wah...berarti lumayan banyak yg beda, sempat ga ya bikin tuto-nya...hmmm :(

      Hapus
  4. Kok gadget/widget nya ke bawah coba di lihat mas Mohon bantuannya
    copas-site.blogspot(.)com

    BalasHapus
    Balasan
    1. Lilis salah menempatkan tag "left-group".

      Lilis menempatkannya seperti ini.
      <div id='left-group'>
      <div id='content-wrapper'>

      Yang benar seperti ini.
      <div id='content-wrapper'>
      <div id='left-group'>

      Coba lagi :)

      Hapus
  5. Makasih Mas bantuannya, ternyata salah menempatkan kode yah :)

    BalasHapus
  6. Bisa Minta hasil cLonenya Mas ....

    BalasHapus
    Balasan
    1. Saya sudah lihat dan hasilnya sudah OK tuh...

      Hapus
  7. mas. kalau menghapus crdit link kang ismet bisa ?

    BalasHapus
    Balasan
    1. Bisa. Hapus saja potongan JavaScript yang mengandung credit link (lihat artikel).

      Hapus
    2. bisa membuat top-wrapper seperti ini mas blue-droidpluss.blogspot.com ?

      Hapus
    3. Bisa. Saya buat copy-nya di http://copy-blue-droidpluss.blogspot.com/

      Hapus
    4. mas. tutorial di atas sudah saya coba ...
      hasil nya bagus keren kayak punya yang asli ...

      terus kalau mau ngasih jarak fixed menu sama Blognya ??
      kayak punya mas gitu ?

      Hapus
    5. coba cek di sini mas http://templateyyyyy.blogspot.com/

      dan coba lihat di sebelah bagian kiri kok ada ">" kenapa ya mas ? :(

      Hapus
    6. Anugrah, kalau mau memberi jarak aturlah margin atau padding-nya, ubah nilainya mnjadi lebih kecil atau lebih besar. Misalnya, padding: 30px menjadi padding 60px.
      ----
      Saya sdh cek, sudah bagus kok, tidak ada ">".

      Hapus
    7. ok. makasih mas berhasil ..

      cuma satu yang belum .
      cara buat kotak pencarian di fixed menu gimana yah mas ? bisa bantu gk mas ? ^_^

      Hapus
    8. Selipkan ini,

      <div id='search-box'><form action='/search' id='cse-search-box' method='get'><input id='search-text' 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='Cari di sini ...'/><button id='search-button' type='submit'/></form></div>

      Hapus
  8. Mas, ini hasilnya dari tutorial di atas. Tapi masih ada kurangnya di bagian sebelah kiri, yaitu tulisan beranda jaraknya terlalu dekat dengan top menu. gimana cara mengatasinya ?

    BalasHapus
  9. coba cek di http://coba-redesign.blogspot.com

    BalasHapus
    Balasan
    1. Penyebabnya agan membuang yang ini:

      <nav id="menu"></nav>

      Hapus
    2. gan, kode nav itu diletakkan disebelah mana ya ?

      Hapus
    3. Letakkan di bawah </header>

      Hapus
    4. itu dipasang semua kah ?

      Hapus
    5. Tidak perlu, cukup <nav id="menu"></nav> saja.

      Hapus
  10. kalau ingin buat widget ala kang ismet gimana ? Tiap widget ada iconnya masing - masing kayak punya agan, misal di sidebar samping MUAMMALAH

    BalasHapus
    Balasan
    1. Itu mudah. Hanya menggunakan properti :before, agan bisa baca tutorialnya di http://jelasinblog.blogspot.com/2014/05/cara-menggunakan-before-dan-after.html

      Hapus
    2. ok, gan saya coba dulu. ^_^

      Hapus
  11. kang sidebar nya ko tulisanya mepet ke artikel tumbnail ya ?
    cara nge fix biar sejajar gimana ?

    BalasHapus
  12. terimakasih ya gan, bermanfaat sekali tutorialnya.

    BalasHapus
    Balasan
    1. setelah saya pakai ternyata saya ada keluhan pada halaman index yang seharusnya background thumb berwarna-warni tapi ini tidak berfungsi, mohon pencerahannya.
      tumbaltemplate blogspot com

      Hapus
    2. ternyata masalah diatas sudah teratasi gan, tapi saya ada 1 masalah lagi yaitu page-navi tidak bekerja pada halaman index. mohon penjelasannya

      Hapus
    3. thanks gan, semuanya udh beres. makasih banyak tutorialnya

      Hapus
  13. Gan bagaimana supaya background Thumbnya warna - warni \??
    Mohon pencerahannya

    BalasHapus
    Balasan
    1. saya menanyakan hal yg sama :v

      Hapus
    2. Rifky umami n Cindy Nailla: Pakai JavaScript.

      <script type='text/javascript'>$(window).ready(function(){$(&#39;.post&#39;)
      .each(function(){if($(this).find(&#39;.post-label a:contains(Halaman)&#39;).length){$(this).addClass(&#39;color1&#39;)}
      else if($(this).find(&#39;.post-label a:contains(JavaScript)&#39;).length){$(this).addClass(&#39;color2&#39;)}
      dan seterusnya...
      })});</script>

      Hapus
    3. Dan seterusnya maksudnya apaan ya gan??

      Hapus
    4. Dan diletakkan dimana??

      Hapus
    5. Sabar, nanti saya buatin artikelnya :)

      Hapus
  14. gimana ini blog tutorial gak bisa di copy buat praktek, dibaca belum selesai sudah redirect aja
    gak nyaman banget buat pengunjung

    BalasHapus
  15. Pak, biar footer copyright kelihatan lagi dan notifikasi nya dari blog sendiri gimana yak?

    BalasHapus
    Balasan
    1. Temukan CSS ini,

      #credit{background:#2c3e50;text-align:center;font-size:14px;padding:20px 0;margin-bottom:-51px;color:#c94e5c;display:none}

      kemudian hapus "display:none"

      Hapus
    2. Lebih jelas baca kembali artikel, sudah saya update :)

      Hapus
  16. Pak maaf ini kolom search nya kalo di geser ke atas gimana yah caranya? aku masih awam pak mohon bantuannya,, blog percobaan >>> http://belajar-edit-template-blog.blogspot.sg/

    BalasHapus
    Balasan
    1. satulagi pak cara pindahin image header ke sisi kiri gimana caranya mohon bantuannya pak :) terimakasih sebelumnya..

      Hapus
    2. Untuk menggeser kotak search (atas-kanan-bawah-kiri) atur margin: 15px 35px 15px 0px;

      Untuk menggeser image header caranya juga sama, btw itu image header emang sengaja diletakkan ditengah atau gimana?

      Hapus
    3. gak tau itu tiba2 di tengah aja setelah ngikutin tutorial di atas :)

      Hapus
    4. Coba ikuti lagi tutorialnya dengan seksama. Gambar header jangan diganti dulu. Kalau mau ganti samakan lebarnya. Kalau terpaksa harus lebih lebar sesuaikan CSSnya.

      Hapus
  17. Sudah bisa tampil pak footernya, tapi letaknya di tengah-tengah halaman, barnya menutupi sidebar kiri menu "request tutorial" dan menu diatasnya, apa karena blog saya masih kosong belum ada postingannya ya?

    BalasHapus
  18. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  19. Sore mas.mau bertanta ni mas....
    ni pertanyaan ada di
    http://nursta-cs.blogspot.com/2014/07/blog-post.html

    BalasHapus
  20. me malem gan.. ane dah ikuti langkah langkah yang agan jelasin cuma terdapat beberapa masalah ne.. mohon solusinya..
    1. mengapa deskripsi halaman blog menjadi androidpluss-all abaout android?? dimana letak kesalahannya??
    2. avatar comentnya kok ga muncul ya?? mohon bantuannya
    3. sticky widgetnya ga bekerja,..
    alamat blognya matematikakuadrat.blogspot.com
    terima kasih sebelumnya

    BalasHapus
    Balasan
    1. Wayan, blog wayan sudah saya kunjungi.

      1. Sudah fix tuh :)
      2. Muncul kok :)
      3. Periksa JavaScript dan nama ID sticky widgetnya.

      Hapus
    2. terima kasih gan... ada tapi nya ne.. hehehe
      1. kalo ane share dengan alamat matematikakuadrat.blogspot.com di fb kok deskripsinya muncul droidpluss-all about android??
      2. avatar yang cuma setengah,, hehe trus bukan bukan avatar asli gan..
      3. ane akan coba kroscek lagi, hehehe

      di tunggu lagi ne penjelasannya hehehe...

      Hapus
    3. 1. Ane ga' bisa periksa kecuali kirimi ane salinan templatenya atau temukan tulisan droid...bla..bla trus hapus atau ganti
      2. Coba atur ini, .comment_avatar img {
      width: 42px;
      height: 42px;
      background: url('http://1.bp.blogspot.com/-Q4bU4Hx9WpQ/U7tl1IHHeOI/AAAAAAAAA1Q/WMoYa6RGX1w/s1600/avatar.png') no-repeat scroll 0% 0% transparent;
      }


      Gambar avatar yang digunakan sekarang adalah di url: http://1.bp.blogspot.com/-Q4bU4Hx9WpQ/U7tl1IHHeOI/AAAAAAAAA1Q/WMoYa6RGX1w/s1600/avatar.png, coba hapus itu.

      Hapus
    4. tulisan droidnya udah ane hapus gann
      trus avatarnya ane hapus tetep aja ga nongol.
      ni template ane http://www.4shared.com/office/KcBZzkpDce/template.html

      Hapus
    5. Sudah saya periksa. Baca artikel lagi sudah saya update.

      Hapus
    6. gan, knapa setelah templatenya di klone . javascriptnya gk berfungsi sama skali . . .
      stickynya aja gk bisa gan ..
      tolong master bantuanya . trimakasih :)

      Hapus
    7. Coba baca artikel : \http://jelasinblog.blogspot.com/2014/05/elemen-div-diam-setelah-discroll.html\

      Hapus
  21. klo seperti ini gimana http://blogjomblongenes.blogspot.com/ pendapatnya ??

    BalasHapus
    Balasan
    1. Perfecto :)
      Cuma efek lipatan sudut perlu diselaraskan dengan background.

      Hapus
    2. Komentar ini telah dihapus oleh pengarang.

      Hapus
    3. cara memindahkan menu samping ke bagian sidebar content trus sidebar content di pindahkan ke bagian menu conten gimana ya ? kasih tau cranya donk saya ingin merubah template kang ismet itu menjadi berbeda gtu.

      Hapus
    4. Itu mudah, Cut saja elemen (DIV) menu samping kemudian Paste ke sidebar. Pelajari dulu tag pembuka dan penutup sebuah elemen (DIV).

      Hapus
  22. Pak, logo pojok kiri atas itu diganti dengan tulisan caranya bagaimana?, maaf sebelumnya, saya mencoba tampilan mirip blog bapak biar footernya bisa kebawah, h t t p : / / b l a n g g e m . b l o g s p o t . c o m / sekali lagi mohon maaf.

    BalasHapus
    Balasan
    1. Saiful tidak bersalah jadi tidak perlu minta maaf :)
      Mengganti logo dengan tulisan, perhatikan elemen berikut:
      <div class="logo">

      <a href="http://jelasinblog.blogspot.com/">
      <img width="40" height="71" src="http://1.bp.blogspot.com/-IGPr_GaO1pU/U26w5Kxg8jI/AAAAAAAAFgs/6KJh4hoTX0o/s1600/jib-logo40trans.png" alt="Jelas in Blog"></img>
      </a>

      </div>

      coba hapus link logo ini,

      <a href="http://jelasinblog.blogspot.com/">
      <img width="40" height="71" src="http://1.bp.blogspot.com/-IGPr_GaO1pU/U26w5Kxg8jI/AAAAAAAAFgs/6KJh4hoTX0o/s1600/jib-logo40trans.png" alt="Jelas in Blog"></img>
      </a>

      lalu ganti dengan tulisan.

      Hapus
  23. Pak, nanya lagi :D , bagaimana caranya masukkan iklan di sidebar kanan di template, semisal seperti iklan "muammallah" di sidebar kanan blog ini.

    BalasHapus
    Balasan
    1. Silahkan baca artikel: http://jelasinblog.blogspot.com/2013/11/membuat-iklan-baris-menggunakan-jquery.html

      Hapus
  24. bagaimana membuat footer seperti blog bapak ini pada template droidplus ??

    BalasHapus
    Balasan
    1. Footer blog ini:
      HTML-nya.
      <div id='credit'>
      Copyright &#169; 2014. <a class='sitename' expr:href='data:blog.homepageUrl' expr:title='data:blog.title'><data:blog.title/></a> - Template Didandani oleh <a href='http://jelasinblog.blogspot.com/' target='_blank'>Lalu Abd.Rahman<span id='pesan'>
      Itu artinya bahwa Anda boleh menggunakan desain ini seluas-luasnya untuk kepentingan bangsa dan negara, pribadi ataupun golongan, bisnis ataupun non-bisnis :)
      </span></a>
      </div>


      CSS-nya.
      #credit{background: url(&#39;http://3.bp.blogspot.com/-mnVju8kdiq4/Uz-obgfLX3I/AAAAAAAAFIQ/ypfkCg8pEvY/s1600/jelasin-foot-bottom-bg(1).png&#39;) repeat-x scroll center top #4A0400;text-align:center;font-size:10px;padding:10px 0;color:#fff;}#credit a{color:#407dad;text-decoration:none}#credit a:hover{color:#ffffff;text-decoration:none}

      :)

      Hapus
    2. membuat kolol kategori yg di footer blog ini bagaimana mas

      Hapus
    3. Itu widget "Label". Cara buatnya di http://jelasinblog.blogspot.com/2014/07/widget-label-blogger-warna-warni.html

      Hapus
  25. Pak ngerepoti lagi, tampilan judul post dihalaman utama blogku kok ada 2 judul ya pak, salahnya kira2 dimana yak? h t t p : / / b l a n g g e m . b l o g s p o t . c o m /

    BalasHapus
    Balasan
    1. Itu sama dengan Blog ini, judulnya ada dua juga tho? Jadi tidak ada yang salah soal itu :)
      Tapi, kalau ingin hanya satu judul saja, yang dikiri atas itu maka hapus saja yang ini.
      <header id='ll-header-wrapper'>
      ...
      </header>

      Hapus
    2. kekekekeke, isin aku, maternuwun pak. :v

      Hapus
    3. Ra popo, aku jg masih belajar, ra sah isin-isin.
      Njih..sami-sami :)

      Hapus
  26. Pak biar "thumbnail" posting bisa tampil di samping sintak nya bagaimana di widget blog1?, kemarin bukan judul nya yang 2, ternyata thumbnail gambar sumber diluar blogger tidak bisa tampil, gambarnya aku ganti gambar jam dari blog ini bisa tampil.

    BalasHapus
  27. sudah ketemu pak, ternyata di cssnya milik blog ini namanya urut dan ll-tooltip, cssnya droidplus namanya dp-thumbnail dan ll-tooltip.

    BalasHapus
  28. pakkk kembaliin headernya gimana pak ??
    setelah saya mau edit malah jadi kacau, notifikasi ngga berfungsi

    http://sultanation.blogspot.com/

    BalasHapus
    Balasan
    1. Nah, itu perlunya membackup template sebelum diedit.
      Balikin lagi header-nya. Selamat mencoba :P

      Hapus
  29. Gan ane ada keluhan nih mohon bantuannya. Kenapa tombol berbagi yg ada dibawah artikel terkait tidak muncul ya gan? yang tulisannya seperti ini nih.. " Suka artikel ini? Bagikan " Mohon bantuannya gan!, blog ane hendinara.com silahkan di chek!

    BalasHapus
    Balasan
    1. Sudah masukkan kode seperti ini?

      <div class='post-share-buttons' style='float:right;margin-top:-30px'>
      <a class='goog-inline-block share-button sb-email' href='&target=email' target='_blank' title='Kirimkan Ini lewat Email'></a>
      <a class='goog-inline-block share-button sb-blog' href='&target=blog' onclick='window.open(this.href, "_blank", "height=270,width=475"); return false;' target='_blank' title='BlogThis!'></a>
      <a class='goog-inline-block share-button sb-twitter' href='&target=twitter' target='_blank' title='Berbagi ke Twitter'></a>
      <a class='goog-inline-block share-button sb-facebook' href='&target=facebook' onclick='window.open(this.href, "_blank", "height=430,width=640"); return false;' target='_blank' title='Berbagi ke Facebook'></a>
      </div>

      Hapus
  30. Mngkin belm gan salna saya kurang begitupaham html, btw itu naruhnya dimana gan?. maaf banyak nanya?

    BalasHapus
    Balasan
    1. Coba sisipkan setelah tulisan "Suka artikel ini? Bagikan"

      Hapus
  31. Balasan
    1. Kirim template ke saya, saya coba perbaiki..insyaallah..

      Hapus
    2. OK gan! saya mau kirim templatenya skrg, minta alamat emailnya gan?

      Hapus
    3. Sdah saya kirim gan, dan saya nantikan hasilnya, BTW Terima kasih sebelumnya krn agan sdh mau bantu saya!

      Hapus
    4. Tidak ada masuk ke email saya. Cek lagi.

      Hapus
    5. sudah dapat blum mas cara ngilangin link credit template dari mbak dian anarchyta ??

      tolong mas dibantu . . .

      Hapus
    6. Kirim templatenya ke email:laluabdrahman@gmail.com

      Hapus
    7. sudah saya kirim ke email mas . Trimakasih banyak sebelumnya . . . :D

      Hapus
    8. Coba cek email, sudah saya edit.
      Mudahnya hapus saja semua JavaScript kemudian gunakan JS yang di sini karena struktur templatenya sama.

      Selamat mencoba :)

      Hapus
    9. Komentar ini telah dihapus oleh pengarang.

      Hapus
    10. cara gantinya gimana mas ?
      saya sudah coba ganti tapi slalu di direct .... :/
      tolong newbie master . . . hehehehe

      Hapus
  32. nanya lagi pak, biar posting "yang tidak bergambar" biar ada thumbnail gambarnya dari "gambar milik sendiri", habis nyoba template subclture fix postingan tidak bergambar thumbnailnya gambar pembuat templatenya. :v

    BalasHapus
    Balasan
    1. Coba temukan baris kode yang seperti ini jika ada.

      <b:if cond='data:post.thumbnailUrl'>
      <img expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/>
      <b:else/>
      <a expr:href='data:post.url' expr:title='data:post.title'><img expr:alt='data:post.title' src='DI SINI URL GAMBAR PENGGANTI JIKA POSTINGAN TIDAK ADA GAMABR'/></a>
      </b:if>


      Kalau ada ganti URL gamabr tersebut.

      Hapus
  33. Gan template sudah saya kirim ke email agan, Coba di chek dikotak spam

    BalasHapus
  34. Template sudah saya pasang gan, Teima kasih banyak ya Templatenya keren banget, Agan ini memang sip banget deh!

    BalasHapus
  35. Selamat hari raya Idul Fitri pak Lalu Abd.Rahman dan pengunjung setia jelasinblog, mohon maaf lahir dan batin. :D

    BalasHapus
  36. nanya lagi pak, caranya biar posting yang memakai gambar diluar blogger bisa pakai thumbnail bagaimana?, tombol "jelasnaik"-ku tertutup bar-nya footer. h t t p : / / b l a n g g e m . b l o g s p o t . c o m /

    BalasHapus
    Balasan
    1. Sayang sekali saya belum tahu caranya :)
      Dimasukin aja ke postingan daripada pake link eksternal.
      Masalah tombol "jelasnaik" coba atur CSS-nya.

      Hapus
  37. jelas naik sudah bisa pak, nanya submenu di bar sebelah kiri biar bisa tampil "misal" ada 21 sub menu, dirubah yang mananya pak?

    BalasHapus
  38. Temukan baris kode seperti ini.

    <ul class='sub' style='overflow: hidden; display: none;'>
    <li><a class='' href='/2013/06/daftar-icon-font-awesome-lengkap-dan-css-content-value.html'>Font Awesome</a></li>
    <li><a class='' href='/2013/11/elusive-icon-dan-css-value-content.html'>Elusive Icon</a></li>
    </ul>


    Kemudian, untuk menambah sub menu gandakan saja <li>...</li>

    BalasHapus
  39. aku buat 10 sub menu di menu test paling bawah, sub menu ke-5 s/d 10 tak terlihat alias "mentok pol" dengan footer, solusinya gimana pak?

    BalasHapus
    Balasan
    1. Coba tetapkan tingginya (height) kemudian tambahkan overflow:scroll.


      Sebelum
      #sidebar > ul > li > ul.sub {
      display:none;
      }

      Sesudah
      #sidebar > ul > li > ul.sub {
      display:none;height:100px;
      overflow:scroll;
      }


      Hapus
  40. Guru, sidebar kanannya kenapa polos sangat ya?
    i: http://almuwahhidunchannel.blogspot.com/

    BalasHapus
    Balasan
    1. Untuk memberi warna tambahkan properti background pada elemen sidebar-right.
      #sidebar-right {
      width: 325px;
      word-wrap: break-word;
      overflow: hidden;
      }

      Misal menjadi begini.
      #sidebar-right {
      width: 325px;
      word-wrap: break-word;
      overflow: hidden;
      background: none repeat scroll 0% 0% #2A3542;
      }

      Hapus
    2. trimakasih :D..
      cuman maksd saya. seperti tampilan sidebarnya http://gudang-mod.blogspot.com/ yang 5 TERPOPULER kan ada tu atasannya warna lain bawahannya bekotak trus juga ada ikonnya.

      ataupun di situs http://blog.kangismet.net/ kan ada atasan obrolan yang warna ijo juga punya ikon. ataupun di iklan 125x125nya kan backgroundnya biru. nah itu gmna cara buatnya? hehe maaf ngerepotin..

      Hapus
    3. Sebaiknya baca artikel:
      http://jelasinblog.blogspot.com/2014/05/cara-menggunakan-before-dan-after.html

      Atau kalau ingin segera coba CSS ini.
      #HTML1 h2{ background:#1bb !important; color:#fff !important;font-family:'Oswald',Tahoma,Sans-serif;text-transform:uppercase;font-weight:normal;font-size:16px !important;margin:0 10px !important;padding:12px 0 !important;background:#2c3e50;color:#fff;border-radius:4px 4px 0 0}
      #HTML1 .widget-content{background:#fff}
      #HTML1 h2:before{ content:"\f087"; font-family:FontAwesome; font-size:22px; background:#1aa; padding:10px 14px; margin:0 10px 0 0; border-radius:4px 0 0}
      #HTML1 ul{ list-style-type:none; padding:5px}
      #HTML1 li{ margin:0px; padding:6px 10px !important}
      #HTML1 ul li{ margin:0; padding:0px; border:0px}
      #HTML1 ul li:nth-child(1),#HTML1 ul li:nth-child(3),#HTML1 ul li:nth-child(5),#HTML1 ul li:nth-child(7),#HTML1 ul li:nth-child(9),#HTML1 ul li:nth-child(11){ background:#eee}
      #HTML1 ul li:nth-child(2),#HTML1 ul li:nth-child(4),#HTML1 ul li:nth-child(6),#HTML1 ul li:nth-child(8),#HTML1 ul li:nth-child(10){ background:#fafafa}
      #HTML1 li a{ font-weight:bold; font-style:italic; color:#888 !important; transition:all 0.5s}
      #HTML1 li a:hover{ color:#666 !important}

      Hapus
  41. sip udah dbaca dan udah ngerti mas, tpi itu CSS di pasang dimana ya? di atas apa?

    2 lagi mas... coba mas buka blog saya.. itu thumbnail depannya kenapa sebagian hilang/rusak/kelamaan loading ya mas? satu lagi saya punya template lain. jdi templatenya tu untuk list orderednya ga ada nomor dan iconnya macam 1. 2. 3. atau titik bulat gtu. tapi terlist, cuman itulah ga ada number dan bulletnya..

    BalasHapus
    Balasan
    1. - Letakkan CSS dalam <style>...</style> atau mudahnya letakkan saja di atas /* Sidebar Content
      - Berarti Anda menggunakan gambar dari website lain.

      Hapus
    2. wesss sempurna mass pervectoo... makasih makasih mas...
      Itu mas hanya berfungsi buat satu widget aja ya mas? klo untuk widget lain gmna mas? seperti untuk widget "kategori" apa diubah saja #HTML 1 dengan #HTML 2 bgtu mas?

      waah ia ia.. harus remake lagi nih :D

      Hapus
  42. gan mau tanya cara memisahkan artikel terkait dari postingan gimana caranya

    BalasHapus
    Balasan
    1. Temukan kode berikut.
      <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <div style='clear:both'/>
      <!-- Related Post Widget Start -->
      ...
      <!-- Related Post Widget End -->
      <div style='clear:both'/>
      </b:if>

      Kemudian pindahkan ke tempat lain. Misalnya di bawah tag berikut.
      <div class='post-footer'>

      Hapus
  43. akhirnya selesai juga ngikutin tutorialnya mas....dan sudah jadi sukses buat mas rahman dan trimakasih banyak ^_^

    BalasHapus
  44. gan saya mengulang pertanyaan mas Hendi Nara yang cara menampilkan share button di "Suka artikel ini? Bagikan " mohon tutornya gan

    BalasHapus
    Balasan
    1. Baca lagi postingan http://jelasinblog.blogspot.com/2014/07/download-template-jelasinblog-blue-jeans.html, sudah saya update :)

      Hapus
    2. thanks gan, saya mau tanya lagi cara membuat edit post kaya kang ismet gimana ya? maaf merepotkan gan

      Hapus
    3. Komentar ini telah dihapus oleh pengarang.

      Hapus
    4. http://3.bp.blogspot.com/-eq36QWYJcWQ/U_hqy7XhkFI/AAAAAAAAAho/Vkw-U0oc714/s1600/edit%2Bcontent.png

      Hapus
  45. pak request, ini hampir mirip dengan template "ki", kalau sidebar kirinya dibuat untuk widget dan menu nav nya dipindah di atas caranya bagaimana yak?, http://bloggertemplatestore.com/downloads/hudson.zip

    BalasHapus
    Balasan
    1. Nyoba belajar clone template ini tapi bingung di bagian postingannya, hehe
      hohon pencerahannya bang
      http://clonjelasin.blogspot.com

      Hapus
  46. yg lebih ampuh lagi pencet F12 gan, copy semua code, inget jangan disalah gunakan, credits jangan dihilangkan

    BalasHapus
  47. gan lampiran ke 2 nya gk bisa dibukak

    http://wewrwr.blogspot.com/

    BalasHapus
  48. min tolong kasih tutorial caraatasin yg di gambar nih ------> http://prntscr.com/4m0ol9
    kasih sarannya :)

    BalasHapus
    Balasan
    1. Ganti lebar (width) dan ganti background-color nya.

      Hapus
  49. gan templatenya KI baru lagi tu... ada tutornya gak nich yang baru :D

    BalasHapus
  50. tuh ada di atas edit aja sendiri di larang clone

    BalasHapus
  51. min tolong kasih tutorial cara atasin yg di gambar nih ------> http://prntscr.com/4m0ol9
    kasih sarannya
    nih kasih yang lengkap kodenya

    BalasHapus
  52. Ganti lebar (width) dan ganti background-color <---- kodenya banya gan

    BalasHapus
    Balasan
    1. Punya Ane demotaqwim.blogspot.com, Tapi Belum Beres

      Hapus
    2. Ganti lebar (width) dan ganti background-color, #sidebar-left {...}

      Hapus
  53. Kok Gini Eya :( => http://prntscr.com/4mcy4m

    BalasHapus
  54. kok jadinya gini gan ? yang kurang apa?

    BalasHapus
  55. http://minimmablog.blogspot.com/ nih linknya

    BalasHapus
  56. gan cara hapus info ramdhan gimana sama loading pagenya mas
    kasih infonya donk

    BalasHapus
  57. cara hapus emoticonnya gimana gan mohon kasih kode yg lengkap sama yg saya tanyakan di atas

    BalasHapus
  58. kok kode shout-box gk berfungsi ya

    BalasHapus
  59. cara membuat tempat letak kode kayak gini gimana

    BalasHapus
  60. cara membuat tempat letak kode kayak gini gimana

    BalasHapus
  61. maksudnya jangan di hapus author = penulis itu bagaimana

    BalasHapus
  62. mas, cara agar tampilan berandanya ituy thumbnailnya kotak2 macam magazine form gmna ya? mhon pencerahan shifu

    BalasHapus
  63. eh uda template baarau. Yhaa coba cek blog saya zulfanafdhilla.com, mksd saya kotak2 macam gudang-mod.blogspot.com tapi ada deskripsinya gt.

    BalasHapus
  64. @Zulfan Afdhilla

    Coba terapkan CSS berikut ini.
    .post{position:relative;float:left !important;background:#fff;width:300px !important;height:180px;}

    BalasHapus
  65. maksudnya jangan di hapus author = penulis itu bagaimana
    bls donk

    BalasHapus


  66. cara membuat tempat letak kode kayak gini gimana

    BalasHapus
  67. gan cara hapus info ramdhan gimana sama loading pagenya mas
    kasih infonya donk

    cara hapus emoticonnya gimana gan mohon kasih kode yg lengkap sama yg saya tanyakan di atas

    BalasHapus
    Balasan
    1. Cari dalam template tulisan info ramadhan kemudian hapus..

      Hapus
  68. error,cara menampilkan footernya gimana kok gk bisa

    BalasHapus
  69. ini knapa gan ---> http://prntscr.com/4udc0k

    BalasHapus
  70. Muhammad Bagas Tri Atmojo, jangan lupa apit code javascript dengan ini:
    <script type='text/javascript'>//<![CDATA[
    ....kode anda di sini....
    //]]>
    </script>

    BalasHapus
  71. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  72. cara membuat halama posting kayak mas gimana

    BalasHapus
  73. cara membuat halaman posting kayak mas gimana

    BalasHapus
  74. cara membuat tampilan kayak gini gimana
    http://prntscr.com/4vedsa

    BalasHapus
  75. Maaf nih mas, dp-thumbnail nya belum fix, kira-kira apa yang kurang ya? link: bravoseo.blogspot.com

    BalasHapus
    Balasan
    1. Oh iya satu lagi mas, tooltipnya nggak jalan kenapa ya

      Hapus
    2. Tambahkan class tooltip agar tooltipnya muncul.

      Hapus
  76. ini mas http://1.bp.blogspot.com/-Mz_eL4HSWvM/VD-qo-tmmiI/AAAAAAAAAg4/YThGGK9MqFM/s1600/gambar2.png

    tapi nggak ngaruh
    http://1.bp.blogspot.com/-5sUKIdOHnEM/VD-qpjGXaKI/AAAAAAAAAhA/JPceerIGC4I/s1600/gambar3.png

    BalasHapus
    Balasan
    1. Coba tes postingannya diisi gambar.

      Hapus
    2. Komentar ini telah dihapus oleh pengarang.

      Hapus
    3. Nggak kepikiran mas :-d

      tapi responsivenya masih ada scroll kesamping gitu mas.. cek: www.responsinator.com/?url=bravoseo.blogspot.com

      Hapus
    4. Coba atur elemen #top-menuwrapper di CSS responsive-nya.
      Temukan kode ini @media screen and ..., bekerjalah di situ :)

      Hapus
    5. Saya udah coba dengan kode gini tetap nggak ngaruh #top-menuwrapper {width:100%}

      Hapus
    6. Coba pelajari ini, http://jelasinblog.blogspot.com/2014/07/download-template-jelasinblog-blue-jeans.html

      Hapus
  77. Mantap gan,,,, langsung berhasil,,,, :D

    BalasHapus
  78. bang kalo, buat Blue Droidpluss gimana bang, buat nambahin menu sidebar kaya kang ismet gimana bang,,,,,,,,

    BalasHapus
  79. gan, mau tanya. Biar popular post gambarnya ada disamping judul artikel, caranya gimana?
    Kalo bawaannya kan gambarnya diatas, judulnya dibawah gambar.

    BalasHapus
    Balasan
    1. Coba ganti CSS popular post dengan yang ini:
      .popular-posts ul,.popular-posts li{margin:0;padding:0;list-style:none}
      .popular-posts li{margin-bottom:.6em}
      .popular-posts .item-thumbnail{width:72px;height:72px;float:left;overflow:hidden;margin:4px 10px 0 0}
      .popular-posts .item-thumbnail img{float:none;display:block;margin:0 0;padding:0 0;border:none}
      .popular-posts .item-title{font-weight:bold;font-size:120%}

      Hapus
    2. sipp, sudah jadi.. terimakasih banyak gan..
      mau tanya satu lagi :D
      itu yang notification'nya kok masih alamatnya kangismet ya? saya cari2 url'nya tp gak ada. Itu cara ganti biar jadi notif url blog kita gimana gan?

      Hapus
  80. mas tolong dong, kenapa saat ada komentar yang dihapus oleh pengarang maka notifikasi komentarnya tidak memunculkan komentar komentar yg lain (blank) alias tidak berfungsi ? (notif komentar di pojok kanan atas)

    BalasHapus
  81. Thanks banget mas tutorialnya, berhasil. tapi saya masih ragu takutnya nanti ada tuntutan gmna? :D
    apakah beliau sudah tau?

    BalasHapus
    Balasan
    1. Sepertinya beliau sudah tahu. Lagipula ini sangat menguntungkan beliau. Mengapa? Setiap orang yang mengikuti tutorial ini pastilah membuka website kang ismet. Bukankah ini menjadi semacam iklan gratis untuk kang ismet? :D

      Hapus
    2. iya juga ya :D. Tapi kalau mau dipikir-pikir sudah banyak sekali yang sudah pakai template mirip kang ismet. jadinya udah pasaran. coba lihat lzmodern.blogspotdotcom ini hasil kreasi dari droidpluss-ki. gimana ya klw mau modif seperti tempalte blog itu? bisa gak

      Hapus
  82. Luar biasa tutorialnya lengkap banget sehingga proses pengcloningannya juga berjalan dengan sempurna... Bravo buat mas Admin....

    BalasHapus
  83. Mas ,, Kalo Sidebar Nya Aja Yang di pake ,,Gimana Ya ?

    BalasHapus
    Balasan
    1. Tinggal comot elemen <aside id='sidebar-left'>, jangan lupa CSS dan JS.

      Hapus
  84. makasih Gan ,,Berhasil ,,Lihat Hasilnya Perfec kaga
    http://bangwarsa.blogspot.com/

    BalasHapus

Posting Komentar

Postingan populer dari blog ini

Cara Menggunakan :before dan :after

Perbedaan JavaScript dan jQuery Beserta Contoh

Tutorial Sevida v2.4.2 - Responsive Magazine Blogger Template