Modifikasi Template Johny Wuss: Mengubah Related Articles
November 12, 2013
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>
3. Cari kode di bawah ini:
4. REPLACE kode berwarna biru dengan kode di bawah ini
5. Save Template!
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>
#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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVQwQLvwIZ8BLAw0buAtKuPMxfYT9EXRGbFrUYzjWnBSWSnluKanZn6oiQ-0hq801r15hKBSniokrQsrnr4wIKOcVzjNYAFRRFbspjf8mf2oHNuH6NJ8TnRQMT6zOB2YU-sMTwA5h740U/s1600/no+image.jpg";
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 != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</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('http://feedburner.google.com/fb/a/mailverify?uri=JohnyTemplate', 'popupwindow', 'scrollbars=yes,width=550,height=520');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 == "") {this.value = "Enter your email";}' onfocus='if (this.value == "Enter your email") {this.value = "";}' 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&fg=222222&anim=1' style='border:0' width='88'/></a>
</form>
</div>
</div>
</b:if>
<b:if cond='data:post.hasJumpLink'>
</div>
<div class='clearfix' id='related'>
<div class='related-posts'>
<p>Related Articles</p>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVQwQLvwIZ8BLAw0buAtKuPMxfYT9EXRGbFrUYzjWnBSWSnluKanZn6oiQ-0hq801r15hKBSniokrQsrnr4wIKOcVzjNYAFRRFbspjf8mf2oHNuH6NJ8TnRQMT6zOB2YU-sMTwA5h740U/s1600/no+image.jpg";
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 != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</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('http://feedburner.google.com/fb/a/mailverify?uri=JohnyTemplate', 'popupwindow', 'scrollbars=yes,width=550,height=520');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 == "") {this.value = "Enter your email";}' onfocus='if (this.value == "Enter your email") {this.value = "";}' 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&fg=222222&anim=1' style='border:0' width='88'/></a>
</form>
</div>
</div>
<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 != "true"'>,</b:if><b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=10"' type='text/javascript'/></b:if></b:loop> </h2>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script>
</div></b:if>
<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 != "true"'>,</b:if><b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=10"' type='text/javascript'/></b:if></b:loop> </h2>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script>
</div></b:if>
5. Save Template!
Previous
« Prev Post
« Prev Post
Next
Next Post »
Next Post »
Terima kasih gan ...
ReplyDeletesama-sama.... (CB Blogger)
DeleteBagaimana mau membuang script RELATED ARTICLES Johny WUSS?
ReplyDeleteCari dan hapus semua kode yang mengandung kata "related-posts".... (CB Blogger)
DeleteWih.. mantep template nya gan..
ReplyDeletekang-sofyan.blogspot.com
terima kasih atas kunjungannya.... (CB Blogger)
Deletewah mantep gan,,tapi ni msh bingung di peletakan widget histats biar rapi gmn gan ????
ReplyDeletePilih 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)
DeleteSalam Kenal Gan...
ReplyDeletemohon 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
kenal kembali....
Delete1. 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....
makasi infonya gan, oa gan biasanya blog baru dibuat berapa hari teindex google, ? i'm new bloger
ReplyDeletetidak tentu, Google hanya bilang "as soon as possible", jadi tergantung "kesibukan indeks google" dan kualitas blog/posting.... thanks sudah berkunjung....
Deletemau tanya ni mas,mohon maaf sebelumnya kalog pertanyaanx paradok dengan artikel yg disajikan,,,
ReplyDeletekebetulan 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,,,,,
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....
Deletemas 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 :)
ReplyDeleteGan, ane mau nanya ni giana caranya ganti judul blog dengan gambar sendiri di template Johny Sompret Banget tolong bantuannya gan.. dan terima kasih sebelumnya
ReplyDeletewaduh... 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
Delete3 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
ReplyDeletesama-sama, good luck........!
Deletesip .. . makasih boss, akhirnya bisa .. . kmrn sempet hilang related artikel yang bawaan johny wuzz. Tp skrg dah tak ganti ikut langkah2 diatas hehehhehe
ReplyDeletemasa sih Master Tutor gak bisa ngatasi :)
DeleteMakasih mas Johny Wusss,,,
ReplyDeleteAnda memang kereeennnn adanya,,,,