Cara Merubah Tampilan Homepage Template Johny Wusss

Cara Merubah Tampilan Homepage Template Johny Wusss

Bola Hero Gawai

Cara Merubah Tampilan Homepage Template Johny Wusss

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(http://1.bp.blogspot.com/-BHRCsN73acQ/UPKxKFtk-mI/AAAAAAAACcI/Vc9nAuUh7F8/s1600/user.png) left center no-repeat;padding:2px 5px 2px 17px}
.clock{color:#666;background:url(http://2.bp.blogspot.com/-GEuHpjA0MF8/UPKxKPNlBwI/AAAAAAAACcE/aCzen2hdPS4/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...

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

51 Comments Add Comment

Dulu saya pernah cari artikel in... tapi saya ud pakai yang ada load nxa :) . Oh ya mas... bagiamana Merubah agar tata letak d bagian footer rapi... ( kolom nya menjadi jelas ) punya saya seperti ini

http://3.bp.blogspot.com/-IR1zEq7hZKg/UZxt-nDWyZI/AAAAAAAAC0E/uFNYEOBlWbQ/s320/ngga+rapi.png

Itu karena gara gara apa ya mas... terimakasih... :D Maaf mas saya tanya lagi habis d sebelah ngga di jawab :)

Balas

Itu biasanya dari pengaturan kode CSS, tapi asalkan tidak mempengaruhi tampilan blog, tata letak/layout seperti itu tidak jadi masalah.

Balas

wah sayang saya dah ngga pake johny wusss lagi om,tapi bermanfaat bgt buat nambah ilmu, makasih banyak om dah share ilmunya.

Balas

Hmmm... Gitu.... Jadi kalau kemarin kan saya Nambah Breking news... kenapa Pengaturan logo (di tata letak dekat favicon) Tertutup ya... apa itu juga yang di maksud merubah tampilan nya mas?

Balas

Wah mas Aulia kemana aja nih hehehehe .... Iya mas...karena masih banyak yang kebingungan untuk merubah tampilan homepage blog.

Balas

Lalu mas aku yang mempengaruhi di bagian MANA ya mas... minta tolong bantuannya...Terimakasih :D

Balas

nnanti sy coba mas.. makasih :D

Balas

Ini yg saya tunggu2 makasi mas atas sharingnya, btw nggak ada demonya ya?

Balas
This comment has been removed by the author.

berhasil mas..thanks..:) oya agar kita membuat postingannya itu rata kiri kanan gimana mas..dan cara bikin antara postingan yang satu dengan yang lain terpisah..kayak punya nya mas kompi...terima kasih :)

Balas

Kalau saya malah tak rombak abis om..hahahaha..

Balas

Pada langkah pertama pada kode .post silahkan ganti margin:0 dengan kode di bawah ini

border:1px solid #111;margin-bottom:15px;text-align: justify;

dan kode border:none silahkan dihapus

Balas

Iya lah mas Panjz gitu hahahaha =))

Balas

100% berhasil mas...thanks sudah berbagi semua ilmunya...:) tinggal satu lagi yang saya mau rubah...untuk menghilangkan efek toggle pada sidebar template johny wusssssssssssss gimana ya mas ?? terima kasih...:)

Balas

Cari dan hapus kode di bawah ini

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('#sidebar .widget-content').hide();
$('#sidebar h2:first').addClass('active').next().slideDown('slow');
$('#sidebar h2').css('cursor', 'pointer').click(function() {
if($(this).next().is(':hidden')) {
$('#sidebar h2').removeClass('active').next().slideUp('slow');
$(this).toggleClass('active').next().slideDown('slow');
}
});
});
//]]>
</script>


Pada kode .sidebar h2 silahkan hapus kode ini
background-image:url(http://1.bp.blogspot.com/-9FCgC3SpZ00/UPMiEedG1VI/AAAAAAAACl0/zLgl3K6_d3I/s1600/arrow_right.gif);background-repeat:no-repeat;background-position:right center;

Kemudian kode ini hapus juga
h2.active{background:#1a4d86;background-image:url(http://2.bp.blogspot.com/-QB-QrnRTSJI/UPMiEYKozJI/AAAAAAAAClw/ieBOFWLIqlM/s1600/arrow_down.gif);background-repeat:no-repeat;background-position:right center}

Balas

Maaf yang terakhir yang ini
#sidebar h2.active{background:#1a4d86;background-image:url(http://2.bp.blogspot.com/-QB-QrnRTSJI/UPMiEYKozJI/AAAAAAAAClw/ieBOFWLIqlM/s1600/arrow_down.gif);background-repeat:no-repeat;background-position:right center}

Balas

yang terakhir ini dihapus juga ya mas... ??

Balas

maaf juga mas...saya ngerti maksudnya...hehehe

Balas

Iya mas karena togglenya udah dihapus, maka kode #sidebar h2.active sudah tidak digunakan.

Balas

oya untuk buat agar sidebarnya ada border gimana ??

Balas

Enak nih yg pakai template Jhony. udah ada yg bantuin modifikasi. Pasti banyak pahalanya sang admin blog ini :d

Balas

mbak Indah bisa aja, hanya berbagi pengalaman aja hehehe...

Balas

salam kenal mas kompi ajaib
wah keren nih mas,,,nanti deh saya coba mumpung lagi pakai johny wusss :)
owh ya minta tutorial cara mengganti breadcrumb dong mas biar diindeks google kayak blog mas ini,,

Balas

Itu pakai cara yang di sini neng http://www.kompiajaib.com/2012/11/membuat-breadcrumbs-di-blogger-agar-terindeks-google-v2.html

Balas

wah langsung ke tkp om

Balas

Johny Wuss banyak yang pake ya sob, tapi menurut saya kalau pertama kali buka / chacenya belum tersimpan, background content-wrappernya agak lambat, nunggu loading sidebar dulu.... btw nice tips sob.. intinya pengaturan tag kondisionalnya ya?

Balas

Ya begitu kang hehehe...

Balas

Thanks gann :)

http://bloggerjava.net

Balas

trima kasih mas admin tutorialnya sangat membantu sekali..

salam kenal mas sebelumnya

http://informasibloger.blogspot.com

Balas

Om adhy Help me please ini mungkin Kalo dikira om adhy gampang tapi bagi saya susah.. walaupun sudah be2rapa kali cuobak om... tolong y om kenapa label yang saya buat baru menjadi nempel ke kanan semua ya om makasih..

http://3.bp.blogspot.com/-37fiUD9_odc/UZ9BYPJg41I/AAAAAAAAC0U/kL6vgEPBC-s/s320/om+adhy+helpme.png

Terimakasih.. :( aku sedih om ga bisa bisa..

Balas

Oh ya om label nya pas di isi ga muncul :( tolong om... :(

Balas

ditunggu koreksinya mas...:)

http://zakkysoft18.blogspot.com/

Balas

Gambarnya kekecilan mas, saya ga bisa lihat heheheh, tapi kalau ga salah lihat iut mah gambar tata letak ya? maksudnya label postingan atau apa?

Balas

Sip mas, mantap hehehehe.... lanjuttt :D

Balas

label postingan mas adhy... kenapa mepet mepet ya.. :(

Balas

Sorry om gambar nya kekecilan ... :(

Balas

Itu sepertinya kode css untuk content-wrapper kehapus, coba lihat dan copu kode CSS untuk content-wrapper dari template aslinya mas, sementara itu aja dulu dan lihat apa yang terjadi.

Balas

Coba saja dulu mas, karena saya cari kode css untuk itu tidak ada sedangkan yang membungkus dari crosscol-wrapper sampai ke bawah adalah kode content-wrapper itu.

Balas
This comment has been removed by the author.

Mas kenapa tetep ngga bisa ya...

Apa ini mas ?

Ngomong ngomong d bagian mana sih mas contet wrapper di template asli maupun baru aku cari tetep ngga ada ?.. ada sih tapi bukan di ]]><b:skin. gmn mas :(

Balas

Maksudnya gini mas, copy lagi kode css content-wrapper dari template yang mas downlod dari maskolis.

Balas

Waduh pusing juga ya hehehe...gini aja mas, coba copy dulu isi gadget dari tata letak ke notepad setelah itu gadgetnya hapusin dulu, kemudian reload halaman dan coba isikan lagi isinya pada gadget html baru sesuai tempatnya, soalnya letak gadgetnya itu acak-acakan.

Balas

Gadget nya ud d hapus om...

Balas

mas saya udah edit template dari johny wusss, bisa bantu sempurnaiin nggak ? hehe

Balas

mantap nih mas, tapi saya gak pake template maskolis...itu yang div clas post-hentry maksudnya kode apa yang diganti mas ? imagenya juga gak berubah mas, trs saya pake readmore bawaan blogger gitu...tolong petunjuknya ya mas, hehe...

Balas

salam mas...
sebenarnya saya penggemar template johny (dan semua sekuelnya, hehe). Saya punya blog di http://portaldinamis.blogspot.com, templatenya masih standar2 aja mas, hehe gaptem (gagap template). Saya tertarik banget sama model blogposting homepage yang di template http://maskolis.blogspot.com dan template yang dipake blog Kisah Kisah Islami (http://kisahkisahislami.blogspot.com/). Saya pengen nanya nih mas :
1. Gimana mas cara buat blogposting homepagenya kayak kedua blog itu, maksud saya kode apa saja yang harus ditambah ? Kalo yang di maskolis.blogspot.com tampilan postingannya kan berbentuk kayak daftar gitu (bukan daftar utang lo mas, soalnya ada tanggal dan waktunya juga, hehe), nah kalo yang di www.kisahkisahislami.blogspot.com itu postingan homepagenya berbentuk kotak gitu, trs ada editor dan jumlah postnya di atas judul, udah sebulan ngedit blogposting homepagenya gak cocok2 juga (soalnya saya gak pake template edisi Johny mas, template standar blogger sih, hehe)....

2. Label yang di http://maskolis.blogspot.com untuk Tokoh Kita Hari Ini dan Alam Dan Jagad Raya itu gimana sih mas, saya pengeeeeeeeeeeennnnn banget punya label kayak gitu...soalnya blog saya untuk kebutuhan sendiri sih, hehehe
tolong petunjuknya dong mas...salam

Balas

Yang nomor 1 dulu ya mas
Kalau dilihat dri blog mas Robenito, sepertinya sama dimulai dari kode <div class='post hentry'
Coba cari templatenya di Maskolis yang mas maksud kemudian coba ikuti caranya yang di atas, cuman jangan asal copy paste harus lebih teliti tapi saya lihat langkah2nya sama aja. Tidak harus semua kode di copy biarkan kerangkanya dari template mas Robenito yang diganti hanya isinya aja (kerangka yang dimaksud kode yang diawali dengan <div ....)

Balas

Saya adalah blogger super pemula yang pakai template Johny wusss, karena saya bingung mas gimana seh edit menubarnya biar ada tombol searchnya trus ngatur kolom2 nya, hahaha saya pemula jd bingung, nih blog saya masih berantakan menubarnya linknya saya taruh di konversi kode tapi gtw nih muncul pa gak

Balas
This comment has been removed by the author.

Terimakasih sudah sharing gan. saya lagi cari2 template yang tepat untuk blog saya untuk di pakai seumur hidup rencananya.
saya juga mencari artikel tentang Cara Menggunakan Template Johny Wuss agar lebih mudah dalam menerapkan template ini.
Thanks ya.

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×