JaeyZONE

Melanjutkan posting sebelumnya tentang Belajar Membuat Sesuatu di Hosting Gratis dengan fitur Premium gratis! Diposting tersebut saya sudah membahas sekilas cara menginstall Script Mesin Question2Answer (Q2A) melalui fitur yang tersedia di hosting tersebut yaitu Softaculous Apps Installer. Menginstall melalui Softaculous Apps Installer sangat mudah hanya butuh sekitar 2x klik dan selesai. Tapi bagaimana kalau pada hosting tertentu tidak menyediakan fitur Softaculous? Solusinya adalah dengan menginstal secara manual. Dalam hal ini saya akan membahas cara instalasi script Engine Question2Answer (Q2A) secara manual. Tapi sebelumnya mari berkenalan dulu dengan fitur script Question2Answer (Q2A) dan pembuatnya. Question2Answer (Q2A) adalah platform Tanya Jawab open source populer untuk PHP/MySQL, dibuat oleh Mr. Gideon Greenspan dan kontributornya dan saat ini berjalan di 24.500+ situs dalam 40 bahasa. Apa itu situs Tanya Jawab? Situs Tanya Jawab membantu komunitas online Anda untuk berbagi

Cara membagi Postingan Blog menjadi beberapa halaman atau ada juga yang menyebutnya Post Split. Yaitu satu halaman posting dapat dibagi menjadi beberapa halaman. Yang dapat di klik menjadi halaman ke satu, ke dua, ke tiga dan seterusnya atau halaman selanjutnya (next) maupun sebelumnya (previous). Ini semacam membaca postingan "bersambung", kita harus me-klik halaman selanjutnya untuk melanjutkan membaca paragraf berikutnya. Namun ini berbeda dengan.. alias bukan  Cara Membuat Next dan Previous dibawah Postingan Blogger Contoh pembagian halaman postingan semacam itu sering kita jumpai di situs-situs portal berita. Apa tujuannya? Saya kurang tau tapi kemungkinan bertujuan menambah view blog dan juga mungkin agar postingan sulit di copas atau membagi isi postingan yang terlalu panjang. Jika agan menginginkannya cara tersebut dapat juga kita terapkan di postingan blog Blogger dengan bantuan kode JavaScript. Tapi sepertinya cara itu kurang baik untuk SEO Blog karena kodenya mampu

Cara membuat kode script JavaScript pengalih halaman atau redirect page. Dengan script ini kita bisa mengalihkan satu domain ke domain lain (berguna untuk subdomain gratis yang tak bisa diutak-atik), atau dari halaman lain ke halaman lain, baik dalam sesama host (tempat/web/blog) maupun ke host lain. Misalnya mengalihkan alamat web/blog "A" ke web/blog "B". Atau mengalihkan url post Blog A ke url post di Blog B. Cara kerjanya adalah ketika url post Blog A di-klik akan teralihkan ke url post di Blog B. Secara default kode JavaScript pengalihan halaman seperti berikut ini: <script type='text/javascript'> var d='https://jaeyjoke.blogspot.com'; d=d.replace(/.*\/\/[^\/]*/, ''); location.href = 'https://jaeyzone.blogspot.com' + window.location.pathname; </script> Jika dibaca, script diatas kurang lebih berbunyi: menimpa/mengalihkan https://jaeyjoke.blogspot.com ke lokasi https://jaeyzone.blogspot.com Kode diatas hanya berfungsi

Beberapa tahun lalu saya merasa takjub melihat Template buatan Master disana karena terdapat style gelombang pada bagian header template buatan dia. "Keren, bagaimana cara dia membuatnya?" Pikir saya. "Ah masa bodo lah, nanti juga ada yang share caranya!" Ucap saya dalam hati. Wkwk sudah seperti Cerpen aja ya guys ada dialognya, hehe. Dan benar saja, tak lama kemudian Sofyan berbagi kode serupa seperti yang dibuat Master tersebut. Ya intinya, cukup pasang kode SVG dan CSS berikut ini maka jadilah style Animasi Bergelombang. Kode ini aslinya sudah terkombinasikan dengan header tapi saya pisahkan dan mengambil bagian kode animasinya saja. Meskipun belum mencobanya tapi saya rasa kode ini dapat dipasang dimana saja. Dari sebelumnya menyatu dengan header, dengan memisahnya begini saya beranggapan mungkin pemasangannya akan lebih mudah alias tidak mempengaruhi kode lain dimana ia disandingkan nantinya. Ingin dipasang di header misalnya, maka pasang saja kode ini dibawah

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