Related Post dengan Thumbnail Image Fast Loading (Blogger)

Romeltea | Follow @romel_tea

Cara membuat Related Posts Responsive dengan Thumbnail Image (Gambar) Fast Loading (Blogger). 

WIDGET  artikel, posting, atau tulisan terkait (related posts) di bawah posting blog merupakan salah satu widget yang wajib ada di blog guna meningkatkan pageviews. Related Posts berfungsi sebagai navigasi menu dan internal link yang memudahkan pengujung membuka konten/tulisan blog lainnya.

Widget related posts dengan gambar thumbnail berikut ini berbeda dengan related post gambar yang saya share sebelumnya yang posisinya horizontal. Kali ini posisinya vertikal, seperti gambar di bawah ini:

Related Post dengan Thumbnail Image Fast Loading (Blogger)

Menurut BloggerSpice, widget related posts yang ini fast loading (ringan) karena murni kode CSS. "This related post widget is very fast in loading and you can change the Related pots header color. The coding has made with pure CSS."

Cara Membuat Related Posts plus Gambar Thumbnail Image Fast Loading

1. Pasang KODE CSS
Copas kode berikut ini di atas kode  ]]></b:skin> atau </style>

#BloggerSpiceRP { background-color:#FFF; margin:10px 0 0 0; padding:10px; -moz-box-shadow:inset 0 0 1px #000000; -webkit-box-shadow:inset 0 1px 1px #000000; box-shadow:inset 0 0 1px #000000 }
#BloggerSpiceRP h4 { color:#fff; font-size:15px; margin:-10px -10px 10px; padding:5px 3px; text-align:center; font-weight:bold; -moz-text-shadow:2px 0 0 #333; -webkit-text-shadow:2px 0 0 #333; text-shadow:2px 0 0 #333; position:relative; background-color:#00B4FF }
#BloggerSpiceRP ul,#related_posts li { overflow:hidden; padding:0; margin:0; list-style:none }
#BloggerSpiceRP ul { margin-top:10px }
#BloggerSpiceRP li { float:left; width:100%; margin:0 0 5px}
#BloggerSpiceRP .gmbrrltd { background-color:#f7f7f7; float:left; margin:0 5px 0 0; padding:3px; border:1px solid #ddd; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px }
#BloggerSpiceRP strong { font-weight:bold; font-size:15px; line-height:1.1em }
#BloggerSpiceRP p { margin:2px 0 0; font-size:12px }
.loadingxx { width:100%; min-height:150px; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSKaGPnMH5Uj29pJ-DnVvQeCn69CGM8I0TUXCfH9UL6CFUOHdivtvK2iDeAFkf9IDz4okvSV4A9pdEyUWyGkC9CSOL4xhsXuDYlt-og5fbXnyG-pcQpYBN__kZ1sHhDK0ShQNJA9RkMUsx/s1600/bs+loading+dot.gif) no-repeat center; display:block; text-indent:-9999px }


2. Kode JQUERY
Pastikan kode jquery berikut ini di atas kode  above </head> sudah ada kode berikut ini. Jika belum ada, pasangkan!

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>


3. Kode HTML/JavaScript
Copas kode berikut ini di bawah kode

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


atau 

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

KODENYA:

 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='BloggerSpiceRP'/>
<script type='text/javascript'>
//<![CDATA[
function relatedPostsWidget(a){(function(e){var f={blogURL:"",maxPosts:5,maxTags:5,maxPostsPerTag:5,containerSelector:"",tags:null,loadingText:"",loadingClass:"",relevantTip:"",rlt_summary:150,relatedTitle:"Related Posts",readMoretext:"Read More",rlpBlank:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf0wNMK6fYqv4MwkhXUJ5NUH1JHByDW1gWeTUaH_FceAuHpiZvsKbGPakQlE9je92KxOGYICx7MuVKXNQb_vW8Ta62kvoB6JrdGzZIfm4Al-4kfsqYNxTiS9JAqx76Y9xCfk3NjtN5oUPG/s1600/BS+No+Image+White.png",rlt_thumb:70,recentTitle:"Recent Posts",postScoreClass:"",onLoad:false};f=e.extend({},f,a);var k=0,b=null,g=null;if(!f.containerSelector){document.write('<div id="BloggerSpiceRP"></div>');f.containerSelector="#BloggerSpiceRP"}var c=function(t,n){k++;if(t.feed.entry){for(var o=0;o<t.feed.entry.length;o++){var r=t.feed.entry[o];var p="";for(var m=0;m<r.link.length;m++){if(r.link[m].rel=="alternate"){p=r.link[m].href;break}}if("content" in r){var l=r.content.$t}else{if("summary" in r){var l=r.summary.$t}else{var l=""}}var l=l.replace(/<\S[^>]*>/g,"");if(l.length>f.rlt_summary){var l=l.substring(0,f.rlt_summary)+"..."}var q=r.title.$t;if("media$thumbnail" in r){var s=r.media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+f.rlt_thumb+"-c")}else{var s=f.rlpBlank}if(location.href.toLowerCase()!=p.toLowerCase()){i(p,q,s,l)}}}if(k>=f.tags.length){g.attr("class","");e("#BloggerSpiceRP-loadingtext",b).remove();if(f.maxPosts>0){e("li:gt("+(f.maxPosts-1)+")",g).remove()}}};var i=function(p,s,u,l){var q=e("li",g);for(var o=0;o<q.length;o++){var t=e("a",q.eq(o));var r=j(t);if(t.attr("href")==p){h(t,++r);for(var n=o-1;n>=0;n--){var m=e("a",q.eq(n));if(j(m)>r){if(o-n>1){q.eq(n).after(q.eq(o))}return}}if(o>0){q.eq(0).before(q.eq(o))}return}}g.append('<li><a class="jdlunya" href="'+p+'" title="'+(f.relevantTip?f.relevantTip.replace("\d",1):"")+'"><span class="gmbrrltd"><img style="width:'+f.rlt_thumb+"px;height:"+f.rlt_thumb+'px;display: block" alt="'+s+'" src="'+u+'"/></span><strong>'+s+"</strong></a><p>"+l+'<a target="_blank" title="'+s+'" href="'+p+'">'+f.readMoretext+"</a></p></li>")};var j=function(l){var m=parseInt(l.attr("score"));return m>0?m:1};var h=function(l,m){l.attr("score",m);if(f.relevantTip){l.attr("title",f.relevantTip.replace("\d",m))}if(f.postScoreClass){l.attr("class",f.postScoreClass+m)}};var d=function(){if(f.containerSelector!="#BloggerSpiceRP"){var l=e(f.containerSelector);if(l.length!=1){return}b=e('<div id="BloggerSpiceRP"></div>').appendTo(l)}else{b=e(f.containerSelector)}if(!f.tags){f.tags=[];e('a[rel="tag"]:lt('+f.maxTags+")").each(function(){var n=e.trim(e(this).text().replace(/\n/g,""));if(e.inArray(n,f.tags)==-1){f.tags[f.tags.length]=n}})}if(f.tags.length==0&&!f.recentTitle){return}if(f.tags.length==0){e("<h4>"+f.recentTitle+"</h4>").appendTo(b)}else{if(f.relatedTitle){e("<h4>"+f.relatedTitle+"</h4>").appendTo(b)}}if(f.loadingText){e('<div id="BloggerSpiceRP-loadingtext">'+f.loadingText+"</div>").appendTo(b)}g=e("<ul "+(f.loadingClass?'class="'+f.loadingClass+'"':"")+"></ul>").appendTo(b);if(f.tags.length==0){e.get((f.blogURL===""?window.location.protocol+"//"+window.location.host:f.blogURL)+"/feeds/posts/summary?max-results="+f.maxPostsPerTag+"&orderby=published&alt=json-in-script",c,"jsonp")}else{for(var m=0;m<f.tags.length;m++){e.get((f.blogURL===""?window.location.protocol+"//"+window.location.host:f.blogURL)+"/feeds/posts/summary/-/"+f.tags[m]+"?max-results="+f.maxPostsPerTag+"&orderby=published&alt=json-in-script",c,"jsonp")}}};if(f.onLoad){e(window).load(d)}else{e(document).ready(d)}})(jQuery)};
relatedPostsWidget({
related_title: "Related Posts",
containerSelector: "#BloggerSpiceRP",
maxPosts: 4,loadingClass: "loadingxx",
rlt_thumb: 70
});
//]]>
</script>
<div class='clear'/>
  </b:if>

4. SAVE Template!

Selain Fast Loading (ringan/cepat), widget Related Post dengan Thumbnail Image Fast Loading (Blogger) di atas bebas sisipan (injeksi) link. (http://blogromeltea.blogspot.com/).*

Previous
« Prev Post
Author Image

Romeltea
Romeltea adalah onair dan online name Asep Syamsul M. Romli aka Kang Romel. Praktisi Media, Blogger, Trainer Komunikasi from Bandung, Indonesia. Follow me: facebook twitter instagram linkedin youtube

Recommended Posts

Related Posts

Show comments
Hide comments

2 comments on Related Post dengan Thumbnail Image Fast Loading (Blogger)

  1. trims buat tipsnya...sangat mudah diikuti dan sukses saya coba di blog milik saya...mau tanya, kalau tanpa snippet bisa gak ya?? jadi cuman gambar ama judul doank?

    ReplyDelete
    Replies
    1. bisa, ubah angka 150 yang merah jadi 0

      Delete

No Spam, Please!