membuat artikel terkait dengan gambar

www.caraeco.com-postingan berikut ini merupakan lanjutan dari postingan saya sebelumnya yaitu 
CARA MUDAH MEMBUAT ARTIKEL TERKAIT DI BAWAH POSTINGAN silahkan klik saja linknya untuk membaca jika kamu belum membacanya jika sudah mari kita lanjutkan bagaimana membuat artikel terkait dengan gambar.tidak beda jauh caranya dengan artikel sebelumnya hanya saja di sini ada tambahan kode yang di letakakn di atas kode <head> dan berikut ini adalah gambaran hasil setelah anda menggantinya.
membuat artikel terkait dengan gambar

cukup bagus bukan artikel terkait yang ada pada gambar dan berikut ini adalah cara membuat artikel terkait dengan gambar:


lansung pada intinya, Inilah langkah-langkah untuk membuat related artikel :
1. Sebelum edit html, backup terlebih dahulu template
2. Masuk ke template --> edit html dan cari Pasang kode berikut sebelum kode </head>

<script type='text/javascript'>
//<![CDATA[
/*
Related Post with Thumbnail & Summary 1.0 (http://www.caraeco.com)
*/
var relnojudul = 0;
var numpost = 10;
var numchars = 155;
var reljudul=new Array();var relurls=new Array();var relcuplikan=new Array();var relgambar=new Array();function saringtags(g,h){var e=g.split("<");for(var f=0;f<e.length;f++){if(e[f].indexOf(">")!=-1){e[f]=e[f].substring(e[f].indexOf(">")+1,e[f].length)}}e=e.join("");e=e.substring(0,h-1);return e}function relpostimgcuplik(h){for(var e=0;e<h.feed.entry.length;e++){var g=h.feed.entry[e];reljudul[relnojudul]=g.title.$t;postcontent="";if("content" in g){postcontent=g.content.$t}else{if("summary" in g){postcontent=g.summary.$t}}relcuplikan[relnojudul]=saringtags(postcontent,numchars);if("media$thumbnail" in g){postimg=g.media$thumbnail.url}else{postimg="http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.GIF"}relgambar[relnojudul]=postimg;for(var f=0;f<g.link.length;f++){if(g.link[f].rel=="alternate"){relurls[relnojudul]=g.link[f].href;break}}relnojudul++}}function contains(a,e){for(var f=0;f<a.length;f++){if(a[f]==e){return true}}return false}function artikelterkait(){var v=new Array(0);var w=new Array(0);var x=new Array(0);var A=new Array(0);for(var u=0;u<relurls.length;u++){if(!contains(v,relurls[u])){v.length+=1;v[v.length-1]=relurls[u];w.length+=1;w[w.length-1]=reljudul[u];x.length+=1;x[x.length-1]=relcuplikan[u];A.length+=1;A[A.length-1]=relgambar[u]}}reljudul=w;relurls=v;relcuplikan=x;relgambar=A;for(var u=0;u<reljudul.length;u++){var B=Math.floor((reljudul.length-1)*Math.random());var i=reljudul[u];var s=relurls[u];var y=relcuplikan[u];var C=relgambar[u];reljudul[u]=reljudul[B];relurls[u]=relurls[B];relcuplikan[u]=relcuplikan[B];relgambar[u]=relgambar[B];reljudul[B]=i;relurls[B]=s;relcuplikan[B]=y;relgambar[B]=C}var r=0;var D=Math.floor((reljudul.length-1)*Math.random());var z=D;var q;var t=document.URL;while(r<numpost){if(relurls[D]!=t){q="<li class='news-title clearfix'>";q+="<a href='"+relurls[D]+"' rel='nofollow' target='_top' title='"+reljudul[D]+"'><div class='overlayb'></div><img src='"+relgambar[D]+"' /></a>";q+="<a class='relinkjdulx' href='"+relurls[D]+"' target='_top'>"+reljudul[D]+"</a>";q+="<span class='news-text'>"+relcuplikan[D]+"</span>";q+="</li>";document.write(q);r++;if(r==numpost){break}}if(D<reljudul.length-1){D++}else{D=0}if(D==z){break}}};
//]]>
    </script>
Keterangan :  
var numpost = 10; --> 10 artikel terkait yang ditampilkan dan bisa diubah menurut selera
var numchars = 155; --> 155 karakter huruf yang ditampilkan sebagai summary dari artikel terkait dan bisa diubah
3. Masuk ke template editor cari kode </b:skin> dan masukkan kode berikut sebelum </b:skin>
#related_posts{padding:5 5px 5px;overflow:hidden;display:inline;}#related_posts h4{padding:5px;font-size:8px;text-align:left}ul#relpost_img_sum{margin:0;padding:0;text-align:justify;display:inline;}ul#relpost_img_sum li{list-style:none;padding:5px;margin:0;width:600px;float:left;display:inline;}ul#relpost_img_sum li a{display:block}ul#relpost_img_sum li img{float:left;width:60px;height:60px;margin-right:5px;padding:2px;background-color:#1B1B1B;border:1px solid #cacaca}
ul#relpost_img_sum li a.relinkjdulx{display:block;height:30px;overflow:hidden;margin-bottom:3px;background-image:none;font-weight:bold;text-decoration:none;background:#FFFF99;}
sesuaikan kondisi berikut dengan template anda : 
--> font size 8px,  
--> dan width:600px ---> lebar template laman artikel

4. cari kode dan masukkan kode berikut setelah data:post.body
<div id='related_posts'>
          <h4>Related Posts</h4>
          <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=relpostimgcuplik&amp;max-results=50&quot;' type='text/javascript'/>
          </b:loop>
          <ul id='relpost_img_sum'>
               <script type='text/javascript'>artikelterkait();</script>
          </ul><a href=”http://www.ublogger.net”>.</a>
</div>
nah mudah bukan membuat artikel terkait dengan gambar,untuk keterangan yang kurang anda pahami silahkan anda berkomentar dan mudah - mudahan artikel ini bisa menambah refrensi anda dalam mencari sebuah artikel tentang tutorial blogspot,semoga bermanfaat.

0 Response to "membuat artikel terkait dengan gambar"

Posting Komentar