Widget Astrologi Online Weton Zodiak Shio dan Bioritmik
Astrologi telah dikenal selama ribuan tahun sebagai salah satu tradisi manusia dalam menghubungkan posisi dan pergerakan benda langit dengan kehidupan di Bumi. Dari perjalanan panjang tersebut berkembang berbagai sistem interpretasi, mulai dari zodiak Barat, Shio dalam tradisi Tionghoa hingga Weton dan Primbon yang dikenal dalam kebudayaan Jawa.
CodeFlare menggabungkan beberapa sistem tersebut dalam sebuah Widget Astrologi Online yang dapat digunakan langsung melalui browser. Cukup masukkan nama dan tanggal lahir untuk melihat Weton, neptu, tanda Zodiak Tropical, Shio, unsur tahun serta grafik Bioritmik.
Versi terbaru widget ini berbeda cukup jauh dibanding generasi sebelumnya. Perhitungan utama sekarang dijalankan secara lokal menggunakan JavaScript sehingga Weton, Zodiak, Shio dan grafik Bioritmik tidak lagi bergantung pada layanan perhitungan eksternal.
Meskipun membahas posisi Matahari dan sistem kalender, astrologi tetap perlu dibedakan dari astronomi. Astronomi merupakan ilmu pengetahuan yang mempelajari alam semesta menggunakan observasi, matematika, fisika dan metode ilmiah, sedangkan astrologi merupakan sistem interpretasi dan tradisi budaya.
Widget Astrologi CodeFlare versi terbaru menghitung Weton, Zodiak, Shio dan Bioritmik langsung melalui JavaScript di browser.
Interpretasi karakter Weton, Shio maupun Zodiak merupakan bagian dari tradisi budaya dan astrologi. Jangan menggunakannya sebagai diagnosis medis, prediksi finansial atau kepastian mengenai masa depan.
Widget Astrologi Online CodeFlare
Widget berikut merupakan versi terbaru Astrologi CodeFlare. Masukkan nama dan tanggal lahir kemudian tentukan tanggal target untuk melihat grafik Bioritmik.
Dalam satu proses widget akan menghasilkan empat kelompok informasi yaitu Weton Jawa, Zodiak Tropical, Shio dan Bioritmik.
Setelah data dimasukkan, tekan tombol Generate Astro Data. Seluruh hasil dihitung oleh JavaScript kemudian ditampilkan melalui panel responsif dengan warna berbeda untuk setiap jenis pembacaan.
Script versi 3 mempertahankan function pemanggilan lama seperti getBioImage(), closeBox(), enterBio() dan chgBgTeller(). Dengan pendekatan ini struktur dasar widget CodeFlare generasi sebelumnya tetap kompatibel dengan engine baru.
Apa Itu Astrologi?
Astrologi merupakan sistem interpretasi yang mencoba menghubungkan posisi Matahari, Bulan, planet dan berbagai benda langit dengan karakter atau perjalanan kehidupan manusia.
Dalam astrologi Barat, salah satu sistem yang paling dikenal adalah Zodiak Tropical dengan dua belas tanda mulai Aries hingga Pisces.
Walaupun menggunakan istilah planet, Matahari dan benda langit, astrologi tidak sama dengan astronomi. Astronomi mempelajari alam semesta melalui observasi, pengukuran, matematika dan fisika.
Ilmu yang mempelajari benda dan fenomena di alam semesta melalui observasi dan metode ilmiah.
SAINSSistem interpretasi posisi benda langit dalam kaitannya dengan kehidupan manusia.
TRADISIWeton dan Primbon Jawa
Weton merupakan kombinasi hari dalam siklus tujuh hari dengan siklus lima pasaran Jawa yaitu Legi, Pahing, Pon, Wage dan Kliwon.
Masing-masing hari dan pasaran memiliki nilai tradisional yang dikenal sebagai neptu. Nilai hari dan pasaran kemudian dijumlahkan untuk mendapatkan total neptu Weton.
Dalam kebudayaan Jawa, perhitungan seperti ini dapat ditemukan dalam berbagai tradisi Primbon dan penanggalan Jawa. Penggunaannya berkembang dalam konteks sosial, keluarga dan tradisi masyarakat.
Zodiak Tropical
Versi terbaru engine tidak lagi hanya mengandalkan tabel tanggal tetap untuk menentukan tanda Zodiak. Script menghitung perkiraan posisi Matahari pada lingkaran ekliptika kemudian menentukan tanda Tropical berdasarkan pembagian dua belas bagian masing-masing 30 derajat.
Shio dan Kalender Tionghoa
Shio merupakan sistem dua belas hewan dalam tradisi kalender Tionghoa. Urutannya adalah Tikus, Kerbau, Macan, Kelinci, Naga, Ular, Kuda, Kambing, Monyet, Ayam, Anjing dan Babi.
Engine v3 mencoba menggunakan kalender Tionghoa yang tersedia pada browser sehingga kelahiran Januari atau Februari dapat dihitung lebih baik dibanding hanya menggunakan operasi modulo tahun.
Grafik Bioritmik
Grafik dibuat langsung menggunakan Canvas di browser dan tidak lagi membutuhkan gambar grafik dari layanan eksternal.
Teori Bioritmik populer menggunakan tiga siklus utama yang dihitung dari jumlah hari sejak tanggal kelahiran.
Dalam teori Biorhythm dikaitkan dengan siklus kondisi fisik dan energi tubuh.
Dalam teori Biorhythm dikaitkan dengan pola kondisi emosional dan perasaan.
Dalam teori Biorhythm dikaitkan dengan siklus kemampuan berpikir dan intelektual.
Engine JavaScript membentuk kurva sinus berdasarkan ketiga periode tersebut. Grafik utama menampilkan Fisik, Emosional dan Intelektual, sedangkan grafik kedua menampilkan kombinasi matematis beberapa siklus utama.
Kemampuan menggambar grafik secara matematis tidak membuktikan bahwa teori Biorhythm dapat memprediksi kesehatan, performa atau kejadian masa depan seseorang.
Cara Kerja Widget
Nama, tanggal lahir dan tanggal target dimasukkan ke dalam form.
JavaScript menjalankan setiap engine perhitungan secara lokal.
Weton, Zodiak, Shio dan Bioritmik disusun menjadi data hasil.
Semua hasil ditampilkan dalam panel responsif yang mudah dibaca.
Script mempertahankan function lama seperti getBioImage(), closeBox(), enterBio() dan chgBgTeller(). Dengan demikian struktur dasar widget CodeFlare generasi sebelumnya tetap kompatibel dengan engine baru.
Cara Memasang Widget Astrologi di Blogger
Widget Astrologi CodeFlare v3 dapat dipasang melalui gadget HTML/JavaScript Blogger. Untuk pemasangan baru sebaiknya gunakan versi ini karena engine Weton, Zodiak, Shio dan Bioritmik sudah diperbarui.
Buka dashboard Blogger kemudian pilih blog yang ingin dipasangi Widget Astrologi.
Pilih Tata Letak lalu tentukan area tempat widget ingin ditampilkan.
Klik Tambahkan Gadget kemudian pilih HTML/JavaScript.
Salin CSS, HTML dan JavaScript yang tersedia pada bagian berikut.
Buka blog kemudian masukkan tanggal lahir untuk memastikan semua modul dapat ditampilkan.
.cfAstroWidget{position:relative;width:100%;max-width:760px;margin:15px auto;font-family:Arial,sans-serif;box-sizing:border-box;color:#243642}
.cfAstroWidget *{box-sizing:border-box}
.cfAstroPanel{padding:15px;background:#e8f0f4;color:#263943;border:1px solid #cad9e1;border-radius:12px;box-shadow:0 12px 28px rgba(24,53,69,.13)}
.cfAstroVisual{display:flex;align-items:center;gap:12px;padding:13px;background:linear-gradient(135deg,#e7f4fb 0%,#eeeafb 52%,#e4f5ef 100%);color:#263943;border:1px solid #ccdce8;border-radius:11px;margin-bottom:14px;box-shadow:0 5px 14px rgba(59,87,106,.07)}
.cfAstroVisual img{width:70px;height:70px;object-fit:contain;margin-left:auto}
.cfAstroFields{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cfAstroField{display:block;padding:10px;background:#f1f5f7;color:#273842;border:1px solid #cedce3;border-radius:9px}
.cfAstroField>span{display:block;font-size:12px;font-weight:bold;margin-bottom:7px;color:#4d6571}
.cfAstroFull{grid-column:1/-1}
.cfAstroField input,.cfAstroField select{height:38px;border:1px solid #c2d0d7;background:#e7eef2;color:#273842;border-radius:6px;padding:0 8px;font-size:13px}
#bioName,#selRange{width:100%}
.cfAstroDate{display:grid;grid-template-columns:minmax(48px,.7fr) minmax(74px,1fr) minmax(70px,1fr);gap:6px}
.cfAstroDate input,.cfAstroDate select{width:100%;text-align:center}
#showBio{width:100%;border:0;border-radius:9px;background:#397fa5;color:#fefefe;padding:12px;margin-top:12px;font-size:13px;font-weight:bold;cursor:pointer}
#showBio span{display:block;font-size:11px;font-weight:normal;margin-top:2px}
.cfAstroResult{position:fixed!important;z-index:99999999!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%);width:min(92vw,720px);max-height:88vh;background:#d8e3e9;color:#273942;border:1px solid #b8ccd6;border-radius:15px;padding:10px;overflow:hidden}
.cfAstroResultTop{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;margin-bottom:8px;background:#c8d9e1;color:#294451;border:1px solid #b4cad4;border-radius:10px}
.menuBG{background:#e5edf1;color:#273942;border:1px solid #c5d5dd;border-radius:11px;padding:9px;max-height:72vh;overflow-y:auto;overflow-x:hidden}
.cfResultBox{position:relative;width:100%;border-radius:12px;margin:0 0 10px;padding:12px;overflow:hidden;min-height:95px}
.cfResultWeton{background:#f5eedf;color:#493e2f;border:1px solid #dfd0b4}
.cfResultZodiac{background:#ebe9f3;color:#403d4e;border:1px solid #d3cede}
.cfResultShio{background:#f4e7e4;color:#4b3c39;border:1px solid #dfcbc6}
.cfResultBio{width:100%;background:#dfeeea;color:#2d4741;border:1px solid #bfd8d1;padding:12px}
.cfBioChart{display:block;clear:both;width:100%;max-width:none;margin:0;padding:0;background:#10242b;border:1px solid #b8d3cc;border-radius:9px;overflow:hidden;box-sizing:border-box}
.cfBioChart img,#Biorhythm1,#Biorhythm2{display:block!important;float:none!important;clear:both!important;width:100%!important;max-width:100%!important;min-width:100%!important;height:auto!important;max-height:none!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;object-fit:contain!important;box-sizing:border-box!important}
@media(max-width:560px){.cfAstroFields{grid-template-columns:1fr}.cfAstroFull{grid-column:auto}.cfAstroDate{grid-template-columns:.65fr 1fr .9fr}.cfAstroResult{width:94vw;padding:7px}.cfResultBio{padding:9px}}
</style>
<div id="Biorhythm" class="colorFormAst cfAstroPanel">
<div class="cfAstroVisual" id="bgImageTeller">
<div class="cfAstroPlanet"><i class="fa fa-moon-o"></i></div>
<div><strong>ASTRO DATA CENTER</strong></div>
<img id="imgBGTeller" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyJ8NJ87uzObjx5AmFO0JlPW6YqhBiFr6SBrOWx3Evi_WtQuN-_iAQvmOG7ImveRQKh0YE1Xj7nBdfRSJs2oXMaC8xoJSiJRK2IKJjzztS6ed9GeM8bhzYCOhyXW6yjHDXC1heZGZRKw/s1600/fortune+teller.gif" alt="CodeFlare Astrology Fortune Teller" onclick="chgBgTeller()" />
</div>
<div class="cfAstroFields">
<label class="cfAstroField cfAstroFull"><span>Nama</span><input id="bioName" value="Nama Anda" type="text" onkeypress="enterBio(event);" /></label>
<div class="cfAstroField"><span>Tanggal Lahir</span><div class="cfAstroDate"><input id="b1day" value="9" maxlength="2" type="text" /><select id="b1month"><option value="1">Jan</option><option value="2">Feb</option><option value="3">Mar</option><option value="4">Apr</option><option value="5">Mei</option><option value="6">Jun</option><option value="7">Jul</option><option value="8">Agu</option><option value="9">Sep</option><option value="10">Okt</option><option value="11">Nov</option><option value="12">Des</option></select><input id="b1year" value="1990" maxlength="4" type="text" /></div></div>
<div class="cfAstroField"><span>Tanggal Target</span><div class="cfAstroDate"><input id="b2day" value="1" maxlength="2" type="text" /><select id="b2month"><option value="1">Jan</option><option value="2">Feb</option><option value="3">Mar</option><option value="4">Apr</option><option value="5">Mei</option><option value="6">Jun</option><option value="7">Jul</option><option value="8">Agu</option><option value="9">Sep</option><option value="10">Okt</option><option value="11">Nov</option><option value="12">Des</option></select><input id="b2year" value="2026" maxlength="4" type="text" /></div></div>
<label class="cfAstroField cfAstroFull"><span>Rentang Grafik</span><select id="selRange"><option value="7" selected>7 Hari</option><option value="14">14 Hari</option><option value="28">28 Hari</option></select></label>
</div>
<button id="showBio" type="button" onclick="getBioImage()">GENERATE ASTRO DATA<span>Mulai analisis</span></button>
</div>
<div id="zoomBio" class="colorFormAst cfAstroResult" style="display:none;">
<div class="cfAstroResultTop"><span><b id="myname"></b></span><button onclick="closeBox()" type="button"><i class="fa fa-times"></i></button></div>
<div class="menuBG" id="showBioBG">
<div class="cfResultBox cfResultWeton"><div class="cfResultTitle">WETON</div><img id="wetonSign" src="" /><div id="wetonArea"></div></div>
<div class="cfResultBox cfResultZodiac"><div class="cfResultTitle">ZODIAK</div><img id="lunarSign" src="" /><div id="lunarArea"></div></div>
<div class="cfResultBox cfResultShio"><div class="cfResultTitle">SHIO</div><img id="zodSign" src="" /><div id="descArea"></div></div>
<div class="cfResultBox cfResultBio"><div class="cfResultTitle">BIORITMIK</div><div class="cfBioChart"><img id="Biorhythm1" src="" /><img id="Biorhythm2" src="" /></div></div>
</div>
</div>
</div>
Widget Astrologi Versi Sebelumnya
Versi klasik tetap dipertahankan bagi pengguna yang menyukai desain lama atau sudah menggunakannya pada blog.
Sebelum hadirnya engine versi 3, Widget Astrologi CodeFlare menggunakan form berbasis tabel, gambar fortune teller serta panel hasil Weton, Zodiak, Shio dan Bioritmik.
Versi ini tetap disediakan sebagai dokumentasi sekaligus pilihan bagi pengguna yang masih ingin mempertahankan tampilan klasik.
#Biorhythm{min-width:250px;box-sizing:border-box}
.colorFormAst:before{content:'';position:absolute;top:0;left:0;right:0;height:8px;border-radius:5px 5px 0 0;background-image:linear-gradient(to right,#c4e17f,#c4e17f 12.5%,#f7fdca 12.5%,#f7fdca 25%,#fecf71 25%,#fecf71 37.5%,#f0776c 37.5%,#f0776c 50%,#db9dbe 50%,#db9dbe 62.5%,#c49cde 62.5%,#c49cde 75%,#669ae1 75%,#669ae1 87.5%,#62c2e4 87.5%,#62c2e4)}
.colorFormAst{position:relative;padding:5px;background:#fff;color:#222;border-radius:3px;box-shadow:0 2px 5px rgba(0,0,0,.26)}
.menuBG{background:#fff;color:#222;border-radius:4px;padding:5px;height:400px;overflow-x:hidden;overflow-y:auto}
#bioName,#showBio{width:100%}
#b1day,#b2day,#b1month,#b2month,#b1year,#b2year,#selRange{text-align:center;margin:4px 2px}
#bioName,#b1day,#b2day,#b1month,#b2month,#b1year,#b2year,#selRange{display:inline-block;border:1px solid #ccc;border-radius:4px;box-sizing:border-box;background:#e6f7ff;color:#222;transition:.5s}
#bioName{padding:4px 6px 6px 8px;font-weight:bold}
#showBio{font-size:14px;font-weight:bold;background:#0088cc;color:#fff;padding:8px 10px;margin:8px 0;border:0;border-bottom:2px solid #001f4d;border-radius:4px;cursor:pointer;transition:.5s}
#showBio:hover{background:#001f4d}
.bgImageTeller1{background:linear-gradient(to bottom,#d6f9ff 0%,#9ee8fa 100%);margin:5px 0;border-radius:4px}
.bgImageTeller2{background:none;margin:5px 0;border-radius:4px}
#imgBGTeller{display:block;width:auto;height:100px;max-width:100%;margin:0 auto;object-fit:contain;cursor:pointer}
@media(max-width:360px){#Biorhythm{min-width:0;width:100%}#bioName,#b1day,#b2day,#b1month,#b2month,#b1year,#b2year,#selRange{font-size:12px}}
</style>
<div id="Biorhythm" class="colorFormAst">
<table style="background-color:white;color:#222;border-radius:4px;width:100%;overflow:hidden;">
<tr><td colspan="3" align="center"><div id="bgImageTeller" class="bgImageTeller1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyJ8NJ87uzObjx5AmFO0JlPW6YqhBiFr6SBrOWx3Evi_WtQuN-_iAQvmOG7ImveRQKh0YE1Xj7nBdfRSJs2oXMaC8xoJSiJRK2IKJjzztS6ed9GeM8bhzYCOhyXW6yjHDXC1heZGZRKw/s1600/fortune+teller.gif" id="imgBGTeller" style="height:100px;box-sizing:border-box;" onclick="chgBgTeller()" /></div></td></tr>
<tr><td width="35%"><i class="fa fa-user-circle"></i> Full Name</td><td>:</td><td><input name="name" id="bioName" value="Your Name" type="text" onkeypress="enterBio(event);" /></td></tr>
<tr><td><i class="fa fa-calendar"></i> Birth Date</td><td>:</td><td><input name="day" id="b1day" value="9" size="2" maxlength="2" type="text" /> <select name="Month" id="b1month"><option value="1">Jan</option><option value="2">Feb</option><option value="3">Mar</option><option value="4">Apr</option><option value="5">May</option><option value="6">Jun</option><option value="7">Jul</option><option value="8">Aug</option><option value="9">Sep</option><option value="10">Oct</option><option value="11">Nov</option><option value="12">Dec</option></select> <input name="Year" id="b1year" value="1990" size="4" maxlength="4" type="text" /></td></tr>
<tr><td><i class="fa fa-line-chart"></i> Biorhythm</td><td>:</td><td><input name="tday" id="b2day" value="1" size="2" maxlength="2" type="text" /> <select name="tMonth" id="b2month"><option value="1">Jan</option><option value="2">Feb</option><option value="3">Mar</option><option value="4">Apr</option><option value="5">May</option><option value="6">Jun</option><option value="7">Jul</option><option value="8">Aug</option><option value="9">Sep</option><option value="10">Oct</option><option value="11">Nov</option><option value="12">Dec</option></select> <input name="tYear" id="b2year" value="2026" size="4" maxlength="4" type="text" /></td></tr>
<tr><td><i class="fa fa-calendar-check-o"></i> Bio Range</td><td>:</td><td><select name="range" id="selRange"><option value="7" selected>7 days</option><option value="14">14 days</option><option value="28">28 days</option></select></td></tr>
</table>
<input value="Show Biorhythm" type="button" onclick="getBioImage()" id="showBio" />
<div align="center" style="font-size:11px;font-family:Arial;background-color:#e6f7ff;color:#222;padding:10px 5px;border-radius:0 0 3px 3px;">Powered by CodeFlare</div>
</div>
</center>
<div id="zoomBio" class="colorFormAst" style="display:none;z-index:99999999;position:fixed;top:0;left:0;">
<table width="100%" border="0"><tr><td><span id="myname"></span></td><td align="right"><i class="fa fa-window-close" onclick="closeBox()"></i></td></tr></table>
<div class="menuBG" id="showBioBG">
<div><b>WETON</b><br /><img id="wetonSign" src="" alt="Weton" /><div id="wetonArea"></div></div>
<hr />
<div><b>ZODIAC</b><br /><img id="lunarSign" src="" alt="Zodiac" /><div id="lunarArea"></div></div>
<hr />
<div><b>SHIO</b><br /><img id="zodSign" src="" alt="Shio" /><div id="descArea"></div></div>
<hr />
<div style="background:#000;"><img src="" id="Biorhythm1" style="width:100%;" /><img src="" id="Biorhythm2" style="width:100%;" /></div>
</div>
</div>
Referensi
Widget Astrologi CodeFlare kini tidak sekadar menampilkan ramalan sederhana. Engine JavaScript menggabungkan perhitungan Weton, posisi Zodiak Tropical, kalender Shio dan visualisasi matematika Bioritmik dalam satu aplikasi Blogger.
Gunakan widget ini untuk mengeksplorasi teknologi web, sistem kalender, matematika dan berbagai tradisi budaya tanpa menganggap interpretasi yang ditampilkan sebagai kepastian mengenai karakter atau masa depan.
CodeFlare menerima pembuatan website Blogger, custom widget, perbaikan template dan pengembangan script sesuai kebutuhan.
Custom widget mulai dari Rp50.000 Harga menyesuaikan tingkat kerumitan desain dan kompleksitas script.
Konsultasikan Project
About CodeFlare
No comments
💬 Share Your Thoughts & Join the Hall of Fame!
Punya pendapat atau tips tentang artikel ini? Tuliskan komentar kamu sekarang! 🚀
💎 Komentar yang bermanfaat, relevan, dan positif berkesempatan tampil di CodeFlare Hall of Fame dan masuk ke Top Commentators Widget.
👉 Comment now. Share your ideas. Get noticed on codeflare.net