JaeyBLOG

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

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

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

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

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

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

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

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

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

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

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