Cara Membuat Gambar Related Post Thumbnail Youtube Responsive di Blog

Baca Juga

Related Post Gambar Thumbnail Youtube Responsive Anti Gepeng

PeluangSukses.Com - Jika Anda menulis baris ini di halaman Anda dan menjalankan halaman di browser, Anda akan melihat bahwa teksnya sudah responsif (mungkin atau mungkin tidak). Tetapi bahkan jika skrip html ini menginstruksikan browser untuk mempertimbangkan penyesuaian, maka pekerjaan pengembang bisa dikatakan selesai di sini. 

Membuat situs web responsif yang lengkap mencakup banyak elemen seperti menyetel lebar relatif untuk elemen penampung, pengujian kompatibilitas browser  dan memasang gambar yang dirender sesuai dengan ukuran layar. Dari semua elemen ini, yang paling menantang adalah gambar.

Bagi kamu yang sedang mencari koding untuk membuat thumbnail video youtube mu dapat ditampilkan di related post atau artikel terkait maka bisa mencoba kode berikut: 

1. Tempatkan Kode Berikut kedalam template diatas comment atau dibawah

<data:post.body/>

 Atau bisa menempatkan paling bawah susunan HTML post body dalam template.

<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-post'>
<div class='relhead'>
  <h4>Postingan Terkait</h4>
<div class='clear'/>
          <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;amp;callback=relpostimgcuplik&amp;amp;max-results=50&quot;' type='text/javascript'/>
          </b:loop>
          <ul id='related-summary'>
               <script type='text/javascript'>artikelterkait();</script>
          </ul>
     </div>
</div>
<div class='clear'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

2. Tempatkan Kode CSS berikut kedalam template diatas 

]]></b:skin>

Atau bisa ditempatkan bersama kode CSS lain:

   <!--Related Posts with thumbnails Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#related-post {margin:0 auto;padding:0;}
#related-post h4{position:relative;overflow:hidden;margin:10px 0 20px 0;font-size:120%;font-weight:700}
#related-post h4:after{position:absolute;top:51%;overflow:hidden;width:78.3%;height:1px;content:&#39;a0&#39;;background-color:#ccc}
#related-post h4 span{position:relative;display:inline-block;margin:0 10px 0 0}
.relhead {font-size:100%;font-weight:normal;line-height:150%;overflow:hidden;padding:10px 0;}
#related-summary .news-text {display:none;}
ul#related-summary{margin:0 auto;padding:0;list-style:none;word-wrap:break-word}
ul#related-summary li {
    position: relative;
    float: left;
    list-style: none outside none;
    padding: 0;
    overflow: hidden;
    margin: 1.8%;
    width: 46%;
    height: 200px;
    transition: opacity .2s ease;
    box-shadow: 0 1px 4px rgb(0 0 0 / 36%);
    border-radius: 5px;
}
ul#related-summary li a {
    display: block;
    max-height: 135px;
    overflow: hidden;
}
ul#related-summary li img{background-color:#fafafa;display:block;width:100%;height:auto;max-width:100%;vertical-align:middle;overflow:hidden;margin:0 0 10px;transition:all 1s ease-out}
ul#related-summary li:hover img {opacity:0.96;}
ul#related-summary li a.relinkjdulx{margin:5px;background-image:none;color:#444;display:block;font-weight:700;line-height:normal;overflow:hidden;padding:0;text-align:left;text-transform:none}
ul#related-summary li a.relinkjdulx:hover{color:#c00;}
@media only screen and (max-width:640px){
ul#related-summary li { }
  ul#related-summary li a {
    display: block;
    max-height: 120px;
    overflow: hidden;
}
ul#related-summary li:last-child{border-bottom:none;}
ul#related-summary li img{float:left;margin:0 10px 0 0;}
ul#related-summary li a.relinkjdulx {display:block;font-size:15px;font-weight:700;line-height:normal;overflow:hidden;padding:0 10px 10px 0;}}
@media screen and (max-width:384px){
ul#related-summary li img{}
 ul#related-summary li img {
    background-color: #fafafa;
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    vertical-align: middle;
    overflow: hidden;
    margin: 0 0 10px;
    transition: all 1s ease-out;
} }
</style></b:if>
<!--Related Posts with thumbnails Styles End-->

3. Tempatkan kode skrip dibawah ini kedalam template letakan diatas

</head> atau </body>

<!-- Related Posts with Thumbnails Code Script Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'><script type='text/javascript'>
//<![CDATA[
//Related Post
var relnojudul = 0;
var relmaxtampil = 6;
var numchars = 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}function 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" in g){postcontent=g.content.$t}else{if("summary" in g){postcontent=g.summary.$t}}relcuplikan[relnojudul]=saringtags(postcontent,numchars);if("media$thumbnail" in g){postimg=g.media$thumbnail.url}else{postimg="http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.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++}}function contains(a,e){for(var f=0;f<a.length;f++){if(a[f]==e){return true}}return false}function 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;while(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}}};
//]]>
</script>
<script type='text/javascript'>
$(&quot;ul#related-summary li img&quot;).each(function(){$(this).attr(&quot;src&quot;,$(this).attr(&quot;src&quot;).replace(//s[0-9]+(-c)?//,&quot;/w175-h100-c/&quot;))});
</script>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->  

4. Klik Simpan 

Semoga lancar jika terjadi kendala coba tempatkan nomor 1 pada susunan paling bawah post body. biasanya susunan HTML ditutup dengan tombol share atau comment tempatkan diantara itu.