Membuat Related Post Grid Keren Disertai Gambar (Thumbnail)

Santos el Salam

28 September 2020

Widget Related Post biasa dijumpai di beberapa blog untuk menarik perhatian pengunjung agar tidak segera beranjak setelah mengunjungi artikel yang dibacanya. Oleh karenanya, widget ini biasanya berisi kumpulan link dari artikel-artikel yang masih terkait atau berisi topik pembahasan yang masih berhubungan dengan artikel yang sedang dibaca. Widget ini biasanya diletakkan di bagian bawah postingan meskipun ada juga yang memasangnya di tengah-tengah artikel. 

Dari segi manfaatnya, keberadaan widget ini juga sangat berpengaruh bagi SEO blog yang memasangnya. Related Post atau Artikel Terkait juga cukup berperan dalam meningkatkan Pageviews dan menurunkan Bounce Rate sehingga blog akan berpeluang untuk menarik banyak pengunjung dan sangat bagus bagi blog yang dijadikan sebagai sumber penghasilan. Tidak hanya itu saja, tampilan blog juga akan terlihat semakin profesional dengan adanya widget Related Post ini. 

Widget Related Post ada banyak macam bentuknya. Ada yang didesain sederhana hanya berupa judul-judul artikel, dan ada juga yang didesain menarik dengan menyertakan judul plus gambarnya. Salah satu bentuk tampilan yang disukai pengunjung adalah bentuk grid berisi beberapa judul artikel terkait yang dilengkapi dengan thumbnail (gambar). 

Nah, pada kesempatan kali ini, saya hendak berbagi script untuk membuat widget Related Post Grid dengan Thumbnail keren yang bersumber dari Igniel.com. Untuk tampilannya kurang lebih akan seperti berikut ini:

Related Posts Grid with thumbnail

Keren kan?, ayo silahkan pasang widget ini agar blog anda semakin keren dan pengunjung semakin suka pada blog anda. Simak cara pemasangannya di bawah ini.

Cara Membuat Related Post Grid with Thumbnail keren

1. Buka akun blogger anda.

2. Pilih menu thema dan klik edit html.

3. Cari kode ]]></b:skin> atau kode </style> untuk memasang kode CSSnya.

4. Jika sudah ketemu, silahkan copy kode di bawah ini dan letakkan di atas kode ]]></b:skin> atau </style>

/* Related Post Grid by igniel.com */ #ignielRelated{ display:block; margin:20px 0px; line-height:1.5em; } #ignielRelated h3.title{ font-size:16px; font-weight:600; text-align:center; text-transform:uppercase; line-height:initial; } #ignielRelated h3.title span{ background-color:#fff; padding:0px 15px; position:relative; z-index:1; } #ignielRelated h3.title:before{ content: ''; display: block; position: relative; top:10px; width: 100%; border-top: 2px solid #cccccc; } #ignielRelated ul{ margin:20px 0px 0px; padding:0px; display:flex; display:-webkit-flex; flex-wrap:wrap; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; } #ignielRelated 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; } #ignielRelated ul li .thumb{ overflow:hidden; line-height:0px; border-radius:7px; } #ignielRelated ul li:nth-of-type(3n){ margin-right:0px; } #ignielRelated ul li a{ display:block; } #ignielRelated ul li a.judul{ color:#000; /* Warna Huruf */ font-weight:600; margin-top:7px; } #ignielRelated ul li a.judul:hover, #ignielRelated ul li:hover a.judul{ color:#ff5722; /* Warna Huruf Ketika Disorot */ } #ignielRelated ul li a img{ width:100%; max-height:143px; transition:all .3s ease; border:0px; margin:0px; } #ignielRelated ul li a img:hover, #ignielRelated ul li:hover img{ transform:scale(1.1) rotate(-5deg); filter: brightness(75%); -webkit-filter: brightness(75%); } #ignielRelated .norelated{ text-align:center; font-weight:600; } @media screen and (max-width:480px){ #ignielRelated ul li{ width: calc((100% / 2) - 7.5px); margin-right:15px; margin-bottom:15px; } #ignielRelated ul li:nth-of-type(3n){ margin-right:15px; } #ignielRelated ul li:nth-of-type(2n){ margin-right:0px; } }

5. Masih di dalam html template, selanjutnya cari kode ini:

<data:post.body/> 

Jika sudah ketemu, letakkan kode berikut ini di bawah kode tersebut agar nantinya widget tampil di bawah postingan.

<!-- Related Post Grid by igniel.com -->

<b:if cond='data:view.isPost'>

  <div id='ignielRelated'>

    <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|ignielRelatedGrid|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&amp;callback=relpostimgcuplik&amp;max-results=25"'/>

      </b:loop>

      <ul>

        <script>ignielRelatedGrid();</script>

      </ul>

      <b:else/>

      There is no other posts in this category.

    </b:if>

  </div>

<div class='clear'/>

</b:if>

6. Simpan kembali template anda dan lihat hasilnya. 

Demikianlah Cara Membuat Related Post Keren Tampilan Grid Disertai Gambar (Thumbnail). Semoga bermanfaat.

Labels: Blogging

Thanks for reading Membuat Related Post Grid Keren Disertai Gambar (Thumbnail) . Please share...!

Facebook

Twitter