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; }
Comments
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.
Sebenarnya tema lama yang direvisi.
@Siapa ya?
Harus daftar google adsense dulu.
Sewaktu komentarnya di "Jangan izinkan, tampilkan yang telah ada", statusnya masih "Comment Open".
<b:include data='post' name='comments'/>
lalu ganti dengan code disqus
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.
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
Thanks bang
@mimin
Siap coba di aplikasikan
Iya,, sama-sama!!
Article
https://youtu.be/EalamXPZFeY
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>
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.
Semua status bisa dimodifikasi dalam:
<b:includable id='topicStatus'>
<b:includable id='hot'>
Masih belum ada niat bikin myanimelist, karna desainnya dan kerumitan yang tinggi.
Thank u min. Udh gw aplikasikan dan hasilnya maknyus
Maksudmu status muncul apabila tanggal di atas xx.xx.xx? sayangnya tidak bisa.
@Bookman
sama-sama
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.
Proyek saya dulu, request belakangan. Wkwkw.
Mungkin tahun depan baru di kerjakan.
Pengennya sih desain original bukan cloning, tapi konsepnya masih perpusindo.
Halaman tanya jawab tinggal dibuat saja,, terus diizinkan untuk komentarnya.
Setelah halaman di buat masuk ke:
Tata Letak > Halaman
Screenshot
Aku heran, belakangan ini banyak yang nanya cara nambah halaman. Wkkwkw.
Maklum, min. kadang bingung ketika masih baru "aku aja iya wkwkwkwk
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.
Menu terpisah dengan javascript tanpa merubah menu orisinil dari lucid lime
dicobak besok
gw cek tadi, menunya dibikin murni dari css, gk ada js.
Klo gk ada js, css pun tak apa min. Yang penting bisa ke pasang di lucid lime. Makasih sebelumnya min. Dan di tunggu hasilnya.
gw sibuk hari ini, besok atau lusa br jadi
Siap ndan. Gw selalu siap menunggu. :) semangat
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.
Tolong post situs yg mirip nya, gw butuh banyak referensi.
Wah bagus min menu baru dari template ini. Kalo bisa bagi script dan proses pasangnya min.
Script Menu headernya saja
<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
}
}
Tata Letak > Tambahkan Gadget > HTML/JavaScript
CSS:
Tema > Edit HTML > Paste di atas ]]></b:skin>
Thanks min. Mantul
Tulis di dalam tema aja, bagian footer boleh di hapus.
Aku tiru pake em /em malah ilang lol
-----
Mas mas, Topic status ini bisa diubah untuk nujukin thumbnail postingan, gak?
Tutornya please
Ini aja deh,
i.imgur.com/8qjPzh1.png
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>
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>
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.
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.
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.
benar gan itu bukan widget,
mantap tutorialnya, nanti saya pelajari
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?
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?
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/>
Sehat sukses selalu, Mas.
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)
Maybe for next theme.
nah itu kurang tau,
apa tidak bisa inspect element seperti di desktop?
Nggak Ada Ka.
cara ubah background color ada di:
background-color: brown;ganti brown dengan warna apa saja
sure you can
Setting > Scroll paling Bawah > Ketemu Profile Langsung Klik
Feednya > https://blogmu.blogspot.com/feeds/posts/default/
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'
See Image
find this code
<b:includable id='topicStatus'>
.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.
img
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.
mangkanya waktu belajar sering jumpai kayak gitu, makasih ya min
Unfortunately, no.
This template does not support img embbeded inside comment.