Ads

Related Post Blogger Support External Host Image

Related Post Blogger Support External Host Image
Dagruel

Dari request seseorang saya buatkan related post blogger yang support dengan external host image jadi langsung saja menuju tutor nya.

Pertama simpan lah css berikut di atas tag </style>.

#relatedPostDagruel {
  margin-bottom: 25px;
  width: 100%;
  background: #fff;
  border-radius: 2px;
  padding-bottom: 0;
}

#relatedPostDagruel h2 {
  border: 0;
  padding: 9px 19px;
  border-bottom: 1px solid #f1f1f1;
  float: none;
  color: #0c70de;
  font-size: 19px;
  font-weight: 500;
  margin: 0;
  margin-bottom: 10px;
}

#relatedPostDagruel .relatedDag {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 15px;
  padding: 0 10px 10px;
}

.relatedDag .ruelPost {
  position: relative;
  overflow: hidden;
  transition: all .2s;
  -webkit-transition: all .2s;
  -moz-transition: all .2s;
}

.ply {
  z-index: 1;
  background: rgba(0, 0, 0, .67);
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity .3s linear;
}

.ruelPost a {
  text-decoration: none;
}

.ruelPost .isThumb {
  padding: 140% 0 0;
  position: relative;
  overflow: hidden;
  background: #f1f1f1;
  line-height: 0;
}

.ply, .ply:before, .ruelPost .isThumb img {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
}

.isThumb img {
  object-fit: cover;
}

.ply:before {
  content: '';
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.68,12.32C16.92,10.56 14.07,10.57 12.32,12.33C10.56,14.09 10.56,16.94 12.32,18.69C13.81,20.17 16.11,20.43 17.89,19.32L21,22.39L22.39,21L19.3,17.89C20.43,16.12 20.17,13.8 18.68,12.32M17.27,17.27C16.29,18.25 14.71,18.24 13.73,17.27C12.76,16.29 12.76,14.71 13.74,13.73C14.71,12.76 16.29,12.76 17.27,13.73C18.24,14.71 18.24,16.29 17.27,17.27M10.9,20.1C10.25,19.44 9.74,18.65 9.42,17.78C6.27,17.25 4,15.76 4,14V17C4,19.21 7.58,21 12,21V21C11.6,20.74 11.23,20.44 10.9,20.1M4,9V12C4,13.68 6.07,15.12 9,15.7C9,15.63 9,15.57 9,15.5C9,14.57 9.2,13.65 9.58,12.81C6.34,12.3 4,10.79 4,9M12,3C7.58,3 4,4.79 4,7C4,9 7,10.68 10.85,11H10.9C12.1,9.74 13.76,9 15.5,9C16.41,9 17.31,9.19 18.14,9.56C19.17,9.09 19.87,8.12 20,7C20,4.79 16.42,3 12,3Z' fill='%23fff'/%3E%3C/svg%3E");
}

.ruelPost:hover .ply {
  visibility: visible;
  opacity: 1;
}

.ruelPost:hover .ply:before {
  opacity: 15;
}

.ruelPost .data {
  height: auto;
  text-align: center;
}

.ruelPost .data .title {
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  color: #222d34;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  padding-top: 3px;
}
Catatan: Di situ kan ada css yang di tandai silahkan ubah sesuikan dengan keinginan kalian masing masing.
padding: 140% 0 0; > padding: 56.6% 0 0; //Gambar Potrait menjadi Landscape
grid-template-columns: repeat(5, 1fr); > grid-template-columns: repeat(4, 1fr); //Dari 5 columns menjadi 4
background-image: blablbla; //Mengatur gambar saat di sorot.

Selanjutnya pemasangan HTML dan Script, tempelkan code berikut di antara tag <b:includable>blablablablabla</b:includable> yang ada di dalam widget Blog1.

  <b:includable id='relatedpostCustom'>
    <script type='text/javascript'>
      //<![CDATA[
      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;}('1T T=["\\1g\\d\\m\\p\\o\\f\\e\\j\\1g\\v\\E\\w\\d\\q\\1h\\1D\\D\\D\\c\\b\\1x\\b\\1j\\b\\1q\\D\\H\\1c\\D\\1y\\H\\1A\\D\\1t\\D\\1e\\D\\1l\\D\\1w\\H\\1k\\H\\1J\\b\\1o\\q\\j\\c\\Y\\d\\16\\j\\c\\S\\d\\16\\j\\c\\h\\d\\c\\U\\j\\c\\O\\d\\c\\J\\j\\c\\r\\d\\c\\y\\j\\c\\G\\d\\1f\\j\\W\\p\\c\\o\\f\\1F\\R\\1B\\e\\L\\J\\p\\i\\d\\1F\\b\\c\\V\\f\\q\\x\\q\\e\\j\\B\\f\\J\\p\\k\\d\\E\\j\\k\\x\\i\\b\\y\\j\\k\\u\\u\\e\\L\\V\\f\\i\\v\\k\\w\\b\\1d\\f\\q\\I\\q\\e\\17\\d\\H\\c\\e\\L\\i\\v\\k\\w\\d\\i\\v\\k\\w\\b\\15\\f\\i\\v\\k\\w\\b\\1d\\f\\q\\I\\q\\e\\u\\c\\R\\i\\v\\k\\w\\b\\y\\e\\M\\M\\i\\d\\i\\b\\c\\F\\f\\q\\q\\e\\j\\i\\d\\i\\b\\15\\f\\E\\R\\1B\\H\\c\\e\\j\\S\\p\\i\\M\\J\\p\\N\\d\\m\\p\\o\\f\\e\\j\\J\\p\\F\\d\\E\\j\\J\\p\\U\\d\\m\\p\\o\\f\\e\\j\\J\\p\\A\\d\\m\\p\\o\\f\\e\\j\\W\\p\\c\\n\\f\\1m\\e\\L\\B\\f\\J\\p\\k\\d\\E\\j\\k\\x\\1m\\b\\1G\\b\\z\\b\\y\\j\\k\\u\\u\\e\\L\\J\\p\\z\\d\\1m\\b\\1G\\b\\z\\v\\k\\w\\j\\N\\v\\F\\w\\d\\z\\b\\c\\18\\b\\1E\\g\\j\\c\\s\\L\\A\\v\\F\\w\\d\\z\\b\\c\\13\\b\\c\\k\\M\\c\\A\\f\\c\\z\\e\\L\\i\\d\\z\\b\\c\\1a\\b\\1E\\g\\j\\n\\d\\i\\b\\1d\\f\\q\\x\\c\\1f\\q\\e\\j\\O\\d\\i\\b\\1d\\f\\q\\c\\E\\d\\1r\\q\\q\\R\\n\\e\\j\\K\\d\\i\\b\\1d\\f\\q\\1r\\q\\q\\R\\O\\u\\18\\e\\j\\G\\d\\i\\b\\c\\m\\f\\O\\u\\18\\R\\K\\H\\O\\H\\18\\e\\j\\V\\f\\f\\n\\17\\d\\H\\c\\e\\Z\\Z\\f\\O\\17\\d\\H\\c\\e\\Z\\Z\\f\\K\\17\\d\\H\\c\\e\\Z\\Z\\f\\G\\17\\d\\q\\q\\e\\e\\L\\A\\v\\F\\w\\d\\G\\M\\1u\\p\\A\\v\\F\\w\\d\\C\\1h\\1D\\D\\D\\c\\b\\1x\\b\\1j\\b\\1q\\D\\H\\1c\\D\\1y\\H\\1A\\D\\1t\\D\\1e\\D\\1l\\D\\1w\\H\\1k\\H\\1J\\b\\1o\\C\\M\\V\\f\\N\\v\\F\\w\\b\\y\\I\\11\\e\\N\\v\\F\\w\\d\\N\\v\\F\\w\\b\\15\\f\\E\\R\\11\\e\\u\\q\\b\\b\\b\\q\\j\\B\\f\\J\\p\\1a\\d\\E\\j\\1a\\x\\z\\b\\1b\\b\\y\\j\\1a\\u\\u\\e\\L\\V\\f\\z\\b\\1b\\v\\1a\\w\\b\\c\\i\\d\\d\\C\\c\\B\\C\\e\\L\\U\\v\\F\\w\\d\\z\\b\\1b\\v\\1a\\w\\b\\c\\N\\j\\F\\u\\u\\M\\M\\M\\M\\W\\p\\c\\10\\f\\e\\L\\J\\p\\Y\\d\\m\\p\\o\\f\\E\\e\\j\\J\\p\\10\\d\\m\\p\\o\\f\\E\\e\\j\\J\\p\\X\\d\\m\\p\\o\\f\\E\\e\\j\\B\\f\\J\\p\\k\\d\\E\\j\\k\\x\\U\\b\\y\\j\\k\\u\\u\\e\\L\\V\\f\\17\\c\\Q\\f\\Y\\R\\U\\v\\k\\w\\e\\e\\L\\Y\\b\\y\\u\\d\\c\\j\\Y\\v\\Y\\b\\y\\H\\c\\w\\d\\U\\v\\k\\w\\j\\10\\b\\y\\u\\d\\c\\j\\X\\b\\y\\u\\d\\c\\j\\10\\v\\10\\b\\y\\H\\c\\w\\d\\N\\v\\k\\w\\j\\X\\v\\X\\b\\y\\H\\c\\w\\d\\A\\v\\k\\w\\M\\M\\N\\d\\10\\j\\U\\d\\Y\\j\\A\\d\\X\\M\\W\\p\\c\\Q\\f\\n\\R\\h\\e\\L\\B\\f\\J\\p\\13\\d\\E\\j\\13\\x\\n\\b\\y\\j\\13\\u\\u\\e\\V\\f\\n\\v\\13\\w\\d\\d\\h\\e\\S\\p\\16\\j\\S\\p\\c\\t\\M\\W\\p\\c\\X\\f\\e\\L\\B\\f\\J\\p\\k\\d\\E\\j\\k\\x\\U\\b\\y\\j\\k\\u\\u\\e\\L\\V\\f\\f\\U\\v\\k\\w\\d\\d\\c\\g\\e\\a\\a\\f\\17\\f\\N\\v\\k\\w\\e\\e\\e\\L\\U\\b\\t\\f\\k\\R\\c\\e\\j\\N\\b\\t\\f\\k\\R\\c\\e\\j\\A\\b\\t\\f\\k\\R\\c\\e\\j\\k\\H\\H\\M\\M\\J\\p\\l\\d\\c\\c\\b\\c\\14\\f\\f\\N\\b\\y\\H\\c\\e\\1L\\c\\c\\b\\c\\l\\f\\e\\e\\j\\J\\p\\k\\d\\E\\j\\V\\f\\N\\b\\y\\I\\E\\e\\s\\b\\r\\f\\C\\x\\1C\\I\\C\\u\\c\\16\\u\\C\\x\\D\\1C\\I\\C\\e\\j\\s\\b\\r\\f\\C\\x\\Q\\p\\14\\d\\q\\c\\1m\\q\\D\\I\\C\\e\\j\\c\\15\\f\\k\\x\\N\\b\\y\\Z\\Z\\k\\x\\c\\J\\Z\\Z\\k\\x\\c\\1u\\e\\L\\s\\b\\r\\f\\C\\x\\Q\\p\\14\\d\\q\\c\\W\\q\\I\\x\\n\\C\\e\\j\\V\\f\\k\\17\\d\\E\\e\\s\\b\\r\\f\\C\\C\\e\\j\\1u\\p\\s\\b\\r\\f\\C\\C\\e\\j\\s\\b\\r\\f\\C\\p\\c\\N\\d\\q\\C\\u\\U\\v\\l\\w\\u\\C\\q\\I\\x\\Q\\p\\14\\d\\q\\c\\1b\\q\\I\\x\\Q\\p\\14\\d\\q\\c\\1d\\q\\I\\x\\D\\Q\\I\\x\\c\\1f\\p\\c\\E\\d\\q\\C\\u\\A\\v\\l\\w\\u\\C\\q\\D\\I\\x\\D\\Q\\I\\x\\Q\\p\\14\\d\\q\\c\\K\\q\\I\\x\\Q\\p\\14\\d\\q\\c\\18\\q\\I\\C\\u\\N\\v\\l\\w\\u\\C\\x\\D\\Q\\I\\x\\D\\Q\\I\\x\\D\\n\\I\\x\\D\\Q\\I\\C\\e\\j\\V\\f\\l\\x\\N\\b\\y\\H\\c\\e\\L\\l\\u\\u\\M\\1u\\L\\l\\d\\E\\M\\k\\u\\u\\M\\s\\b\\r\\f\\C\\x\\D\\Q\\I\\C\\e\\j\\U\\b\\t\\f\\E\\R\\U\\b\\y\\e\\j\\A\\b\\t\\f\\E\\R\\A\\b\\y\\e\\j\\N\\b\\t\\f\\E\\R\\N\\b\\y\\e\\M","\\a","\\i\\B\\m\\k\\g","\\a\\a\\m\\h\\s\\A\\g\\z\\a\\Y\\n\\l\\a\\a\\a\\l\\h\\m\\n\\g\\h\\G\\11\\k\\g\\m\\h\\i\\a\\G\\k\\Y\\a\\l\\h\\m\\n\\g\\h\\G\\1x\\l\\m\\i\\a\\k\\F\\a\\a\\a\\a\\a\\a\\l\\h\\m\\n\\g\\h\\G\\11\\k\\g\\m\\h\\i\\1l\\t\\r\\a\\g\\z\\t\\r\\O\\t\\l\\m\\a\\h\\s\\g\\l\\W\\a\\a\\a\\a\\s\\h\\X\\a\\X\\l\\k\\g\\h\\a\\G\\o\\K\\t\\r\\h\\s\\g\\a\\S\\l\\l\\n\\W\\a\\F\\o\\l\\a\\K\\m\\n\\i\\i\\a\\a\\a\\a\\i\\B\\m\\k\\K\\h\\a\\g\\r\\B\\a\\g\\r\\B\\J\\a\\g\\r\\B\\y\\a\\F\\t\\s\\K\\g\\k\\o\\s\\a\\k\\s\\G\\h\\10\\1w\\F\\a\\l\\h\\g\\t\\l\\s\\a\\m\\k\\s\\1a\\a\\i\\t\\O\\i\\g\\l\\k\\s\\A\\a\\g\\l\\t\\h\\a\\h\\m\\i\\h\\a\\13\\i\\o\\s\\a\\k\\r\\A\\l\\a\\z\\g\\g\\B\\i\\a\\S\\S\\S\\S\\S\\S\\S\\S\\1h\\W\\o\\a\\K\\z\\o\\B\\a\\F\\h\\h\\G\\a\\i\\g\\l\\10\\a\\Q\\1k\\S\\l\\1e\\11\\c\\K\\o\\11\\1e\\1f\\s\\Q\\V\\y\\1j\\16\\1B\\N\\m\\1o\\1e\\1b\\10\\B\\15\\z\\1g\\13\\s\\Y\\A\\15\\1c\\K\\1b\\1g\\S\\i\\1o\\1h\\A\\a\\i\\E\\a\\G\\n\\A\\l\\t\\h\\m\\a\\14\\18\\1y\\1l\\F\\1c\\1j\\X\\h\\1k\\1A\\a\\1g\\B\\k\\z\\y\\1C\\V\\l\\1t\\a\\K\\o\\r\\a\\O\\m\\o\\A\\i\\B\\o\\g\\a\\J\\18\\a\\O\\B\\a\\s\\o\\a\\k\\r\\n\\A\\h\\a\\a\\B\\s\\A\\a\\z\\y\\a\\i\\l\\K\\a\\1e\\n\\g\\z\\a\\a\\y\\E\\a\\k\\r\\A\\a\\g\\k\\g\\m\\h\\a\\z\\l\\h\\F\\a\\K\\o\\s\\g\\n\\k\\s\\i\\19\\g\\z\\t\\r\\O\\i\\a\\1f\\E\\E\\a\\i\\B\\m\\k\\g\\a\\l\\h\\m\\n\\g\\h\\G\\19\\l\\h\\i\\t\\m\\g\\i\\19\\m\\n\\O\\h\\m\\i\\19\\g\\z\\t\\r\\O\\i\\a\\i\\t\\r\\r\\n\\l\\W\\11\\k\\g\\m\\h\\a\\G\\n\\g\\n\\a\\s\\t\\r\\B\\o\\i\\g\\i\\y\\a\\i\\t\\r\\r\\n\\l\\W\\1c\\o\\i\\g\\a\\13\\o\\k\\s\\a\\K\\n\\g\\K\\z\\a\\h\\l\\l\\o\\l\\a\\t\\l\\m\\a\\A\\F\\o\\l\\r\\19\\F\\o\\o\\g\\a\\K\\o\\s\\g\\h\\s\\g\\a\\i\\t\\O\\i\\g\\l\\a\\s\\t\\r\\B\\o\\i\\g\\i\\c\\a\\g\\l\\W\\a\\l\\h\\r\\o\\Y\\h\\1h\\g\\r\\m\\11\\n\\A\\a\\n\\m\\g\\h\\l\\s\\n\\g\\h\\a\\F\\m\\o\\o\\l\\a\\l\\n\\s\\G\\o\\r\\a\\l\\h\\m\\a\\K\\t\\l\\l\\h\\s\\g\\B\\o\\i\\g\\t\\l\\m\\a\\F\\n\\m\\i\\h\\a\\i\\z\\o\\X\\1q\\n\\s\\G\\o\\r\\1t\\r\\A\\a\\l\\h\\m\\n\\g\\h\\G\\16\\n\\A\\l\\t\\h\\m\\19\\g\\z\\t\\r\\O\\s\\n\\k\\m\\a\\l\\h\\r\\o\\Y\\h\\1q\\h\\m\\n\\g\\h\\G\\16\\t\\B\\m\\k\\K\\n\\g\\h\\i\\19\\g\\z\\t\\r\\O\\i\\a\\l\\t\\h\\m\\1c\\o\\i\\g\\a\\B\\m\\W\\a\\n\\1b\\o\\m\\G\\a\\k\\i\\11\\z\\t\\r\\O\\a\\X\\z\\k\\m\\h\\a\\l\\h\\m\\n\\g\\h\\G\\B\\o\\i\\g\\i\\g\\k\\g\\m\\h\\a\\r\\n\\10\\l\\h\\i\\t\\m\\g\\i\\a\\l\\h\\m\\n\\g\\h\\G\\16\\n\\A","","\\F\\l\\o\\r\\15\\z\\n\\l\\15\\o\\G\\h","\\l\\h\\B\\m\\n\\K\\h","\\1r\\X\\u","\\1r\\O","\\A"];1U(1s(1p,1v,P,1i,12,1z){12=1s(P){1n(P<1v?T[4]:12(1V(P/1v)))+((P=P%1v)>1S?1I[T[5]](P+1W):P.1O(1N))};1K(!T[4][T[6]](/^/,1I)){1H(P--){1z[12(P)]=1i[P]||12(P)};1i=[1s(12){1n 1z[12]}];12=1s(){1n T[7]};P=1};1H(P--){1K(1i[P]){1p=1p[T[6]](1M 1R(T[8]+12(P)+T[8],T[9]),1i[P])}};1n 1p}(T[0],1P,1Q,T[3][T[2]](T[1]),0,{}))',62,121,'||||||||||x7C|x2E|x31|x3D|x29|x28|x74|x65|x73|x3B|x69|x72|x6C|x61|x6F|x20|x22|x6D|x6E|x75|x2B|x5B|x5D|x3C|x32|x68|x67|x70|x27|x2F|x30|x66|x64|x2D|x3E|x33|x63|x7B|x7D|x36|x62|_0x952dx3|x37|x2C|x41|_0xa49b|x38|x39|x79|x77|x76|x26|x78|x54|_0x952dx5|x6A|x71|x43|x44|x21|x35|x5F|x6B|x42|x50|x7A|x4D|x34|x47|x48|_0x952dx4|x53|x56|x4E|x46|return|x59|_0x952dx1|x52|x5C|function|x49|x45|_0x952dx2|x4F|x55|x58|_0x952dx6|x51|x4A|x5A|x3A|x24|x4C|x4B|while|String|x57|if|x2A|new|36|toString|62|104|RegExp|35|var|eval|parseInt|29'.split('|'),0,{}));
      //]]>
    </script>
    <div id='relatedPostDagruel'>
      <b:loop index='i' values='data:post.labels' var='label'>
        &lt;script src=&#039;/feeds/posts/default/-/<data:label.name/>?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=5&#039; type=&#039;text/javascript&#039;&gt;&lt;/script&gt;
      </b:loop>
      &lt;script async=&#039;async&#039; type=&#039;text/javascript&#039;&gt;
      var currentposturl = &quot;<data:post.url/>&quot;;
      var maxresults = 6; //Jumlah Postingan
      var relatedpoststitle = &quot;Judul Related Post&quot;;
      relatedDagruel_thumbnail();
      &lt;/script&gt;
    </div>
  </b:includable>

Satu lagi, tempelkan kode berikut di tempat yang kalian inginkan biasa nya di taro sebelum / sesudah tag <data:post.body/>.

<b:include cond='data:view.isSingleItem' data='post' name='relatedpostCustom'/>

Jika sudah silahkan simpan template dan lihat hasil nya. Sekian dari saya Terima Kasih.

Comments

Blogger Disqus
  • Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
  • Jika ingin menulis kode maka harus di-parse terlebih dulu (terutama Javascript dan HTML)
  • Gunakan <i> untuk menuliskan kode. Contoh:
    <i>#comments</i>
  • Gunakan <em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
    <em>#comments {margin:0; padding:10px 15px}</em>
×

Berlangganan

Dapatkan pemberitahuan melalui email setiap ada artikel baru. Gratis!