Ads

AniFilm / HoatHinh Anime Info Source Code

Lazy Load Untuk Komentar Disqus (Blogger)
Dagruel

CSS

Pasang Css Berikut di atas tag ]]></b:skin>.

.boxFile p{margin:10px 0}.boxFile{padding:10px}.boxFile .attention{margin:20px;padding:15px;border:1px solid transparent;background-color:#fa7d09;color:#fff;border-radius:4px}.boxInfo,.boxSinopsis{position:relative;z-index:1;padding:1.25rem;margin-bottom:1.25rem;color:#fff;box-sizing:content-box}.boxInfo *,.boxSinopsis *{box-sizing:content-box}.boxHeader .title{line-height:36px;padding:7px 0;margin:0;font-size:1.875rem;font-weight:300;color:#ff4301}.boxHeader .subTitle{font-size:1rem;font-weight:inherit;line-height:20px;margin:0 0 1.25rem}.boxHeader .images{position:relative;width:180px;margin:0 auto 1.25rem}.boxHeader .images figure{position:relative;margin:0;padding-top:260px;border-radius:3px}.boxHeader .images figure img{position:absolute;left:0;top:0;width:100%;height:100%}.boxHeader .description{max-height:100px;overflow:auto;margin:0 0 20px;opacity:.7}.boxSinopsis .boxFooter{padding-top:19px;border-top:1px solid #4a3f35}.boxSinopsis .boxFooter:after,.boxSinopsis .boxFooter:before{content:'';display:block;overflow:hidden}.boxSinopsis .boxFooter:after{clear:both}.boxFooter .rating{position:relative;min-height:40px;margin-bottom:20px;padding-top:3px}.boxFooter .rating .rt{position:relative;font-size:10px;min-width:90px}.boxFooter .rating .rt .tenStar{position:relative;height:15px;color:#ffe203;outline:0;width:160px;float:none;display:inline-block}.boxFooter .rating .rt .tenStar span:before,.boxFooter .rating .rt .tenStar:before{content:"";position:absolute;top:-1px;left:0;min-width:100%;min-height:16px}.boxFooter .rating .rt .tenStar span{overflow:hidden;top:0;left:0;position:absolute;padding-top:20px}.boxFooter .rating .rt .tenStar:before{background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z' fill='%23ddd'/%3E%3C/svg%3E") 16px}.boxFooter .rating .rt .tenStar span:before{background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z' fill='%23ffc107'/%3E%3C/svg%3E") 16px}.boxFooter .rating .rt p{margin:0}.boxFooter .info{margin-bottom:20px}.boxFooter .info>span{display:inline-block;vertical-align:top;font-size:14px;line-height:20px;margin-right:.5rem;margin-bottom:4px}.boxFooter .info>span:not(:last-child):after{content:'/';margin-left:10px}.boxBackground img,.boxBackground:after,.boxBackground:before,.boxSinopsis .boxBackground{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:3px}.boxSinopsis .boxBackground{z-index:-1;pointer-events:none}.boxBackground:after,.boxBackground:before{content:''}.boxBackground:before{opacity:.3;background-color:#4a3f35}.boxBackground:after{box-shadow:inset 0 0 100px rgb(0 0 0 / 50%);background:#2f2519;opacity:.8}.boxBackground img{object-fit:cover;object-position:top}.boxInfo{margin-top:-20px;padding:0;overflow:hidden;margin-bottom:0}.boxInfo .navInfo{background:#2f2519;padding:20px 10px 0;border-bottom:1px solid transparent;font-size:0}#navInfox ul li:before,.navInfo .btnBoxInfo:before{background-position:center;content:''}.navInfo .btnBoxInfo{padding-bottom:1.25rem;padding-left:3px;padding-right:3px;display:inline-block;vertical-align:top;margin-right:20px;margin-bottom:-1px;position:relative;font-weight:400;box-shadow:none;border-bottom:3px solid transparent;white-space:nowrap;line-height:1.25rem;cursor:pointer;transition:all .2s}.navInfo .btnBoxInfo.on{font-size:16px;color:#fa7d09;border-bottom-color:currentColor}.navInfo .btnBoxInfo.on:after{content:'';position:absolute;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid currentColor;left:0;right:0;margin:auto;bottom:-7px;z-index:3}.navInfo .btnBoxInfo:before{display:inline-block;vertical-align:-6px;width:24px;height:24px;background-size:16px;background-repeat:no-repeat}.navInfo .btnBoxInfo[data-id*=navInfox]:before{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13,9H18.5L13,3.5V9M6,2H14L20,8V20A2,2 0 0,1 18,22H6C4.89,22 4,21.1 4,20V4C4,2.89 4.89,2 6,2M15,18V16H6V18H15M18,14V12H6V14H18Z' fill='%23FF4301'/%3E%3C/svg%3E")}.navInfo .btnBoxInfo[data-id*=navTrailerx]:before{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10,15L15.19,12L10,9V15M21.56,7.17C21.69,7.64 21.78,8.27 21.84,9.07C21.91,9.87 21.94,10.56 21.94,11.16L22,12C22,14.19 21.84,15.8 21.56,16.83C21.31,17.73 20.73,18.31 19.83,18.56C19.36,18.69 18.5,18.78 17.18,18.84C15.88,18.91 14.69,18.94 13.59,18.94L12,19C7.81,19 5.2,18.84 4.17,18.56C3.27,18.31 2.69,17.73 2.44,16.83C2.31,16.36 2.22,15.73 2.16,14.93C2.09,14.13 2.06,13.44 2.06,12.84L2,12C2,9.81 2.16,8.2 2.44,7.17C2.69,6.27 3.27,5.69 4.17,5.44C4.64,5.31 5.5,5.22 6.82,5.16C8.12,5.09 9.31,5.06 10.41,5.06L12,5C16.19,5 18.8,5.16 19.83,5.44C20.73,5.69 21.31,6.27 21.56,7.17Z' fill='%23FF4301'/%3E%3C/svg%3E")}.navInfo .btnBoxInfo[data-id*=navDownloadx]:before{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 3H19C20.11 3 21 3.9 21 5V19C21 20.11 20.11 21 19 21H5C3.9 21 3 20.11 3 19V5C3 3.9 3.9 3 5 3M8 17H16V15H8V17M16 10H13.5V7H10.5V10H8L12 14L16 10Z' fill='%23FF4301'/%3E%3C/svg%3E")}.navInfo .btnBoxInfo[data-id*=navStreamingx]:before{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.75 7.46L12 3.93L13.97 3.54L16.71 7.07L14.75 7.46M21.62 6.1L20.84 2.18L16.91 2.96L19.65 6.5L21.62 6.1M4.16 5.5L3.18 5.69C2.1 5.91 1.4 6.96 1.61 8.04L2 10L6.9 9.03L4.16 5.5M11.81 8.05L9.07 4.5L7.1 4.91L9.85 8.44L11.81 8.05M2 10V20C2 21.11 2.9 22 4 22H13.81C13.3 21.12 13 20.1 13 19C13 15.69 15.69 13 19 13C20.1 13 21.12 13.3 22 13.81V10H2M17 22L22 19L17 16V22Z' fill='%23FF4301'/%3E%3C/svg%3E")}.boxInfo .infoItem#navInfox{display:none;width:calc(100% - 40px);max-width:100%;padding:20px}.boxInfo .infoItem.on#navInfox{display:inline-block}#navInfox .infoxLeft{float:left;width:calc(50% - 10px);margin-right:10px}#navInfox .infoxRight{float:right;width:50%}#navInfox li,#navInfox ul{padding:0;margin:0;list-style:none}#navInfox ul li{line-height:20px;padding:5px 0 5px 1.25em;position:relative}#navInfox ul li:before{position:absolute;top:9px;left:0;display:inline-block;width:12px;height:12px;background-size:12px;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12M20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12M6,10L12,16L18,10L16.6,8.6L12,13.2L7.4,8.6L6,10Z' fill='%23FF4301'/%3E%3C/svg%3E")}.boxInfo .infoItem{display:none;animation:dagruelZoom .35s ease-out;-moz-animation:dagruelZoom .35s ease-out;-webkit-animation:dagruelZoom .35s ease-out;-o-animation:dagruelZoom .35s ease-out}.boxInfo .infoItem.on{display:block}.infoBackground,.infoBackground:after,.infoBackground:before{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:3px}.infoBackground{z-index:-1;pointer-events:none}.infoBackground:before{content:'';background-color:#4a3f35;opacity:.5}.infoBackground:after{content:'';background:#2f2519;opacity:.1;box-shadow:none}@media screen and (min-width:768px){.boxSinopsis .boxHeader{padding-left:200px;position:relative;min-height:280px}.boxHeader .subTitle{margin-bottom:10px}.boxHeader .subTitle,.boxHeader .title{white-space:nowrap;-ms-text-overflow:ellipsis;text-overflow:ellipsis;overflow:hidden}.boxHeader .images{position:absolute;left:0;top:0}.boxFooter .rating{float:left;margin-bottom:0;padding-right:20px;border-right:1px solid #4a3f35;margin-right:20px}.boxFooter .info{float:left;margin-bottom:0;margin-top:10px}.navInfo .btnBoxInfo:before{margin-right:5px;background-size:24px}.navInfo .btnBoxInfo{font-size:.875rem;margin-right:40px}}.Trailerx,.Trailerx>.pembed{position:relative;overflow:hidden}@media screen and (min-width:992px){.boxSinopsis .boxHeader{min-height:200px}.boxSinopsis .boxFooter{margin-left:200px;position:relative}}.Trailerx{background:#2f2519}.Trailerx>.pembed{z-index:1;max-width:100%;height:0;padding-bottom:56.2%}.Trailerx>.pembed>iframe{position:absolute;border:none;width:100%;height:100%;top:0;left:0;margin:0;padding:0;z-index:2}@media screen and (min-width:48em) and (max-width:62em){.boxHeader .description{max-height:180px}}

Note: Css tersebut bawaan dari template AniFilm jadi warna nya harus kalian ganti secara manual jika tidak suka dengan warna nya.

Java Script

Pasang script berikut di atas tag </body>.

<script type='text/javascript'>
/*<![CDATA[*/
(navInfox=document.querySelectorAll(".btnBoxInfo"))&&navInfox.forEach(function(e){e.addEventListener("click",function(){var e=document.getElementById(this.dataset.id);if("navTrailerx"===this.dataset.id&&(Trailerx=e.querySelector(".Trailerx > .pembed > iframe").getAttribute("data-src"))){const t=e.querySelector(".Trailerx > .pembed > iframe");t.setAttribute("src",Trailerx),t.removeAttribute("data-src")}navInfox.forEach(function(e){e.classList.contains("on")&&e.classList.remove("on")}),this.classList.add("on"),(infoItem=document.querySelectorAll(".infoItem"))&&(infoItem.forEach(function(e){e.classList.contains("on")&&e.classList.remove("on")}),e.classList.add("on"))})});
/*]]>*/
</script>

HTML

Untuk HTML bisa kalian ambil Di sini. Dan Pilih bagian HoathHinh.

6 komentar

Blogger Disqus
  1. Min HoatHinh Anime Info ini yang mana sih? Btw bisa d pakai di theme Ss?

    BalasHapus
    Balasan
    1. Bisa.
      Seperti Template AniFilm
      https://hoathinh247tv.com/ani-platinum-end-3589.html

      Hapus
  2. min kalau mau ngambil nya yang ini aja bisa gak
    https://blogger.googleusercontent.com/img/a/AVvXsEikBnzuyGt4-dEp1TvhyymjoOwEhvq8zAaqsuLbgFr5piFw-QvK_1LXayEvSc61-1Sq5ZOd7eXO2JB55WwZjBhog3DCOgQ1Wpw_rGufYeUsqzKbxFTMh15lGKlCX4K6RDh1pGwrF12fnKpyoOOoJ3izNjEldV6HgXCSxy7ZHMlTdzlt8UVOAc6kkX7o=s865

    BalasHapus
  3. Bikin tutorial nambahin bookmark di aniflm min

    BalasHapus
    Balasan
    1. lg gk ada niat untuk membagikan fitur bookmark.

      Hapus
  • 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!