Cara Membuat Related Post Premium

Tutorial Cara Membuat Related Post Premium pada Blogger atau blogspot
Cara Membuat Related Post Premium? Mengapa saya memberi judul diatas? Hehe, bukan bermaksud apa-apa, akan tetapi tutorial cara membuat related post premium yang disertai dengan thumbnail serta cuplikan / ringkasan ini memang sedikit sekali yang mengaplikasikannya.. Nah, kali ini yuk kita buat related post premium. Tutorial ini hanya berlaku pada mesin blogger.com alias blogspot.
Tutorial Membuat Related Post Premium
  1. Masuk ke akun Blogger, Pilih Rancangan, kemudian Edit HTML.
  2. Jangan lupa centang "Expand Template Widget".
  3. Masukkan kode berikut ini sebelum kode </head>.
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style>
    #related_posts h4 {
    background: none repeat scroll 0 0 #333;
    color: #FFF;
    font-family: Arial,Tahoma,Verdana;
    font-size: 11px;
    font-weight: bold;
    margin: 0;
    padding: 2px 5px 1px 8px;
    text-shadow: 1px 1px #000000;
    text-transform: uppercase;
    }
    #relpost_img_sum {
    /* height: 320px;
    overflow: auto; */
    margin: 0;
    padding: 4px;
    line-height: 16px;
    }
    #relpost_img_sum:hover {
    background: none;
    }
    #relpost_img_sum ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    }
    #relpost_img_sum li {
    border: 1px solid #DDD;
    margin: 0;
    padding: 5px;
    height: 65px;
    list-style: none;
    }
    #relpost_img_sum li:hover {
    background-color: #E6E6E6;
    }
    #relpost_img_sum a {
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
    }
    #relpost_img_sum .news-title {
    display: block;
    font-weight: bold !important;
    margin-bottom: 4px;
    }
    #relpost_img_sum .news-text {
    display: block;
    text-align: justify;
    font-weight: normal;
    text-transform: none;
    color: #333;
    }
    #relpost_img_sum img {
    float: left;
    margin-right: 14px;
    padding: 4px;
    border: solid 1px #DDD;
    width: 55px;
    height: 55px;
    }
    </style>
    <script type='text/javascript'>//<![CDATA[
    var relnojudul = 0;
    var relmaxtampil = 10;
    var numchars = 200;
    var morelink = "Baca Selengkapnya";
    eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('2 4=f g();2 5=f g();2 9=f g();2 b=f g();s K(L,M){2 7=L.19("<");l(2 i=0;i<7.3;i++){8(7[i].N(">")!=-1){7[i]=7[i].O(7[i].N(">")+1,7[i].3)}}7=7.1a("");7=7.O(0,M-1);y 7}s 1b(z){l(2 i=0;i<z.P.6.3;i++){2 6=z.P.6[i];4[n]=6.A.$t;u="";8("Q"B 6){u=6.Q.$t}C 8("R"B 6){u=6.R.$t}9[n]=K(u,1c);8("S$T"B 6){D=6.S$T.1d}C{D="1e://1f.1g.1h/1i/1j/1k/1l/d/1m.1n"}b[n]=D;l(2 k=0;k<6.E.3;k++){8(6.E[k].U==\'1o\'){5[n]=6.E[k].v;F}}n++}}s V(a,e){l(2 j=0;j<a.3;j++)8(a[j]==e)y 1p;y 1q}s 1r(){2 m=f g(0);2 o=f g(0);2 p=f g(0);2 q=f g(0);l(2 i=0;i<5.3;i++){8(!V(m,5[i])){m.3+=1;m[m.3-1]=5[i];o.3+=1;o[o.3-1]=4[i];p.3+=1;p[p.3-1]=9[i];q.3+=1;q[q.3-1]=b[i]}}4=o;5=m;9=p;b=q;l(2 i=0;i<4.3;i++){2 c=w.W((4.3-1)*w.X());2 Y=4[i];2 Z=5[i];2 10=9[i];2 11=b[i];4[i]=4[c];5[i]=5[c];9[i]=9[c];b[i]=b[c];4[c]=Y;5[c]=Z;9[c]=10;b[c]=11}2 x=0;2 r=w.W((4.3-1)*w.X());2 12=r;2 h;2 13=14.1s;1t(x<15){8(5[r]!=13){h="<16 G=\'H-A 1u\'>";h+="<a v=\'"+5[r]+"\' U=\'1v\'  I=\'J\' A=\'"+4[r]+"\'><1w 1x=\'"+b[r]+"\' /></a>";h+="<a v=\'"+5[r]+"\' I=\'J\'>"+4[r]+"</a>";h+="<17 G=\'H-18\'>"+9[r]+" ... [<a v=\'"+5[r]+"\' I=\'J\'>"+1y+"</a>]<17 G=\'H-18\'>";h+="</16>";14.1z(h);x++;8(x==15){F}}8(r<4.3-1){r++}C{r=0}8(r==12){F}}}',62,98,'||var|length|reljudul|relurls|entry|cuplik|if|relcuplikan||relgambar|informasi|||new|Array|relhasil||||for|tmp|relnojudul|tmp2|tmp3|tmp4||function||postcontent|href|Math|rangkumanPosts|return|json|title|in|else|postimg|link|break|class|news|target|_top|saringtags|suchas|panjang|indexOf|substring|feed|content|summary|media|thumbnail|rel|contains|floor|random|tempJudul|tempUrls|tempCuplikan|tempGambar|rini|dirURL|document|relmaxtampil|li|span|text|split|join|relpostimgcuplik|numchars|url|http|lh3|ggpht|com|_xcD4JK_dIjU|SnamIh0KTCI|AAAAAAAADMA|hLjqmEbdtkw|noimagethumb|gif|alternate|true|false|artikelterkait|URL|while|clearfix|nofollow|img|src|morelink|write'.split('|'),0,{}))
    //]]></script>
    </b:if>
  4. Cari kode berikut <div class='post-footer'>, masukkan kode berikut ini dibawahnya.
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='related_posts'>
    <h4>Baca Juga:</h4>
    <b:loop values='data:post.labels' var='label'>
    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgcuplik&amp;max-results=9&quot;' type='text/javascript'/>
    </b:loop>
    <ul id='relpost_img_sum'>
    <script type='text/javascript'>artikelterkait();</script>
    </ul>
    </div>
    </b:if>
  5. Klik Simpan Template.
Oh iya, anda juga bisa menjumpai related post diatas pada blog ini yang terletak pada bagian bawah postingan ini. Cukup menarik dan premium bukan???
Semoga bermanfaat. :D
Download Kumpulan Soal CPNS

2 komentar:

tercerdas mengatakan...

gan ada gambar previewnya nggak buat related post premium ini, biar saya lebih jelas gitu

Unknown mengatakan...

Lho?
Bukankah pada postingan diatas sudah ada gambar previewnya ea???
Lagi pula, agan juga bisa menemukan pada tiap postingan di blog ini... :D

Posting Komentar