Cara Menciptakan Related Post Di Bawah Postingan Blog
Cara menciptakan related post responsif di templat bawaan blogspot di bawah postingan, untuk penampakan lebih jelasnya scroll di bawah artikel ini.
Di situ anda sanggup lihat related article yang berisi formasi post dalam kategory blogging
Kegunaan related post
Sebelum kita lanjut pelajari dulu kegunaan related post di bawah postingan blogspot ini. Related post sangat berkhasiat bagi blog kita semoga semakin menambah page view blog, pola sederhana "pembaca mungkin tertarik dengan artikel dalam kategori tersebut di simpulan postingan" dengan demikian jumlah page view meningkat yang tadinya pembaca hanya ingin lihat post (A) tertarik dengan post (B) dalam blog kita.Lanjut ke pembahasan, sesudah kemarin cara menciptakan related post dalam postingan kali ini kita akan bahas related post di bawah postingan tesponsif tutorial ini aku adopsi dari CB dan sudah aku praktekan work 100%, buktinya di simpulan artikel ini.
Cara Membuat Related Post (post terkait) Dibawah Postingan
Dalam templat edit html cari </b:skin> copas isyarat di bawah dan letakan di atas nya. /* 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:#607D8B;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:#555;font-size:100%;font-family:'Roboto',Arial;text-transform:uppercase;text-align:left;font-weight:700;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);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;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);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}} Cari isyarat </article> dalam widget blog1 dan letakan isyarat berikut di bawahnya gunakan ctrl+f semoga lebih mudah
<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,https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPHjhw7aWEBuGDvIOVOtmv2EBywJ2PB9gsIvQFHUxGOEoOQfGj_cmdPEoCwZMYznhKXz3rkTiB1LWrDEkKvIwawT9mfybiQtZ6WqWk7hcmKOnSRLt7J5IO2xRXmVq_UtSfuOjUKhCn4EuN/s1600/PicsArt_03-02-12.47.01.png", 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.idblanter.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 menciptakan related post blog di bawah postingan Cara Membuat Related Post Di Bawah Postingan Blog" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'" title="Cara Membuat Related Post Di Bawah Postingan Blog"><a class="related-post-item-title" title="Cara Membuat Related Post Di Bawah Postingan Blog" 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 menciptakan related post blog di bawah postingan Cara Membuat Related Post Di Bawah Postingan Blog" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'" title="Cara Membuat Related Post Di Bawah Postingan Blog"></a><div class="related-post-item-tooltip"><a class="related-post-item-title" title="Cara Membuat Related Post Di Bawah Postingan Blog" 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 Di Bawah Postingan Blog"'+b+'><img alt="Cara menciptakan related post blog di bawah postingan Cara Membuat Related Post Di Bawah Postingan Blog" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'" title="Cara Membuat Related Post Di Bawah Postingan Blog"><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 Di Bawah Postingan Blog" href="'+v+'"'+b+">"+w+'</a><div class="related-post-item-tooltip"><img alt="Cara menciptakan related post blog di bawah postingan Cara Membuat Related Post Di Bawah Postingan Blog" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'" title="Cara Membuat Related Post Di Bawah Postingan Blog"><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 Di Bawah Postingan Blog" 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> Save templat.
Jangan lupa subcribe untuk dapatkan update artikel menarik lainya.