×

Author / Admin / Editor

     Jagoan Redesign    

Blog yang membahas Tutorial Blogger, Games, Template, Tips Adsense, SEO, Web Design dan Teknologi

Iklan Bawah Posting

Cara Membuat Widget Related Post Grid Keren di Blogger

Cara Membuat Widget Related Post Grid Keren di Blogger
Jagoanredesign - Kali ini saya akan membagikan sebuah tutorial Cara Membuat Widget Related Grid di Blogger anda pasti tidak asing lagi dengan sebuah widget related post atau artikel terkait, merupakan sebuah widget yang bertujuan untuk menampilkan artikel-artikel yang memiliki hubungan dengan artikel yang sedang dibaca oleh pengunjung pada sebuah blog.

Biasanya widget ini terletak di bawah artikel atau postingan. bagi seorang blogger fitur ini seharusnya memang sudah tidak asing lagi. Related Post dipasang dengan tujuan yaitu agar pada saat pengunjung selesai membaca suatu artikel di blog, pengunjung dapat melihat artikel dibawah nya yang ada kaitan nya dengan artikel yang telah dia baca.

dengan semakin banyak nya jumlah artikel yang dibaca, itu dapat berperan penting untuk meningkatkan jumlah page view pada sebuah blog. Dengan banyak nya page view pada suatu postingan blog, merupakan poin yang baik bagi blog anda di mata search engine google. 

Cara Membuat Widget Related Post Grid Keren di Blogger

1. Silahkan Login ke Blogger.
2. Selanjutnya masuk ke menu TEMA > klik Edit HTML.
3. Kemudian cari kode berikut ini ]]></b:skin>  atau </style> dan pastekan kode dibawah ini tepat DIATAS kode tersebut.
/* Related Post By Jagoan Redesign */
#JagoanRedesignRelated{display:block;margin:10px 0;line-height:1.5em;margin-bottom:-10px;transition:all .5s ease;background:#fff;padding:10px;padding-bottom:0;border-radius:7px}.Night #JagoanRedesignRelated{background:#25294a}.Night #JagoanRedesignRelated h3.title{background:#25294a;color:#fff}#JagoanRedesignRelated h3.title{font-size:16px;font-weight:600;text-align:left;text-transform:uppercase;line-height:initial;top:-5px}#JagoanRedesignRelated h3.title span{background-color:#fff;padding:0 15px;position:relative;z-index:1;top:-5px;margin-left:-20px}#JagoanRedesignRelated h3.title:before{content:'';display:block;position:relative;top:10px;width:100%;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 48.34 4.99' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon fill='%23fd0000' points='27.36 0 48.34 0 45.48 4.99 24.5 4.99 27.36 0'%3E%3C/polygon%3E%3Cpolygon fill='%23657786' points='2.86 0 23.84 0 20.98 4.99 0 4.99 2.86 0'%3E%3C/polygon%3E%3C/svg%3E");height:6px}#JagoanRedesignRelated ul{margin:10px 0 0;padding:0;display:flex;display:-webkit-flex;flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap}#JagoanRedesignRelated ul li{list-style:none;width:calc((100% / 3) - 15px);text-align:left;margin-right:20px;margin-bottom:20px;padding:0;-webkit-margin-start:0px!important;font-size:14px;font-family:'Google Sans'}#JagoanRedesignRelated ul li .thumb{overflow:hidden;line-height:0;border-radius:7px}#JagoanRedesignRelated ul li:nth-of-type(3n){margin-right:0}#JagoanRedesignRelated ul li a{display:block}#JagoanRedesignRelated ul li a.judul{color:#000;font-weight:400;margin-top:7px}#JagoanRedesignRelated ul li a.judul:hover,#JagoanRedesignRelated ul li:hover a.judul{color:#fd0000}#JagoanRedesignRelated ul li a img{width:100%;max-height:143px;transition:all .3s ease;border:0;margin:0}#JagoanRedesignRelated ul li a img:hover,#JagoanRedesignRelated ul li:hover img{transform:scale(1.1) rotate(-5deg);filter:brightness(75%);-webkit-filter:brightness(75%)}#JagoanRedesignRelated .norelated{text-align:center;font-weight:600}@media screen and (max-width:480px){#JagoanRedesignRelated ul li{width:calc((100% / 2) - 7.5px);margin-right:15px;margin-bottom:15px}#JagoanRedesignRelated ul li:nth-of-type(3n){margin-right:15px}#JagoanRedesignRelated ul li:nth-of-type(2n){margin-right:0}}
4. Setelah itu anda cari kode <data:post.body/> template, dan letakan kode Javascript dibawah ini tepat setelah atau dibawahnya. Kode <data:post.body/> biasanya ada lebih dari satu, untuk anda pengguna template Viomagz anda bisa meletakan kode ini tepat dibawah kode <b:includable id='relatedpost' var='post'>.
<!-- Related Post  by JagoanRedesign.eu.org -->
<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"></path></svg> 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|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='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=relpostimgcuplik&amp;max-results=25"'/>
      </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>
<!-- Related Post  by JagoanRedesign.eu.org -->
5. Selanjutnya anda SIMPAN TEMA dan Selesai.

Nah, itu adalah tutorial Cara Membuat Widget Related Post Grid Keren di Blogger semoga totorial bermanfaat bagi anda semua. jika ada yang ingin  anda tanyakan silakan berkomentar saja di bawah.
Previous
Next Post »
avatar
Penulis Blog dan redesigner template blogger.

Related Posts

Komentar
Tutup Komentar

Komentar

  • Berkomentarlah secara bijaksana dan bertanggung jawab.
  • Tidak diperbolehkan mempromosikan barang atau berjualan.
  • Tulis komentar Anda untuk hal yang masih berhubungan dengan posting pada halaman ini.
  • Dilarang memuat Link Aktif pada kolom komentar
  • Komentar dengan link aktif akan otomatis dihapus.
  • Jika ingin menulis kode silahkan anda parse terlebih dulu (terutama Javascript dan HTML)
  • Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
  • Gunakan tag <i> dan diakhiri dengan kode </i> untuk menuliskan kode. Contoh:
    <i>#comments</i>
  • Gunakan tag <em> dan diakhiri dengan kode </em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
    <em>#comments {margin:0; padding:10px 15px}</em>

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel