Car Membuat List Related Post Dibawah Postingan Blogger




Car Membuat List Related Post Dibawah Postingan Blogger

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.

Share Google URL Shortener: Get Short URLloading short url

Bila Anda merasa memang artikel-artikel di blog ini bisa bermanfaat, maka Anda bisa membantu memberikan donasi melalui Paypal Dana hasil dari donasi akan digunakan untuk memperpanjang domain mizipedia.com - Terima kasih.



Comment Policy Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Peraturan Berkomentar di mizipediacom
1. Berkomentarlah dengan Relevan dan Sopan
2. Jangan Spam
3. Tidak Porn dan Sara
4. Berkomentar dengan link tanpa relevan maka akan otomatis terhapus
5. Semua komentar pasti akan saya baca dan dibalas. Show Emoticon. Klik ==>


Join on this site

with Google Friend Connect