Ads

Cara Membuat Custom Post Blogger Dengan Multi Tab & Slider

Cara Membuat Custom Post Blogger Dengan Multi Tab & Slider
Dagruel

Tutor kali ini adalah versi upgrade dari "Custom Post Dengan Scroll Blogger (AniFilm Version)". Yang di upgrade menjadi Multi Tab Custom Post. Cek demo nya di bawah.

Cara Pasang

Script berikut memakai jQuery, jadi pastikan Template kalian sudah terpasang jQuery. Jika belum tambahkan script berikut di atas tag </head> pada template.

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js' integrity='sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==' crossorigin='anonymous'></script>

Jika jQuery sudah terpasang lanjut pasang script berikut di bawah tag jQuery yang di pasang tadi.

<script type='text/javascript'>/*<![CDATA[*/
const mTP={shuffleArray:t=>{var e,i,n=t.length;if(0===n)return!1;for(;--n;)e=Math.floor(Math.random()*(n+1)),i=t[n],t[n]=t[e],t[e]=i;return t},run:(t,e,i=10,n=5)=>{if(0==t("#mTP_Slider").length)return console.log("Tag mTP_Slider tidak ada");mTP.maxCat=n,mTP.max=i,window.matchMedia("(max-width: 600px)").matches&&(mTP.maxCat=3),window.matchMedia("(max-width: 480px)").matches&&(mTP.maxCat=2);const a=0==e?"":`/-/${e}`;t.ajax({url:`/feeds/posts/default${a}?alt=json-in-script&max-results=150`,type:"get",dataType:"jsonp",success:function(e){mTP.compile(t,e)},error:function(t){console.log(t)}})},compile:(t,e)=>{if("entry"in e.feed){const n=mTP.shuffleArray(e.feed.entry);mTP.filter=mTP.shuffleArray(e.feed.category.map(t=>t.term).filter(t=>{if(mTP.Select.includes(t))return t})).slice(0,mTP.maxCat),mTP.obj={},t.each(mTP.filter,function(e,i){n.filter(e=>{const n=e.category.map(t=>t.term);if(n.includes(i)){const a=mTP.obj[i];a?a.length<mTP.max&&a.push({title:e.title.$t,cat:n,link:e.link.find(t=>"alternate"==t.rel).href,image:"media$thumbnail"in e?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/,`/${mTP.iSize}-p-k-no-nu`):e.media$thumbnail.url.replace(/\=s[0-9]{2}-(w[0-9]+-)?c/,`=${mTP.iSize}-p-k-no-nu`):"content"in e?t(e.content.$t).find("img").attr("src"):mTP.noImage}):mTP.obj[i]=[{title:e.title.$t,cat:n,link:e.link.find(t=>"alternate"==t.rel).href,image:"media$thumbnail"in e?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/,`/${mTP.iSize}-p-k-no-nu`):e.media$thumbnail.url.replace(/\=s[0-9]{2}-(w[0-9]+-)?c/,`=${mTP.iSize}-p-k-no-nu`):"content"in e?t(e.content.$t).find("img").attr("src"):mTP.noImage}]}})});const a=t('<div class="series-gen"><ul class="nav-tabs"></ul><div class="listupd"></div></div>'),l=Object.keys(mTP.obj).sort().reduce((t,e)=>(t[e]=mTP.obj[e],t),{});for(var i in l){const e=i.replace(/\W/g,"");a.find(".nav-tabs").append(`<li><span data-id="series-${e}">${i}</span></li>`),a.find(".listupd").append(`<div id="series-${e}" class="customAF scroll"><div class="inner scrolling"></div>${mTP.btnPrev}${mTP.btnNext}</div>`),t.each(mTP.obj[i],function(){a.find(`#series-${e} .inner`).append(`<article class="customAgata">\n          <a href="${this.link}" title="${this.title}">\n            <div class="images">\n              <figure>\n                <img src="${this.image}" alt="${this.title}">\n              </figure>\n            </div>\n            <h2 class="entry-title">${this.title}</h2>\n          </a>\n        </article>`)})}t("#mTP_Slider").html(a),t(".nav-tabs li").click(function(){const e=t(this).find("span").attr("data-id");t(".customAF.scroll, .nav-tabs li").each(function(){t(this).attr("id")==e||t(this).find("span").attr("data-id")==e?t(this).addClass("active"):t(this).removeClass("active")})}),t(".nav-tabs li").first().click()}},sN:t=>{let e=t.parentElement.querySelector(".inner.scrolling"),i=e.clientWidth;e.scrollLeft+=i},sB:t=>{let e=t.parentElement.querySelector(".inner.scrolling"),i=e.clientWidth;e.scrollLeft-=i},btnNext:'<button onclick="mTP.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>',btnPrev:'<button onclick="mTP.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>',iSize:"w207-h300",noImage:"https://1.bp.blogspot.com/-BYDJ1dpFEhE/X9QnAUfeORI/AAAAAAAAHxw/OjfaqiPHjhAmCgJts39XIg7o4KR-8YtdACNcBGAsYHQ/w300-h225-p-k-no-nu/dagruel-no-image.png"};
mTP.Select = ["Adventure", "Action", "Comedy", "Drama", "Fantasy", "Sci-Fi", "Josei", "Supernatural", "Super Power", "Shoujo", "Music", "Police", "Game", "Historical", "Romance", "School", "Harem", "Sports", "Shounen", "Seinen"];
/*]]>*/</script>
Yang di tandai adalah daftar label yang akan di tampilkan di dalam Custom Post Multi Tab nya.

Selanjut nya pasang css berikut di atas code ]]></b:skin>.

.series-gen{background-color:#222}.series-gen ul.nav-tabs{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;list-style:none;margin:0;padding:6px;overflow:hidden;background:#333;border-radius:3px}.series-gen ul.nav-tabs li{margin:0 5px;flex:1;cursor:pointer}.series-gen ul.nav-tabs li span{display:block;text-align:center;padding:4px;font-size:13px;color:#fff;transition:all .3s}.series-gen ul.nav-tabs li:hover span{color:#6e4f9d}.series-gen ul.nav-tabs li.active span{background-color:#6e4f9d;color:#fff}.customAF.scroll{display:none;position:relative;padding:5px 10px}.customAF.scroll.active{display:block}.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}

Sampai sini silahkan simpan Template. Dan beralih ke Tata Letak. di Sini buatlah Widget HTML dan isi dengan script berikut.

<div id="mTP_Slider">
<script>mTP.run(jQuery, 'label', jumlahPost, jumlahTab)</script>
</div>

Berikut Penjelasan nya.

  • label: jika terdapat post yang tidak ingin di tampilkan maka silahkan tulis nama label nya misal "Series" tapi jika tidak artinya semua post maka tulis false hapus tanda kutip (').
  • jumlahPost: jumlah post yang akan tampil di setiap tab misal 10.
  • jumlahTab: jumlah Tab yang akan tampil misal 5. Di script atas itu daftar label nya kan ada banyak jadi kita tulis 5 di sini agar daftar label di atas di filter secara acak.

Contoh: mTP.run(jQuery, 'Series', 10, 5)

Contoh 2: mTP.run(jQuery, 'Series')

Pada Contoh Kedua tidak ada jumlahPost dan jumlahTab nya karena sudah di setting Default nya yaitu 10 dan 5.

Jika sudah silahkan simpan widget dan lihat hasil nya. Sekian dari saya, jika ada yang ingin di tanyakan silahkan tambahkan komentar di bawah.

13 komentar

Blogger Disqus
  1. Ini random post kan?
    Ada tombol reloadnya juga.

    BalasHapus
    Balasan
    1. random dari 150 post terbaru.

      Hapus
    2. Ok, makasih.
      Aku kebetulan lagi browsing nyari random post, mau bikin widget baru.

      Kebanyakan random post yg beredar loadingnya slow.
      Scrip JS km bagus, gk menghalagi block rendering.

      Hapus
  2. https://ibb.co/yB4Xk5k
    min, kan gambar / konten postnya yang ditampilin di dekstop ini per Tabnya itu 4 ya, bagaimana biar yang gambarnya jadi 5/mungkin 6 (dirubah) apakah bisa?

    BalasHapus
    Balasan
    1. Cari css ini.
      minmax(160px,1fr)
      Kecilin 160px jadi 140px atau lebih kecil.
      Lebih kecil lebih banyak dapat nya.

      Hapus
  3. min, bisa nggak untuk title judulnya dibatasin katanya (misal kalo judul panjang ga usah semuanya keliatan, jadi kalo judul yang panjang gitu ga usah sampe 2 paragraf

    BalasHapus
    Balasan
    1. Tambahkan css
      .customAgata .entry-title{white-space:nowrap;overflow: hidden;text-overflow:ellipsis}

      Hapus
  4. min sudah responsive mobile view kah?

    BalasHapus
  5. Mau tanya apakah bisa dipasang custom label?
    Seperti code kemarin.
    var lang = "";
    var label = r.find(i => "English, Indonesia, Jepang".includes(i));
    if ("English" == label) {
    lang = "<div>ENG</div>";
    } else if ("Indonesia" == label) {
    lang = "<div>INA</div>";
    } else lang = "<div>JPN</div>";
    console.log(`${label} & ${lang}`);

    BalasHapus
    Balasan
    1. ngambil label.
      this.cat
      https://blogger.googleusercontent.com/img/a/AVvXsEjkCtrk2Ro4J6YHaTcqf2nKctBtgmtl1By5KqIkDmpaHqAvkfcNcZ-4b-1BcEfok5vHcI2RlKK3isSPv--4fxnUacyy19HHcPh46aJAKpYzbwGaW3-zPmPYjPeA3a5ZHhME91unceprabDSKL6YEeKJ_giihPEqG1YkPPboljZN9WiUcr20nnxshXqZ

      Hapus
  6. min bisa gak kalau custom postnya kalau mau dihapus slidernya gimana min postingan nya kebawah tidak digeser geser (slider) bisa gak

    BalasHapus
    Balasan
    1. Tambahkan css ini sisa ny atur sendiri
      .customAF .inner.scrolling{display:block}

      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>
  • Gunakan Shortcode berikut untuk menambahkan gambar atau Video. Contoh:
    <i rel="spoiler image">url_gambar</i>
    <i rel="spoiler">spoiler_text</i>
    <i rel="iframe">url_embed</i>
×

Berlangganan

Dapatkan pemberitahuan melalui email setiap ada artikel baru. Gratis!