JaeyZONE

Tampilkan dan Sembunyikan (show/hide) identik dengan Buka dan Tutup (open/close). Sederhananya konten apapun yang ingin ditampilkan dan disembunyikan dapat menggunakan kode ini. Umumnya yang sering kita lihat pada setiap situs bagian Sidebar atau Navigasinya rata2 menggunakan metode buka tutup dan rata2 kodenya mirip2 seperti ini. Dibawah ini contoh button yang apabila di klik konten akan terbuka dan di klik sekali lagi akan menutup. <button onclick="kontenSaya()">Tampilkan/Sembunyikan</button> <div id="kontainer" class="konten"> Konten disini. </div> Button diatas hanya berfungsi bila memasang Javascript dibawah ini. <script>//<![CDATA[  function kontenSaya(){ var x = document.getElementById("kontainer"); if (x.className === "konten"){ x.className += " hide"; } else { x.className = "konten"; } }  //]]></script> Tanda kutip " dan hide sengaja diberi jarak satu spasi agar

Saya baru tau ternyata didalam Font Awesome terdapat banyak jenis icon yang salah satunya icon Whatsapp, ya walaupun sedikit terlambat mengetahui ini tapi tak ada salahnya untuk tetap berbagi membagikannya dipostingan ini. Dengan Font Awesome ini sepertinya kita tidak perlu lagi menuliskan kode gambar hanya untuk menampilkan icon, cukup dengan kode khusus berupa selector class maupun Unicode seperti ini &#xf232; maka gambar icon akan langsung muncul. Namun tentunya terlebih dulu ikuti beberapa langkah sederhana ini, yaitu: 1. Pertama2 tambahkan Atribut Stylesheet dibawah ini ke atas </head> pada situs atau Template Blog anda. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/> 2. Selesai, hanya itu. Setelah itu selanjutnya kita bisa menambahkan icon apapun yang diperlukan kedalam Blog maupun postingan. Icon ini lumayan ringan untuk Blog jadi jangan kuatir. Berikut ini beberapa contoh kode

  Ada berbagai macam style heading terutama h3 title pada Template Blogger, mulai dari model kotak, dua warna, icon diujungnya dan yang bergaris tengah seperti yang akan saya bagikan ini. Model bergaris seperti ini bisa di bilang trend dikalangan Blogger tahun 2020 kemarin, termasuk disitus kompas juga menggunakan style model ini meskipun tahun 1945 juga mungkin sudah ada yang menggunakan ini, hehe. Sekilas membuat style semacam ini lumayan mudah jika diterapkan pada situs pribadi tapi lain cerita jika dipasang di Template Blogger, percayalah lumayan rumit, bikin jadi keringat dingin, hehe. Letak rumitnya karena Heading h3 pada Blogspot ibaratnya semacam sudah ditentukan tidak bisa ditambah atau dikurangi lagi kode HTMLnya namun memang harus ditambahi htmlnya agar style ini terwujud. Secara default heading h3 pada setiap widget Blogger format htmlnya sebagai berikut. <b:include name='widget-title'/> Apanya yang mau di edit coba, Nah agar dapat ditambahi maka kodenya perlu

Pada dasarnya ini bisa dipasang di Template manapun hanya saja memerlukan sedikit penyesuaian lagi jadi karena saya hanya mencoba ini pada Notable saja maka saya sebut begitu. Ada berbagai macam model kode breadcrumb setidaknya ada 3 jenis, JSON-LD, RDFa, Microdata dan HTML, pada intinya semua sama saja dan kode yang saya bagikan ini jenis RDFa schema.org khusus tunggal bukan ganda. Untuk info2 penting lainnya, apa itu breadcrumb? Contohnya dll, terkait itu semua silakan baca saja selengkapnya di https://developers.google.com/search/docs/data-types/breadcrumb?hl=id Catatan: Merujuk pada developers tersebut bahwa kesalahan memasang Breadcrumb dapat menyebabkan Blog kita dikenai tindakan manual alias diabaikan dengan kata lain kesalahan yang dimaksud (menurut pemahaman saya) adalah jika label pada blog kita lebih dari satu. Jadi jika ada sebagian label pada posting kita yang memiliki lebih dari satu label saran saya sebaiknya jangan memasang Breadcrumb, alih2 ingin Blog kita keren malah

  Terkadang kita ingin mengambil satu buah Label saja diantara banyak label lainnya yang telah kita buat. Sebagai contoh misal ada 3 buah label masing2 bernama, "Jaey, Zone, Blog". Misal ingin mengambil kata "Zone" saja maka dalam javascript w3.school kodenya begini: <script type='text/javascript'> var labelA = [Jaey, Zone, Blog]; var labelB = labelA[1]; document.write(labelB); </script> labelA[1] artinya labelA yang urutan ke 1 yakni Zone, sedangkan Jaey urutan 0 dan Blog urutan 3. Jika ingin mengambil yang urutan ke tiga maka begini kodenya labelA[3]. Kode Loop untuk Label di Blogger/Blogspot kondisinya sama persis dapat dibuat seperti itu juga. Begini kodenya. <script type='text/javascript'> var label1 = [<b:loop values='data:post.labels' var='label'>&quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if></b:loop>&quot;Jaey

Widget Follow By Blog adalah tombol ikuti yang terpasang di blog. Pengunjung sesama blogger dapat mengikuti blog kita dengan meklik tombol tersebut. Widget Follow By Email adalah tombol ikuti melalui email. Tap tombol/button maka modal akan terbuka dengan kotak form tempat mengisi alamat email. Pengunjung siapapun dapat berlangganan posting terbaru di blog kita melalui email mereka dan akan terkirim secara otomatis ke email mereka serta dapat berhenti berlangganan kapanpun. Sedangkan style modal adalah halaman tersembunyi dan bila tombol di klik maka modal berisi widget pengikut atau widget ikuti melalui email akan muncul mengapung di layar, tap tanda silang (×) atau tap di area transparan maka widget akan kembali tersembunyi. Style model sembunyi2ian ini atau disebut Modal marak digunakan di era smartphone ini bertujuan meminimalisir tampilan agar tidak terlalu tampak penuh dengan aneka widget. Contohnya ada dibagian footer paling bawah blog ini. Di w3.scholl style modal ini ada dua j

Sesuai selera, ada yang menyukai thumbnail besar dan ada juga yang menyukai yang sedang atau kecil. Pada Template Notable thumbnailnya cenderung besar dan pada Template Contempo cenderung kecil, tapi karena saya menyukai model gaya header dari Notable namun juga menyukai thumbnail ala Contempo maka keduanya saya gabungkan. Pada Template Notable contoh kode gambar thumbnailnya seperti berikut: background-image: url(<b:eval expr='resizeImage(data:post.featuredImage, 256, &quot;1:1&quot;).cssEscaped'/>); 256 adalah PX size gambar dan bisa diubah dengan ukuran lain, namun yang menjadi pekerjaan tambahan adalah jika size itu diubah maka style div yang mengikat kode itu juga harus disesuaikan yaitu div .snipppet-thumbnail. Saya punya trik agar tidak terlalu banyak yang diubah agar tidak menambah pekerjaan baru yaitu dengan cara berikut. 1. Hapus atau salin semua kode gambar bawaan/asli dari Template Notable seperti diatas. Kode tersebut berada disekitar bagian <b:def

Mode Thumbnail Besar Mode Thumbnail Kecil Cara Membuat Featured Post Dua Mode, Thumbnail Besar dan Kecil Widget Featured Post salah satu fungsinya ialah untuk memberikan tampilan postingan berbeda dari postingan lainnya dan hanya tampil di halaman beranda saja, selain itu ini juga dapat disetting untuk menampilkan posting terbaru saja atau posting pilihan dari postingan lama atau disebut juga post unggulan yang akan ditampilkan di widget ini pada urutan paling atas halaman beranda. Pada Template Contempo widget ini memiliki thumbnail besar diantara posting lainnya dan pada Template Notable widget ini memiliki thumbnail yang sangat besar diantara thumbnail post lainnya yang juga besar. Cara kerja Widget Featured Post Dua Mode ini sederhana, anda hanya perlu ke halaman Tata Letak, pilih Edit (icon pensil), dan jangan conteng gambar, jika gambar tidak di conteng tampilan thumbnailnya akan berubah jadi kecil, jika di conteng maka thumbnailnya akan berubah jadi besar. Sesederhana itu, Baran

Di situs Detik, Kompas, PlayStore dan situs lainnya marak menggunakan Horizontal Scrollable di bagian header yaitu deretan menu kategori yang dapat digeser kekiri dan kekanan. Seolah menjadi trend yang sepertinya asik untuk ditiru. Di Blogspot kita mempunyai widget label yang dapat dibuat untuk meniru gaya itu dan kodenya bisa kita dapatkan di w3.school, tapi melalui posting ini kita tidak perlu kemana-mana lagi karena saya telah mengumpulkan semua bahan yang diperlukan untuk membuat semua itu dan membagikannya disini. Sebelumnya perlu kita ketahui pada template Blogger khususnya deretan Template paling atas diantaranya Essensial, Contempo dan Notable sudah terdapat fitur Widget Label yang terpasang di Sidebar lengkap dengan style css-nya sendiri. Hal ini jika kita memasang style Horizontal Scrollable tentu css-nya akan berbenturan. Oleh karena itu sebelum memasang ini sebaiknya alokasikan css style yang terdapat pada template bawaan buat menjadi khusus untuk Sidebar saja. Caranya, seb

Template bawaan Blogger salah satunya bernama Notable, sesuai namanya template ini tidak memiliki table yaitu antara tampilan mobile dan desktop terlihat tampak sama saja hanya satu kolom, tidak seperti template lain yang biasanya pada tampilan mobile tampak responsive satu kolom sedangkan pada desktop dua hingga tiga kolom. Tapi bukan kolom yang ingin kita bahas disini melainkan penambahan widget dan sedikit memodifikasinya agar berbeda dari aslinya. Pertama, kita mulai dari Header. Pada tampilan aslinya widget titel blog dikiri sejajar dengan widget kanan yaitu search, follow dan hamburger menu. Pada tampilan mobile, widget follow tersebut posisinya turun kebawah sehingga terlihat kurang menarik jadi saya nonaktifkan dengan cara tidak menconteng dan menambahkan widget follow di footer sebagai gantinya. Kebetulan saya menyukai susunan Header aslinya tersebut jadi tidak memodifikasinya, namun bila ingin sedikit tampilan berbeda kita bisa menggeser widget titel ketengah dan memindah ham

Bagi pengguna Blogger yang pada tampilan kolom komentarnya belum memiliki teks 'Author atau Admin atau yang biasanya tertera disamping nama pemilik blog pada komentarnya, bagi yang ingin menampilkan teks tersebut dapat ditampilkan dengan Css. Jadi jika anda ingin menampailkannya tinggal pasang selector css berikut ini, pendek saja kode cssnya. .icon.blog-author::after{ display:inline-block; font-size:8px; content:'Admin'; border-radius:2px; background:$(body.link.color); color:$(body.background.color); margin:0 7px; padding:2px 4px; white-space:nowrap } Selector css tersebut dapat ditambahkan kedalam template namun jika warna background dan teksnya tidak sesuai silakan disesuaikan saja. Tapi kemungkinan bakal sesuai karena kode warnanya saya balik. Warna background menjadi warna link dan warna link menjadi warna background. Untuk menambahkan kode tersebut bisa langsung kedalam template (Blogger versi baru).  Kunjungi Tema > Tap titik tiga > Edit HTML > Taruh di bag

Cara memasang kode javascript Covid-19 atau Statistik data kasus Corona di Indonesia pada Blog. Misal data Positif, Sembuh dan Meninggal. Kita tidak perlu membuatnya lagi karena scriptnya atau semacam widget snippetnya sudah disediakan oleh mereka. Berikut ini silakan disalin kodenya dan pasang di Blog. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function(){ var d = new Date(); $("#date").html(d.getDate() + "/" + (d.getMonth()+1) + "/" + d.getFullYear());     $.ajax({url: "https://api.kawalcorona.com/indonesia/", success: function(result){      $("#terjangkit").html(result[0].positif);      $("#sembuh").html(result[0].sembuh);      $("#meninggal").html(result[0].meninggal);     }}); }); </script> <div class="bisablog-card">     <div class="bisablog-info"><h