Cara Menciptakan Related Post Dibawah Postingan Blogger
Pada kesempatakan kali ini saya akan membagikan sebuah tutorial cara menciptakan related post dengan Tampilan yang menarik dan style yang simple
Related Post, atau artikel terkait, ialah opsi dimana para pengunjung blog teman dapat menemukan artikel yang terkait dengan artikel atau postingan yang sedang dibacanya. Biasanya artikel terkait tersebut mempunyai kesamaan label atau kategori dengan artikel atau postingan yang sedang dibaca pengunjung blog sobat.
Fungsi related post disini ialah biar para pengunjung tak hanya tahu wacana artikel atau postingan yang sedang dibacanya, namun juga tertarik dengan artikel terkait yang disuguhkan.
Dengan Tampilan related post yang menarik dan style yang simple serta yummy di pandang mata akan menciptakan pengunjung blog teman menjadi semakin tertarik untuk melihat post terkait.
Selain itu related post ini juga sudah responsive disemua perangkat yang menambah kesan elegan dan sesuai dengan aneka macam device. Bagi yang tertarik untuk memasang related post di blog, silahkan lakukan langkah-langkah dibawah ini.
Tutorial Cara Membuat Related Post Dibawah Postingan Blogger
Pertama, buka blogger.com, sehabis itu buka meu Tema kemudian Edit HTML, Letakan CSS di bawah ini sempurna di atas isyarat ]]></b:skin> atau </style>
/* Related Post CSS */ .related-post-item-tooltip{height:54px;overflow:hidden;width:50%;float:left;text-overflow:ellipsis;padding:10px;} #related-post .material-icons{font-size:200%;right:20px;color:#747d8c;top:-1px;position:absolute;} #related-post{background:#fff;margin:10px;} .related-post{margin:30px 0 0;position:relative;padding:0 0 10px;} .lol h4 i,.related-post h4 i{margin-right:14px;} .lol h4,.related-post h4{border-radius:4px;color:#747d8c;font-size:100%;font-family:'Roboto',Arial;text-transform:uppercase;text-align:left;font-weight:700;border:1px solid #ecf0f1;position:relative;padding:15px 20px 12px;margin:0 0 20px;} .related-post-style-3,.related-post-style-3 li{margin:0 auto;padding:0!important;list-style:none;word-wrap:break-word;} .related-post-style-3 li a{font-family:'Roboto',sans-serif;color:#666;font-weight:700!important;font-size:14px;line-height:1.4em;} .related-post-style-3 li a:hover{color:#111;} .related-post-style-3 .related-post-item{display:inline-block;float:left;border-radius:3px;border:1px solid #ecf0f1;width:47%;margin-right:15px;height:auto;padding:0;margin-bottom:20px!important;position:relative;overflow:hidden;} .related-post-style-3 .related-post-item:focus{outline:none;border:none;} .related-post-style-3 .related-post-item-thumbnail{display:block;margin:0;width:40%;height:100px;float:left;} .related-post-style-3 .related-post-item-thumbnail img{width:100%;height:auto!important;transition:all 1s ease-out;} .related-post-item:hover .related-post-item-tooltip a{opacity:1;} .related-post-item-tooltip a{color:#666!important;transition:transform .6s cubic-bezier(.175,.885,.32,1.275),opacity .3s;text-align:center;font-size:12px!important;position:relative;} @media screen and (max-width:480px){.related-post-style-3 .related-post-item{width:100%!important;}.related-post-style-3 .related-post-item-thumbnail{height:100px!important;}}Letakan isyarat di bawah ini sempurna di bawah isyarat <div class='post-footer-line post-footer-line-3' atau di atas kode </article>
<div class='related-post' id='related-post'/> <script type='text/javascript'> 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: "<h4><i class='fa fa-bookmark'></i> Related Post</h4>", numPosts: 6, summaryLength: 370, titleLength: "auto", thumbnailSize: 300, noImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC", containerId: "related-post", newTabLink: false, moreText: "Read More", widgetStyle: 3, callBack: function() {} }; </script> <script type='text/javascript'> //<![CDATA[ var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h4>Artikel Terkait:</h4>",widgetStyle:1,homePage:"http://www.dny.com",numPosts:7,summaryLength:370,titleLength:"auto",thumbnailSize:72,noImage:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId:"related-post",newTabLink:false,moreText:"Baca Selengkapnya",callBack:function(){}};for(var f in relatedPostConfig){d[f]=(relatedPostConfig[f]=="undefined")?d[f]:relatedPostConfig[f]}var j=function(a){var b=m.createElement("script");b.type="text/javascript";b.src=a;k.appendChild(b)},o=function(b,a){return Math.floor(Math.random()*(a-b+1))+b},l=function(a){var p=a.length,c,b;if(p===0){return false}while(--p){c=Math.floor(Math.random()*(p+1));b=a[p];a[p]=a[c];a[c]=b}return a},e=(typeof labelArray=="object"&&labelArray.length>0)?"/-/"+l(labelArray)[0]:"",h=function(b){var c=b.feed.openSearch$totalResults.$t-d.numPosts,a=o(1,(c>0?c:1));j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&start-index="+a+"&max-results="+d.numPosts+"&callback=showRelatedPost")},g=function(z){var s=document.getElementById(d.containerId),x=l(z.feed.entry),A=d.widgetStyle,c=d.widgetTitle+'<ul class="related-post-style-'+A+'">',b=d.newTabLink?' target="_blank"':"",y='<span style="display:block;clear:both;"></span>',v,t,w,r,u;if(!s){return}for(var q=0;q<d.numPosts;q++){if(q==x.length){break}t=x[q].title.$t;w=(d.titleLength!=="auto"&&d.titleLength<t.length)?t.substring(0,d.titleLength)+"…":t;r=("media$thumbnail"in x[q]&&d.thumbnailSize!==false)?x[q].media$thumbnail.url.replace(/\/s[0-9]+(\-c)?/,"/s"+d.thumbnailSize+""):d.noImage;u=("summary"in x[q]&&d.summaryLength>0)?x[q].summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,d.summaryLength)+"…":"";for(var p=0,a=x[q].link.length;p<a;p++){v=(x[q].link[p].rel=="alternate")?x[q].link[p].href:"#"}if(A==2){c+='<li><img alt="Cara Membuat Related Post Dibawah Postingan Blogger Cara Membuat Related Post Dibawah Postingan Blogger" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'" title="Cara Membuat Related Post Dibawah Postingan Blogger"><a class="related-post-item-title" title="Cara Membuat Related Post Dibawah Postingan Blogger" href="'+v+'"'+b+">"+w+'</a><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+'</span> <a href="'+v+'" class="related-post-item-more"'+b+">"+d.moreText+"</a></span>"+y+"</li>"}else{if(A==3||A==4){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-title" href="'+v+'"'+b+'><img alt="Cara Membuat Related Post Dibawah Postingan Blogger Cara Membuat Related Post Dibawah Postingan Blogger" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'" title="Cara Membuat Related Post Dibawah Postingan Blogger"></a><div class="related-post-item-tooltip"><a class="related-post-item-title" title="Cara Membuat Related Post Dibawah Postingan Blogger" href="'+v+'"'+b+">"+w+"</a></div>"+y+"</li>"}else{if(A==5){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-wrapper" href="'+v+'" title="Cara Membuat Related Post Dibawah Postingan Blogger"'+b+'><img alt="Cara Membuat Related Post Dibawah Postingan Blogger Cara Membuat Related Post Dibawah Postingan Blogger" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'" title="Cara Membuat Related Post Dibawah Postingan Blogger"><span class="related-post-item-tooltip">'+w+"</span></a>"+y+"</li>"}else{if(A==6){c+='<li><a class="related-post-item-title" title="Cara Membuat Related Post Dibawah Postingan Blogger" href="'+v+'"'+b+">"+w+'</a><div class="related-post-item-tooltip"><img alt="Cara Membuat Related Post Dibawah Postingan Blogger Cara Membuat Related Post Dibawah Postingan Blogger" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'" title="Cara Membuat Related Post Dibawah Postingan Blogger"><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+"</span></span>"+y+"</div></li>"}else{c+='<li><a title="Cara Membuat Related Post Dibawah Postingan Blogger" href="'+v+'"'+b+">"+w+"</a></li>"}}}}}s.innerHTML=c+="</ul>"+y;d.callBack()};randomRelatedIndex=h;showRelatedPost=g;j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")})(window,document,document.getElementsByTagName("head")[0]); //]]> </script>Setelah itu Simpan Tema, dan lihat hasilnya. Berikut ialah tampilan related post pada langkah-langkah diatas.
Sekian tutorial yang dapat saya bagikan kali ini, bila ada yang belum terang dapat ditanyakan di kolom komentar atau halaman kontak yang telah disediakan blog ini. Semoga bermanfaat dan Terima kasih. Sumber https://www.denylistianto.com/