 |
| Cara Membuat Artikel Terkait di Bawah Postingan Blog |
Adapun itu kami bagikan Cara Membuat Related Post di Bawah Postingan Blog ini dengan tujuan untuk membantu perkembangan situs web atau blog yang anda kelola, salah satu nya adalah meningkatkan page view secara tidak langsung, dan hal ini mampu meningkatkan kinerja SEO blog anda, karena beberapa referensi membuktikan Related Post dapat menurunkan bounce rate.
Cara Membuat Related Post di Bawah Postingan Blog
1. Login ke Blogger
2. Klik Tema atau Template
3. Klik Edit HTML ( untuk Blogger versi lama )
Untuk Blogger versi Baru, klik tombol , kemudian klik Edit HTML ( Lihat Gambar )
 |
| Ilustrasi Blogger versi Terbaru |
</b:skin> /* RELATED POST By. OKEGUGEL */
.related-post-style-3 .related-post-item{transition:opacity .2s linear}.related-post-item-thumbnail{border-radius:3px}.related-post{margin:30px auto 0;overflow:hidden}.related-post h4{position:relative;margin:0;display:inline-block;font-weight:700;color:#333333;text-transform:uppercase;font-size:16px;z-index:1;background:#dbdbdb;padding:0 10px}.related-post ul{padding:0!important;font-size:14px}.related-post-style-3,.related-post-style-3 li{margin:0;padding:0;list-style:none;word-wrap:break-word;overflow:hidden}.related-post-style-3 .related-post-item{float:left;width:23.5%;height:auto;margin-right:2%;margin-bottom:10px}.related-post-style-3 .related-post-item:nth-of-type(4n+0){margin-right:0}.related-post-style-3 .related-post-item:nth-of-type(4n+1){clear:both}.related-post-style-3 .related-post-item:hover{opacity:.7}.related-post-style-3 .related-post-item-thumbnail{display:block;max-height:none;background-color:transparent;border:none;padding:0;max-width:100%}.related-post-style-3 .related-post-item-title{color:#444}.related-post-style-3 .related-post-item-tooltip{padding:10px 0}.related-post-item-tooltip .related-post-item-title{font-weight:700;display:block}@media only screen and (max-width:480px){.related-post-style-3 .related-post-item{width:48%;margin-right:4%}.related-post-style-3 .related-post-item:nth-of-type(2n+0){margin-right:0}.related-post-style-3 .related-post-item:nth-of-type(2n+1){clear:both}}.label-line-c{position:relative}.label-line-c{text-align:center;margin-bottom:6px}.label-line-c::before{z-index:1;content:"";width:100%;height:2px;background:$(label.border.color);position:absolute;top:50%;left:0;margin-top:-2px}5. Kemudian cari Kode
<b:includable id='threaded_comments' var='post'>
atau sejenisnya...6. Tempelkan Kode berikut tepat di atas kode di atas
<b:includable id='artikelterkait' var='post'>
<div class='related-post' expr:id='"related-post-" + data:post.id'/>
<script>
var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>"<data:label.name/>"<b:if cond='data:label.isLast != "true"'>, </b:if></b:loop></b:if>];
var relatedPostConfig = {
homePage: "<data:blog.homepageUrl/>",
widgetTitle: "<div class='label-line-c'><h4><b:switch var='data:blog.locale'><b:case value='id'/>Artikel Terkait<b:default/>Related Posts</b:switch></h4></div>",
numPosts: 8,
titleLength: "auto",
thumbnailWidth: 250,
thumbnailHeight: 170,
noImage: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxFX8H1FnwnJXnjlzxgj-3VPY5WR_TGwp6Y5M_if1mdZfsvmvWv97naWHiZDPCHThoLrH2zq84lVMbz8q_FZP46LNImUMju5EP2WLhLbInnuwzDrZ0aPFgEYmss1gGO1tB8iYhKBNzj-8h/w255-c-h170/no-image.png",
containerId: "related-post-<data:post.id/>",
newTabLink: false,
moreText: "Read More",
widgetStyle: 3,
callBack: function() {}
};
</script>
</b:includable>Perhatikan :
a. Kode yang berwarna merah adalah URL gambar no image sebagai gambar pengganti jika artikel tidak memiliki thumbnail.
7. Tempelkan Kode JavaScript berikut tepat di atas kode
</body>atau kode</head><b:if cond='data:view.isPost'>
<script>
//<![CDATA[
if(relatedPosts==1){
var randomRelatedIndex,showRelatedPost;!function(e,a,l){var g={widgetTitle:"<h4>Artikel Terkait:</h4>",widgetStyle:3,homePage:"http://www.dte.web.id",numPosts:8,summaryLength:0,titleLength:"auto",thumbnailWidth:255,thumbnailHeight:170,noImage:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId:"related-post",newTabLink:!1,moreText:"Baca Selengkapnya",callBack:function(){}};for(var t in relatedPostConfig)g[t]="undefined"==relatedPostConfig[t]?g[t]:relatedPostConfig[t];var r=function(e){var t=a.createElement("script");t.type="text/javascript",t.src=e,l.appendChild(t)},A=function(e){var t,a,l=e.length;if(0===l)return!1;for(;--l;)t=Math.floor(Math.random()*(l+1)),a=e[l],e[l]=e[t],e[t]=a;return e},i="object"==typeof labelArray&&0<labelArray.length?"/-/"+A(labelArray)[0]:"";randomRelatedIndex=function(e){var t,a,l=e.feed.openSearch$totalResults.$t-g.numPosts,n=(t=1,a=0<l?l:1,Math.floor(Math.random()*(a-t+1))+t);r(g.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+i+"?alt=json-in-script&orderby=updated&start-index="+n+"&max-results="+g.numPosts+"&callback=showRelatedPost")},showRelatedPost=function(e){var t,a,l,n,r=document.getElementById(g.containerId),i=A(e.feed.entry),s=g.widgetStyle,o=g.widgetTitle+'<ul class="related-post-style-'+s+'">',d=g.newTabLink?' target="_blank"':"",m='<span style="display:block;clear:both;"></span>';if(r){for(var h=0;h<g.numPosts&&h!=i.length;h++){a=i[h].title.$t,l="auto"!==g.titleLength&&g.titleLength<a.length?a.substring(0,g.titleLength)+"…":a,n="media$thumbnail"in i[h]&&!1!==g.thumbnailWidth?i[h].media$thumbnail.url.replace(/.*?:\/\//g,"//").replace(/\/s[0-9]+(\-c)?/,"/w"+g.thumbnailWidth+"-h"+g.thumbnailHeight+"-c"):g.noImage,"summary"in i[h]&&0<g.summaryLength&&i[h].summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,g.summaryLength);for(var c=0,u=i[h].link.length;c<u;c++)t="alternate"==i[h].link[c].rel?i[h].link[c].href:"#";3==s&&(o+='<li class="related-post-item" tabindex="0"><a class="related-post-item-title" href="'+t+'"'+d+'><img alt="" class="lazyload related-post-item-thumbnail" data-src="'+n+'" width="'+g.thumbnailWidth+'" height="'+g.thumbnailHeight+'"></a><div class="related-post-item-tooltip"><a class="related-post-item-title" title="'+a+'" href="'+t+'"'+d+">"+l+"</a></div>"+m+"</li>")}r.innerHTML=o+="</ul>"+m,g.callBack()}},r(g.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+i+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")}(window,document,document.getElementsByTagName("head")[0]);
};
//]]>
</script>
</b:if>
<script>
var relatedPosts = true;
</script>8. Kemudian cari lagi kode
<data:post.body/>, biasanya dalam template terdapat 3, coba yang bagian terakhir.9. Tempelkan kode berikut tepat di bawah kode
<data:post.body/><b:include data='post' name='artikelterkait'/>10. Simpan Tema, dan Selesai.
Metode ini mungkin sudah banyak di gunakan oleh blogger, apalagi salah satu template paling laris sekarang menggunakan metode seperti ini. Kemungkinan pemasangan kode pada template agak rumit, jika anda kesulitan dalam pemasangan, silahkan hubungi kami untuk Konsultasi Gratis.