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;
}

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
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>

@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.
@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.
@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.
@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.
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
}
}
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, &quot;1:2&quot;) : data:post.thumbnail' var='image'>
<img class='full' expr:alt='data:post.title' expr:src='data:image'/>
</b:with>
@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/>
77