YUGEN - Template Anime Streaming Blogger New
YUGEN adalah tema blogger buat streaming anime. Setiap Episode anime terpisah dan memiliki postingan masing-masing. Pembuatannya cukup lama, beberapa…
- Threads
- 29
- Words
- 2231
YUGEN adalah tema blogger buat streaming anime. Setiap Episode anime terpisah dan memiliki postingan masing-masing. Pembuatannya cukup lama, beberapa…
Template Lucid Lime adalah tema forum untuk blogger. Tema ini merupakan usaha saya untu membuat forum di platform blogger. Sudah lama saya ingin membuat tempalte forum, namun saya urungkan karena keterbatasan skill. Selain memiliki desain yang unik, template forum blogger bisa dijadikan alternatif bagi yang punya budget terbatas membangun komunitas.
Ini baru permulaan, masih ada 2 desain yang belum dibuat. Seperti biasa template bisa di download gratis di cloud storage andalan kita: BOX.com.
Lucid Lime (versi lama) adalah template yang saya buat tahun 2017 untuk hunter fansub. Terinspirasi dari tema PhpBB yang lagi ngetrend waktu itu. Meskipun terlihat bagus dilihat dari luar, tapi isi codingnya mirip tumpukan sampah, maklum saja saya masih belum bisa coding sendiri kala itu, semua CSS di import dari tema PhpBB. Template ini dibikin dari tema Emperio.
Rich Search Result - Jaman sekarang SEO tidak hanya di optimalkan dari dalam tapi juga dari segi visual.
Tema Khusus Komunitas - Berbeda dari tema biasa, template komunitas membangun hubungan antara publisher dan user.
Coding Rapi - Saya suka menulis CSS dengan metode utiliy, karena codingnya sedikit dengan hasil yang sama.
User Badge - User dibagi menajadi beberapa katagori.
]]></b:skin>
Yang perlu kalia ubah adalah angka dalam data*="123455..dst". Angka ini adalah user ID blogger. Cara mendapatkan user ID dengan cara inspect element tools yang tersedia dalam firefox atau chrome.
.badge[data*="08331039781819404352"] .user::after { content: 'Senpai'; background-color: brown; 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; }
Mau merevisi proyek2 lama.
Bikin tema yang simple2 aj dulu, masih belum siap bikin tema kelas berat.
CSS-nya hanya 200 line, mungkin ini tema paling simple yg pernah ku buat.
Hmm, ada yang tidak beres dengan program temanya.
Sewaktu komentarnya di "Jangan izinkan, tampilkan yang telah ada", statusnya masih "Comment Open".
Min saya ingin mengganti bagian "Replies" menjadi label tahun misal "2020" atau "1998" dan "Img" menjadi genre film misal "Action" atau "Horror", karena blog saya fanshare film dan saya menggunakan template ini. Kira2 ada script gantinya gk min? Kalo ada bagian apa yang di ganti. Makasih.
@Play Doll
Coba pakai ini:: >> https://www.emissionhex.xyz/2020/12/rating-bintang-di-cover-dengan-label.html
kamu bisa pakai code ini untuk menampilkan spesifik label seperti genre,rating, dll.
ganti scorenya contoh "1.5 >> Action",,,
setelah itu kamu tinggal tentuin lokasi penempatannya.
@Play Doll
lokasinya bisa km cari di:
grid gtc aic bb y5x0
scroll ke bawah ganti:
<data:post.numberOfComments/>
dengan:
<b:if cond='data:post.labels any (l => l.name == "Action")'>
<div class='genre'>Action</div>
<b:elseif cond='data:post.labels any (l => l.name == "Horror")'/>
<div class='genre'>Horror</div>
</b:if>
Thanks Lord Dio atas penjelasannya
Min @Wernayasa , cara agar penghitung komen yang di halaman depan ganti jadi hitung komen disqus bisa ga ya?
@D.Aristya
Article
https://youtu.be/EalamXPZFeY
Ada 2 code ini yang satu untuk popular post satunya lagi untuk postingan. Cari code berikut:
grid gtc aic bb y5x0
Scroll ke bawah lalu ganti:
<data:post.numberOfComments/>
Dengan url post yang benar untuk blogger:
<a expr:href='data:post.link ?: data:post.url + "#disqus_thread"'>Comments</a>
Hmm sudah bisa sih terlihat countnya tapi kadang terhitung kadang tidak. Kenapa ya min klo gitu..
@D.Aristya
Ada delay, hitungan komentarnya lambat. Itu memang dari Disqus, bukan salah kita.
Penyebab di hp tidak di hitung adalah url ?m=1.
Coba atur setelan seluer ke Desktop, biasanya bisa fix.
Min gw pake template ini nih, tp label "Hot, Update, dan Widget" itu gk muncul min padahal udh gw coba korek-korek, yang muncul cuman label "New" saja. Nah yg mau gw tanyain buat munculin itu gimana dan sekaligus mau ganti yg "Hot" jd "Admin Choice" dan "Widget" jd "Popular" untuk "Update" dan "New" tetap. Mohon di reply min. Makasih.
Hot muncul apabila komentar di atas 50.
Semua status bisa dimodifikasi dalam:
<b:includable id='topicStatus'>
@Yukine
Maksudmu status muncul apabila tanggal di atas xx.xx.xx? sayangnya tidak bisa.
@Bookman
sama-sama
@Wernayasa kalo buat kayak sukebei nyaa si bisa gak gan? jadi di homepagenya kayak tabel bootstrap gitu kalo nyari judul di searchbox langsung muncul tanpa harus buka page lain.
@Siapa Ya?
Tema blogger kayak tabel bisa dibikin. Search tanpa reload itu yg susah.
Sudah ada rencana bikin tema mirip nyaa dan sejenisnya. Tunggu aja tahun baru.
@Squid Tampan
Mungkin tahun depan baru di kerjakan.
Pengennya sih desain original bukan cloning, tapi konsepnya masih perpusindo.
min ada script html untuk "Tanya Jawab" kah min? Gw mau pasang juga untuk halaman statis tanya jawab di blog gw, karena gw pake template ini. Makasih
@Benny Hermawan
Setelah halaman di buat masuk ke:
Tata Letak > Halaman
Screenshot
Aku heran, belakangan ini banyak yang nanya cara nambah halaman. Wkkwkw.
@Wernayasa
Min bisa bikinkan script menu seperti punya https://pahe.ph/ kah min? Kyknya bagus kalo di pasang di template Lucid Lime ini. Karena gw pakai template ini dan pengen memasukkan menu persis seperti milik https://pahe.ph/ tapi bingung bikin scriptnya gimana. Help min. Makasih.
@Wernayasa
Klo gk ada js, css pun tak apa min. Yang penting bisa ke pasang di lucid lime. Makasih sebelumnya min. Dan di tunggu hasilnya.
min nanti kalo dah mulai bikin template sukebei nyaa bisa pake searchbox di template Dinamic View (bawaan blog) itu searchnya tanpa reload dulu.
@Tim-Tam
Gw kurang paham Dinamic View, tidak ada dokumentasinya di internet, jadi search engk bisa di ambil.
Kata orang sih bisa pake AJAX, tapi liat aja nanti apakah bia diterapkan.
@Wernayasa
Wah bagus min menu baru dari template ini. Kalo bisa bagi script dan proses pasangnya min.
HTML
<ul class="y3x10 lh-1d7 m0 lsn flex aic bb">
<li id="mySidenav" class="sidenav arrow relative">
<a onclick="openNav()" class="y10x0" style="cursor:pointer">☰ Quick Link</a>
<ul class="dropdown">
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Contact</a></li>
</ul>
CSS:
.dropdown {
padding: 5px;
position: absolute;
background-color: #262626;
min-width: 125px;
top: 32px;
border: 1px solid #323232;
user-select: none;
pointer-events: none;
opacity: 0;
list-style: none;
border-radius: 5px;
}
.dropdown::before {
width: 0;
height: 0;
content: "";
z-index: 2;
transform: scale(1.01);
border-bottom: .6rem solid currentColor;
border-left: .4rem solid transparent;
border-right: .4rem solid transparent;
bottom: 100%;
color: #464343;
left: 30%;
position: absolute;
}
.sidenav:hover .dropdown {
animation: dropdown .25s;
opacity: 1;
pointer-events: auto;
-webkit-user-select: auto;
-ms-user-select: auto;
user-select: auto;
}
.dropdown a {
padding: 3px 5px;
display: block;
border-bottom: 1px solid #323232;
font-size: .9rem;
}
.dropdown li:last-child a {
border-bottom: none;
}
.sidenav {
margin-right: 20px;
}
.arrow::after {
position: absolute;
content: "";
top: 11px;
right: -12px;
border-width: 5px;
border-style: solid;
border-left-color: transparent;
border-right-color: transparent;
border-top-color: gray;
border-bottom-color: transparent;
}
@keyframes dropdown {
0% {
opacity:0;
transform:translateY(-5px)
}
60% {
opacity:1
}
to {
transform:none
}
}
Cara pemasangan HTML:
Tata Letak > Tambahkan Gadget > HTML/JavaScript
CSS:
Tema > Edit HTML > Paste di atas ]]></b:skin>
Aduh, upload code gimana sih?
Aku tiru pake em /em malah ilang lol
-----
Mas mas, Topic status ini bisa diubah untuk nujukin thumbnail postingan, gak?
Tutornya please
@nyaasar
Untk insert code gunakan code yg sudah di Parser HTML. Jangan lupa letakkan dalam:
<em><! -- Insert you code --></em>
Untuk mengubah topicStatus menjadi thumbnail gampang kok, tinggal km ganti dengan:
<b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 240, "1:2") : data:post.thumbnail' var='image'>
<img class='full' expr:alt='data:post.title' expr:src='data:image'/>
</b:with>
@Admin
There is no exact way to do this, each template have difference code.
Try to wrap your description inside :
<b:if cond='data:view.isSingleItem'></b:if>
@Wernayasa
Okeh, Mas. Lanjay, muncul dengan memuaskan setelah sedikit tweak.
Nah, sekarang ada lagi. Aku kan pengguna Disqus nih, pas aku masukin ke template, yang muncul malah default-nya blogger. (Harapanku sih, bisa muncul dua-duanya :D)
Di template sebelumnya, Disqus masih bisa muncul meski settingan comment di blogger aku buat hidden. Tapi kalau pakai template ini, Disqus atau Default enggak muncul semua.
Apa ada yang perlu di hapus atau diubah?
Mohon pencerahannya supaya bisa muncul, Mas.
(Btw, ini blog percobaanku: d-----a.blogspot.com)
Masih kotor, harap maklum.
@nyaasar
Kalau kedua2 muncul masih belum bisa.
Kalau Disqus saja mungkin bisa.
Km cari b:includable berikut:
<b:includable id='commentPicker' var='post'>
Hapus:
<b:include data='post' name='comments'/>
Lalu paste code disqus km dan simpan.
@Wernayasa
Tetep enggak bisa, Mas. :sad:
Tadi sempet putus asa aku nemu post ini: www.dewaplokis.com/2017/11/kolom-komentar-disqus-blogger-facebook.html
Aku coba pakai kode Disqus dari di atas akhirnya bisa muncul (meski FB dan blogger enggak), tapi kode asli dari web Disqus (yang memuat sebagai widget) malah enggak muncul sama sekali.
Kalo pemahamanku enggak mengkhianati, kode di atas bukan membuat Disqus sebagai widget, tapi sebagai includable, seperti comment form bawaan Blogger.
Mungkin bisa buat referensi untuk template ke depannya, Mas. Soalnya, kalau bisa memilih cara komentar lebih enak menurutku.
Tapi kayanya post tersebut copas punya orang deh. Tutorial terakhir agak gak nyambung, sudah disuruh naruh script, di suruh lagi naruh script versi hosting yang memakai hosting. '__'
@Wernayasa
Mas, ini supaya menampilkan tanggal dan waktu publikasi gimana?
<div class='fstyle-08rm pr-5'><div class='flex aic'><b:include data='{image: data:post.author.authorPhoto.image,imageRatio: "1:1", imageSizes: [84, 168],sourceSizes: "15px",imageClass: "r4 mr-5"}' name='responsiveImage'/><a class='mod fw-600' expr:href='data:post.author.profileUrl'><data:post.author.name/></a><time class='fs-0d8'>, <data:post.lastUpdated.jsonEscaped/></time></div>
Itu rencanaku aku buat setelah nama author, tanggal publikasi, jam berderetan
data:post.lastUpdated.jsonEscaped --- Itu harus diganti apa? Lalu, kalau bisa di kasih waktu publikasi juga, bagaimana?
Owh, sudah, Mas. Sudah nemu.
tinggal ganti jadi, <data:post.date.jsonEscaped/>
kalau mau sama jamnya, <data:post.date.iso8601.jsonEscaped/>
Aku browsing pake key word: post.lastupdated.jsonescaped ... wkwkwkw
Tapi yang pakai iso8601 kok jamnya nempel sama tanggalnya, ya? --- i.imgur.com/B2MAxmy.png --- Itu bentuk tanggal jamnya bisa diubah, gak ya?
@nyaasar
Coba b:eval blogger. Baca tutor lengkapnya di sini:
<b:eval expr='data:post.date format "MMM dd" ' /> | <b:eval expr='data:post.date format "hh mm bbbb" ' />
Ini untuk tanggal publish.
<data:post.date/>
Lah, iyak, bisa! Makasih banyak, Mas. Paling enggak, sekarang template-nya sudah jadi seperti yang aku pingin.
Sehat sukses selalu, Mas.
This is one of the best theme that I have ever seen. I have few suggestion on the theme..
1. If Possible get the Native Syntax Highlighter (if possible also give a copy and download it as text .txt file content )
2. Add the Date and time on the POST created (as I can only see time is showing)
3. Fix the image issue on post (as image gets stretched)
Untuk firefox, klik kanan di nama lalu pilih Inspect Element
cara ubah background color ada di:
background-color: brown;ganti brown dengan warna apa saja
@Aditiya Jaya Pratama
Setting > Scroll paling Bawah > Ketemu Profile Langsung Klik
Feednya > https://blogmu.blogspot.com/feeds/posts/default/
@Mr. Black
what svg icon you refering to? there not many svg here.
find this class inside theme, here list of svg you can change.
class='comment-delete'
href='#top'
class='g262 r4 bs3c47 cbdb flex aic p-4 cp hv'
How to change this icon?
See Image
@SushantTrickz
.header-widget {
background-image: url(https://1.bp.blogspot.com/-WDuVSbRTsq0/YOucIB3wxcI/AAAAAAAAHVs/YNOnatNW4wsR3WpUBrzNSTanbFCfOEUwQCLcBGAsYHQ/s1900/122363-oCAlOkrY8qvs.jpg);
overflow: hidden;
border-radius: 6px;
}
Change url img to whatever image you like.
@Wernayasa mau tanya bang, gua sering jumpai kode ini > di css maksutnya/kegunaannya apa yak?? kayak link dibawah.
img
@Rizki Aldi
Itu namanya css combinator, ada berbagai macam.
Yg km tanyakan simbol > untuk select element child yg di luar saja.
div > p {
background-color: yellow;
}
p di dalam tidak kena, contoh
Wajib dipelajari, walaupun jarang dipakai, akan ada gunanya suatu saat.
cara popularposts-nya ada nama author gimana tuh min ? udah ngasih template version 3 di tag html ttp ga keluar nama authornya
makasih min , ijin comod
komentar fix header ku sesuain tema blogku min ,, kalo mau mentahnya bisa ku kasih
http://gotofiles.ahmadservicecenter.com/
sama2, silahkan.
simpan aja buat km sendiri,
good job bisa modif menu sebagus itu.
Min.. Boleh minta template Emission Hex forum ini gk min? Butuh banget buat bikin blog forum.. atau ada saran template lain? aku gk nemu tem1late forum sebagus ini masalahnya..
Tema HexForum bisa km beli di Trakteer.
100K
Amin...
Aku juga bakal update fitur intinya agar tambah bagus seiring waktu.
did you mean to put lucid lime comment box into DoujinRead theme?
It takes a lot of time to import one theme to another.
sorry I can't help you
thanks template nya bg, izin download dan mempelajari ya, pngn bisa design ala forum juga, masih penasaran sama tombol reply cuma bisa di threadedcomment ya bg? kalo di comments list biasa blm nemu caranya.
yo silahkan,
harus id='threadedComments' yg sudah di modifikasi, bukan default dari blogger. versi mod nya bisa km download di v9 (belum ada @reply). aku lupa cara memasang @reply.
Gunakan id='threadedComments',
jangan jadikan tema lucid lime untuk membuat tema forum, komentarnya dibuat dari id='comments' biasa.
saat ini masih coba di base LM dan threadedcomment saya ubah jadi comments mengikuti lucid lime.
https://ctdnew.blogspot.com/2021/08/pengumuman-hilangnya-blog-catatandroid.html
oke thanks bg nanti sya coba liat yg base v9.
moga berhasil
Tidak bisa.
Dalam tema blogger ada dua jenis kotak komentar,
Lucid Lime memakai id='comments', kelemahannya gk ada tombol reply.
Ini awal prototype tema forum, jangan berharap banyak fitur2 bagus.
Maklum aja waktu itu skill gw masih paspasan.
Sedangkan tema HexForum memakai id='threadedComments' yg di buat dari v9.
nyerah bg pusing. beli jadi aja deh. 😅🙏
Makasih atas dukungannya.
Doc nya akan menyusul.
Agak susah memasang sidebar.
Kebetulan lagi sibuk update tema lain, jadi gk sempat ngurus tema ini.
siap ditunggu bg, santai aja. 😁
malam bg Wernayasa, soal template hexforum ada caranya ga supaya tampilan defaultnya jadi light? biar matching sama template induk blog saya maksudnya.
Bisa kayaknya, tapi belum kucoba.
Temanya sedang ku update,
tar ku kasi tau caranya di update berikutnya.
Intinya, kita pindahkan variable .light { ke dalam :root dan sebaliknya.
oke siap bg, nanti saya coba sekalian nunggu updatenya. 😁
Bang ini wa tokko blogger, meneruskan komentar bang yzg gmn caranya default template forum hexforum menjadi light ?
Replace :root dan .light dengan ini::root {
--c31: #fff;
--primary: #f8faff;
--text: #384764;
--cbd: #7082a7;
--c3b: #f1f3fb;
--c3f: #ecf2fb;
--c3f-2: #eff0f3;
--c4d: #d3e1f6;
--cdf: #dfe2e6;
--box-shadow: 0 4px 15px 0 rgba(88,106,153,0.2);
--rgba-1: rgba(236,242,251,0.5);
--li-grd4: linear-gradient($(keycolor)d4, $(keycolor));
--key: $(keycolor);
--c95: #959fb4;
--cff: #ffffff;
--c52: #525a68;
--1frmx: 1fr minmax(200px,300px);
--li-gr: linear-gradient(-270deg, $(keycolor) 0%, $(keycolor)b5 100%);
--p-mq: 15px;
--blue: #0e0620;
--white: #fff;
--green: #2ccf6d;
--gtc-1fr250: 1fr 250px;
--success: #51be56;
--warning: #ffc107;
--danger: #ff5722;
--area-m: "a1 a3""a2 a3";
--rev: 100px 1fr 100px;
}
.light {
--c31: #313742;
--primary: #292e39;
--text: #e0e6f0;
--cbd: #bdc6db;
--c3b: #3b414b;
--c3f: #3f454f;
--c3f-2: #3f4550;
--c4d: #4d5460;
--cdf: #4d535e;
--box-shadow: 0 4px 15px 0 rgba(0,0,0,0.2);
}
Find and remove:<b:include cond='data:view.isSingleItem' name='feedLinks'/>And:<b:include cond='data:view.isMultipleItems' name='feedLinks'/>
Hello, can you tell me how to remove the restriction of comments only for the team and make them public?
Settings > Comments > Who can comment? > Anyone > Save
Is this what your looking for?
I think not, what I did is that I tried to make a comment on my page using another account and when I commented it appeared that only members can comment. Could you tell me how to fix this problem?
If you are using firefox, you need to turn off Enhance Tracking Protection.
Click shield icon on address bar and turn it off.
If its still not working, give me a screenshot, to help me better understand your situation.
ready I think I fixed it, I put the template in another account and if it works making comments, now could you tell me how to put Disqus comments please
Find id='commentPicker'
Replace: <b:include data='post' name='comments'/>With Disqus code.
Good luck.
Why using Disqus, doesn't that defeat its main purpose using forum?
I don't know how to use the template, it doesn't come with documentation, could you tell me how to use it or sell me a documentation of the template?