Sejak dibagikan sama Maskolis, template Johny Wusss membawa kisah tersendiri di dunia blogging. Dengan banyak sekali kelebihannya, kemudian banyak blogger yang menggunakannya. Namun sebab selera orang itu berbeda-beda, balasannya banyak juga yang memodifikasi tampilannya sesuai dengan harapan dan selera penggunanya.
Karena hingga ketika ini Maskolis masih bertapa mencari wangsit untuk menerima istri yang indah 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 sekarang akan kita jadikan menjadi satu kolom.
Ini hanya panduan dasar saja, selanjutnya Anda mampu 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 unduh dulu template Bukan Johny di Maskolis.
Ganti arahan CSS yang mengatur tampilan postingan homepage Johny Wusss yang berada di bawah arahan ]]></b:skin> yang penampakannya menyerupai di bawah ini.
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<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 arahan CSS yang mengatur tampilan postingan homepage Bukan Johny yang letaknya di bawah arahan ]]></b:skin> yang penampilannya menyerupai di bawah ini.
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<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 arahan yang berwarna merah ialah arahan yang mengatur thumbnails postingan di homepage, maka Anda juga perlu mengcopy arahan javascriptnya yang letaknya persis dibawah arahan di atas dan simpan juga di bawah arahan di atas persis menyerupai pada template Bukan Johny.
<script type='text/javascript'>
var thumbnail_mode = "float" ;
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 arahan dari arahan <div class='post hentry'> hingga <div style='clear: both;'/> <!-- clear for photos floats --> dan untuk penampakannya menyerupai di bawah ini.
<div class='post hentry'>
...........
...........
...........
...........
<div style='clear: both;'/> <!-- clear for photos floats -->
</div> Silahkan ganti dengan arahan menyerupai 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 arahan CSS-nya dan simpan di atas arahan ]]></b:skin>. Penampakan arahan CSS-nya menyerupai 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/AVvXsEgq0mp58NRJZN8uhXhYahkd3Tkf6ZzMR5QlcoULJWz3TRis9upk1fLdDuk4nzigqXO_xPGA9AibOyPD2ko114PreLwWYlVAmnuQfQ8psniM-apfCAQXMkrRQxgOFrgIRNvMnD_zK34vcVxL/s1600/user.png) left center no-repeat;padding:2px 5px 2px 17px}
.clock{color:#666;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWSjbj_rzKg8xL3ejPXqX78hTbvU8dT6RNHGT7DLIaFFacWPgMX1SIUR8BrN6GTacAUoh8Kd2IidglDeZY3_CBK1xJdkqS8yDgqAC8QDMLVqVDsKXdyMQ7yyKWgQgMrAA2jRgdJ2vTWOcZ/s1600/time.png) left center no-repeat;padding:2px 5px 2px 17px}
.clock a{color:#666}
.clock a:hover{color:#48d} Langkah Keempat:
Hapus arahan CSS di bawah ini sebab 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 mudah kan? Semoga postingan ini dapat dimengerti dan membantu Anda yang memerlukannya. Selamat berkreasi...
Komentar
Posting Komentar