Internet :: Cara Membuat Artikel Terkait Fast Loading Dan Valid HTML5

Asliblogbima.blogspot.com - Cara Membuat Artikel Terkait
Fast Loading Dan Valid HTML5 ~ Salam blogger semuanya. Artikel terkait ini sangat berguna untuk meningkatkan Pageview
blog kita,
maka dari itu artikel terkait/Related post banyak dipasang diblog blog. Nah pada kali ini saya akan memberikan tutorial cara membuat artikel terkait yang fastload karena artikel terkait ini hanya judul saja dan tidak menggunakan javascript external dan pastinya Valid HTML5, untuk demonya anda bisa lihat diblog ini.

► Masuk keblogger >> Template >> Edit HTML
► Cari kode ]]></b:skin> atau </style> lalu simpan kode CSS dibawah ini tepat diatasnya:

#related-post background:none;width:100%;margin-top:35px;margin-bottom:10px;padding:5px 0 10px 0px}#related-post h4{font-size:150%;text-transform:uppercase;margin:0 0 15px;padding:0;font-weight:normal}#related-post li{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTZuRo6Wz7BnE4pcvpzGqAp9Uayqh2xy1GzCdg2-BN7bjayy2fR5r3hpYF2JsezW7RYWzNZZ34eT-Xfj5x-cS4Ykk2VuhIZ08IuzgrZw0FpRK0nE-4lXn7oSUht_B_dxIS7IkihtrTaak/s1600/icon-new-window.png) no-repeat 1px 5px;color:#2c3e50;text-indent:0;line-height:1.6em;margin:0;padding:0 0 3px 19px}#related-post .widget{margin:0;padding:0}#related-post ul{list-style:none;margin:0;padding:0}
► Cari kode <div class='post-footer-line post-footer-line-1'> lalu simpan kode dibawah ini tepat dibawahnya:

<!-- Related Post Widget Start --><b:if cond='data:blog.pageType == "item"'> <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: "<h3> Artikel Terkait:</h3> ", numPosts: 5, titleLength: "auto", containerId: "related-post", newTabLink: false, widgetStyle: 1, callBack: function() {} }; </script><script type='text/javascript'>/*! Related Post Widget for Blogger by Taufik Nurrohman => http://gplus.to/tovic */var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h4> Artikel Terkait:</h4> ",widgetStyle:1,homePage:"http://blog.kangismet.net",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+"-c"):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="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><a class="related-post-item-title" title="'+t+'" 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="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"></a><div class="related-post-item-tooltip"> <a class="related-post-item-title" title="'+t+'" 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="'+t+'"'+b+'><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><span class="related-post-item-tooltip">'+w+"</span></a>"+y+"</li> "}else{if(A==6){c+=' <li><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><div class="related-post-item-tooltip"> <img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+"</span></span>"+y+"</div> </li> "}else{c+=' <li><a title="'+t+'" 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></b:if>
► Dan simpan template anda, selamat mencoba semoga berhasil.

Cukup Sekian Info Dari saya, Jika Ada Kesalahan Kata Kami Mohon Maaf.

Jangan lupa Di Share Bloger, Dan Di like Fp Kami Agar Selalu Update ☺