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















#ads

































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











            Balas

















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












            Balas

















#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











            Balas





















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













            Balas






















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











            Balas




































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











            Balas



























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











            Balas


























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











            Balas


















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











            Balas

















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












            Balas

















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











            Balas



















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











            Balas


















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











            Balas



















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











            Balas





























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











            Balas




















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











            Balas


















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











            Balas

































#113






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.











            Balas

















#114






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.











            Balas

















#115






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.











            Balas



















#118






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.











            Balas


























#128






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











            Balas






















#134






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.











            Balas





















Forum rules
You can use English or Indonesian






















image

quote

pre

code
















Share: