Cara Modifikasi Artikel Terkait Template Johny Wuss

Cara Modifikasi Artikel Terkait Template Johny Wuss - Banyak yang mengatakan “Pengunjung adalah Raja” pendapat ini memang benar adanya. Pengunjung adalah hal yang harus kita berikan kenyamanan saat mereka berkunjung di web atau blog kita. Dan di saat itu juga mereka akan memberikan pendapat tentang blog Anda.

Selain tampilan yang baik di mata pengunjung, mereka juga akan menilai apa saja yang mereka dapatkan dari berkunjung di blog Anda. Banyak sekali hal yang dapat Anda lakukan untuk memberikan kenyamanan terhadap pengunjung yang datang di blog Anda, salah satunya adalah memasang Artikel Terkait dengan Gambar Keren.
Mengapa harus dengan Gambar? Karena menurut banyak pendapat termasuk pendapat Saya, bahwa pengunjung akan lebih tertarik mengunjungi link terkait dengan menggunakan gambar di bandingkan dengan berupa link saja.

Artikel Terkait mempunyai fungsi untuk menampilkan artikel lain yang terkait sesuai label dengan postingan tersebut. Jadi, dengan adanya fitur artikel terkait di blog Anda memungkinkan pengunjung akan mendapatkan artikel lain yang mempunyai keterkaitan dengan artikel sebelumnya.
Jadi, artikel terkait memang wajib untuk Anda pasang di blog Anda. Untuk letak yang ideal Artikel Terkait adalah di bawah postingan.

Namun, untuk pertemuan kita kali ini Saya akan memberikan Cara Modifikasi Artikel Terkait Template Johny Wuss. Namun bagi Anda yang bukan pemakai template johny wuss, Anda masih dapat menggunakan cara ini untuk memasang artikel terkait di blog Anda.

Lalu, kenapa Anda ingin mengganti Artikel Terkait pada template johny wuss Anda? Jawabannya tidak lain karena tampilan artikel terkait pada bawaan template johny wuss mempunyai tampilan yang kurang menarik dan kurang terlihat karena artikel terkait bergabung menjadi satu dengan langganan entri hal ini mengakibatkan banyak pengunjung yang kurang tertarik untuk mengunjungi artikel yang berada di Artikel terkait.

Baiklah, kembali ke pembahasan kita sebelumnya untuk bagaimana Cara Modifikasi Artikel Terkait Template Johny Wuss. Cara ini hanya untuk memodifikasi Artikel Terkait pada Johny Wuss agar lebih menarik di mata pengunjung, bukan bermaksud untuk tidak menghargai karya maskolis selaku pembuat template.

Berikut merupakan langkah demi langkah Cara Modifikasi Artikel Terkait Template Johny Wuss :

• Login ke Akun Blogger Anda
• Setelah Masuk Dashbord, Temukan tulisan Template
• Setelah itu, klik Edit Template
• Cari kode ]]></b:skin> untuk lebih mempermudah proses pencarian, silahkan gunakan kombinasi CTRL+F untuk mengaktifkan fungsi Find
• Letakkan kode berikut tepat di atas kode ]]></b:skin>

#related-posts{float:center;height:160px;margin-bottom:10px; outline: 1px solid #fff;border: 1px solid #ddd;background: #f9fafb;} #related-posts h3{font-family: Francois One;font-size:20px;font-weight:400;color: #222222;margin-bottom: 0.5em;margin-top: 0.5em;margin-left: 0.5em;padding-top: 0em;} #related-posts ul{margin:5px;width:613px;padding-left:17px;list-style:none;display:block;} #related-posts ul li{list-style:none;position:relative;float:left;border:0 none;margin-right:11px;padding:4.5px;width:86px;} #related-posts ul li:hover{z-index:100} #related-posts ul li:hover img{border:3px solid #BBB} #related-posts ul li:hover div{font-size:7px;text-transform:capitalize;position:absolute;top:20px;left:-15px;margin-left:0;width:130px} #related-posts ul li img{border:3px solid #DDD;width:80px;height:80px;background:#FFF;display:block;} #related-posts ul li div{position:absolute;z-index:99;margin-left:-999em} #related-posts ul li .title{text-align:center;border:1px dotted #CCC;background:#fff;padding:5px 10px}

• Lanjut dengan menemukan kode

div class='clearfix' id='related'> <div class='related-posts'> <p> Related Articles</p> <br /> <script type='text/javascript'> var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLdamEYw4_SrrJZqeIuZcby5ScGlGw5k0rXKCIhqJqtVFjpr0nZAAugGOj5gQ0wj-pq91NCq5vpqkjrSD4m2EZf7TVw_b80b-mX63kIrTsReHhyvA6AD_OM9-MptPvA5mMFVW689wUzKE/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'/><br /> </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>

• Hapus kode tersebut dan ganti dengan kode berikut

<b:if cond='data:blog.pageType == "item"'> <div id='related-posts'>   <script type='text/javascript'>var ry='<h3> Baca yang ini juga :</h3> ';rn='<h3> No Related Posts </h3> ';rcomment='Comment';rdisable='Comments off';commentYN='yes';</script> <script type='text/javascript'> //<![CDATA[ var nothumb='http://lh4.ggpht.com/_u7a1IFxc4WI/TTjruHJjcfI/AAAAAAAAAk0/i11Oj6i_bHY/no-image.png';dw='';titles=new Array();titlesNum=0;urls=new Array();time=new Array();thumb=new Array();commentsNum=new Array();comments=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if('thr$total' in d){commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;time[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]=nothumb};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=time[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;time=e;thumb=f;commentsNum=g}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);time.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<ul>';while(b<titles.length&&b<20&&b<maxresults){if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+=' <li><a href="'+urls[c]+'" rel="nofollow"><img alt="'+titles[c]+'" src="'+thumb[c]+'"/></a><div class="title"> <a href="'+urls[c]+'" rel="nofollow"><h2> '+titles[c]+'</h2> </a><span>'+time[c].substring(8,10)+'/'+time[c].substring(5,7)+'/'+time[c].substring(0,4)+comments[c]+'</span></div> </li> ';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul> '};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('related-posts').innerHTML=dw}; //]]> </script> <b:loop values='data:post.labels' var='label'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels"' type='text/javascript'/> </b:loop> <script type='text/javascript'>var maxresults=5;removeRelatedDuplicates();printRelatedLabels('<data:post.url/>');</script> </div> <div style='clear both'/> </b:if> </b:if>

• Lanjut cari kode berikut, setelah itu hapus kode tersebut untuk menghindari duplicate artikel terkait

#related{background:#fff; border:1.5px solid #aaa;margin:0 0 5px;padding:10px} ul#related-posts{font:bold 11px Arial;list-style:none;text-transform:none;margin:10px 0;padding:0} #related .related-posts{font-weight:400;width:50%;float:right} #related .related-posts p{font:bold 14px Arial;margin:0} ul#related-posts li{float:left;height:auto;list-style-type:none;margin:0 5px;padding:2px 1px} *html ul.rp#related-posts li{margin:0 13px} ul#related-posts li a{-moz-box-shadow:0 1px 2px rgba(0,0,0,0.15);border:2px solid #aaa;display:block;height:72px;position:relative;width:72px;color:#fff;text-decoration:none;text-shadow:0 1px 0 #000;font:11px Arial} ul#related-posts li .overlay{height:66px;line-height:16px;position:absolute;width:66px;z-index:10;padding:6px 0 0 6px}<br /> ul#related-posts li a:hover .overlay{background:#000;display:block!important;opacity:0.7} ul#related-posts li img{bottom:0;padding:0!important} ul#related-posts li a:hover{-moz-box-shadow:0 1px 3px rgba(0,0,0,0.25)} #related .subscribe{width:43%;float:left;color:#333;} #related .subscribe p.intro{font-weight:400} #related .subscribe p.feed{margin-bottom:10px;font-weight:700;padding-left:21px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHOgVyY6HuLXEOP9eqv9mURhbihHZwPdNxzgSzWLTlB8R4SQ1BDGueJvnvRbg20aD0Cqf754hRZghsFIuFhCagaE4GTqkF_Pdb_cri4pOqTkf7IVrM7MmCc6xtubJOoQPKjsKLxf3jmx8/s1600/feed+icon.gif) 0 50% no-repeat;vertical-align:middle}

• Terakhir, silahkan klik Simpan Template/Save Template

Coba lihat hasilnya, berhasil bukan? Jika terdapat masalah untuk template Anda silahkan memberikan keluhan Anda di kotak komentar di bawah ini. Terima kasih!

Mungkin hanya sampai di sini saja pertemuan kita kali ini tentang Cara Modifikasi Artikel Terkait Template Johny Wuss. Semoga pada pertemuan kita kali ini dapat memberikan jawaban untuk kesulitan Anda. Jangan lupa untuk memberikan komentar Anda tentang artikel di atas gan...

Sumber