Cara membuat related post dengan mudah menggunakan model list kebawah. Sedang mencari script code untuk buat related post? Kali ini saya akan share bagaimana membuat related post dengan list kebawah. Code yang saya pakai ini dari igniel dan cocok di blog saya.
Struktur tampilannya akan seperti gambar diatas. Akan berisi thumbnail dibagian kiri, dan pada bagian sebelah kanan akan ada judul artikel. Urutan artikel akan memuat kebawah. Tampilan related post ini cukup simpel.
Apa itu Related Post
Related post adalah rekomendasi postingan yang biasanya terdapat pada bagian bawah artikel. Artikel yang muncul di related post ini adalah artikel terkait yang masih berhubungan dengan artikel yang dibaca, atau masih dengan kategori yang sama. Related post jadi salah satu komponen penting dalam sebuah web.
Fungsi Related Post
Fungsi related post adalah agar pengunjung bisa membaca lebih banyak referensi terkait artikel yang sedang dibaca, dan jika dari sisi pengelola blog atau website realted post ini sebagai sarana untuk memancing pengunjung agar mengunjungi postingan lainnya, karna bisa menambah pageviews blog atau webiste.
Cara memasang related post pada blog
1. Tambahkan kode CSS ini “sebelum/diatas” </style> atau ]]></b:skin>
/* Related Post List by igniel.com */
#ignielRelatedList{
display:block;
margin:20px 0px;
line-height:1.25em;
}
#ignielRelatedList h3.title{
font-size:16px;
font-weight:600;
text-align:center;
text-transform:uppercase;
line-height:initial;
}
#ignielRelatedList h3.title span{
background-color:#fff;
padding:0px 15px;
position:relative;
z-index:1;
}
#ignielRelatedList h3.title:before{
content: '';
display: block;
position: relative;
top:10px;
width: 100%;
border-top: 2px solid #cccccc;
}
#ignielRelatedList ul{
margin:20px 0px 0px;
padding:0px;
}
#ignielRelatedList ul li{
list-style:none;
margin-bottom:15px;
padding-bottom:15px;
border-bottom:1px solid #ccc;
-webkit-margin-start:0px !important;
display:inline-block;
width:100%;
clear:both;
}
#ignielRelatedList ul li:last-child{
border:0px;
padding:0px;
}
#ignielRelatedList ul li .thumb{
overflow:hidden;
line-height:0px;
border-radius:7px;
float:left;
margin-right:15px;
}
#ignielRelatedList ul li a{
display:block;
}
#ignielRelatedList ul li a.judul{
color:#000; /* Warna Huruf */
font-weight:600;
font-size:16px;
overflow:hidden;
line-height:1.25em;
}
#ignielRelatedList ul li .snippet{
color:#444;
font-size:13px;
overflow:hidden;
margin:7px 0px 0px;
padding:0px;
}
#ignielRelatedList ul li a.judul:hover, #ignielRelatedList ul li:hover a.judul{
color:#ff5722; /* Warna Huruf Ketika Disorot */
}
#ignielRelatedList ul li a img{
width:120px;
height:90px;
transition:all .3s ease;
border:0px;
margin:0px;
}
#ignielRelatedList ul li a img:hover, #ignielRelatedList ul li:hover img{
transform:scale(1.1) rotate(-5deg);
filter: brightness(75%);
-webkit-filter: brightness(75%);
}
#ignielRelatedList .norelated{
text-align:center;
font-weight:600;
}
@media screen and (max-width:480px){
#ignielRelatedList ul li a.judul{
font-size:14px;
}
#ignielRelatedList ul li .snippet{
font-size:12px;
}
}
2. Simpan kode ini “sesudah/dibawah” <data:post.body/>
<!-- Related Post List by igniel.com --> <b:if cond='data:view.isPost'> <div id='ignielRelatedList'> <h3 class='title'><span>Related Posts</span></h3> <script>//<![CDATA[ var jumlah = 6; var kata = 150; eval(function(p,a,c,k,e,d){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--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[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}('d a=["\\w","\\q\\L\\g\\j\\h","\\g\\e\\l\\I\\h\\G","\\v","\\j\\l\\D\\e\\1X\\1d\\T","\\q\\E\\Z\\q\\h\\p\\j\\l\\I","","\\1o\\K\\j\\l","\\e\\l\\h\\p\\1x","\\T\\e\\e\\D","\\1E\\h","\\h\\j\\h\\g\\e","\\Q\\K\\l\\h\\e\\l\\h","\\q\\E\\z\\z\\f\\p\\1x","\\z\\e\\D\\j\\f\\1E\\h\\G\\E\\z\\Z\\l\\f\\j\\g","\\E\\p\\g","\\D\\f\\h\\f\\2p\\j\\z\\f\\I\\e\\C\\L\\l\\I\\2n\\Z\\f\\q\\e\\1K\\1G\\2q\\j\\1u\\1B\\1d\\1N\\1j\\1r\\2r\\2u\\I\\K\\b\\b\\b\\b\\1H\\1n\\1g\\G\\W\\1g\\I\\b\\b\\b\\b\\W\\b\\b\\b\\b\\1B\\O\\b\\1v\\b\\b\\b\\O\\1a\\D\\1P\\2c\\e\\b\\b\\b\\b\\b\\2s\\1H\\O\\1n\\1u\\1a\\1v\\O\\b\\1o\\Z\\1G\\1g\\C\\I\\b\\b\\b\\b\\2l\\W\\g\\W\\1a\\1u\\1a\\1v\\z\\2d\\1d\\K\\p\\1K\\2k\\2t\\b\\b\\1M\\2i\\b\\2j\\2g\\1p\\1d\\1Q\\1S\\1J\\b\\b\\b\\b\\b\\W\\g\\1Q\\1J\\1q\\1n\\E\\1a\\z\\O\\O","\\g\\j\\l\\1q","\\p\\e\\g","\\f\\g\\h\\e\\p\\l\\f\\h\\e","\\G\\p\\e\\T","\\p\\f\\l\\D\\K\\z","\\T\\g\\K\\K\\p","\\1g\\1N\\1M","\\w\\g\\j\\v","\\w\\D\\j\\1p\\y\\Q\\g\\f\\q\\q\\M\\n\\h\\G\\E\\z\\Z\\n\\v\\w\\f\\y\\G\\p\\e\\T\\M\\n","\\n\\y\\h\\j\\h\\g\\e\\M\\n","\\n\\v\\w\\j\\z\\I\\y\\q\\p\\Q\\M\\n","\\C\\1j\\1P\\1S\\1r\\1b\\G\\1Z\\1r\\1b\\L\\1b\\1q\\1b\\l\\K\\1b\\l\\E","\\p\\e\\L\\g\\f\\Q\\e","\\n\\y\\f\\g\\h\\M\\n","\\n\\C\\v\\w\\C\\f\\v\\w\\C\\D\\j\\1p\\v","\\w\\f\\y\\G\\p\\e\\T\\M\\n","\\n\\y\\Q\\g\\f\\q\\q\\M\\n\\1o\\E\\D\\E\\g\\n\\v","\\w\\C\\f\\v","\\w\\q\\L\\f\\l\\y\\Q\\g\\f\\q\\q\\M\\n\\q\\l\\j\\L\\L\\e\\h\\n\\v","\\y\\1m\\1m\\1m\\y\\w\\C\\q\\L\\f\\l\\v","\\w\\C\\g\\j\\v","\\1j\\p\\j\\h\\e"];d R=0,o=J H(),u=J H(),B=J H();F=J H();1c 1O(t,Y){d k=t[a[1]](a[0]);P(d m=0;m<k[a[2]];m++){x(k[m][a[4]](a[3])!=-1){k[m]=k[m][a[5]](k[m][a[4]](a[3])+1,k[m][a[2]])}};k=k[a[7]](a[6]);k=k[a[5]](0,Y-1);1t k}1c 2f(Y){P(d k=0;k<Y[a[9]][a[8]][a[2]];k++){d t=Y[a[9]][a[8]][k];o[R]=t[a[11]][a[10]];1h=a[6];x(a[12]1i t){1h=t[a[12]][a[10]]}1w{x(a[13]1i t){1h=t[a[13]][a[10]]}};F[R]=1O(1h,2h);x(a[14]1i t){1l=t[a[14]][a[15]]}1w{1l=a[16]};B[R]=1l;P(d m=0;m<t[a[17]][a[2]];m++){x(t[a[17]][m][a[18]]==a[19]){u[R]=t[a[17]][m][a[20]];1k}};R++}}1c 1R(1s,k){P(d m=0;m<1s[a[2]];m++){x(1s[m]==k){1t!0}};1t!1}1c 2e(){d S=J H(0);d V=J H(0);d U=J H(0);d X=J H(0);P(d i=0;i<u[a[2]];i++){x(!1R(S,u[i])){S[a[2]]+=1;S[S[a[2]]-1]=u[i];V[a[2]]+=1;V[V[a[2]]-1]=o[i];U[a[2]]+=1;U[U[a[2]]-1]=F[i];X[a[2]]+=1;X[X[a[2]]-1]=B[i]}};o=V;u=S;F=U;B=X;P(d i=0;i<o[a[2]];i++){d A=1e[a[22]]((o[a[2]]-1)*1e[a[21]]());d 1F=o[i];d 1I=u[i];d 1A=F[i];d 1z=B[i];o[i]=o[A];u[i]=u[A];F[i]=F[A];B[i]=B[A];o[A]=1F;u[A]=1I;F[A]=1A;B[A]=1z};d 1f=0;d r=1e[a[22]]((o[a[2]]-1)*1e[a[21]]());d 1L=r;d N;d 1D=1y[a[23]];2m(1f<1C){x(u[r]!=1D){N=a[24];N+=a[25]+u[r]+a[26]+o[r]+a[27]+B[r][a[29]](/\\/s[0-9]+(\\-c)?/,a[28])+a[2o]+o[r]+a[26]+o[r]+a[2v];N+=a[1Y]+u[r]+a[1T]+o[r]+a[1U];N+=a[1V]+F[r]+a[1W];N+=a[2b];1y[a[2a]](N);1f++;x(1f==1C){1k}};x(r<o[a[2]]-1){r++}1w{r=0};x(r==1L){1k}}}',62,156,'||||||||||_0x7d7f|x41||var|x65|x61|x6C|x74|_0x8ebex12|x69|_0x8ebex8|x6E|_0x8ebex9|x27|judul|x72|x73|_0x8ebex19||_0x8ebex6|urls|x3E|x3C|if|x20|x6D|_0x8ebex13|gambar|x2F|x64|x75|snippet|x68|Array|x67|new|x6F|x70|x3D|_0x8ebex1b|x43|for|x63|rel|_0x8ebexe|x66|_0x8ebex10|_0x8ebexf|x45|_0x8ebex11|_0x8ebex7|x62|||||||||||x51|x2D|function|x4F|Math|_0x8ebex18|x55|postcontent|in|x77|break|postimg|x2E|x53|x6A|x76|x6B|x30|_0x8ebexc|return|x56|x49|else|x79|document|_0x8ebex17|_0x8ebex16|x42|jumlah|_0x8ebex1c|x24|_0x8ebex14|x34|x4E|_0x8ebex15|x54|x36|_0x8ebex1a|x4C|x52|filter|x31|x46|contains|x32|33|34|35|36|x78|32|x39|||||||||||38|37|x50|x57|ignielRelatedList|relpostimgcuplik|x37|kata|x2B|x58|x38|x44|while|x3B|30|x3A|x2C|x4B|x33|x48|x47|31'.split('|'),0,{})); //]]></script> <b:if cond='data:post.labels'> <b:loop values='data:post.labels' var='label'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=relpostimgcuplik&max-results=25"'/> </b:loop> <ul> <script>ignielRelatedList();</script> </ul> <b:else/> There is no other posts in this category. </b:if> </div> <div class='clear'/> </b:if>
Untuk var jumlah bisa menyesuaikan dengan keinginan Anda. Sekarang bisa langsung Anda praktikan pada blog atau website Anda. Semoga dengan memakai code ini bisa berhasil, seperti yang sudah saya lakukan pada blog saya.
0 Comments