Cara Merubah Tampilan Homepage Template Johny Wusss

Sejak dibagikan sama Maskolis, template Johny Wusss membawa kisah tersendiri di dunia blogging. Dengan banyak sekali kelebihannya, lalu banyak blogger yang menggunakannya. Namun alasannya ialah selera orang itu berbeda-beda, akibatnya banyak juga yang memodifikasi tampilannya sesuai dengan cita-cita dan selera penggunanya.

Karena hingga ketika ini Maskolis masih bertapa mencari ide untuk mendapat istri yang anggun wkwkwkwk... Nah hari ini saya akan mencoba membantu merubah tampilan postingan homepage Johny Wusss jikalau Anda tengah kebingungan hehehehe.... Seperti kita tahu, tampilan postingan homepage johny Wusss ialah 2 kolom, nah kini akan kita jadikan menjadi satu kolom.

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

Langkah Pertama:

Sebagai misalnya saya akan memakai template Bukan Johny yang mempunyai tampilan postingan homepage 1 kolom. Silahkan download dulu template Bukan Johny di Maskolis.

Ganti isyarat CSS yang mengatur tampilan postingan homepage Johny Wusss yang berada di bawah isyarat ]]></b:skin> yang penampakannya ibarat 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 isyarat CSS yang mengatur tampilan postingan homepage Bukan Johny yang letaknya di bawah isyarat ]]></b:skin> yang penampilannya ibarat 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 isyarat yang berwarna merah ialah isyarat yang mengatur thumbnails postingan di homepage, maka Anda juga perlu mengcopy isyarat javascriptnya yang letaknya persis dibawah isyarat di atas dan simpan juga di bawah isyarat di atas persis ibarat 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 isyarat dari isyarat <div class='post hentry'> hingga <div style='clear: both;'/> <!-- clear for photos floats --> dan untuk penampakannya ibarat di bawah ini.

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

Silahkan ganti dengan isyarat ibarat di atas dari template Bukan Johny.

Langkah Ketiga:

Karena di template Bukan Johny mempunyai tombol Readmore serta Postmeta yang letaknya di bawah judul postingan, maka silahkan copy juga isyarat CSS-nya dan simpan di atas isyarat ]]></b:skin>. Penampakan isyarat CSS-nya ibarat 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/AVvXsEiGoReAjJsNCVtdv9rC0gEe6T357Ha_KFIF0Scw5cTMGeFQBo5U3zX9GvQIsHYC5nt45QA2AB4Jse67lbhlUNkxs4RCsfDWP1oby4JSaB7_qKN3ggIyQNnFaFF3RsaWUHBTK4jza0JvTK2F/s1600/user.png) left center no-repeat;padding:2px 5px 2px 17px}
.clock{color:#666;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvSZMqwSc7EE7c-QDuHAbOgtHZKSjp2fNdnxxyyung8ZzaglQzTDymRD0_n4eDxcVgBNbIKFHkEAjZXwWNchxdfSXVLPH3YyL5wgMelNL2i3nMa2uuip5Fu-9vs0PD51lu9lWWMAH0Ei1N/s1600/time.png) left center no-repeat;padding:2px 5px 2px 17px}
.clock a{color:#666}
.clock a:hover{color:#48d}

Langkah Keempat:

Hapus isyarat CSS di bawah ini alasannya ialah 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, jikalau sudah sesuai silahkan save template Anda.

Nah gampang kan? Semoga postingan ini sanggup dimengerti dan membantu Anda yang memerlukannya. Selamat berkreasi...

Sumber https://www.kompiajaib.com/

Share this post