Related Post Grid Dengan Thumbnail Di Bawah Postingan
Related Post Grid Dengan Thumbnail Di Bawah Postingan - Salah satu element yang cukup penting dalam sebuah blog adalah related post. Related post ini merupakan sederetan link yang mengarah ke postingan lain yang memiliki topik yang serupa dengan yang sedang dibaca.
Dengan meletakkan related post di dalam di halaman blog maka akan membuat pembaca lebih mudah menemukan artikel dengan topik sejenis atau bahkan seperti memancing pengunjung agar mau berlama-lama di blog kamu karena disuguhkan link ke halaman lain yang topiknya serupa.
Pemasangan related post ini akan efektif apabila artikel yang kamu buat adalah artikel yang menarik dan berkualitas.
 |
| Related Post Grid |
Dengan membuat atau mendesain related post sedemikian rupa maka ini akan memunculkan kesan yang elegan dan suatu blog akan terkesan menarik.
Dengan blog yang berisi konten menarik dan didukung tampilan menarik tentu akan membuat pengunjung semakin betah untuk berlama-lama di blog kamu.
Cara Memasang Related Post Dengan Thumbnail di Akhir Artikel
Related post juga sering disebut Artikel terkait yang dilengkapi dengan thumbnail tentu akan membuat lebih elegan dan menarik.Related post yang akan saya bahas ini berbentuk grid 3 kolom agar tidak membuat halaman terlalu penuh atau ramai.
Langkah memasang related post grid dibawah postingan adalah sebagai berikut:
1. Login ke Blogger
2. Klik Theme/Template dan kemudian Edit HTML
3. Cari kode ]]></b:skin> dan letakkan kode berikut ini diatas kode ]]></b:skin> tersebut
/* Related Post Grid by www.dekjoko.com */
#Related{
display:block;
margin:20px 0px;
line-height:1.5em;
}
#Related h3.title{
font-size:16px;
font-weight:600;
text-align:center;
text-transform:uppercase;
line-height:initial;
}
#Related h3.title span{
background-color:#fff;
padding:0px 15px;
position:relative;
z-index:1;
}
#Related h3.title:before{
content: '';
display: block;
position: relative;
top:10px;
width: 100%;
border-top: 2px solid #cccccc;
}
#Related ul{
margin:20px 0px 0px;
padding:0px;
display:flex;
display:-webkit-flex;
flex-wrap:wrap;
-webkit-flex-wrap:wrap;
-ms-flex-wrap:wrap;
}
#Related ul li{
list-style:none;
width:calc((100% / 3) - 15px);
text-align:center;
margin-right:20px;
margin-bottom:20px;
padding:0px;
-webkit-margin-start:0px !important;
}
#Related ul li .thumb{
overflow:hidden;
line-height:0px;
border-radius:7px;
}
#Related ul li:nth-of-type(3n){
margin-right:0px;
}
#Related ul li a{
display:block;
}
#Related ul li a.judul{
color:#000; /* Warna Huruf */
font-weight:600;
margin-top:7px;
}
#Related ul li a.judul:hover, #Related ul li:hover a.judul{
color:#3ac900; /* Warna Huruf Ketika Disorot */
}
#Related ul li a img{
width:100%;
max-height:143px;
transition:all .3s ease;
border:0px;
margin:0px;
}
#Related ul li a img:hover, #Related ul li:hover img{
transform:scale(1.1) rotate(-5deg);
filter: brightness(75%);
-webkit-filter: brightness(75%);
}
#Related .norelated{
text-align:center;
font-weight:600;
}
@media screen and (max-width:480px){
#Related ul li{
width: calc((100% / 2) - 7.5px);
margin-right:15px;
margin-bottom:15px;
}
#Related ul li:nth-of-type(3n){
margin-right:15px;
}
#Related ul li:nth-of-type(2n){
margin-right:0px;
}
}
4. Cari kode <data:post.body/> dan letakkan kode berikut diatas kode <data:post.body/> tersebut.
<!-- Related Post Grid by www.dekjoko.com -->
<b:if cond='data:view.isPost'>
<div id='Related'>
<h3 class='title'><span>Related Posts</span></h3>
<script>//<![CDATA[
var jumlah = 6;
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=["\y","\x\1f\f\k\h","\f\e\q\C\h\E","\w","\k\q\A\e\1Y\1d\P","\x\z\U\x\h\n\k\q\C","","\1l\F\k\q","\e\q\h\n\1E","\P\e\e\A","\1H\h","\h\k\h\f\e","\S\F\q\h\e\q\h","\x\z\v\v\g\n\1E","\v\e\A\k\g\1H\h\E\z\v\U\q\g\k\f","\z\n\f","\A\g\h\g\2n\k\v\g\C\e\D\1f\q\C\2q\U\g\x\e\1M\1z\2p\k\1t\1w\1d\1C\1i\2k\2j\2e\C\F\b\b\b\b\1I\1n\Z\E\V\Z\C\b\b\b\b\V\b\b\b\b\1w\O\b\1r\b\b\b\O\W\A\1b\2f\e\b\b\b\b\b\1A\1I\O\1n\1t\W\1r\O\b\1l\U\1z\Z\D\C\b\b\b\b\2h\V\f\V\W\1t\W\1r\v\1T\1d\F\n\1M\2g\2b\b\b\1B\1X\b\1W\1V\1j\1d\1K\1G\1J\b\b\b\b\b\V\f\1K\1J\1k\1n\z\W\v\O\O","\f\k\q\1k","\n\e\f","\g\f\h\e\n\q\g\h\e","\E\n\e\P","\n\g\q\A\F\v","\P\f\F\F\n","\Z\1C\1B","\y\f\k\w","\y\A\k\1j\K\S\f\g\x\x\I\p\h\E\z\v\U\p\w\y\g\K\E\n\e\P\I\p","\p\K\h\k\h\f\e\I\p","\p\w\y\k\v\C\K\x\n\S\I\p","\D\1i\1b\2a\1b\X\E\1b\1G\1A\X\1f\X\1k\X\q\F\X\q\z","\n\e\1f\f\g\S\e","\p\K\g\f\h\I\p","\p\D\w\y\D\g\w\y\D\A\k\1j\w","\y\g\K\E\n\e\P\I\p","\p\K\S\f\g\x\x\I\p\1l\z\A\z\f\p\w","\y\D\g\w","\y\D\f\k\w","\1i\n\k\h\e"];d Q=0,l=J H(),r=J H(),B=J H();1c 2l(t,T){d i=t[a[1]](a[0]);N(d j=0;j<i[a[2]];j++){u(i[j][a[4]](a[3])!=-1){i[j]=i[j][a[5]](i[j][a[4]](a[3])+1,i[j][a[2]])}};i=i[a[7]](a[6]);i=i[a[5]](0,T-1);1q i}1c 2d(T){N(d i=0;i<T[a[9]][a[8]][a[2]];i++){d t=T[a[9]][a[8]][i];l[Q]=t[a[11]][a[10]];1g=a[6];u(a[12]1h t){1g=t[a[12]][a[10]]}1s{u(a[13]1h t){1g=t[a[13]][a[10]]}};u(a[14]1h t){1m=t[a[14]][a[15]]}1s{1m=a[16]};B[Q]=1m;N(d j=0;j<t[a[17]][a[2]];j++){u(t[a[17]][j][a[18]]==a[19]){r[Q]=t[a[17]][j][a[20]];1o}};Q++}}1c 1L(1p,i){N(d j=0;j<1p[a[2]];j++){u(1p[j]==i){1q 1Q}};1q 1P}1c 1R(){d L=J H(0);d R=J H(0);d 1N=J H(0);d Y=J H(0);N(d m=0;m<r[a[2]];m++){u(!1L(L,r[m])){L[a[2]]+=1;L[L[a[2]]-1]=r[m];R[a[2]]+=1;R[R[a[2]]-1]=l[m];1N[a[2]]+=1;Y[a[2]]+=1;Y[Y[a[2]]-1]=B[m]}};l=R;r=L;B=Y;N(d m=0;m<l[a[2]];m++){d G=1a[a[22]]((l[a[2]]-1)*1a[a[21]]());d 1O=l[m];d 1F=r[m];d 1v=B[m];l[m]=l[G];r[m]=r[G];B[m]=B[G];l[G]=1O;r[G]=1F;B[G]=1v};d 1e=0;d o=1a[a[22]]((l[a[2]]-1)*1a[a[21]]());d 1D=o;d M;d 1y=1u[a[23]];2i(1e<1x){u(r[o]!=1y){M=a[24];M+=a[25]+r[o]+a[26]+l[o]+a[27]+B[o][a[29]](/\/s[0-9]+(\-c)?/,a[28])+a[2o]+l[o]+a[26]+l[o]+a[2c];M+=a[2m]+r[o]+a[2r]+l[o]+a[1Z];M+=a[1S];1u[a[1U]](M);1e++;u(1e==1x){1o}};u(o<l[a[2]]-1){o++}1s{o=0};u(o==1D){1o}}}',62,152,'||||||||||_0x91f7|x41||var|x65|x6C|x61|x74|_0x46aax8|_0x46aax9|x69|judul|_0x46aax12|x72|_0x46aax18|x27|x6E|urls||_0x46aax6|if|x6D|x3E|x73|x3C|x75|x64|gambar|x67|x2F|x68|x6F|_0x46aax13|Array|x3D|new|x20|_0x46aaxe|_0x46aax1a|for|x43|x66|rel|_0x46aaxf|x63|_0x46aax7|x62|x45|x51|x2D|_0x46aax11|x55|||||||||||Math|x31|function|x4F|_0x46aax17|x70|postcontent|in|x77|x76|x6B|x6A|postimg|x53|break|_0x46aaxc|return|x49|else|x56|document|_0x46aax16|x42|jumlah|_0x46aax1b|x34|x33|x4C|x52|_0x46aax19|x79|_0x46aax15|x32|x24|x4E|x54|x46|contains|x36|_0x46aax10|_0x46aax14|false|true|RelatedGrid|35|x57|36|x37|x58|x2B|x78|34|||||||||||x39|x48|31|relpostimgcuplik|x47|x50|x38|x44|while|x4B|x30|filter|32|x3A|30|x2C|x3B|33'.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>RelatedGrid();</script>
</ul>
<b:else/>
There is no other posts in this category.
</b:if>
</div>
<div class='clear'/>
</b:if>5. Klik Save/Simpan
Itulah cara memasang related post grid dengan thumbnail dibawah artikel, semoga akan membuat tampilan blog kamu semakin elegan dan menarik. Semoga bermanfaat dan terima kasih.
Posting Komentar untuk "Related Post Grid Dengan Thumbnail Di Bawah Postingan"