Skip to main content

Template Lucid Lime

New #1

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

(113 balasan) πŸ‘‹ #1 Berkas Kita , #2 ❤️ Wernayasa , #3 Demon Empress , #4 Siapa ya? , #5 ❤️ Wernayasa , #6 Anivalley , #7 ❤️ Wernayasa , #8 D.Aristya , #9 ❤️ Wernayasa , #10 Bookman , #11 Lord Dio , #12 ❤️ Wernayasa , #13 Bookman , #14 D.Aristya , #15 Lord Dio , #16 ❤️ Wernayasa , #17 ❤️ Wernayasa , #18 D.Aristya , #19 D.Aristya , #20 ❤️ Wernayasa , #21 D.Aristya , #22 Siapa ya? , #23 Bookman , #24 ❤️ Wernayasa , #25 ❤️ Wernayasa , #26 ❤️ Wernayasa , #27 Berkas Kita , #28 Berkas Kita , #29 Bookman , #30 ❤️ Wernayasa , #31 Siapa Ya? , #32 ❤️ Wernayasa , #33 Berkas Kita , #34 ❤️ Wernayasa , #35 Berkas Kita , #36 Squid Tampan , #37 ❤️ Wernayasa , #38 Berkas Kita , #39 Anivalley , #40 Lord Dio , #41 ❤️ Wernayasa , #42 Lord Dio , #43 Bookman , #44 Bookman , #45 ❤️ Wernayasa , #46 Bookman , #47 ❤️ Wernayasa , #48 Bookman , #49 Tim-Tam , #50 ❤️ Wernayasa , #51 ❤️ Wernayasa , #52 Bookman , #53 Bookman , #54 ❤️ Wernayasa , #55 ❤️ Wernayasa , #56 Bookman , #57 nyaasar , #58 ❤️ Wernayasa , #59 nyaasar , #60 nyaasar , #61 nyaasar , #62 PTF , #63 PTF , #64 ❤️ Wernayasa , #65 ❤️ Wernayasa , #66 nyaasar , #67 ❤️ Wernayasa , #68 nyaasar , #69 nyaasar , #70 ❤️ Wernayasa , #71 nyaasar , #72 nyaasar , #73 nyaasar , #74 ❤️ Wernayasa , #75 nyaasar , #76 Admin , #77 ❤️ Wernayasa , #78 ABS , #79 ❤️ Wernayasa , #80 ABS , #81 ABS , #82 ABS , #83 ❤️ Wernayasa , #84 , #85 ❤️ Wernayasa , #86 , #87 Ramon Garcia , #88 Admin , #89 ❤️ Wernayasa , #90 Admin , #91 ❤️ Wernayasa , #92 Sushant Karn , #93 ❤️ Wernayasa , #94 Rizki Aldi , #95 ❤️ Wernayasa , #96 Rizki Aldi , #97 , #98 ❤️ Wernayasa , #99 Raaajjju , #100 Ichigorider , #101 ❤️ Wernayasa , #102 , #103 Nice Hope , #104 Ahmad Nur Kabib , #105 Febby Angga , #106 Febby Angga , #107 Yanuar Zhaldy Gemilang , #108 Unknown , #109 Dani_Edtz_ , #110 Empresa , #111 Empresa , #112 Empresa , #113 ,
0
Wernayasa

Wernayasa
Admin

Messages
55
Points
+184

Reputation: 100%

New #3
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.
0
Bookman

Bookman
blogger

Messages
11
Points
+350

Reputation: 100%

New #11
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.
0
Lord Dio

Lord Dio
blogger

Messages
4
Points
+343

Reputation: 40%

New #12
@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.
0
Wernayasa

Wernayasa
Admin

Messages
55
Points
+565

Reputation: 100%

New #13
@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
0
Wernayasa

Wernayasa
Admin

Messages
55
Points
+400

Reputation: 100%

New #18
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>

0
Wernayasa

Wernayasa
Admin

Messages
55
Points
+212

Reputation: 100%

New #21
@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.
0
A

Bookman
anonymous

Messages
11
Points
+419

Reputation: 100%

New #24
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.
0
A

Siapa Ya?
anonymous

Messages
1
Points
+177

Reputation: 10%

New #32
@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.
0
Wernayasa

Wernayasa
Admin

Messages
55
Points
+172

Reputation: 100%

New #33
@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.
0
Bookman

Bookman
blogger

Messages
11
Points
+292

Reputation: 100%

New #44
@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.
0
Wernayasa

Wernayasa
Admin

Messages
55
Points
+192

Reputation: 100%

New #51
@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.
0
Wernayasa

Wernayasa
Admin

Messages
55
Points
+2425

Reputation: 100%

New #55
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
}
}
0
nyaasar

nyaasar
blogger

Messages
11
Points
+234

Reputation: 100%

New #61
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
0
Wernayasa

Wernayasa
Admin

Messages
55
Points
+627

Reputation: 100%

New #65
@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>
0
Wernayasa

Wernayasa
Admin

Messages
55
Points
+202

Reputation: 100%

New #66
@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>
0
nyaasar

nyaasar
blogger

Messages
11
Points
+636

Reputation: 100%

New #67
@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.
0
Wernayasa

Wernayasa
Admin

Messages
55
Points
+342

Reputation: 100%

New #68
@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.
0
nyaasar

nyaasar
blogger

Messages
11
Points
+661

Reputation: 100%

New #69
@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.
0
nyaasar

nyaasar
blogger

Messages
11
Points
+191

Reputation: 100%

New #70
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. '__'
0
nyaasar

nyaasar
blogger

Messages
11
Points
+861

Reputation: 100%

New #72
@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?
0
nyaasar

nyaasar
blogger

Messages
11
Points
+419

Reputation: 100%

New #74
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?
0
Wernayasa

Wernayasa
Admin

Messages
55
Points
+412

Reputation: 100%

New #75
@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/>
0
Admin

Admin
blogger

Messages
3
Points
+367

Reputation: 30%

New #77
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)
0
Wernayasa

Wernayasa
Admin

Messages
55
Points
+178

Reputation: 100%

New #84
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
0
Wernayasa

Wernayasa
Admin

Messages
55
Points
+269

Reputation: 100%

New #90
@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'
0
Wernayasa

Wernayasa
Admin

Messages
55
Points
+326

Reputation: 100%

New #94
@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.
0
Wernayasa

Wernayasa
Admin

Messages
55
Points
+420

Reputation: 100%

New #96
@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.
0
Wernayasa

Wernayasa
Admin

Messages
55
Points
+469

Reputation: 100%

New #117
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.
0
Wernayasa

Wernayasa
Admin

Messages
55
Points
+1156

Reputation: 100%

New #127
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);
}
0
Wernayasa

Wernayasa
Admin

Messages
55
Points
+228

Reputation: 100%

New #133
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.
0
Post a Comment
Forum rules
You can use English or Indonesian
Back to top Back to bottom