Ads

Custom Post Dengan Scroll Blogger (AniFilm Version)

Custom Post Dengan Scroll Blogger (AniFilm Version)
Dagruel

Step 1: Pasang Script dan CSS

CSS: di dalam template cari tag ]]></b:skin>. Lalu pasang code berikut tepat di atas nya.

.customAF{background-color:#2f2519}.customAF.scroll{position:relative;padding:5px 10px}.customAF.scroll .scrollButton{display:inline-block;position:absolute;top:calc(50% - 43px);z-index:3;background:#fa7d09;transition:.3s;padding:10px;outline:0;border:none;cursor:pointer;opacity:0}.customAF.scroll:hover .scrollButton{opacity:.9}.customAF.scroll .scrollButton:hover{background:#ff4301;opacity:1}.scrollButton.left{left:10px}.scrollButton.right{right:10px}.scrollButton svg{width:24px;height:24px;vertical-align:middle}.scrollButton svg path{fill:#fff}.customAF .inner{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:wrap;padding:5px 5px 0;width:calc(100% - 10px)}.customAF .inner.scrolling{flex-wrap:none;display:grid;grid-gap:10px;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));grid-auto-flow:column;grid-auto-columns:minmax(160px,1fr);overflow-x:auto;scroll-behavior:smooth;padding:0;width:100%}.customAF .inner .customAgata{float:left;width:calc(20% - 10px);padding:0 5px;margin-bottom:10px}.customAF .inner.scrolling .customAgata{float:none;width:auto!important;padding:0;margin:0}.customAgata .images{position:relative}.customAF .inner .customAgata .images figure{position:relative;margin:0;padding-top:142%;border-radius:3px;overflow:hidden}.customAgata .images figure:after,.customAgata .images figure:before{content:''}.customAgata .images figure img,.customAgata .images figure:after,.customAgata .images figure:before{position:absolute;left:0;right:0;bottom:0;top:0}.customAgata .images figure:before{margin:auto;width:3rem;height:3rem;line-height:3rem;text-align:center;font-size:1.5rem;z-index:2;transform:scale(0);background-repeat:no-repeat;background-position:center;background-size:50px;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M10,16.5L16,12L10,7.5V16.5Z' fill='%23fff'/%3E%3C/svg%3E");transition:transform .2s ease-out}.customAgata:hover .images figure:before{opacity:1;transform:scale(1)}.customAgata .images figure img{object-fit:cover}.customAgata .images figure img,.customAgata .images figure:after{width:100%;height:100%}.customAgata .images figure:after{border-radius:3px;background-color:#263238;opacity:0;transition:opacity .2s ease-out}.customAgata:hover .images figure:after{opacity:.5}.customAgata a{text-decoration:none;color:#ddd}.customAgata .entry-title{font-size:13px;margin-top:5px;margin-bottom:0;overflow:hidden;text-align:center;line-height:20px;transition:.4s;max-height:40px;font-weight:400}@media screen and (max-width:1120px){.customAF .inner .customAgata{width:calc(25% - 10px)}}@media screen and (max-width:768px){.customAF .inner .customAgata{width:calc(33.333333% - 10px)}}@media screen and (max-width:544px){.customAF .inner .customAgata{width:calc(50% - 10px)}}.customAF .inner.scrolling::-webkit-scrollbar{display:none}

Script: masih di dalam template cari tag </head>. Dan pasang script berikut di atas nya.

<script type='text/javascript'>
  /* <![CDATA[ */
  const aniFilmPx={run:(e,t,l)=>{aniFilmPx.elem=document.getElementById(e),aniFilmPx.label=t,aniFilmPx.number=l;let n=document.createElement("script");n.src=`/feeds/posts/default/-/${aniFilmPx.label}?alt=json&callback=aniFilmPx.compile&max-results=${aniFilmPx.number}`,document.write(n.outerHTML)},compile:e=>{if(!aniFilmPx.elem)return;const t=e.feed,l=document.createElement("div");l.classList.add("inner");let n="";t.entry.length>0&&(t.entry.length>6&&(aniFilmPx.elem.classList.add("scroll"),l.classList.add("scrolling")),t.entry.forEach(e=>{let t=e.title.$t,l=e.content.$t,i=e.link.find(e=>{if("alternate"===e.rel)return e}).href,r=e.media$thumbnail?e.media$thumbnail.url.match(/\/s[0-9]{2}-(w[0-9]+-)?c/)?e.media$thumbnail.url.replace(/\/s[0-9]{2}-(w[0-9]+-)?c/,"/w225-h335-p-k-no-nu"):e.media$thumbnail.url.replace(/\=s[0-9]{2}-(w[0-9]+-)?c/,"=w225-h335-p-k-no-nu"):aniFilmPx.convertImage(l);n+=`<article class="customAgata">\n        <a href="${i}">\n          <div class="images">\n            <figure>\n              <img src="${r}" alt="${t}">\n            </figure>\n          </div>\n          <h2 class="entry-title">${t}</h2>\n        </a>\n      </article>`}),l.innerHTML=n,aniFilmPx.elem.innerHTML=`${l.outerHTML}\n      <button onclick="aniFilmPx.sB(this)" class="scrollButton left"><svg viewBox="0 0 24 24"><path fill="currentColor" 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,12M15.4,16.6L10.8,12L15.4,7.4L14,6L8,12L14,18L15.4,16.6Z"></path></svg></button>\n      <button onclick="aniFilmPx.sN(this)" class="scrollButton right"><svg viewBox="0 0 24 24"><path fill="currentColor" 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,12M8.6,16.6L13.2,12L8.6,7.4L10,6L16,12L10,18L8.6,16.6Z"></path></svg></button>`)},convertImage:e=>{let t=e,l=t.indexOf("<img"),n=t.indexOf('src="',l),i=t.indexOf('"',n+5),r=t.substr(n+5,i-n-5);return-1!=l&&-1!=n&&-1!=i&&""!=r?r:"https://1.bp.blogspot.com/-q5XNfPSweVQ/X-Gpih2Z9rI/AAAAAAAAHyo/7VArMT1coTM4n792SDJ6lYMBxpChGjnvgCPcBGAsYHg/s0/dagruel-no-image.png"},sN:e=>{let t=e.parentElement.querySelector(".inner.scrolling"),l=t.clientWidth;t.scrollLeft+=l},sB:e=>{let t=e.parentElement.querySelector(".inner.scrolling"),l=t.clientWidth;t.scrollLeft-=l}};
  /* ]]> */
</script>

Step 2: Memanggil Script

Pertama Buka Tata Letak di halaman admin Blogger klik tambahkan widget pilih widget HTML salin code berikut dan tempelkan. Simpan.

<div id='AttributeID' class='customAF'>
  <script>
    aniFilmPx.run('AttributeID', 'Label', JumlahPostingan);
  </script>
</div>

Ganti text yang di tandai sesuai keterangan text yang ditandai.

2 komentar

Blogger Disqus
  1. Wah ini yg kutunggu. Bikin tema jadi lebih gampang kalau widget sudah siap dipake.
    Apakah harus pake jQuery?
    Kalau tidak menyusahkan kamu, apa ada versi random post?

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