Cara Membuat Artikel Terkait Fast Loading Dan Valid HTML5

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

Code:

]]></b:skin>

atau

Code:

</style>

lalu simpan kode CSS dibawah ini tepat diatasnya:

Spoiler

Code:

#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(http://1.bp.blogspot.com/-_fbGIcQtAV8/UsjDj7-hfVI/AAAAAAAAAbk/AIGjpvooVfI/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

Code:

<div class='post-footer-line post-footer-line-1'>

lalu simpan kode dibawah ini tepat dibawahnya:

Spoiler

Code:

<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)+"&hellip;":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)+"&hellip;":"";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.
Sumber: dek-blogger.blogspot.com/2014/02/cara-membuat-artikel-terkait-fastload-dan-valid-html5.html

 

menurut agan artikel terkait

menurut agan artikel terkait di blog ane udh valid html 5 belum ?

 

fujianto21 wrote:

Error nyak.. Chek http://validator.w3.org/check?uri=http%3A%2F%2Ffujianto21-chikafe.blogspot.com%2F2014%2F02%2Fcara-script-auto-tag-teman-di-komentar.html&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.3+http%3A%2F%2Fvalidator.w3.org%2Fservices

 

oke jugaa

gue coba dulu yaa. keren nih tanpa javascipt

 

smartblog wrote:

sebenarnya ini pake js cuma jsnya gk eksternal jadi lebih fastload,