Cara Merubah Tampilan Homepage Template Johny Wusss

Sejak dibagikan sama Maskolis, template Johny Wusss membawa cerita tersendiri di dunia blogging. Dengan berbagai kelebihannya, kemudian banyak blogger yang menggunakannya. Namun karena selera orang itu berbeda-beda, akhirnya banyak juga yang memodifikasi tampilannya sesuai dengan keinginan dan selera penggunanya.

Karena sampai saat ini Maskolis masih bertapa mencari ilham untuk mendapatkan istri yang cantik wkwkwkwk... Nah hari ini saya akan mencoba membantu merubah tampilan postingan homepage Johny Wusss jika Anda tengah kebingungan hehehehe.... Seperti kita tahu, tampilan postingan homepage johny Wusss adalah 2 kolom, nah sekarang akan kita jadikan menjadi satu kolom.

Ini hanya panduan dasar saja, selanjutnya Anda bisa mengembangkannya menjadi variasi lain dengan berpatokan pada langkah-langkah di bawah ini.

Langkah Pertama:

Sebagai contohnya saya akan menggunakan template Bukan Johny yang memiliki tampilan postingan homepage 1 kolom. Silahkan download dulu template Bukan Johny di Maskolis.

Ganti kode CSS yang mengatur tampilan postingan homepage Johny Wusss yang berada di bawah kode ]]></b:skin> yang penampakannya seperti di bawah ini.

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
h3.date-header,.post-timestamp,.post-footer,.feed-links {display:none}
.post {float:left;margin:0 5px 10px 5px;overflow:hidden;padding:7px 7px 5px;positon:relative;width:274px;height:90px;}
.post h1,.post h2{line-height:1em;margin:0 0 4px;padding:0}
.post h1 a, .post h1 a:visited, .post h1 strong,.post h2 a, .post h2 a:visited, .post h2 strong{font:bold 12px Arial}
.post h1 strong,.post h1 a:hover,.post h2 strong,.post h2 a:hover{color:#111;}
.post-body{font:11px Arial;border-top:none;padding-top:0px;background:none;margin:0;text-align:left}
</style>
</b:if></b:if>

Silahkan ganti dengan kode CSS yang mengatur tampilan postingan homepage Bukan Johny yang letaknya di bawah kode ]]></b:skin> yang penampilannya seperti di bawah ini.

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
.post{margin:0;padding:0 0 5px;border:none}
.post h1,.post h2{font:16px Oswald;line-height:1.2em;margin:8px 0;padding:0;text-shadow:none;}
.post img{transition:all 400ms ease-in-out;-webkit-transition:all 400ms ease-in-out;-moz-transition:all 400ms ease-in-out;-o-transition:all 400ms ease-in-out;-ms-transition:all 400ms ease-in-out;margin-top:0}
.post-body{border-bottom:1px dotted #999;font:12px Arial;border-top:none;padding-top:0px;background:none;line-height:1.5em;margin:0;padding-bottom:10px;text-align:left;color:#444}
.post img:hover{opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}
.post-footer{display:none}
.cutter{width:190px;height:130px;overflow:hidden;border:4px double #ccc;margin:0 10px 5px 0;float:left;padding:0px}
</style>
</b:if></b:if>

Dan perhatikan kode yang berwarna merah adalah kode yang mengatur thumbnails postingan di homepage, maka Anda juga perlu mengcopy kode javascriptnya yang letaknya persis dibawah kode di atas dan simpan juga di bawah kode di atas persis seperti pada template Bukan Johny.

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 220;summary_img = 200;img_thumb_width = 180;img_thumb_height = 130;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(e,f){if(e.indexOf("<")!=-1){var g=e.split("<");for(var h=0;h<g.length;h++){if(g[h].indexOf(">")!=-1){g[h]=g[h].substring(g[h].indexOf(">")+1,g[h].length)}}e=g.join("")}f=(f<e.length-1)?f:e.length-2;while(e.charAt(f-1)!=" "&&e.indexOf(" ",f)!=-1){f++}e=e.substring(0,f-1);return e+"..."}function createSummaryAndThumb(k){var i=document.getElementById(k);var h="";var g=i.getElementsByTagName("img");var j=summary_noimg;if(g.length>=1){h='<span style="display:none;float:left;margin:0px 10px 5px 0px;"><img src="'+g[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';j=summary_img}var l=h+"<div>"+removeHtmlTag(i.innerHTML,j)+"</div>";i.innerHTML=l};
//]]>
</script>

Langkah Kedua:

Ganti kode dari kode <div class='post hentry'> sampai <div style='clear: both;'/> <!-- clear for photos floats --> dan untuk penampakannya seperti di bawah ini.

<div class='post hentry'>

...........

...........

...........

...........

<div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

Silahkan ganti dengan kode seperti di atas dari template Bukan Johny.

Langkah Ketiga:

Karena di template Bukan Johny memiliki tombol Readmore serta Postmeta yang letaknya di bawah judul postingan, maka silahkan copy juga kode CSS-nya dan simpan di atas kode ]]></b:skin>. Penampakan kode CSS-nya seperti di bawah ini.

.readmorecontent{float:left;margin:10px 5px 0 0;padding:2px 0px;}
.readmorecontent a{color: #555;text-shadow: 0 1px 0 rgba(255,255,255,.5);border-width: 1px;border-style: solid;border-color: #fff #ccc #999 #eee; background: #c1c1c1;background: -moz-linear-gradient(#f5f5f5, #c1c1c1);background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#c1c1c1));background: -webkit-linear-gradient(#f5f5f5, #c1c1c1);background: -o-linear-gradient(#f5f5f5, #c1c1c1);background: -ms-linear-gradient(#f5f5f5, #c1c1c1);background: linear-gradient(#f5f5f5, #c1c1c1);  text-decoration:none;font-size:11px;padding:4px 7px}
.readmorecontent a:hover{text-decoration:none;color:#48d}

.postmeta{font:11px Tahoma;text-transform:uppercase;font-weight:400;padding:5px 0}
.author{color:#666;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPw_YipkZ9tFmhWDKoeFZr5jCF2Xj1J67AW5DZCtmR1O000N3MAcEz2KMiagpF9xwjyldHvtxWXL9x2q5A1Vn9AnoJSwdRMn4EDULH51Ii0RvqKlFzu_qc6rSsINMei9iutyz5tAXcwE-i/s1600/user.png) left center no-repeat;padding:2px 5px 2px 17px}
.clock{color:#666;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9aRDmLcWWeBWRcFgvNdbjCq-V8olsBx1m0p1xQyH0BicGjB0Cs_PdWmBhZfCCr0-q3lj9OpXRqkFd8l4R4y4IdQL0Bw924iMHZSJSu9kxhyphenhyphen04Nbosy6D5q1F2_VEmhQlB58uepazhgiwB/s1600/time.png) left center no-repeat;padding:2px 5px 2px 17px}
.clock a{color:#666}
.clock a:hover{color:#48d}

Langkah Keempat:

Hapus kode CSS di bawah ini karena sudah tidak diperlukan

.post-thumbnail{width:70px;height:70px;float:left;margin-right:10px}
.post-snippet:before{content:attr(data-snippet);}

Langkah Kelima:

Lakukan preview dulu, jika sudah sesuai silahkan save template Anda.

Nah mudah kan? Semoga postingan ini dapat dimengerti dan membantu Anda yang memerlukannya. Selamat berkreasi...