Langsung ke konten utama

Postingan

Menampilkan postingan dengan label Scripts

Highlight Post

Sejarah Kenapa 'K' Jadi Singkatan Ribu?

Saya pertama kali tau singkatan "K" ini sekitar 5 tahun lalu dan saya kira datang dari bahasa gaul dan ternyata ada sejarahnya yaitu berasal dari bahasa Yunani 'chilioi' yang berarti ribuan. 10K, 200K, 50K itu adalah angka-angka yang kerap kali ditemui ketika berbelanja. Tahukah Anda apa arti satuan 'K' di belakang angka tersebut? Huruf 'K' menjadi penting karena huruf itu merupakan pengganti ribu saat menyebutkan harga atau jumlah. Lalu, kenapa 'K' bisa mempunyai arti tersebut? Usut punya usut, Dikutip dari laman Merriam-Webster, satuan 'K' memiliki kepanjangan kilo. Kilo digunakan sebagai unit pengukuran dalam Sistem Satuan Internasional atau SI (Système international d'unités). Misalnya dalam mengukur jarak, 1 kilometer sama dengan 1.000 meter. Sedangkan untuk mengukur berat, 1 kilogram sama dengan 1.000 gram. Kata kilo berasal dari bahasa Yunani 'chilioi' yang berarti ribuan, digunakan untuk menyatakan banyak atau jamak.

Cara Membuat Jump/Back to Top untuk Halaman Web/Blog

Jump/Back to Top adalah tombol yang biasanya dipasang pada bagian paling bawah website/blog dan ada juga yang memasangnya mengikuti scrolling mengambang yang tujuannya sama jika di tap/klik akan meloncat ke bagian konten paling atas untuk menghemat waktu scrolling. Ada berbagai macam cara memasang Jump/Back to Top pada Blog mulai dari menggunakan element class id/name hingga dengan atau tanpa Javascript. Perbedaannya mungkin, jika pakai atribut link setelah di klik akan loading dan pakai JS tidak. Untuk pemasangan menggunakan element class id/name biasanya dipasang dengan kode seperti berikut. Batasnya: <a name="top"/> atau <div id="top"/> Linknya, jika di klik akan meloncat pada batas yang ditentukan diatas. <a href="#top">Top</a> Sedangkan dengan Javascript. Perlu memasang JS berikut: <script>//<![CDATA[  var tops = document.getElementById("top");tops.onclick = function(){document.body.scrollTop = 0;document.doc

Cara Menampilkan Lagu dan Album dari Embed Spotify ke Blog

Saat sedang mencari lagu di Google dan salah satu hasil pencariannya menunjukkan situs Spotify, lalu saya kunjungi dan inilah pertama kalinya saya mengenal situs tersebut yang sepertinya ini situs atau aplikasi tempat mendengarkan musik favorit secara gratis. Dan sebagai Blogger yang hobi tutorial websites saya otomatis scroll kebawah mencari halaman developer untuk mencari tau apa saja yang situs ini tawarkan untuk pengembang, ya seperti umunya semua situs yang ditawarkan tidak jauh-jauh dari tombol-tombolan, embed-embedan, widget, API, SDK, dan lainnya. Saya tertarik mencoba embed/widget menampilkan Track lagu dan Album ke Blog. Ini cukup berguna buat Blogger yang misalnya bercerita/menyenggol lagu dalam kalimat postingnya, umumnya kita biasa menampilkan video Youtube untuk menunjukkan lagu yang dimaksud dan alternatifnya Spotify juga layak dicoba untuk melakukan itu. Namun kekurangan Spotify lagunya hanya separuh dan untuk mendengarkan secara full harus mendownload aplikasinya tapi

Cara Pasang Audio dan Video di Web / Blog dengan Kode HTML

Audio atau musik bisa berupa lagu dengan format mp3, ogg, dll, serta Video baik mp4 maupun 3gp dapat dipasang di blog atau website dengan menggunakan tag kode html. Layaknya pemutar musik di smarthpone, pada web / blog juga dapat memainkan lagu yang dapat di-play, di-stop, atau di-pause oleh pengunjung. Sedangkan untuk video meski saat ini Blogger cenderung memasang video dari Youtube maupun Facebook namun adakalanya diperlukan juga memasang video sendiri secara manual. Asik-kan bisa pasang itu, jadi mendapat hiburan plus-plus, hiburan dari ngeblog dan juga dari mendengarkan musik, apalagi ditambah pasang TV online dan Game online juga di blog biar seperti dirumah, wkwk. Sebetulnya ini hanya koleksi saja buat postingan blog ini tapi buat pengunjung yang tertarik bisa juga mencobanya dan berikut ini kodenya. Element Tag HTML Audio Elemen kode aslinya/default seperti ini: <audio controls>   <source src="horse.ogg" type="audio/ogg">   <source src="h

Cara Menyematkan Video dari Facebook ke Blog / Website

Entah kenapa tiba-tiba terpikir ingin memasang video dari Facebook ke Blogger. Setelah mencarinya di Google sepertinya rata-rata tutorialnya untuk Desktop atau menggunakan Laptop. Sementara saya hanya menggunakan Smartphone, tapi setelah mencoba akhirnya ketemulah cara sederhana memasang video facebook menggunakan ponsel. Sebetulnya tidak ada perbedaan antara cara pemasangan melalui komputer ataupun ponsel, cara berikut ini tetap berlaku juga untuk kedua jenis perangkat tersebut. Yang membadakannya cuma satu yaitu format url-nya. Untuk lebih jelasnya silakan ikuti langkah-langkah berikut. 1. Pilih URL atau Halaman. Pilih URL dari video Facebook yang ingin di sematkan ke web / blog. Kita dapat menggunakan postingan video publik yang dikirimkan oleh Halaman atau seseorang sebagai sumber video atau video siaran langsung. Jika melalui desktop url videonya dapat diambil di addres bar. Contoh url yang disalin dari desktop akan seperti ini: https://www.facebook.com/videos/4425953377482179/ Ji

Cara Membuat Slideshow / Carousel (4 Model)

Sudah sejak lama saya ingin menerapkan Slideshow ini ke blog tapi entah kenapa malas banget rasanya. Di Blogger, slideshow ini dapat diterapkan ke Related Posts ataupun ke Popular Posts (untuk yang ingin mendapatkan tampilan berbeda dari keumumannya tentunya), saya sendiri terpikir untuk mengisinya dengan berbagai list video tapi saya urungkan karena ya itu tadi penyakit 5 huruf M.A.L.A.S, hihi. Tapi kodenya tetap saya simpan dan koleksi dulu di post ini siapa tau suatu saat R.A.J.I.N jadi tinggal pasang saja. Slideshow atau Carousel memiliki beberapa model/tipe. 1. Manual, yang jika ikon panahnya di tap akan bergeser manual kekanan dan balik lagi kekiri jika sudah mencapai batas. 2. Otomatis, yang akan bergeser otomatis dengan sendirinya memperlihatkan menu-menu yang ada. 3. Multiple, dua buah slideshow manual. 4. Lightbox (Modal Image Gallery), ini model seperti tampilan gallery di ponsel, cocoknya untuk dipasang di situs fotografi atau fotografer yang hobi berbagi foto hasil jepreta

Cara Membuat Tombol Share Sosial Media

Script tombol share atau berbagi berguna agar pengunjung blog dapat membagikan artikel ke sosial media seperti facebook, whatsapp, twitter dan lainnya. Tombol kode html ini bisa dipasang dimana saja baik di blogger maupun situs lainnya dengan sedikit penyesuaian, dapat diletakkan diatas atau dibawah postingan dan otomatis dapat langsung digunakan serta modelnya biasanya didominasi warna biru, hijau, ala warna situs sosmed tersebut. Meskipun mungkin dijaman sekarang pada Browser sudah tersedia fitur ini namun kelebihannya jika dipasang langsung ke blog akan lebih praktis karena begitu di klik share langsung mengarah ke sosial media tujuan, berbeda dengan fitur yang ada di Browser jika di klik menggunakan Smartphone akan masuk ke halaman khusus dan jika tidak ada App dari sosmed terkait diponsel kita maka tidak bisa dibagikan. Jadi lebih praktis jika dipasang di Blog dibanding fitur dari Browser.  Cara Pasang Kedalam Template: 1. Salin kedua kode dibawah. Baca selengkapnya tentang  Cara

Cara Membuat Next dan Previous dibawah Postingan Blogger

Next dan Previous atau Older dan Newer dapat diartikan link yang letaknya berada dibawah postingan yang jika di-klik akan mengarah pada halaman "Sebelumnya" atau "Selanjutnya" dari artikel tersebut. Tujuannya agar pengunjung lebih mudah untuk menavigasi postingan tanpa harus repot ke beranda untuk melakukannya. Untuk Template jenis lama biasanya akan otomatis disertai dengan link dari judul postingan "sebelum/sesudah" itu. Namun sayangnya di Template jenis baru ini semisal Contempo, Notable, Esential, judulnya tidak muncul. Contohnya bisa dilihat pada gambar yang ditunjukkan panah diatas atau dapat juga dilihat diakhir postingan ini. Cara Membuatnya: * Ke Halaman Tema. * Tap Button Orange (panah kebawah) lalu pilih Edit HTML. 1. Salin Css berikut dan pasang ke bagian <b:skin> dalam Template Blogger anda. .older-newer{ margin:0; display:flex; justify-content:space-between } .older-newer .old,.older-newer .new,.older-newer .old a,.older-newer .new a,.o

Cara Membuat Related Posts dengan Thumbnail di Blogger

Related Posts dapat diartikan artikel terkait yang letaknya berada dibawah postingan yang tampil berbeda-beda secara otomatis pada setiap postingan sesuai label artikel tersebut. Selain itu terkadang disebut juga sebagai Similiar Posts, Baca Juga, Barangkali Anda menyukai ini, dll. Biasanya hanya ditampilkan 4 buah saja atau lebih dengan judul dan gambar thumbnail. Contohnya bisa dilihat pada gambar di atas atau diakhir postingan ini. Cara Membuatnya: 1. Salin Css berikut dan pasang ke bagian skin dalam Template Blogger anda. .related-posts{ margin-top:30px } .related-posts ul{ display:-webkit-box; display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; flex-wrap:wrap; margin:0; padding:16px 0 0; } .related-posts ul li{ list-style-type:none; width:calc((100% / 2) - 6px); box-shadow:0 0 0px $(posts.boxshadow.color); max-width:50%; text-align:left; padding:0; margin-bottom:10px } .related-posts ul li:nth-of-type(2n){ margin-left:10px } .related-thumbnails{ max-height:1

Cara Embed Codepen dengan Smartphone

Codepen dapat dikatakan merupakan situs gratis tempat latihan atau me-tes langsung sebuah kode html, css, dan js. Sebagai contoh masukkan sebuah kode html, css atau js kedalam kotak yang tersedia lalu hasil/result dari itu dapat langsung dilihat dibagian bawahnya, jika hasilnya belum sesuai selera bisa langsung diedit lagi kode2 dalam kotak tersebut. Lebih simpel dan cepat dibanding latihan di web pribadi, karena latihan di web pribadi biasanya pakai dua tab jendela, satu jendela buat mengedit dan satunya lagi buat melihat hasilnya. Hanya saja tentu tidak sebebas web pribadi, karena terdapat batasan2 kode yang dapat di terapkan Codepen, kecuali upgrade dari versi gratis ke member Pro. Namun meski versi gratis, Codepen punya kelebihan dapat meng-embed kode hasil latihan kita disana. Embed dapat diartikan yaitu hasil latihan kita disana dapat ditampilkan/di-embed ke Blog. Contohnya bisa dilihat nanti dibagian bawah postingan ini. Untuk dapat melakukan semua aksi diatas tentunya terlebih

Breadcrumb Tersembunyi Khusus Blogger

Sepertinya ada juga jenis Breadcrumb tersembunyi yang bisa dipasang di Template Blogger dan tentunya tidak terlihat oleh pengunjung namun tetap baik karena bisa terbaca oleh mesin pencari. Kebetulan blog ini memakai itu dan dari tes "hasil kaya" atau tes breadcrumb ini di search console menyatakan valid alias sah, keren-nya lagi kode ini berfungsi untuk satu label maupun lebih, seperti kita ketahui pengambilan breadcrumb di blogger umumnya berdasarkan label postingan. Apa fungsi breadcrumb? Baca juga:  Cara Memasang Breadcrumb di Template Notable Blogspot Saya tidak tau siapa pembuat kode ini tapi tengkyu untuk editblogtema.com karena saya mengambil kode ini disana, berikut ini kodenya. <b:includable id='breadCrumb'> <script type='application/ld+json'>{ "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [ { "@type": "ListItem", "position": 1

Kode Script Untuk Tampilkan/Sembunyikan Konten Apapun

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

Cara Menampilkan Berbagai Jenis Icon dengan Font Awesome

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

Cara Membuat Style H3 Bergaris Tengah

  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

Cara Memasang Breadcrumb di Template Notable Blogspot

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

Popular Posts

Halaman Alternatif dengan Tag Kanonis yang tepat

Halaman alternatif dengan tag kanonis yang tepat dengan Status: Dikecualikan. Kurang lebih begitulah kalimatnya dari cakupan data blog kita jika dilihat di Search Console. Salah satu penyebabnya adalah komentar di blog. Dari misalnya url postingannya begini: https://jaeyzone.blogspot.com/2019/04/10-hal-seputar-mimpi-basah-yang-mungkin.html Berubah menjadi begini: https://jaeyzone.blogspot.com/2019/04/10-hal-seputar-mimpi-basah-yang-mungkin.html?showComment=1554698065783 Semakin banyak komentar dipostingan maka semakin banyak pula url semacam itu dengan ID berupa angka yang berbeda2 yang memicu semakin banyak "Halaman alternatif dengan tag kanonis yang tepat, Status: Dikecualikan" di Search Console. Pada dasarnya url beranak pinak dan berubah2 semacam itu kurang baik buat Seo blog jika tidak dicegah dengan "tag kanonis". Tapi tenang itu tidak membahayakan blog di mesin pencari karena hal ini sudah ditangani oleh Blogger yang artinya disetiap duplikat komentar semacam

Apa Saja Fitur Baru Samsung A10 Setelah Update Perangkat Lunak?

Samsung seri A10 terdapat dua jenis yaitu A10 dan A10s. Perbedaannya lumayan jauh baik dari segi perangkas keras maupun lunak, pada intinya A10s jauh lebih bagus dan perbedaan harga keduanya saat itu terpaut sekitar Rp. 150 ribuan. Berhubung disini saya pakai A10 (bukan A10s) jadi postingan ini khusus untuk A10 saja. Sebetulnya semua fitur terbarunya sudah tertulis saat akan update dan bisa dibaca kembali setelah update, diantaranya: 1. Pembaruan One UI 3.1 (Android 11) dari sebelumnya One UI 2.1 (Android 10) 2. Desain visual 3. Peningkatan performa 4. Kustomisasi lebih nyaman 5. Peningkatan fitur-fitur 6. Panggilan dan obrolan 7. Gambar dan Video 8. Pengaturan 9. Keyboard Samsung 10. Dan banyak lagi. Dengan total ukuran unduh-an 1.227.41 MB atau sekitar 1.2 GB-an Sebagai awam tak banyak yang dapat saya tuliskan disini, hanya beberapa perbedaan yang paling menonjol saja dari pembaruan/peningkatan ini. Android 11, sewaktu masih Android 10 ada beberapa aplikasi yang tidak bisa di unduh d

Cara kembalikan Pengaturan "Aksi lengkap memakai" ke Default di Android

Terkadang saat akan membuka suatu file misal ketika membuka video atau lainnya akan muncul tulisan "Aksi lengkap memakai" dan kita diminta memilih "Selalu" atau "Sekali saja". Kalau memilih Selalu, info tulisan tersebut tidak akan muncul lagi dan video akan selalu diputar dengan aplikasi pemutar video yang telah kita pilih. Namun, mungkin kita memiliki aplikasi pemutar video lebih dari satu dan ingin menggunakan pemutar video yang lainnya tapi karena telah memilih "Selalu" maka tidak bisa lagi. Untuk itu maka kita harus menghapus "Hapus Default" atau mengembalikan pengaturan tersebut seperti semula agar saat ingin memutar video akan muncul "Aksi lengkap memakai" dan kita bisa memilih ingin memutar video dengan pemutar video yang mana dari beberapa pemutar video yang ada. Haha.. Jujur saja saya pernah kesal lho gara2 itu. Sebetulnya petunjuknya sudah ada saat akan memilih "Selalu" tapi karena terburu2 biasanya tidak s