Template Lucid Lime

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.

Sejarah singkat tema Lucid Lime

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.

Fitur Template Lucid Lime

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.

  • Moderator - Tertinggi - Author dari postingan,tugasnya mengatur dan moderasi komentar
  • Developer - User - User dengan keahlian membuat atau memodifikasi tema
  • Senpai - Senior Member - User yang sering aktif posting
  • Kouhai - Junior - User baru

Cara memasang Badge

Paste css berikut di atas ]]></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;
}

Ads
Iklan
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 =&gt; l.name == &quot;Action&quot;)'>
<div class='genre'>Action</div>
<b:elseif cond='data:post.labels any (l =&gt; l.name == &quot;Horror&quot;)'/>
<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?
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 + &quot;#disqus_thread&quot;'>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
min, how to exclude the post description in home. just post title only appear, Thanks min
min, how to exclude the post description in home. just post title only appear, Thanks min
@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, &quot;1:2&quot;) : 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: &quot;1:1&quot;, imageSizes: [84, 168],sourceSizes: &quot;15px&quot;,imageClass: &quot;r4 mr-5&quot;}' 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'
93