November 12, 2013

Modifikasi Template Johny Wuss: Mengubah Related Articles

November 12, 2013

Modifikasi Template Johny Wuss: Mengubah Related Articles
CONTOHBLOG (CB) suka banget dengan template Johny Wusss atau Johny Wuss, juga template buatan Mas Kolis lainnya.

Namun, untuk template Johny Wuss, CB kurang berkenan dengan tampilan "Related Articles" yang berupa thumbnail (gambar).

CB pun mencoba memodifikasi template Johny Wuss ini dengan mengubah "Related Articles" menjadi berupa list judul posting tanpa gambar.

Alasannya, tampilan related post atau posting terkait berupa gambar kurang menarik/kurang diperhatikan oleh pembaca. Menurut hasil penelitian Jakob Nielsen, mayoritas pembaca website (blog) melihat teks, bukan gambar/foto.

Atas pertimbangan  tersebut, maka CB pun mengubah tampilan related posts di blog ini menjadi "full text", tanpa gambar.

CARA MENGUBAH "RELATED ARTICLES"
Jika Anda pengguna Johny Wuss dan ingin mengubah tampilan Related Articles-nya menjadi hanya "daftar judul posting" saja, maka langkahnya sebagai berikut:

1. Template >> Edit HTML
2. Copy kode di bawah ini dan Paste di atas kode </head>

<style>
#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 10px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
color : #940f04;
font-size : 15px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
color : #054474;
font-size : 10px;
text-decoration : none;
}
#related-posts a:hover {
color : #054474;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url("http://www.dogphilosophy.net/graphics/sample1.jpg") no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}
</style>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>

3. Cari kode di bawah ini:

<script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-5156a09e76c1568f' type='text/javascript'/>
</div>

<div class='clearfix' id='related'>
<div class='related-posts'>
<p>Related Articles</p>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVQwQLvwIZ8BLAw0buAtKuPMxfYT9EXRGbFrUYzjWnBSWSnluKanZn6oiQ-0hq801r15hKBSniokrQsrnr4wIKOcVzjNYAFRRFbspjf8mf2oHNuH6NJ8TnRQMT6zOB2YU-sMTwA5h740U/s1600/no+image.jpg&quot;;
var maxresults=6;
</script>
<script src='http://yourjavascript.com/1198561349/relatedimg.js' type='text/javascript'/>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/>
</b:loop>

<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>                 
</div>

<div class='subscribe'>
<p class='intro'>If you enjoyed this article just <a href='http://feeds.feedburner.com/JohnyTemplate' target='_blank' title='feedburner'>
<b>click here</b></a>, or subscribe to receive more great content just like it.</p>
<p class='feed'><a href='http://johnytemplate.blogspot.com/feeds/posts/default'>Subscribe via RSS Feed</a></p>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=JohnyTemplate&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='JohnyTemplate'/>
<input name='loc' type='hidden' value='en_US'/>
<input id='botsub' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email&quot;;}' onfocus='if (this.value == &quot;Enter your email&quot;) {this.value = &quot;&quot;;}' type='text' value='Enter your email....'/>
<input id='botsubbutton' type='submit' value='Submit'/><br/>
<small>Your information will not be shared. Ever.</small><br/>
<a href='http://feeds.feedburner.com/JohnyTemplate'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/JohnyTemplate?bg=0F61CB&amp;fg=222222&amp;anim=1' style='border:0' width='88'/></a>
</form>
</div>
</div>

</b:if>
    <b:if cond='data:post.hasJumpLink'>

4. REPLACE kode berwarna biru dengan kode di bawah ini

<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<h2>Related Posts on <b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10&quot;' type='text/javascript'/></b:if></b:loop> </h2>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script>
</div></b:if>

5. Save Template!

Previous
« Prev Post
Author Image

Romeltea

Recommended Posts

Related Posts

Show comments
Hide comments

22 comments on Modifikasi Template Johny Wuss: Mengubah Related Articles

  1. Replies
    1. sama-sama.... (CB Blogger)

      Delete
  2. Bagaimana mau membuang script RELATED ARTICLES Johny WUSS?

    ReplyDelete
    Replies
    1. Cari dan hapus semua kode yang mengandung kata "related-posts".... (CB Blogger)

      Delete
  3. Wih.. mantep template nya gan..

    kang-sofyan.blogspot.com

    ReplyDelete
    Replies
    1. terima kasih atas kunjungannya.... (CB Blogger)

      Delete
  4. wah mantep gan,,tapi ni msh bingung di peletakan widget histats biar rapi gmn gan ????

    ReplyDelete
    Replies
    1. Pilih ukuran yang sesuai dengan sidebar. Saran ane sih, gak usah pasang histats, bikin loading blog jadi berat.... toh blog sudah nyediain statistik kunjungan yang lebih akurat.... (menu stat di dashboard)

      Delete
  5. Salam Kenal Gan...
    mohon bantuan cara edit template johny wuss ini yang juga saya pakai di blog saya :
    http://bisnistanpamodals.blogspot.com/

    tolong penjelasan solusi bagaimana :
    1. cara memberi gambar pada sebelah kanan header judul blog ? seperti blog ini yang diisi iklan
    2. widget random post saya tidak berfungsi ?
    3. saya menambah widget statistik kunjungan blogger tapi tidak muncul ?
    4. membuat kolom komentar seperti blog ini juga gan ,

    terima kasih

    ReplyDelete
    Replies
    1. kenal kembali....
      1. Ada di Dashboard --> Layout --> Add Gadget atas kanan (samping logo header)
      2. Ganti saja dengan Gadget lain (biar mudah, he he...).
      3. Widgetnya simpan di urutan keempat setelah Widget bawaan Johny Wuss
      4. Settinggan di Dashboard --> Setting --> Post and Comment, dan nanti setiap posting baru cek "Allow comment"/bolehkan komentar.
      Good luck....! Selengkapnya bisa tanya langsung sing desainer Johny Wuss ya....

      Delete
  6. makasi infonya gan, oa gan biasanya blog baru dibuat berapa hari teindex google, ? i'm new bloger

    ReplyDelete
    Replies
    1. tidak tentu, Google hanya bilang "as soon as possible", jadi tergantung "kesibukan indeks google" dan kualitas blog/posting.... thanks sudah berkunjung....

      Delete
  7. mau tanya ni mas,mohon maaf sebelumnya kalog pertanyaanx paradok dengan artikel yg disajikan,,,
    kebetulan sekarang saya pakek template johny wuss besutan maskolis, di bagian tatak letak postnya saya setting untuk tampil 10 post,, tapi kog yang tampil cuma 9 ya,,, mohon pencerahannya,,,,,

    ReplyDelete
    Replies
    1. Wah, iya tuh aneh juga ya.... Mungkin pengaruh modifikasi, coba test dulu dengan ganti template, nanti kembali lagi ke Johny Wuss... atau ganti dulu dengan template johny wuss yang asli....

      Delete
  8. mas mau tanya nih, kan itu di samping ada menu Populer post dan sebagainya. punyaku kok gak bisa di klik trs bisa hide and show ya ? tolong pencerahannya mas :)

    ReplyDelete
  9. Gan, ane mau nanya ni giana caranya ganti judul blog dengan gambar sendiri di template Johny Sompret Banget tolong bantuannya gan.. dan terima kasih sebelumnya

    ReplyDelete
    Replies
    1. waduh... gak salah nih tanya ke CB... kenapa gak ke desainernya langsung (Maskolis/Mastemplate)....? Header itu ada di "header section" dan/atau di Layout > Gadger Header

      Delete
  10. 3 Minggu dah cari2 triknya yang ada malah hancur related artikelnya...baru tips ini berhasil makasih banyak bos..salam hormat dari blog pendidikan kami http://kkgjaro.blogspot.com

    ReplyDelete
    Replies
    1. sama-sama, good luck........!

      Delete
  11. sip .. . makasih boss, akhirnya bisa .. . kmrn sempet hilang related artikel yang bawaan johny wuzz. Tp skrg dah tak ganti ikut langkah2 diatas hehehhehe

    ReplyDelete
    Replies
    1. masa sih Master Tutor gak bisa ngatasi :)

      Delete
  12. Makasih mas Johny Wusss,,,
    Anda memang kereeennnn adanya,,,,

    ReplyDelete

Contact Form

Name

Email *

Message *