Sunday 19 June 2016

Cara Membuat Artikel Terkait tanpa Gambar

Selamat datang kembali di Demo IdBoegis, Blog yang membahas seputar Tips Adsense, Tips Komputer, Tutorial Blog, SSH Gratis, Tips Youtube, Tips Smartphone dan informasi internet lainnya.

Pada Artikel kali ini kita akan membahas Cara Membuat Artikel Terkait tanpa Gambar, Postingan ini masih berhubungan dengan Artikel Tutorial Blog. Artikel Widget.

Cara Membuat Artikel Terkait tanpa Gambar

Advertisement
Cara memasang atau membuat Artikel terkait/ Related Posts di blog - Banyak para blogger yang sudah membagikan cara membuat Artikel terkait di bawah postingan blog, namun tidak ada salahnya juga apabila saya juga ikut serta membagikannya. Cara yang akan saya bagikan ini adalah cara yang saya rekomendasikan untuk teman-teman blogger khususnya pemula, di samping tampilannya yang sederhana, cara ini juga baik di gunakan karena tidak menghambat loading blog sobat. Sebelum kita masuk ke langkah-langkah pemasangannya, mungkin ada baiknya kita mengetahui apa sih kegunaan atau keuntungan dari memasang Artikel terkait di bawah postingan blog? Berikut jawabanya :
"Artikel terkait adalah salah satu widget yang berfungsi untuk memberikan penawaran artikel lain kepada pengunjung blog sehingga diharapkan pengunjung menemukan artikel yang merek cari dengan judul terkait, dan tentunya juga akan membuat para pengunjung lebih lama berada di blog kita."
Langsung saja, kali ini saya akan memberikan 2 cara mudah untuk membuat Artikel Terkait di bawah artikel blog sobat, silahkan ikuti langkah-langkah di bawah ini :

Cara Membuat Artikel Terkait tanpa Gambar

Cara Membuat Artikel Terkait tanpa Gambar

Cara Pertama :
1. Silahkan masuk ke blog sobat masing-masing.
2. Pilih Template --> edit HTML
Note : Silahkan backup terlebih dahulu template sobat sebelum melakukan pengeditan guna mengantisipasi apabila terjadi error.

3. Silahkan cari kode </head> gunakan CTRL+F untuk memudahkan pencarian.
Apabila sudah ketemu, letakkan kode di bawah ini tepat di atasnya kode </head>
 <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>

4. Kemudian silahkan cari kode berikut <data:post.body/> dan letakkan kode di bawah ini tepat di bawah kode <data:post.body/>
 <b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<h4>Artikel Terkait</h4>
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
</b:if>
5. Silahkan simpan dan lihat hasinya :)


Cara Kedua :
1. Silahkan masuk ke blog sobat masing-masing.
2. Pilih Template --> edit HTML
Note : Silahkan backup terlebih dahulu template sobat sebelum melakukan pengeditan guna mengantisipasi apabila terjadi error.

3. Silahkan cari kode ]]></b:skin> gunakan CTRL+F untuk memudahkan pencarian.
Apabila sudah ketemu, letakkan kode di bawah ini tepat di atasnya kode ]]></b:skin>
 #related-posts{float:left;width:100%;border-bottom:0px solid #888;border-top:0px solid #88daed;margin:5px 0 10px;padding:15px 0 10px}
#related-posts .widget h2,#related-posts h3{font:18px Oswald;color:#000;text-transform:none;margin:0 0 10px;padding:0}
#related-posts a{color:#0973CF;font:12px Verdana}
#related-posts li{background:url(http://2.bp.blogspot.com/-EcBIblBtYTQ/TqALuRS_IzI/AAAAAAAAAx0/E-vzWTTOgXs/s1600/bullet-list.gif) no-repeat 0 10px;text-indent:0;line-height:1.3em;border-bottom:1px dotted #ccc;margin:0;padding:3px 0 8px 12px}
#related-posts a:hover{color:#c00;text-decoration:none}
#related-posts .widget{margin:0;padding:0}
#related-posts ul{list-style:none;margin:0;padding:0}

4. Cari kode </head> dan letakkan kode di bawah ini tepat di atasnya kode </head>
 <script type='text/javascript'>
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];relatedTitles[relatedTitlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if(d.link[a].rel=="alternate"){relatedUrls[relatedTitlesNum]=d.link[a].href;relatedTitlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);var c=new Array(0);for(var a=0;a<relatedUrls.length;a++){if(!contains(b,relatedUrls[a])){b.length+=1;b[b.length-1]=relatedUrls[a];c.length+=1;c[c.length-1]=relatedTitles[a]}}relatedTitles=c;relatedUrls=b}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<relatedUrls.length;b++){if(relatedUrls[b]==a){relatedUrls.splice(b,1);relatedTitles.splice(b,1)}}var c=Math.floor((relatedTitles.length-1)*Math.random());var b=0;if(relatedTitles.length>1){document.write("<h3>"+relatedpoststitle+"</h3>")}document.write("<ul>");while(b<relatedTitles.length&&b<20&&b<maxresults){document.write('<li><a href="'+relatedUrls[c]+'">'+relatedTitles[c]+"</a></li>");if(c<relatedTitles.length-1){c++}else{c=0}b++}document.write("</ul>");relatedUrls.splice(0,relatedUrls.length);relatedTitles.splice(0,relatedTitles.length)};
//]]>
</script>

5. Kemudian silahkan cari kode berikut <data:post.body/> dan letakkan kode di bawah ini tepat di bawah kode <data:post.body/>
 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=8&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var maxresults=6;
removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;);
</script>
</div><div class='clear'/>
</b:if>

6. Simpan dan lihat hasilnya, Selamat mencoba, semoga bermanfaat :)


EmoticonEmoticon