Rabu, 19 Februari 2014

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.
Related Post
- 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/AVvXsEjHdhp1MO0q18oulw3rotmZK3aRLejdevp1hX0j-eb1ITV_h7KSViDLykrVFnt242yuZx354C0xoS3_tlbfTKm2OG7meH3_y5PJoAwQMQN7dO6td8kub-OcdktnkSdFvEu8-fwJ4NLdjhY/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 == &quot;item&quot;'>  <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'>          &quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>      </b:loop></b:if>];  var relatedPostConfig = {      homePage: &quot;<data:blog.homepageUrl/>&quot;,      widgetTitle: &quot;&lt;h3&gt;Artikel Terkait:&lt;/h3&gt;&quot;,      numPosts: 5,      titleLength: &quot;auto&quot;,      containerId: &quot;related-post&quot;,      newTabLink: false,      widgetStyle: 1,      callBack: function() {}  };  </script><script type='text/javascript'>/*! Related Post Widget for Blogger by Taufik Nurrohman =&gt; http://gplus.to/tovic */var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:&quot;&lt;h4&gt;Artikel Terkait:&lt;/h4&gt;&quot;,widgetStyle:1,homePage:&quot;http://blog.kangismet.net&quot;,numPosts:7,summaryLength:370,titleLength:&quot;auto&quot;,thumbnailSize:72,noImage:&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,containerId:&quot;related-post&quot;,newTabLink:false,moreText:&quot;Baca Selengkapnya&quot;,callBack:function(){}};for(var f in relatedPostConfig){d[f]=(relatedPostConfig[f]==&quot;undefined&quot;)?d[f]:relatedPostConfig[f]}var j=function(a){var b=m.createElement(&quot;script&quot;);b.type=&quot;text/javascript&quot;;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==&quot;object&quot;&amp;&amp;labelArray.length&gt;0)?&quot;/-/&quot;+l(labelArray)[0]:&quot;&quot;,h=function(b){var c=b.feed.openSearch$totalResults.$t-d.numPosts,a=o(1,(c&gt;0?c:1));j(d.homePage.replace(/\/$/,&quot;&quot;)+&quot;/feeds/posts/summary&quot;+e+&quot;?alt=json-in-script&amp;orderby=updated&amp;start-index=&quot;+a+&quot;&amp;max-results=&quot;+d.numPosts+&quot;&amp;callback=showRelatedPost&quot;)},g=function(z){var s=document.getElementById(d.containerId),x=l(z.feed.entry),A=d.widgetStyle,c=d.widgetTitle+&#39;&lt;ul class=&quot;related-post-style-&#39;+A+&#39;&quot;&gt;&#39;,b=d.newTabLink?&#39; target=&quot;_blank&quot;&#39;:&quot;&quot;,y=&#39;&lt;span style=&quot;display:block;clear:both;&quot;&gt;&lt;/span&gt;&#39;,v,t,w,r,u;if(!s){return}for(var q=0;q&lt;d.numPosts;q++){if(q==x.length){break}t=x[q].title.$t;w=(d.titleLength!==&quot;auto&quot;&amp;&amp;d.titleLength&lt;t.length)?t.substring(0,d.titleLength)+&quot;&amp;hellip;&quot;:t;r=(&quot;media$thumbnail&quot; in x[q]&amp;&amp;d.thumbnailSize!==false)?x[q].media$thumbnail.url.replace(/\/s[0-9]+(\-c)?/,&quot;/s&quot;+d.thumbnailSize+&quot;-c&quot;):d.noImage;u=(&quot;summary&quot; in x[q]&amp;&amp;d.summaryLength&gt;0)?x[q].summary.$t.replace(/&lt;br ?\/?&gt;/g,&quot; &quot;).replace(/&lt;.*?&gt;/g,&quot;&quot;).replace(/[&lt;&gt;]/g,&quot;&quot;).substring(0,d.summaryLength)+&quot;&amp;hellip;&quot;:&quot;&quot;;for(var p=0,a=x[q].link.length;p&lt;a;p++){v=(x[q].link[p].rel==&quot;alternate&quot;)?x[q].link[p].href:&quot;#&quot;}if(A==2){c+=&#39;&lt;li&gt;&lt;img alt=&quot;&quot; class=&quot;related-post-item-thumbnail&quot; src=&quot;&#39;+r+&#39;&quot; width=&quot;&#39;+d.thumbnailSize+&#39;&quot; height=&quot;&#39;+d.thumbnailSize+&#39;&quot;&gt;&lt;a class=&quot;related-post-item-title&quot; title=&quot;&#39;+t+&#39;&quot; href=&quot;&#39;+v+&#39;&quot;&#39;+b+&quot;&gt;&quot;+w+&#39;&lt;/a&gt;&lt;span class=&quot;related-post-item-summary&quot;&gt;&lt;span class=&quot;related-post-item-summary-text&quot;&gt;&#39;+u+&#39;&lt;/span&gt; &lt;a href=&quot;&#39;+v+&#39;&quot; class=&quot;related-post-item-more&quot;&#39;+b+&quot;&gt;&quot;+d.moreText+&quot;&lt;/a&gt;&lt;/span&gt;&quot;+y+&quot;&lt;/li&gt;&quot;}else{if(A==3||A==4){c+=&#39;&lt;li class=&quot;related-post-item&quot; tabindex=&quot;0&quot;&gt;&lt;a class=&quot;related-post-item-title&quot; href=&quot;&#39;+v+&#39;&quot;&#39;+b+&#39;&gt;&lt;img alt=&quot;&quot; class=&quot;related-post-item-thumbnail&quot; src=&quot;&#39;+r+&#39;&quot; width=&quot;&#39;+d.thumbnailSize+&#39;&quot; height=&quot;&#39;+d.thumbnailSize+&#39;&quot;&gt;&lt;/a&gt;&lt;div class=&quot;related-post-item-tooltip&quot;&gt;&lt;a class=&quot;related-post-item-title&quot; title=&quot;&#39;+t+&#39;&quot; href=&quot;&#39;+v+&#39;&quot;&#39;+b+&quot;&gt;&quot;+w+&quot;&lt;/a&gt;&lt;/div&gt;&quot;+y+&quot;&lt;/li&gt;&quot;}else{if(A==5){c+=&#39;&lt;li class=&quot;related-post-item&quot; tabindex=&quot;0&quot;&gt;&lt;a class=&quot;related-post-item-wrapper&quot; href=&quot;&#39;+v+&#39;&quot; title=&quot;&#39;+t+&#39;&quot;&#39;+b+&#39;&gt;&lt;img alt=&quot;&quot; class=&quot;related-post-item-thumbnail&quot; src=&quot;&#39;+r+&#39;&quot; width=&quot;&#39;+d.thumbnailSize+&#39;&quot; height=&quot;&#39;+d.thumbnailSize+&#39;&quot;&gt;&lt;span class=&quot;related-post-item-tooltip&quot;&gt;&#39;+w+&quot;&lt;/span&gt;&lt;/a&gt;&quot;+y+&quot;&lt;/li&gt;&quot;}else{if(A==6){c+=&#39;&lt;li&gt;&lt;a class=&quot;related-post-item-title&quot; title=&quot;&#39;+t+&#39;&quot; href=&quot;&#39;+v+&#39;&quot;&#39;+b+&quot;&gt;&quot;+w+&#39;&lt;/a&gt;&lt;div class=&quot;related-post-item-tooltip&quot;&gt;&lt;img alt=&quot;&quot; class=&quot;related-post-item-thumbnail&quot; src=&quot;&#39;+r+&#39;&quot; width=&quot;&#39;+d.thumbnailSize+&#39;&quot; height=&quot;&#39;+d.thumbnailSize+&#39;&quot;&gt;&lt;span class=&quot;related-post-item-summary&quot;&gt;&lt;span class=&quot;related-post-item-summary-text&quot;&gt;&#39;+u+&quot;&lt;/span&gt;&lt;/span&gt;&quot;+y+&quot;&lt;/div&gt;&lt;/li&gt;&quot;}else{c+=&#39;&lt;li&gt;&lt;a title=&quot;&#39;+t+&#39;&quot; href=&quot;&#39;+v+&#39;&quot;&#39;+b+&quot;&gt;&quot;+w+&quot;&lt;/a&gt;&lt;/li&gt;&quot;}}}}}s.innerHTML=c+=&quot;&lt;/ul&gt;&quot;+y;d.callBack()};randomRelatedIndex=h;showRelatedPost=g;j(d.homePage.replace(/\/$/,&quot;&quot;)+&quot;/feeds/posts/summary&quot;+e+&quot;?alt=json-in-script&amp;orderby=updated&amp;max-results=0&amp;callback=randomRelatedIndex&quot;)})(window,document,document.getElementsByTagName(&quot;head&quot;)[0]);       </script></b:if>
Dan simpan template anda, selamat mencoba semoga berhasil.

Comments Blog

comments powered by Disqus