Langsung ke konten utama

Postingan

Menampilkan postingan dengan label Tutorial

CARA MERUBAH TEKS TULISAN MENJADI SUARA YANG ALAMI MENGGUNAKAN ROBOT WEB A.I.

Situs voicemaker adalah situs perubah (converter) teks menjadi suara yang terbaik diantara beberapa situs converter teks yang tersedia pada saat ini. Kemampuan aplikasi web ini boleh dikatakan cukup mengagumkan. Memiliki kemampuan banyak bahasa dan karakter suara dari pria hingga wanita terutama yang berbahasa Inggris pastinya lebih sempurna. Dan disinilah mengapa akhirnya ia menjadi pilihan, karena bahasa Indonesia juga tersedia dengan sajian pengucapan kata kata yang sangat baik. Simpel dan mudah di pergunakan Sedangkan karakter suara untuk bahasa Indonesia terdapat 6 karakter suara pria dan suara wanita yang dapat kita jadikan pilihan. Penggunaan toolnya juga terbilang sangat sederhana dan sangat mudah di pergunakan, pokoknya tulis apa yang ingin di sampaikan di bidang form yang tersedia, lalu tekan tombol convert di bawah sebelah kanan form maka suara akan muncul dengan karakter pria atau wanita yang kita pillih. Sedangkan beberapa tool lagi dapat di pergunakan untuk mengejas suara

CARA EMBED VIDEO YOUTUBE KE HALAMAN POSTINGAN BLOG

Jika kita memiliki channel youtube dan halaman blog sekaligus  dan memiliki topik yang sama. Tentunya kita ingin agar video youtube kita dapat ditampilkan dengan baik, rapi dan apik ke halaman blog kita, bukan? Dan tentunya video tersebut dapat melengkapi postingan blog, misalnya blog tutorial. Pengunjung akan lebih dimanjakan dengan kemudahan penjabaran melalui tulisan sekaligus demo melalui tutorial dalam bentuk visual gambar bergerak di video Youtube. Namun kita bisa juga embed video dari channel orang lain, hanya saja sayangnya menurut pengalaman penulis kadang video tersebut di hapus (baca di komplin) oleh pemiliknya.  Dan agar halaman blog bisa terhubung dengan halaman Youtube, meng'embed' video akan membuat tampilannya terlihat lebih baik. Apa beda menyisipkan (insert) dengan 'embed' video youtube? Berikut ini perbedaan cara Sisip video versus embed video secara teknisnya. 1. Insert (sisipkan) Video Menyisipkan video dari Youtube sangatlah mudah, cukup melalui da

Apakah Javascript itu dan apa peranannya terhadap HTML?

A pa yang dapat di kita buat dengan JavaScript? JavaScript adalah bahasa pemrograman paling populer di dunia. JavaScript adalah bahasa pemrograman Web. JavaScript mudah dipelajari. Akan tetapi dalam kesempatan ini kita akan membuktikan bagaimana Javascript bisa merubah nilai atribut HTML, menjadikan HTML menjadi dinamis dan menarik. Ya seperti CSS JavaScript bisa merubah nilai Atribut HTML Pada contoh berikut kita tunjukkan bagaimana JavaScript merubah nilai Atribut dari sumber suatu image (gambar) Berikut trik Javascript yang dimaksudkan dengan penjelasan di atas: 'nyalakan lampu' dan 'matikan lampu' dengan cara menekan tombol kanan dan kiri.     Lihat contoh penerapannya dalam bentuk lain di: Baca: CARA MUDAH MEMASANG TOMBOL/TOGGLE DARK MODE KE HALAMAN BLOG sumber kode gambar di atas: <center> //hanya untuk re-position//<button onclick="document.getElementById('myImage').src='https://1.bp.blogspot.com/-GsTEApA_NUc/Xd5WU8emH4I/AAAA

Begini cara memasang related post otomatis ditengah postingan template contempo

Latar tutorial: Ketika menjelajah blog blog para senior aku menemukan beberapa tutorial cara meletakan related post di tengah postingan. Akan tetapi segera aku mengerti tutorial itu lebih cocok di terapkan ke dalam template template lawas yang di buat dengan desain layout versi ke 2.  update : Ada instruksi pada pemasangan: cari kode <data:post.body/> dan di suruh hapus kode tersebut  lalu gantikan dengan kode berikut..bla bla bla...itu tandanya di dalam template tersebut memiliki beberapa kode yang sama, artinya ia masih desain dengan layout versi 2.  Baca juga: Revisi cara menambahkan related posts sederhana ke dalam blogger Cara memasang related post simpel ke dalam template Essential blogger Cara mengatasi gambar thumbnail blank di related posts Sedangkan kalian harus tahu, template versi terbaru zaman now yakni varian terbaru template bawaan blogger hanya memiliki satu satunya kode <data:post.body/> tersebut yang kalau di hapus dan di ganti dengan kode lain akan mempen

CARA MEMBUAT BACK TO TOP SMOOTH MURNI CSS TANPA JAVASCRIPT

Javascript dapat membuat back to top bergerak halus pada saat tombol yang biasanya berada di bagian bawah kanan footer blog tersebut - pada saat di sentuh atau di pencet atau di tekan. Tombol juga hanya akan muncul setelah scrolling  pada ketinggian tertentu. Itulah fungsi Javascript. Akan tetapi Javascript juga tidak dapat dihindari selalu memotong kecepatan loading sebuah halaman. Sementara CSS sudah semakin sakti dan bahkan dapat menggantikan beberapa fitur yang biasanya kita buat menggunakan Javascript. Ada trik CSS untuk membuat back to top menjadi tetap smooth meskipun tanpa menggunanakan Javascript sebagai elemennya. Baik mari kita mulai membuatnya: 1. CSS Dengan memanipulasi fitur animasi gerak yang kita kenali sebabai 'transition', kita dapat mengatur kecepatan gerakan tombol Back to top pada saat meng'scroll' halaman menuju ke atas.  Masuk ke dasbor blogger ke pengaturannya. Pilih tema Pilih Edit HTML Setelah berada di halaman editor HTML blogger, cari kode &l

CARA MENGHILANGKAN BLANK SPACE DI SEBELAH KANAN KONTEN TEMPLATE NOTABLE

Gambar template default Notable blogspot - source: Google Tanpa merusak struktur bawaan template, kita dapat merombak bagian tampilan post-body salah satu template terbaru blogger yang bernama Notable dengan mudah. Apaan sih itu maksudnya? maksudnya begini, secara default (bawaan template) ruang konten template notable itu tampak tidak seimbang antara kini dan kanannya jika di buka melalui PC laptop atau layar 10 inchi ke atas. Kalau tidak di rombak pada tampilan laptop atau layar perangkat 10 inchi keatas maka kita akan temukan banyak ruang kosong di bagian kanan layar. Atau lebih populer dengan istilah blank space. Pertanyaannya untuk apa ada Blank space? Banyak mata pengguna menangkapnya sebagai 'mubazir' saja. Tampilan sebelum dan sesudah di 'perbaiki' tampak sebagai berikut:  Memperbaikinya cukup mudah. Masuk ke pengaturan dasbor blogger yang menggunakan template notable Pilih Tema Pilih edit HTML Di dalam halaman editor HTML blogger cari kode atau pengaturan CSS b

BEDANYA MENULIS CARA COMPOSE VIEW DENGAN CARA HTML VIEW DI BLOGSPOT

Pada umumnya secara normal para blogger menulis atau membuat konten tulisan sembari menyisipkan konten gambar atau video di blogger blogspot melalui mode "compose view". Namun begitu bagi blogger lanjutan, terutama yang menulis konten konten tutorial sesekali harus menulis melalui mode "HTML view" juga.  perlu di ingat penulisan mode HTML view sering dilakukan bagi mereka yang sudah terbiasa dengan kode kode HTML. Penulisan mode HTML view ini tidaklah terlalu penting bagi para blogger dengan niche niche penulisan blog gado, traveling, blog style, dll. Ia biasanya dilakukan oleh blog blog tutorial yang menyajikan konten konten tutorial terkait bahasa bahasa markup, front end di website. Apa perbedaan keduanya? 1. Compose View Secara bawaan (default) ketika membuka dasbor dan membuat postingan dengan mengklik tombol paling atas yang bernama "New Post" atau "Postingan baru". Melalui cara inilah seorang penulis di blog menggunakan tool yang ada untuk

CARA MINIFY KODE CSS YANG BENAR DI DALAM TEMPLATE BLOGGER

Kita dapat menggunakan tool online untuk keperluan meminimalkan ukuran CSS di dalam template, salah satunya yang terbaik adalah CSS minifier. Gunanya 'meminify' CSS di dalam template blogger adalah agar template menjadi lebih ringan dan loadingnya menjadi lebih cepat. Namun tidak semua kode CSS dapat di minify karena tergantung dimana dia diletakan di dalam template.  Silahkan kunjungi: https://cssminifier.com/ Cara menggunakannya cukup mudah tinggal copy kode CSS yang ingin di minify lalu pastekan ke kolom sebelah kiri (input) dan klik 'minify' maka kolom sebelah kanan (output) akan menampilkan hasil kode CSS yang telah di minify. 1. Apakah semua kode CSS dapat di minify?  Jadi terlebih dahulu akan saya jelaskan duduk perkaranya. Jika kalian mencoba minify kode CSS tertentu, template kalian tetap akan bekerja andaikata sekalipun cara inputnya salah. Akan tetapi awas, tampilan template jadi rusak. Itu dikarenakan CSS membentuk seperti apa HTML akan ditampilkan di halama

Alternatif Navigasi menu murni CSS dengan dropdown

CSS itu ringan, dan karena itu ia tidak melukai kecepatan loading sebuah blog. Salah atu kendala menambahkan menu navigasi adalah ia selalu melibatkan Javascript jika ingin fiturnya terlihat lengkap dan menawan. Atau dengan cara memasang navigasi menu menggunakan bootstrap dengan mengorbankan kecepatan loading akibat harus meng'embed' link eksternal pemanggil material dan elemen elemen library-nya. Tetapi sebenarnya hal tersebut sedikit teratasi melalui trik CSS sederhana dengan cara pemasangan yang juga sangat sederhana, tidak ada javascript, tidak harus melukai performa halaman dengan link eksternal.  CSS bisa membuat segala sesuatu tampil menjadi sangat cantik atau sangat sederhana. Dan pemasangan ke blog sangat sederhana. Masuk pengaturan/dasbor blog Pilih tema Pilih Edit HTML Di dalam halaman editor HTML blogger cari kode </head> dan letakan kode CSS berikut tepat di atasnya: <style> /* mulai menu dropdown */ .my-menu ul { display: none; position: absolute;

Cara membuat navigasi sticky untuk blogger

Navigasi sticky ini akan selalu tampil pada bagian atas halaman blog meskipun konten maupun homepage (beranda) halaman di scroll naik turun. Dan satu hal lagi ketika Judul ikut bersembunyi di bagian atas karena halaman di scroll (digulir) ke atas, navigasi menu bertahan pada batas tampilan paling atas. Demo: See the Pen NWbbJjL by Sufyan Yaan ( @sufyan-yaan ) on CodePen . Cara penerapan: Masuk ke pengaturan blogger (dasbor blogspot), masuk ke tataletak dan sembunyikan atau kalau tidak ada opsi sembunyikan hapus saja bagian widget header. seperti ini: Dari komputer Anda: Dari web. Tempelkan URL gambar di bawah. Penempatan Di balik judul dan keterangan Selain judul dan keterangan Tempatkan keterangan setelah gambar Susutkan agar sesuai Gambar akan disusutkan selebar 257 piksel. Simpan   Batal   Hapus Lalu sesudah melakukan langkah di atas masuk kembali ke pengaturan blogger, kali ini pilih menu tema, lalu pilih edit HTML. 1. Tambahkan CSS Nah setelah masuk ke dalam halaman editor

APA ITU JSON?

sumber gambar: jsonview.com J ika Anda tertarik mempelajari Javascript pada akhirnya sulit mengabaikan JSON karena JSON itu sendiri adalah Javascript dalam bentuk dan fungsi yang berbeda. Namun sebagai blogger dan tertarik pada dunia pengatahuan HTML mau tidak mau Anda harusnya paling sedikit memahaminya. JSON adalah singkatan dari: JavaScript Object Notion  Ia adalah sintaks untuk menyimpan dan bertukar data Bentuknya adalah teks namun di tulis dengan notasi objek JavaScript Mengapa menggunakan JSON? Karena format JSON hanya teks, maka dengan mudah dapat dikirim dari dan ke server, dan digunakan sebagai format data oleh bahasa pemrograman apa pun. JavaScript memiliki fungsi bawaan untuk mengonversi string, yang ditulis dalam format JSON, menjadi objek JavaScript asli: JSON.parse() Jadi, jika Anda menerima data dari server, dalam format JSON, Anda dapat menggunakannya seperti objek JavaScript lainnya. JSON memiliki 4 kegunaan: 1 . Bertukar Data Saat bertukar data antara browser dan ser

Cara membuat double navigasi menu ala editblogtema

Menurut saya ini adalah menu navigasi blog yang terbaik yang dapat di terapkan ke halaman blogspot, templatenya jadi ada rasa Wordpress dan teknik pembuatannya terbilang mudah dan mendasar sekali. Khasiatnya juga telah kami buktikan. Halaman Blog terasa menjadi lebih optimal. Mudah diterapkan ke template template bawaan Blogger dari versi lama hingga template varian terbaru blogspot. Tampilan menu navigasi ala editblogtema Itu juga alasannya mengapa kami menggunakannya sekarang. Kami telah berkali kali merobah tampilan antarmuka halaman blog, dengan tujuan mengoptimalkan halaman ini di halaman website, akhirnya kami menemukan sebuah cara - atau lebih tepatnya trik yang dapat di terapkan dengan mudah ke setiap model template bawaan blogger - blogspot. Yakni menu navigasi yang sedang kami pergunakan sekarang ini. Baiklah saya akan mencobakannya ke template contempo yang sebelumnya: Saya buang headernya Saya buang tombol pencarian bawaanya. Jangan kuatir, Keduanya dapat dilakukan melalui

CARA MEMBUAT MENU NAVIGASI BLOGGER STICKY MENGGUNAKAN W3SCHOOL 2

Blogging sambil belajar koding otodidak. Halo teman teman blogger, khususnya pemula yang pingin sekali blogging sambil belajar koding. Wow belajar koding gratis dan bisa praktik langsung melalui blogging. Pada kesempatan ini saya tetap mengangkat situs w3scool sebagai latarnya. Mengapa? Karena w3school adalah laman tutorial pertama yang membuat saya jadi 'melek koding' sejak dini. Dan terutama karena situs ini sangat cocok diterapkan ke dalam template template berbasis HTML. Mengapa ia cocok banget sama template blogger? Alasanya begini teman teman: Melalui laman ini saya rasa kita dapat belajar CSS dari dasar Melalui laman ini kita dapat belajar HTML dari dasar Melalui laman ini kita dapat belajar Javascript dari dasar Bahkan belajar PHP (hypertext) Dan bukan hanya itu, bukan hanya web programming, melaluinya kita dapat belajar C, C#, C+, Python, Java, Bootstrap dll. Yang sering online dan minat teknologi web maupun aplikasi sudah pasti tahu.  BACA: Studi online gratis w3schoo

Copyright© EDITBLOGTEMA . All rights reserved.