Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Membuat Widget Related Post Lengkap dengan Gambar

Daftar Isi [Tampil]

Cara Membuat Widget Related Post - Dalam artikel kali ini admin akan membagikan sebuah tutorial cara membuat widget related post yang di khususkan untuk blogger.

Gambar Cara Membuat Widget Related Post
Cara Membuat Widget Related Post
Widget Related Post ini biasanya muncul dibawah atau di akhir artikel kalian, yang memiliki kegunaan yaitu jika orang sudah selesai membaca artikel yang kalian bagikan maka mereka bisa memilih artikel yang lainnya lagi karena mereka melihat widget related post ini.

Namun cara ini di khususkan hanya untuk platform Blogger saja ya sobat, kalo untuk platform Wordpress ini gak bakalan berhasil.

Apa Sih Widget Related Post ?

Widget Related Post merupakan sebuah JavaScript tambahan yang bisa membantu anda agar visitor anda betah berlama-lama di blog atau situs anda.

Dengan menggunakan javascript ini kemungkinan besar visitor anda akan selalu mencari apa yang mereka inginkan di blog anda, oleh karena itulah usahakan blog anda memiliki banyak konten.

Nah mungkin kurang lebihnya seperti itu, sekarang kita akan lanjutkan tutorial cara membuat widget related post, untuk tutorial selengkapnya sobat boleh simak langkah-langkahnya dibawah ini.

Cara Membuat Related Post di Blogspot

  • Langkah pertama kalian bisa login terlebih dahulu menggunakan akun blogger kalian.
  • Jika kalian sudah masuk dan sudah didalam dashboard blogger kalian, sekarang kalian cari menu “Tema
  • Setelah Tema di temukan sekarang kalian langsung saja klik “Edit HTML
  • Setelah itu kalian silahkan cari kode </head> di template kalian masing-masing lalu kalian tambahan kode di bawah ini tepat di atas kode head tadi.
    <gaya>
    
    /* Posting Terkait Blog Acids*/ #related-post {display:block; margin:20px 0px; tinggi garis: 1.5em;}
    
    #related-post h4{ ukuran font:17px; font-berat: 600; perataan teks:pusat; transformasi teks:huruf besar; tinggi garis:awal; } #related-post h4 span{ background-color:#fff; bantalan:0px 15px; posisi: relatif; indeks-z:1; } #related-post h4:sebelum{ konten: ‘’; tampilan: blok; posisi: relatif; atas:15px; lebar: 100%; border-top: 2px solid #068488; }
    
    #related-summary .news-text {display:none;}
    
    Ul#related-summary{margin:20px 0px 0px; bantalan: 0 piksel; tampilan: fleksibel; tampilan:-webkit-flex; bungkus fleksibel: bungkus; -webkit-flex-wrap:bungkus; -ms-flex-wrap:bungkus;}
    
    Ul#ringkasan-terkait li{gaya-daftar:tidak ada; lebar:calc((100% / 3) – 15px); perataan teks:kiri; margin-kanan:20px; margin-bawah:20px; bantalan: 0 piksel; -webkit-margin-start:0px !important;}
    
    Ul#ringkasan-terkait li img{ overflow:hidden; tinggi garis:0px; batas-radius:4px; }
    
    Ul#ringkasan-terkait li:nth-of-type(3n){ margin-kanan:0px; } ul#related-summary li a{ display:block; }
    
    Ul#ringkasan-terkait li img{lebar:100%; tinggi: 117 piksel; transisi: semua .3s mudah; batas: 0 piksel; margin:0px;}
    
    Ul#related-summary li:hover img {transform:scale(1.1); filter: kecerahan (75%); -webkit-filter: kecerahan (75%);}
    
    Ul#related-summary li a.relinkjdulx{background-image:none;color:#000;display:block;font-size:13px;font-weight:600;line-height:normal;overflow:hidden;padding:0 ;text-align:left;text-transform:none;margin-top:7px}
    
    Ul#related-summary li a.relinkjdulx:hover{color:#066;}
    
    @media saja layar dan (max-width:480px){
    
    Ul#ringkasan-terkait li{ lebar: calc((100% / 2) – 7.5px); margin-kanan:15px; margin-bawah:15px; }
    
    Ul#related-summary di img{ height:85px;}
    
    Ul#related-summary li:nth-of-type(3n){ margin-kanan:15px; } ul#related-summary li:nth-of-type(2n){ margin-right:0px; }}
    
    </ gaya>
    
    <script type=’text/javascript’>
    
    //<![CDATA[
    
    //Pos Terkait
    
    Var relnojudul = 0;
    
    Var relmaxtampil = 6;
    
    Var angka = 120;
    
    Var reljudul=new Array();var relurls=new Array();var relcuplikan=new Array();var relgambar=new Array();function saringtags(g,h){var e=g.split(“<” );for(var f=0;f<e.length;f++){if(e[f].indexOf(“>”)!=-1){e[f]=e[f].substring(e [f].indexOf(“>”)+1,e[f].length)}}e=e.join(“”);e=e.substring(0,h-1);return e}fungsi relpostimgcuplik (h){for(var e=0;e<h.feed.entry.length;e++){var g=h.feed.entry[e];reljudul[relnojudul]=g.title.$t;postcontent= “”;if(“content” di g){postcontent=g.content.$t}else{if(“summary” di g){postcontent=g.summary.$t}}relcuplikan[relnojudul]=saringtags(postcontent ,numchars);if(“media$thumbnail” dalam g){postimg=g.media$thumbnail.url}else{postimg=https://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU /s1600/abu-abu.GIF}relgambar[relnojudul]=postimg;for(var f=0;f<g.link.length;f++){if(g.link[f].rel==”alternate”){relurls[relnojudul]=g. Link[f].href;break}}relnojudul++}}fungsi berisi(a,e){for(var f=0;f<a.length;f++){if(a[f]==e){return true }}return false}fungsi artikelterkait(){var v=new Array(0);var w=new Array(0);var x=new Array(0);var A=new Array(0);for(var u =0;u<relurls.length;u++){if(!contains(v,relurls[u])){v.length+=1;v[v.length-1]=relurls[u];w.length+= 1;w[w.length-1]=reljudul[u];x.length+=1;x[x.length-1]=relcuplikan[u];A.length+=1;A[A.length-1] =relgambar[u]}}reljudul=w;relurls=v;relcuplikan=x;relgambar=A;for(var u=0;u<reljudul.length;u++){var B=Math.floor((reljudul.length) -1)*Math.random());var i=reljudul[u];var s=relurls[u];var y=relcuplikan[u];var C=relgambar[u];reljudul[u]=reljudul[ B];relurls[u]=relurls[B];relcuplikan[u]=relcuplikan[B];relgambar[u]=relgambar[B];reljudul[B]=i;relurls[B]=s;relcuplikan[B]=y;relgambar[B]=C}var r =0;var D=Math.floor((reljudul.length-1)*Math.random());var z=D;var q;var t=document.URL;sementara(r<relmaxtampil){if(relurls [D]!=t){q=”<li class=’news-title clearfix’>”;q+=”<a href=’”+relurls[D]+”’ rel=’nofollow’ target=’_top ‘ title=’”+reljudul[D]+”’><img src=’”+relgambar[D]+”’ /></a>”;q+=”<a class=’relinkjdulx’ href=’” +relurls[D]+”’ target=’_top’>”+reljudul[D]+”</a>”;q+=”<span class=’news-text’>”+relcuplikan[D]+”< /span>”;q+=”</li>”;document.write(q);r++;if(r==relmaxtampil){break}}if(D<reljudul.length-1){D++}else{D=0}if(D==z){break}}};
    
    //]]>
    
    </skrip>

  • Kalo kalian mau menampilkan widget ini di bawah postingan, kalian bisa cari kode <data:post.body/> dan tempelkan kode ini tepat dibawahnya.
    <!—Posting Terkait Blog Acidsà
    
    <b:if cond=’data:blog.pageType == “item”’>
    
    <div id=’related-post’>
    
    <div class=’relhead’>
    
      <h4><span>Pos Terkait</span></h4>
    
    <div class=’clear’/>
    
              <b:loop values=’data:post.labels’ var=’label’>
    
                   <script expr:src=’”/feeds/posts/default/-/” + data:label.name + “?alt=json-in-script&amp;callback=relpostimgcuplik&max-results=50”’ type=’text/javascript’/>
    
              </b:loop>
    
              <ul id=’related-summary’>
    
                   <script type=’text/javascript’>artikelterkait();</script>
    
              </ul>
    
         </div>
    
    </div>
    
    <div class=’clear’/>
    
    </b:jika>
    
    <!—Posting Terkait Selesaià

  • Dan Selesai, lalu Klik Simpan.

Nah, demikianlah informasi cara membuat widget related post yang dapat admin warga selatan sampaikan. Semoga informasi ini bisa bermanfaat dan berguna bagi warga semua.

Masih ada banyak sekali artikel yang admin belum sampaikan, jadi dalam kesempatan selanjutnya admin akan membagikannya kembali kepada warga semua, Sekian dan Terimakasih.

Pencarian paling banyak di cari :

  • cara buat related post grid
  • cara membuat baca juga di blog
  • cara membuat related post thumbnail di blogger
  • cara membuat related post di blogspot
  • cara membuat related post di tengah postingan
  • cara membuat artikel terkait keren di blog

Posting Komentar untuk "Cara Membuat Widget Related Post Lengkap dengan Gambar"