Car Membuat List Related Post Dibawah Postingan Blogger Car Membuat List Related Post Dibawah Postingan Blogger - mizipediacom mizipediacom: Car Membuat List Related Post Dibawah Postingan Blogger

Iklan Semua Halaman

Car Membuat List Related Post Dibawah Postingan Blogger

Sabtu, 02 September 2017



Car Membuat List Related Post Dibawah Postingan Blogger


Siang ini saya akan membahas cara membuat related post atau sering disebut artikel terkait pada blog, yang nantiya akan diletakkan di bawah postingan. jika mau demonya anda bisa melihat di bawah postingan blog saya.

Nah untuk Related post yang akan kita buat pada siang ini adalah related post list dengan thumbnail. Untuk penampakanya kurang lebih seperti gambar di atas.

Fungsi dari Related post tersebut adalah dapat juga menaikkan page view blog kita, jadi jika anda ingin Untuk memasangnya maka anda bisa ikuti penjelasan di bawah ini

Car Membuat List Related Post Dibawah Postingan Blogger

1. Terlebih dahulu pastikan anda sudah masuk di dasbhor milik anda sendiri
2. Masuk pada bagian editor template , caranya pilih Menu Template -> Edit HTML.
3. Karena related post ini terdapat font awesome silahkan pasang script font awesome terlebih dahulu, jika sudah ada bisa anda lewatkan saja
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' rel='stylesheet'/>
4. Kemudian salin dan tempelkan kode berikut sebelum ]]></b:skin> atau </style>
#related_posts{margin:20px 0;font-size:100%;font-weight:normal;line-height:150%;padding:0 0 10px 0;overflow:hidden;box-shadow:inset 0 0 0 1px #e9e9e9}
#related_posts h4{font-size:14px;margin:0 0 10px 0;background:#4f93c5;color:#fff;padding:15px 20px;font-weight:700;position:relative;text-align:left;text-transform:uppercase;overflow:hidden}
#related_posts h4::after{display:inline-block;content:"\f02c";font-family:fontAwesome;font-style:normal;font-weight:normal;font-size:18px;background-color:#4786b5;color:#fff;top:0;right:0;padding:16px 20px;position:absolute}
#related_img{margin:0;padding:0 10px}
#related_img:hover{background:0}
#related_img ul{list-style-type:none;margin:0;padding:0}
#related_img li{min-height:62px;border-bottom:1px solid rgba(0,0,0,0.1);list-style:none;margin:0 0 5px;padding:5px}
#related_img li a{color:#444;font-size:14px}
#related_img li a:hover{text-decoration:underline}
#related_img .news-title{display:block;font-weight:bold!important;margin-bottom:5px;font-size:14px}
#related_img .news-text{display:block;font-weight:normal;text-transform:none;color:#888;font-size:11px}
#related_img img{background:#fafafa;float:left;margin-right:10px;width:60px;height:60px;max-width:100%}
ul#related_img li:last-child{border:0}
5. Kemudian anda pasang kode berikut sesudah/ didalam <div class='post-footer'> atau <div class='post-footer-line post-footer-line-1'> atau <div class='post-footer-line post-footer-line-2'> dan seterusnya. Atau juga bisa dibawah kode <data:post.body/> anda bisa sesuaikan posisi related post yang ingin anda letak.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related_posts'>
  <h4><span> Related Posts</span></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=relpostimgthum&amp;max-results=50&quot;' type='text/javascript'/>
</b:loop>
<ul id='related_img'>
<script type='text/javascript'>relatpost();</script>
</ul>
</div>
<div style='clear:both'/>
</b:if>
6. Tahapan terakhir anda Pasang scipt berikut sebelum </head>
<script type='text/javascript'>/*<![CDATA[*/var relnum=0;var relmaxposts=5;var numchars=135;var morelink=" ";function saringtags(r,l){for(var e=r.split("<"),n=0;n<e.length;n++)-1!=e[n].indexOf(">")&&(e[n]=e[n].substring(e[n].indexOf(">")+1,e[n].length));return e=e.join(""),e=e.substring(0,l-1)}function relpostimgthum(r){for(var l=0;l<r.feed.entry.length;l++){var e=r.feed.entry[l];reljudul[relnum]=e.title.$t,postcontent="","content"in e?postcontent=e.content.$t:"summary"in e&&(postcontent=e.summary.$t),relcuplikan[relnum]=saringtags(postcontent,numchars),postimg="media$thumbnail"in e?e.media$thumbnail.url:"http://lh3.ggpht.com/_xcD4JK_dIjU/SnamIh0KTCI/AAAAAAAADMA/hLjqmEbdtkw/d/noimagethumb.gif",relgambar[relnum]=postimg;for(var n=0;n<e.link.length;n++)if("alternate"==e.link[n].rel){relurls[relnum]=e.link[n].href;break}relnum++}}function contains(r,l){for(var e=0;e<r.length;e++)if(r[e]==l)return!0;return!1}function relatpost(){for(var r=new Array(0),l=new Array(0),e=new Array(0),n=new Array(0),t=0;t<relurls.length;t++)contains(r,relurls[t])||(r.length+=1,r[r.length-1]=relurls[t],l.length+=1,l[l.length-1]=reljudul[t],e.length+=1,e[e.length-1]=relcuplikan[t],n.length+=1,n[n.length-1]=relgambar[t]);reljudul=l,relurls=r,relcuplikan=e,relgambar=n;for(var t=0;t<reljudul.length;t++){var a=Math.floor((reljudul.length-1)*Math.random()),u=reljudul[t],s=relurls[t],i=relcuplikan[t],o=relgambar[t];reljudul[t]=reljudul[a],relurls[t]=relurls[a],relcuplikan[t]=relcuplikan[a],relgambar[t]=relgambar[a],reljudul[a]=u,relurls[a]=s,relcuplikan[a]=i,relgambar[a]=o}for(var g,m=0,h=Math.floor((reljudul.length-1)*Math.random()),c=h,d=document.URL;m<relmaxposts&&(relurls[h]==d||(g="<li class='news-title clearfix'>",g+="<a href='"+relurls[h]+"' rel='nofollow' target='_top' title='"+reljudul[h]+"'><img src='"+relgambar[h]+"' /></a>",g+="<a href='"+relurls[h]+"' target='_top'>"+reljudul[h]+"</a>",g+="<span class='news-text'>"+relcuplikan[h]+" ... <a href='"+relurls[h]+"' target='_top'>"+morelink+"</a><span class='news-text'>",g+="</li>",document.write(g),m++,m!=relmaxposts))&&(h<reljudul.length-1?h++:h=0,h!=c););}var reljudul=new Array,relurls=new Array,relcuplikan=new Array,relgambar=new Array;/*]]>*/</script>
7. Langkah terakhir anda klik save, dan lihat hasilnya.
Demikian penjelasan siang ini semoga bermanfaat untuk anada, jika kurang je;las anda dapt klik komentar di bawha ini. saya akan membantu anda.
Baca Juga