Langsung ke konten utama

Cara Membuat Gambar Related Post Thumbnail Youtube Responsive di Blog

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.
    

PeluangSukses.Com

5 Rekomendasi Private Pool Villa di Sekitar Purwokerto Tarif Mulai dari Perjam Hingga Perhari

6 Korean Movies With Historical Themes Insert Uncensored Sex Scenes

8 Situs Penyedia Iklan Crypto Selain Google Adsense Untuk Blog Publishers

10 AutoSurf Traffic Exchange Pertukaran Lalu Lintas Terbaik

Monetisasi Blog Dengan Iklan Native Ads 40 Terbaik Publishers Advertiser

Warung Makan Putri Gunung Baturaden ! Cerita Keluarga

10 Tempat Wisata Malam Purwokerto Bersama Pasangan atau Keluarga

Antara Prestasi Anies dan Prestasi Bank DKI

Kemenangan dan Kekalahan Politik Identitas di 2017 DKI Jakarta

5 Cara Tetap Sejuk di Cuaca Panas Tanpa AC Rumah

Support : Copyright © 2019. Peluang Sukses - Informasi Usaha, Bisnis dan Gaya Hidup - All Rights Reserved