Cara desain template blogger dengan Tailwind CSS - Anix Clone New
Ini adalah tutorial membuat template blogger dengan Tailwind CSS. Tutorial bukan untuk pemula, tapi untuk developer tingkat menengah atau atas. Tutori…
- Threads
- 1
- Words
- 612
Ini adalah tutorial membuat template blogger dengan Tailwind CSS. Tutorial bukan untuk pemula, tapi untuk developer tingkat menengah atau atas. Tutori…
Makasih gan, kebetulan saya juga mau ganti template untuk blog ini. Dilihat dari desainnya kayaknya gampang dibuat. Bisa jadi tanggal 12 juni. Sekalian mau implementasi coding yang lebih seo agar mudah teridex google.
Kalau belum jadi tagih lagi disini.
Hm... Untuk search box nya coba buat seperti ini deh, mungkin agak bagus. Yg ada di nav bar seach box, yg ada di widget filter search. Jadinya terpisah gitu gk jadi satu.
Link:
- https://themesia.com/animestream-wordpress-theme/
filter searchnya bagus bgt
saya bookmark untuk referensi design untuk template berikutnya.
thanks.
mantap, semangat min..
ada saran lagi nih min, untuk popular posts nya dibuat seperti ini mungkin cocok.
link:
- https://samehadaku.vip/
bagus untuk template batch
thanks, aku bookmark
Kalau boleh minta tolong customin ni tema min
https://www.cardsubs.com/
Biar SEO friendly
Dan bagian tombol menu biar gak masuk ke safelink kalau di kasih script auto
Kalau butuh temanya bisa PM adminnya di FP
Tentu bisa. Schema SEO gampang di pasang. Saya liat homepage tidak dipasang schema, dan schema postingan banyak yg error. Astaga, perlu di terapi tema itu.
Gue nyerah kalau soal javascript, bukan keahlian gue, jadi gk bisa bantu.
Ah soal script entah bagaimana udh beres tiba"
Jadi tema itu berantakan?
wkwkwkw
Pantes agak ngrasa aneh gw
Tp speed test load page kenceng lo di mobile maupun di pc lewat https://developers.google.com/speed/pagespeed/insights/?url=cardsubs.com&tab=mobile
Klo bisa dirapihin lagi lebih mantul kali
Dan klo bisa dipercantik lagi bakal pd pangkling yg ngunjungi
wkwk, ajaib bener dah bisa fix sendiri.
ok, saya coba sebisa mungkin.
Udah tanggal 18 juni ni min
hasilnya gk mirip
https://app.box.com/s/tpn465qi8ib7ns6ifl616cqaijlgnh7j
keren, sy masukkan dalam antrian proyek utama.
ini template lama yang tidak responsive.
https://app.box.com/s/203elje1563ol6xgl88dewv2u9nnd8uu
kalau ada waktu luang nanti template itu dibikin. masuk dalam proyek sampingan.
dulu pernah nyoba bikin, tapi gagal karena kurangnya skill.
tapi sekarang gue yakin bisa.
ok, saya bookmark dulu.
ok mimin ganteng :)
ok gan, sy masukan dalam orderan template.
engk ada WA gan, hubungi saya lewat FB Messanger:
m.me/emissionsubs
ini dia desain yang segar. benar2 keren.
saya masukkan dalam antrian.
bulan ini saya gk begitu aktif developing template, lagi asik main game. tapi bulan depan saya kebut, bisa 2 template jadi.
slideshow nya keren, tapi sayang input manual ;(
Btw kok sama ya, saya juga lagi rehat desain theme dan pokus push rank :v
engk tertarik sama slideshownya, ini salah satu element desain yg gue hindari.
hooh. happy istirahat.
ternyata temanya harus beli kwkw , berharap gratis mau saya pelajari, saya juga baru buat tema yang ada ?view=... tapi masih kurang ide nya.
bisa terangkan apa maksud ?view= ini?
sudah pernah bikin horrible,
tapi itu pesanan orang, jadi engk bisa dibagikan atau dibikin lagi.
untuk netflix terlalu rumit kayaknya.
seperti tag pemisah mas , kaya (homepage, multipleitem,single item) , saya baru belajar juga mas ,..
Kalok gratis gua gasken lah
boleh tanya kalok mau pasang accordion di blogger gimana yak??
kadang di save javanya error gitu dan kalok gak gagal/gak fungsi
coba ini, dibikin murni css
https://codepen.io/raubaca/pen/PZzpVe
kayak google drive sih
google material lebih tepatnya.
tidak bisa, takut nanti ada masalah copyright dengan si pemiliknya.
saya sering berkunjung ke blog si Yasya, jadi gk enak gitu.
owalah. oke. oke. siap...
bagus tuh
wah, bagus bgt situsnya, pengen di clone wkwk. sy bookmark dulu
saya punya ide lain untuk pelacak rilisan
rencanyanya akan di rebrand manjadi AniChart Pro.
Siapp min
Halo admin, salam kenal untuk anda dan seluruh komunitas anda ingin request clone dari halaman manhwa berikut yang mempunyai design yang bagus
https://manhwa18.com/
Terima kasih
kayaknya template itu tidak jadi dibuat, sebagai gantinya saya akan membuat template readmanhwa di masa mendatang.
maaf
maksudmu navigasi previous dan next chapter?
kalau yg itu sudah ada di berkas .zip.
edit manual linknya
Bang Template Website Bakadame Bagus bangettt
Jadi pengen deh template yang kaya Bakadame😫
https://bakadame.com/
dulu ada yang request tema in,
cuman saya lupa karna sudah lama.
makasih sudah ngingatin, nanti saya bikin tema ini.
Min, saya ada blogg Anime untuk streaming, tapi themanya masih banyak kurangnya kalo menurut saya,
- gambar thumbnail di homepage gak full, kepotong
- gak ada ket, Complete(selesai) atau Ongoing(bersambung) di thumbnail gambar postnya
Previewnya: nanianim.blogspot.com
Min, bisakah saya minta di redesign ulang themanya supaya kekurangan di atas teratasi, itu aja sih soalnya mau saya bikin aplikasi bloggernya, thanks, di tunggu yah...
Link thema minta aja di saya Gratis: https://www.facebook.com/profile.php?id=100052958055590
Kalau bisa di redesign mirip2 aplikasi gitu, saya jadiin aplikasi soalnya biar gak ada yang nyuri file,
Kamu modifikasi sendiri aj. Saya berikan instruksinya.
Cari code:
class='post-hq'
Tambahkan code berikut di atasnya:
<b:if cond='data:post.labels any (l => l.name == "Ongoing")'><div class='ongoing'>Ongoing</div></b:if>
Terakhir tambahkan css berikut:
.post-hq {
position: absolute;
top: 10px;
right: 10px;
height: 20px;
z-index: 5;
background-color: rgba(0,0,0,0.3);
color: #fff;
font-size: 13px;
line-height: 20px;
font-weight: 700;
text-align: center;
text-transform: uppercase;
padding: 0 6px;
border-radius: 3px;
}
Keterangan lain bisa km tambahkan sendiri.
Saya menolak modifikasi tema, sudah tidak sempat, dan banyak tugas yg belum selesai.
Tema blog ini aja masih pas2 an. wkwkw
Saya coba dulu ya min,
Kalo bisa di bikinin postingan biar detail min, thanks...
Min klo cara biar gambar tidak ke potong thumbnailnya (versi mobile), kurang srek gitu lihatnya, kan mau saya jadiin aplikasi webnya, mohon bantuannya min, thanks..
Gak nampil min, gimana ya..?
Dari dulu ini bikin nyebelin gak bisa nampilin tampilan (Ongoing / Complete) di thumbnail
Kalo tambahin label Ongoing muncul, tapi yang Complete kok tidak muncul yah..?
Sorry, tadi salah css.
Paste code di bawah ini di atas class='post-hq'
<b:if cond='data:post.labels any (l => l.name == "Complete")'><div class='complete'>Complete</div></b:if>
Pastikan backup dulu temamu.
Cari @media screen and (max-width:680px)
lalu hapus:
.index-post{width:50%;margin:0 0 12px 0;}
Sama aja min, maksud saya gimana gambar biar terlihat sesuai ukuran aslinya pas di thumbnailnya, gak ke zoom atau ke potong.
coba paste css di atas ]]></b:skin>
.grid-posts {display: grid;grid-template-columns: repeat(auto-fill,minmax(150px,auto))}
.index-post {width: auto;}
.index-post .post-image-wrap .post-image-link {height: auto;}
coba yg ini, kalau gagal juga saya nyerah deh
.grid-posts {display: grid;grid-template-columns: repeat(auto-fill,minmax(150px,auto));width: 100%}
.index-post {width: auto;}
.index-post .post-image-wrap .post-image-link {height: auto;}
.index-post .post-thumb {height: 190px}
@media screen and (max-width:680px){.index-post .post-image-wrap{height:190px}}
Min ini saya redesingn lagi blogger xml
Tapi saya masih belum bisa munculkan tulisan (Ongoing,Complete,TV Series,Film) di thumbnail Related Post, Gimana ya caranya min..?
Mohon bantuannya min...
Previewnya ini; https://phimnime.blogspot.com/
Link thema ini; https://drive.google.com/folderview?id=15Ag-9CeHqymZN2TtwV7-_CR9qF1xlJvb
Thanks.
nah, itu dia. gue juga belum bisa, sudah di coba tadi.
nyerah kalau masalah javascript
Gak pa min...
Min tapi ini ada thema yang bisa nampilin tulisan (HD) doang dan sama semua di related post, populer, post di home,
Bisa di cek themanya ini min, siapa tahu nanti dapat petunjuk,
https://drive.google.com/uc?export=download&id=1D4Uz5KgVjtt-_QbkyX4mMX5B0_srlMEk
ok, nanti saya bedah temanya
yang ini sudah saya share di blog saya, bisa berkunjung gan
agar gambar tak terpotong tambahkan:
img {
object-fit: cover;
}
menarik gan,
terus berkarya
Ini tema dasarnya Contempo? desainnya bagus bgt.
Informasi anime dan dl box pun sudah ada, menurutku udh lengkap.
Temamu masuk katagori apa, fansub atau fanshare, atau keduanya?
@admin ✔️
Change the marked text to your page title.
https://1.bp.blogspot.com/-zSyBVwfRMtQ/X8jYEIE9DcI/AAAAAAAAGYk/z9PjEoe7lh09f40gUT36JQDE20rlB8YLwCLcBGAsYHQ/s797/Screenshot_2020-12-03%2BTemplate%2BEdit%2BTemplate.png
Plz Check My Blog
https://film.wapko.ml
@admin ✔️, nice website
Btw you can change default theme color. Go to Theme > Costumize
Screenshot
bro, how to add multiple icons before post related to lable plz ..
https://lh3.googleusercontent.com/-yeyg5Xr7Xok/X8sgtBlztfI/AAAAAAAAAug/COqndsbyYUcTvYnnEjwioPk00pWRoXBDwCLcBGAsYHQ/s16000/1605887008526.png
Find this code:
class='grid row-55 aic pl-5'
Then replace img with this script : Script
This script support 2 label: HD and Cam
Next go to your post and add label: HD
SVG Icon Lib
@Wernayasa Thank-you
and how to add hot button
and plz check my site
https://film.wapko.ml/
Im glad you ask.
Hot button base on number of comments, my hot button will show up when there 50 comment or more.
Find this code:
<h3 class='fs-1 m0 fwn'>
Then paste this code bellow h3 tag:
<b:if cond='data:post.numberOfComments gte 50'><span class='r2 y0x5 cfff fs-0d7 g79b'>Hot</span></b:if>
paste above <b:else/>
<b:elseif cond='data:post.labels any (l => l.name == "Label")'/>
<! -- you svg icon -->
I dont have telegram account and i dont have intention making one.
izin taro link bang siapa tau situ kepake untuk membuat chapter list otomatis
https://dagruel.com/chapter-list-otomatis-blogger/
how to add recent post widgets by label lock like this
https://lh3.googleusercontent.com/-DhSE_LljPrY/X8yHkU7HQ9I/AAAAAAAAAvc/AV9YmcIdnD8by6pl6li5jwRi-0kU2pWkACLcBGAsYHQ/w640-h294/0.png
Saran min @Wernayasa, perlu diperbaiki dibagian komentar (tanya jawab) ketika load more/newest anehnya item komentar post pada nembus kesamping jadi harus memakai scrollbar horizontalnya buat ngegeser kesamping untuk cari dan ngeklik tombol publishnya.
browser: opera gx (mungkin hanya di browser saya saja).
https://streamable.com/24iuke
@Jun ID. Sudah ada yang bikin
Template Bloger Mirip AnimeStream
@admin ✔️
Try this script.
View Script
@Wernayasa
Please give me recent post widget
For this Template
See Here
@admin ✔️ did you mean recent comment?
Put this on your sidebar. Paste above b:widget.
Recent Comments Widget
@Wernayasa
Sip, kalau dah bener mah min!!
Satu lagi di bagian footer tidak responsive untuk layar kecil(mobile)
Selamat min, iklan sudah bertebaran dimana-mana. wkwkwk (semoga jadi rajin rilisnya :v)
@IntoForum
Beta version 2.3.b
@Wernayasa
thank-you this template
plz Check my design
see here
@Mr. Black.
That good redesign for sure. Its even better than mine. Good job.
@Yukine.
Sudah gan. Pengen cepat2 selesai ini template biar bisa lanjut ke proyek berikutnya. wkwkw
Replace your id='commentAuthorAvatar' with new script (download here)
Then paste this css. The number is represent unique blogger use ID. You can find them by inspecting element.
.auth {
color: crimson;
}
.auth .mod::after {
content: 'Moderator';
background-color: crimson;
font-size: .8rem;
padding: 1px 6px;
border-radius: 3px;
color: white;
}
.badge[data*="02480525259652322034"] .user::after {
content: 'Developer';
background-color: chocolate;
font-size: .8rem;
padding: 1px 6px;
border-radius: 3px;
color: white;
}
@Mr. Black
Go to Layout > Add a Gadget > Feed
Feed URL http://blogname.blogspot.com/feeds/posts/default
saran aja tambahin ini bang biar img di post responsive
.separator img {
width: 500px; (Sesuai keinginan sih)
max-width: 100%;
}
biar gak kepotong aja sih pas mode Mobile
@Wernayasa
Saya liat waktu itu, admin mencoba untuk memasang progress projek garapannya.
Admin bisa coba yang ini sepertinya lebih mudah::
https://codepen.io/peterbinks/pen/zxExwO
@Funi
Gw bookmark dulu, tapi tidak janji di bikin.
@Yukine
Sudah di tambahkan, thanks. Gw kurang perhatian sama tampilan mobile, soalnya jarang pegang HP.
@Lord Dio
Ini lebih bagus dan mudah diatur. Kemarin gw pake html meter tag, susah nya minta ampun.
Sebenarnay ada cara kreatif lain memkai progress bar. Misalkan anime 12 episode setiap kali update episode progressnya naik sampai full 12 episode.
Masih teori sih, fitur ini rencananya untuk template batch.
punya saran gak bang buat desain ini tools?
Tools Auto Generate Download Box
Code nya seperti ini silahkan pahami sendiri.
W3School Klik Disini
bro menurut mu tampilan nya bagaimana?
https://www.anifilz.xyz/2020/12/test-3.html
jangan buka lewat hp masih belum responsive
@Dagruel.com
ia, gw pantau dari tadi. cepat juga pembuatannya.
wow, sudah pake css grid juga, salut gue.
gw belum paham bikin tautan unduh dan loading tanpa reload
masih belum bisa komen banyak, karna desainnya belum final
ditunggu lanjutannya
@Wernayasa
Oke
Untuk bagian postingan info lebih baik dihapus atau diubah saja desain nya.
https://1.bp.blogspot.com/-0vDG2COhmik/X-c93o7926I/AAAAAAAAHy4/ROWI04EFGXcWUzCb3CpKZCZa50CBp8wKQCNcBGAsYHQ/s0/20201226_214142.jpg
Dan untuk calon pemakainya silahkan berikan pendapat nya!
Di biarin aja, soalnya gw juga mau bikin post info kaya gitu.
Mirip Shana Project.
Prakteknya nanti ada tombol show dan hide.
cek bro bagian postingan udah final, dan tampilan post info halaman depan bisa di hide and show.
minta saran? tampilan home page sebaiknya ditambah apa lagi
Agar tambah manis tambahkan warna untuk baris yang dianggap penting.
paste b:class ini di bawah <article class="post-outer">
<b:class cond='data:post.labels any (l => l.name == "Batch")' name='batch'/>
Lalu tambahkan css berikut (warna sesuai selera):
.batch {
background-color: red;
}
Hasilnya seperti ini
@Bookman
Bisa tapi km pasang sendiri. Cari code berikut (ada di dua tempat):
grid gtc aic bb y5x0
Lalu tempel xml ini:
<b:class cond='data:post.labels any (l => l.name == "Batch")' name='batch'/>
Selanjutnya tambahkan css:
.batch {
background-color: rgba(243, 33, 72, 0.12);
}
Terakhir pergi ke postingan, tambahkan label:
Batch
@Dagruel.com
Masih belum ada.
Kalau km nyari inspirasi, coba liat blog Yukinee.
Sapa tau ada yang bisa di contoh.
Berkas Kita
@Wernayasa
Ok min makasih tutorial baris warnanya nanti gw aplikasikan. Eh min kalo ada waktu bolehlah berkunjung ke situs gw, sekalian minta saran apa yang perlu di tambahkan biar lebih SEO https://www.cutekidatabase.xyz
SEO nomor satu yaitu judul postingan jangan malu2 bikin judul, berikan keywoard di judul. Judul disini maksudku adalah judul blog. Yang perlu km cari:
<b:case value='index'/>
Lalu ganti dengan:
<b:case value='index'/> | Download Movie Pahe Sub Indo
Slanjutnya optimisasi judul postingan. Disini km jangan malu bikin judul panjang yang mengandung keywoard.
Berikutnya optimisasi postingan. Google tidak suka postingan yang minim text, copas aja text keywoard. Contoh saja jangan di terapakan:
Download Anime Tenki no Ko Subtitle Indonesia , Download Anime Tenki no Ko 1 - 12 (End) , Tenki no Ko Subtitle Indonesia , Tenki no Ko 1 - 12 End , Tenki no Ko Sub Indo , Tenki no Ko Sub Indonesia , Tenki no Ko Mp4 Sub Indo , Download Tenki no Ko Batch Subtitle Indonesia
Terakhir deskripsi. Deskripsi kita buat bikin manual, bukan diambil dari postingan. Caranya cari:
<meta expr:content='data:view.description.escaped' name='description'/>
Ganti dengan ini :
<meta expr:content='"Download " + data:view.title.escaped + " Sub Indo BD/Bluray dengan format 1080p, 720p, 480p, 360p dan 240p"' name='description'/>
Lama tak berkunjung kesini dan ternyata tampilannya udah Beda wkwkw, dapat informasi yang bermanfaat juga tentang Penjelasan SEO dari Admin! Terima Kasih Banyak.
@TLkomik RA
Selamat berkunjung kembali.
Berubah sih tapi nanti mw di ganti lagi yg lebih moderen dari ini.
Cepat bet sudah jadi.
Sudah perfect menurut gue.
Cuman kalau ada waktu, tambahin tombol NSFW.
Cara hidennya simple aja, pake button display none dan display block untuk class .nsfw .
<b:class cond='data:post.labels any (l => l.name == "NSFW")' name='nsfw'/>
@Wernayasa gan ini supaya judul berada di atas gambar postingan gimana ya? saya sudah coba pake position:absolute tapi judul tetep dibelakang gambar
demo : kerangka-timtam.blogspot.com
baru pertama kali bikin template dari awal.
@Tim-Tam
tambahkan z-index di judulnya:
z-index: 3
@Dagruel.com
Ok sip. di tunggu update selanjutnya. Istirahat dulu, jangan terburu2.
@Wernayasa makasih udah bisa. Mau nanya lagi gan saya masukin embed yt tapi videonya gak bisa di resize tingginya kalo lebar bisa
demo : kerangka-timtam.blogspot.com/2021/01/tanpa-gambar.html
maaf banyak nanya masih awam banget saya
@Wernayasa responsivenya gak jalan kenapa ya? saya coba di responsinator bisa tapi di hp tidak berubah sama sekali. maap banyak tanya malah kek spam
Satu label seperti apa ya, bisa jelaskan lebih rinci.
coba tambahkan meta responsive di bawah <head>
<meta content='width=device-width,initial-scale=1' name='viewport'/>
Bro menurut mu gimana klo template igniel dijadikan blog manga atau anime cocok?
https://seleseven.blogspot.com/
@Dagruel.com
Udah udah Keren parah itu hehe 3 in 1 (manga/doujin bisa, anime bisa & novel bisa), oiya cara buat postingannya sama kaya template re contempo kan min?! blog saya yang yang 1 lagi pake re-contempo.. Takutnya harus re-edit karena beda cara upload post! Btw kapan rilisnya nih? :v
@Dagruel.com
sebaiknya jangan deh, sebaiknya pengguna di bikin nyaman.
User experiece yg baik akan membuat pengunjung betah.
saya baru saja membuat tema yang memiki fitur nsfw, coba km cek disini. ini tema biasa
Tema DameDame (masih dikerjakan)
@TLkomik RA
Harus di edit kembali sih klo mau memakai fungsi tab nya, untuk rilis sebentar lagi.
@Wernayasa
Ok
@Dagruel.com
Wadoh Script NSFW nya di hapus? Btw itu bisa di tempel di template ku gak ya? Kalo boleh coba minta Codenya dong!
Gpp deh Kak klo beda juga postnya, Santai aja jangan terburu-buru, Semangat dan Semoga Sehat Selalu!
@Rizki Aldi
lazy load sudah support native css,
tanpa perlu javascrip lagi
Baca artikelnya disini
bukan admin sih, tapi klo mau nanya tentang permasalahan javascript lebih enak di situ, dari pada mencari di stackoverflow.
hanya berbagi pengalaman.
Hi, Admin.
Sorry, there is no free version of this theme.
If you interested you can buy it.
Contact me here
gan pernah bikin meta deskripsi untuk label secara otomatis gak
contoh link untuk di optimasi
https://postkomik.blogspot.com/search/label/Ajin. kalau ke index tanpa deskripsi
. tapi kalau manual bisa ada deskripsi cuma kalau link nya banyak sangat merepotkan
Belum pernah.
Maksudmu setiap label punya meta biar lebih SEO.
Belum sempat berexperiment. Kayak di wordpress yg labelnya ke index google kan, keren kalau memang bisa.
Belum pernah.
Maksudmu setiap label punya meta tersendiri biar lebih SEO.
Belum sempat berexperiment. Kayak di wordpress yg labelnya ke index google kan, keren kalau memang bisa.