Sdr Lalu Abd. Rahman berpendapat template KangIsmet memang bagus dan banyak yang menyukainya. Perpaduan warnanya, ada notifkasi komentar, ada tombol info/readme, dan yang paling menyolok adalah latar belakang thumbnail image berbeda-beda bersesuaian dengan label atau kategori. Masih pendapat bro Lalu, 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.
Kemudian Lalu Abd. Rahman berkata, 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! (nah peringatan ini saya pribadi sangat setuju :D)
(Peringatan dari Sdr Lalu Abd. Rahman) "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 "droidplus-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.
<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.
<style type="text/css"><!-- /* <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 != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<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 != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<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 == "item"'>
<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 == "item"'>
<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 == "item"'>
<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("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>
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: "72bf3752-aa70-4ea8-ae61-01390b990546", 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjseW2Lt0gTxYnelWp7ptCmLTx8y-2jkowrnoQjzKFNlPMJCNrKJgISLAofASdACFvIxBsp2QEUib33bD_3MpuRJT-TGTQoIQw6zwU0H20dNbuIagPRrOJhd9ZsaNKCErzvrv15eu0jRjkY/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEL9Izwn6KFBLr3dENr8SMdZaWAlSHTO97vxuEfdKHkSratfAlN-lSLnVf1co6tXUzJIvHS2QqSlPE4Yhbx-IfsIN4Pa_4GwJmmQO0raZuLs7HykRn1H6-znwUPdMZPrH9hpXzr26r1z8/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="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</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="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</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 Ismetkemudian 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. Seratus persen di comot dari narasumber dan dibagikan kembali di blog ini.
visit [ Sdr.ABD.Rahaman ]
Belum ada komentar
❖ Berkomentarlah dengan Bahasa yang Relevan dan Sopan.
❖ Dilarang Menghina, Promosi (Iklan), Menyelipkan Link Aktiv, dsb.
❖ Dilarang berkomentar berbau Porno, Spam, Sara, Politic, Profokasi.
❖ Berkomentarlah yang Sopan,Bijak, dan Sesuai Artikel [Dilarang OOT].
❖ Saya sangat berterima kasih atas semua yang mau berkomentar diblog saya.
☛ Copyright © 2015 by : Fikazha ✓