Home  ›  template  ›  Tutorial

Cara Buat Postingan Terkait Grid di Blog

Hello sahabat kita semua perlu tahu ini ada satu tips tutorial bagaimana cara agar tampilan postingan terkait menjadi mode grid atau gambar 2 bagian.

Pada umum nya kita harus paham dulu tentang code html dan css karena jika anda membuat suatu postingan terkait ingin menampil gambar mode grid anda harus pelajari dulu html dan css.

Jika sudah tau dasar dasar dari html dan css maka anda akan mudah dengan sendiri nya untuk mengedit tampilan halaman utama anda baik pada postingan blog anda.

Namun parasabat disni tidak perlu ragu karena saya akan memberikan tips lengkap tampa sahabat tau tentang ilmu coding atau pemograman.

Oya sahabat pastikan dulu bahwa anda sudah mempunyai sebuat akun blogger yang sudah terbuat kerna jika anda belum membuat akun blogger saya rasa postingan saya ini tidak ada gunanya untuk anda.

Baiklah agar mempersingkat waktu kita bagimana kita langsung saja praktek nya.

1.pertama anda login ke blogger.
2.masuk ke tema.
Jika sudah masuk ke Tema  lalu copy code di bawah ini .

/* Related Post By Harian Batam */

#populer-post{display:block;margin:10px 0;line-height:1.2em;margin-bottom:-10px;transition:all .5s ease;background:#fff;padding:0px;padding-bottom:0;border-radius:3px}
#populer-post h3.title span{background-color:#fff;padding:0 5px;position:relative;z-index:999;top:-5px;margin-left:10px}
#populer-post ul{margin:0px 0 0;padding:0;display:flex;display:-webkit-flex;flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap}#populer-post ul li{list-style:none;width:calc((100% / 3) - 15px);text-align:left;margin-right:10px;margin-bottom:10px;padding:0;-webkit-margin-start:0px!important;font-size:16px;font-family:'Google Sans'}
#populer-post ul li:nth-of-type(2n){margin-right:20}#populer-post ul li a{display:block}
#populer-post ul li a.judul{color:#000;font-weight:400;margin-top:7px}
#populer-post ul li a.judul:hover}
#populer-post ul li:hover a.judul{color:#fd0000}
#populer-post ul li a img{width:100%;max-height:220px;transition:all .3s ease;border:0;margin:0}
#populer-post ul li a img:hover,#populer-post ul li:hover img{transform:scale(1.1) rotate(-5deg);filter:brightness(50%);-webkit-filter:brightness(50%)}#populer-post .norelated{text-align:center;font-weight:600}@media screen and (max-width:480px){#populer-post ul li{width:calc((100% / 2) - 7.5px);margin-right:15px;margin-bottom:15px}#JagoanRedesignRelated ul li:nth-of-type(2n){margin-right:15px}#JagoanRedesignRelated ul li:nth-of-type(2n){margin-right:0}}
#populer-post ul li .thumb{box-sizing: border-box; overflow: hidden; position: relative; width: 175px; height:200px}




Ingat ya sahabat pasti kan parasahabat meletakan code nya dengan benar aitu tepat di atas cody </b:skin> kerna diani lah letak semua stuktur code code css.

Perlu di ketahui jika anda ingin mengatur tinggi gambar dalam postingan terkait yang di tampilkan anda bisa mengaturnya dengan height dan jika anda ingin mengatur lebar kabar bisa dengan width.

Terserah anda mau membuat ukuran tinggi lebar nya sebesar apa yag mau anda tentukan.

Ke 3  cari code <data:post.body/> lalu copy lagi code di bawah ini.
       
           <b:if cond='data:view.isPost'>
  <div id='JagoanRedesignRelated'>
    <h3 class='title'><span><svg style='height: 24px; margin-right: 7px; vertical-align: -6px; width: 24px;' viewbox='0 0 24 24'><path d='M21,9L17,5V8H10V10H17V13M7,11L3,15L7,19V16H14V14H7V11Z' fill='#fd0000'/></svg>Berita Terkait </span></h3>
    <script>//<![CDATA[
      var jumlah = 4;
      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|JagoanRedesignRelatedGrid|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='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgcuplik&amp;max-results=25&quot;'/></b:loop> <ul><script>JagoanRedesignRelatedGrid();</script> </ul><b:else/> There is no other posts in this category.  </b:if> </div>
<div class='clear'/>
</b:if>          

Lalu paste kan tepat di bawah ini juga perlu anda ketahui ya sahabat Var yang tertulis di atas dengan angka 4 itu adalah  berapa bnyak jumlah postingan terkait yang di Tampilkan nah jika sobat ingin menampilkan postingan terkait dengan sesuai keingin anda ganti saja angka 4 tersebut.

Jika anda kesusahan untuk menacari code tersebut saya akan memberikan cara pencarian dengan mudah agar sahabat tidak perlu repot repot untuk mencari nya.

Gini cara nya untuk mencari code nya pilih satu yang ada tetap di bawah blog atau postingan populer lalu klik dan tarik ke atas pelan pelan saja maka akan terlihat nanti .



Di dalam gambar terlihat jelas  tulisan blog dan postinga populer nah anda tinggal pilih saja jika anda pilih postingan populer maka anda scrol ke atas untuk mencari code  <div  data post body>  tersebut.

Jika anda mememilih yang bertulisan Blog anda bisa scroll ke bawah untuk mencari code <data:post.body/>
              

Nah jika sudah ketemu tempalkan  saja  code yang sudah saya sebut kan  di atas tepat di bawah <data:post.body/> contoh tampilan nya seperti gambar di Bawah ini.



Selanjut nya simpan tempalte nya maka lihat hasil yang akan di tampilka  di dalam postingan blog tersebut.

Mungkin sampai sini dulu tutorial dari harian batam semoga ini bermamfaat buat anda semua yah.