Script v2

Demo

Filter search template anime blogger - Yes, kita berhasil membuat filter search untuk blogger, berkat bantuan teman kita dari ProjectXCode.

Tentu saja codenya harus kita modifikasi habis-habisan, tapi hasilnya memuaskan.

Filter ini menggunakan widget Search, kalau di tema lain menggunakan widget Label. Asalan aku menggunakan widget search adalah untuk memperkecil codenya, cukup kecil dan mudah di baca/di modifikasi.

Cara Pemasangan

Bukan script ini atau download ke lokal komputer.

1. Buat label dummy search: Tata Letak > tambahkan widet Search > Simpan
2. Paste css ini di atas ]]></b:skin>
3. Paste custom widget Search ini: Pastikan jangan menggunakan id yg sama, di video aku ganti dengan BlogSearch2

Kalau kurang jelas tonton tutornya berikut ini. Untuk warna kalian modifikasi sendiri.

Source Code : Filter Search (Logic Only)

Mantap min

this is really good

the filter is leading to the page /search/label/?&max-results=15

Look.. https://uyublogs.blogspot.com/

kalau mau buat operasional pakai yg versi 2 aja bg lebih simple, baru ku update. versi yang itu cuma buat pemahaman gimana logika cara kerjanya.

https://www.forum.projexcode.com/2022/01/filter-search-logic-only.html

min di web saya ada masalah min saya buka web saya https://koitonime.blogspot.com/ setelah itu web saya jadi tertuju masuk ke link ini https://koitonime.blogspot.com/search/label/?&max-results=15 saya memakai nya pakai zeistmanga apa ada solusi nya min biar tidak tertuju sendiri kelink ini https://koitonime.blogspot.com/search/label/?&max-results=15 gimana min

min ada demonya?

oh ya, gk sadar kalau pagenya ke redirect.
tunggu patch berikutnya.

belum ada,
masih banyak bug yg belum di fix

Wait for next patch

Wah ada v2, ok2 ntar aku pelajari.
Thanks for your awesome script.

v2 cuma lebih ringkas ga makan line banyak. v1 itu cuma buat belajar logikanya buat yg mau belajar bareng.
scriptku slalu ku coba buat "Clean Code" jadi biar mudah dipelajari ama yang lain

Filter Search V2.
Silahkan update dan di test.
Changelog:- New JS Engine (김서정)
- perbaikan redirect
- penambahan dark mode
- minor css fix

I can't get the code. The file gives an error and cannot be opened.

nice, buat bikin template anime, walau w gak tau apa itu anime awokawok

Try again, this is the link:https://app.box.com/s/xel3hrvt8wj4evwckz760n6ql0i26br9

Me again. Thank you very much, the code you provided worked very well for me. I had one more question. How do I make a 'new' tag next to the published episodes? So there may be an icon or a picture showing that the section is new. Do you have a suggestion for this?

I don't know how to script like that

Halo bang admin thanks banget atas tutorialnya berhasil diterapkan di blog saya, namun karena navigasi saya template saya menggunakan tombol load more (bukan next-prev) sehingga muncul bug halaman selanjutnya tidak bisa di load. adakah cara untuk fixnya? *blog saya= brxx1 blogspot com

Sama saja, next prev juga bermasalah.
Belum ada solusinya.

oke siap, semoga ada titik cerah kedepannya. btw templatenya keren bang mantap.

Min kalo kek gini gimana ngatasinnya?
https://ibb.co/JzQxfQv

Ganti width: 285px; menjadi width: 300px;
atau sesuai selera,.filters .dropdown-menu.lg {
width: 300px;
}

Untuk mobile view, lebarnya tidak bias pas,
belum ketemu cara agar agar lebarnya fluid.

Min kok tetap sama
https://blogger.googleusercontent.com/img/a/AVvXsEi2INqpLZgHdXKbjDrg-Q_FgNnQ3TGa5sIR15UZzYvR3jeUO976cm8kG9BPFd6QDSYeoeMhhQz2jYZOKeZKgZhq48y1O09QOqRjgJ8KYcCa2QGPDYw4W4VTZVQJM9nNjFMjxLT9m6QxpfORgJZqQdaU-FX1AMBZ8UAloeHBHxRX5rw__6WmVOlrsTMB

oh terpotong, kenapa gk bilang dari tadi.
tambahkan css ini di atas b:skinbody .widget.BlogSearch {
overflow: unset;
}

Min kok sama aja kepotong

hapus code ini#main .widget,

maksudku postku yg sebelumnya, paste css di atas ]]></b:skin>body .widget.BlogSearch {
overflow: unset;
}

kalau tidak bisa hapus code ini termasuk comanya#main .widget,#feed .widget,

Berhasil thanks min

Thank you.

How to fix this?

https://blogger.googleusercontent.com/img/a/AVvXsEhZxjD8FWbS-4hG0W5vQQYnbg7xDQSfqf-m20XdFyYNA11sLzWnp45V6gHeZ3V9G3zY4RdDOJU9MzEx8WzCY8nX2Cj-04vIuASILrpo1wKsREETEXZDstfeQoWSXZyc9yPwBvbG1kFJ3NvulnX_6DSaYn2NmpIyjhfu7uAexd3aRXJOURylWrNpm9fK

can you explain more?

Lama gak nongol dah keren aja nih

izin pakai bang

I want to make 'Type' to full place

silahkan

Full width.
Replace.filters .opt{display:grid;grid-template-columns:1fr 1fr;padding:15px;gap:8px;}with:.filters .opt{display:flex;flex-wrap:wrap;padding:15px;gap:8px;}
.filter{flex:33%;}

Forum Bot said:

This comment has been removed by the author.

Ikuti instruksi di post #c8465180724571121688

gak bisa ditaruh di pages atau post kah gan?

Bisa, tapi...
karena ini kubuat untuk widget, jadi gk bisa di copy paste langsung.
Kamu harus ngopy dari bagian <section class='quickfilter' role='search'>
.
.
.
</section>Sampai penutup </section>Hanya teory aja, belum ku test.

sudah saya coba bang gk work

Mungkin js gk jalan.
Cut <script>/*<![CDATA[*/ Sampai /*]]>*/</script>
Paste di atas </body>

Nah udah muncul min, tapi yang "Search Box (Cari di sini)-nya" gak muncul, cuma pilihan custom label aja

Mungkin masalah CSS.
Coba ganti class .BlogSearch dengan .quickfilter
Classnya ada 4, ganti semuanya.

Forum Bot said:

This comment has been removed by the author.

Forum Bot said:

This comment has been removed by the author.

Halo min

Cara fix button filternya (yang dibawah) biar fill semua spacenya gimana ya min? dibuat ditengah juga boleh

sekarang buttonnya kayak begini
https://i.ibb.co/bJG8VtR/image.png

Hmm, susah kalau gk liat codenya langsung.
Coba css ini:.filters .opt{display:flex;flex-wrap:wrap;padding:15px;gap:8px;}
.filter{flex:33%;}Atau km coba inspec element, cari kenapa lebar htmlnya gk mau 100%. Kalau ketemu tambahkan width: 100%

Nevermind that min

cara biar responsive selalu ditengah gimana min?

https://i.ibb.co/4SBbBP7/image.png

ini kode cssnya
https://pastebin.com/5wynd9c7
untuk kode widgetnya default, diganti textnya aja

Seharusnya bisa dengan code di atas, gk ada css lain, mungkin wrappernya gk bisa 100% .
Coba hapus ini dulu:.gtc-fm100{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));}Ganti dengan:.filters .opt{display:flex;flex-wrap:wrap;padding:15px;gap:8px;}
.filter{flex:33%;}

how to add this code

Test

What happens if I don't get blog2 I only have 1

what do you mean by blog2?
most blogger template only have 1 widget blog.

what happened to your blog after i left?

Hi