Posts

Showing posts from November, 2019

CARA MEMBUAT NAVIGASI MENU BLOGGER YANG RESPONSIF DENGAN MENU DROPDOWN

By -
Image
M ungkin admin blog ini pernah menjelaskan trik membuat menu navigasi blog responif dengan dropdown, namun saya membaca komentar bahwa beberapa pembaca "gagal" menerapkannya. Percayalah, kode kode, material dan elemen yang saya ajukan disini adalah kode kode dasar HTML, CSS dan JavaScript. Jadi jika di terapkan dengan benar ke dalam template blogger sangat kecil kemungkinan gagal. Karena: HTML ya HTML CSS ya CSS Javascript ya Javascript. dropdown navbar Baca juga: MEMBUAT NAVIGASI MENU DI DALAM GAMBAR PADA BLOG CARA MEMBUAT TOMBOL DROPDOWN MENU TUNGGAL DI BLOGGER  Basis pembuatan template blogger bawaan baik yang layout versi ke 2 maupun yang sudah layout versi ke 3 seperti Contempo, Soho, Emporio dan Notable adalah HTML! Jadi mengapa harus gagal? Coba perhatikan contoh (DEMO) dari menu navigasi yang saya buat di bawah ini, silahkan sentuh atau di klik: Home News Contact Dropdown Link 1 Link 2 ...
Post a Comment
Lanjutin Baca »

Kuasai bahasa pemrograman berikut jika ingin bekerja di Google

By -
Image
Jika kalian ingin memiliki peluang bekerja di Google atau di perusahaan induknya Alphabet, kalian harus menguasai beberapa bahasa koding yang memang dibutuhkan di sana. Beberapa diantaranya memang adalah bahasa bahasa koding yang sudah mainstream, sebut saja JavaScript. Ya memang ada bahasa bahasa koding yang akan membuat kalian memiliki peluang bekerja di tempat impian para orang muda: Google. Namun ada juga bahasa bahasa koding yang tidak bisa di pergunakan untuk bekerja di Google. Menurut laman efinancialcareer seperti yang telah di tulis oleh Sarah Butcher, pekerjaan yng terkait koding di Alphabet Google adalah setidaknya pada saat ini adalah: Python, JavaScript, C++ dan Java. Ini tidaklah mengherankan juga sih karena menurut laporan GitHub Javascript, Python dan Java masih berada di atas daftar atas bersama C++ di ranking ke-6 bahasa coding paling top di muka bumi pada saat ini. Tentu saja bekerja sebagai team, masing masing kalian akan memiliki tugas khusus dalam menyeles...
2 comments
Lanjutin Baca »

FAKTA ATAU MITOS:USIA DOMAIN MENINGKATKAN RANKING WEBSITE.

By -
Image
Di masa lalu para blogger sangat percaya ini: Usia domain mempengaruhi ranking Google. Semakin tua usia domain maka semakin penting domain tersebut di mata Google. Domain lama bisa saja hebat, tetapi domain baru yang rajin kampanye dan memiliki usaha lebih mungkin akan segera mengatasi Domain tua. Banyak Blogger berkeyakinan begini: Karena usia yang tua menunjukan konsistensi blogging itu sendiri. Itu benar. Tapi tahukah sobat, strategi SEO terbaru tidak perduli terhadap itu. Domain tua dan Domain baru tidak ada bedanya dimata Google. Seiring waktu backlink juga "tidak terlalu penting" - walaupun masih penting, sehingga misalnya banyak blogger berburu blogger Zombie untuk menarik manfaat dari backlink yang tertaut didalam blog blog terlantar tersebut, kini benar benar telah menjadi pekerjaan sia sia dan buang waktu. John Mueller sang webmaster trend analyst Google atau lebih terkenal dengan panggilan : (sobat bisa mengikutinya di twitter) John (@JohnMu) | Twitter ...
12 comments
Lanjutin Baca »

APA BEDANYA JAVASCRIPT DENGAN JQUERY?

By -
Image
Tahun 2006 John Resiq menciptakan jQuery, di ciptakan karena terdapat kekurangan pada JavaScript yakni ketidak sesuaian JavaScript dalam menangani browser, dan juga di tujukan agar manipulasi DOM HTML menjadi lebih sederhana termasuk animasi dan AJAX. Ilustration: JavaScript Selama lebih dari 10 tahun, jQuery telah menjadi perpustakaan JavaScript paling populer di dunia. Akan tetapi, setelah muncul JavaScript Versi 5 pada tahun 2009, sebagian besar utilitas jQuery dapat diselesaikan dengan beberapa baris JavaScript standar. Contoh JavaScript di dalam template blog: <button onclick="myFunction()">Click Me!</button> <script> function myFunction() { var x = document.getElementById("demo"); x.style.fontSize = "25px"; x.style.color = "red"; } </script> Perhatikan contoh lain sebuah statemen jika di tulis dengan jQuery: <!DOCTYPE html> <html><head> <script src="https://ajax.go...
Post a Comment
Lanjutin Baca »

INI PENJELASANNYA MENGAPA SANGAT MUNGKIN PERANG MENGERIKAN AKAN TERJADI ANTARA CINA DAN AMERIKA

By -
Image
G raham Tillett Alison adalah seorang Ilmuwan Politik berkebangsaan Amerika, Professor di Sekolah tinggi John F. Kennedy milik Pemerintah Amerika di Harvard. Seorang pembicara yang sangat ahli, logis dan piawai. Pada video diatas beliau dengan logis menggambarkan betapa cepatnya cina bangkit. Sangat menarik membicarakan perihal kemajuan cina.  Bahkan begitu cepatnya cina meraih kemajuan tersebut, dan "belum pernah terjadi dalam sejarah negara manapun" kata Graham. "Kita bahkan belum sempat terkejut tiba tiba saja negara yang 50 tahun sangat miskin dan dan tidak diperhitungkan ini telah melebihi kita (Amerika) dalam banyak hal". Graham memberikan contoh bagaimana sebuah jembatan rusak akan di perbaiki di Amerika harus memakan waktu bertahun tahun, tertunda dan tertunda, dan setelah beberapa tahun kemudian baru selesai itupun setelah memakan anggaran dua kali lipat. Dia membandingkan bagaimana sebuah jembatan di Beijing yang diperbaiki hanya membutuhkan wakt...
2 comments
Lanjutin Baca »

CARA MEMBUAT EFEK HOVER DENGAN W3-CSS

By -
Image
CSS memiliki banyak kemampuan efek visual yang sangat menarik. Mempelajari CSS berarti mempelajari teknik desain web yang akan menghasilkan sebuah pekerjaan yang sangat atraktif. Contoh di bawah adalah hasil trik W3-CSS yang saya pelajari dari situs w3school: Silahkan sentuhkan jari agak lama jika menggunakan ponsel atau cursor mouse jika menggunakan laptop ke gambar gambar berikut di bawah untuk melihat efek W3-HOVER. Note: class w3-hover-sepia tidak support browser lama, jadi jika kalian menggunakan browser tua tidak akan terlihat efeknya. w3-hover-opacity - Gambar normal: w3-hover-grayscale (kalau disentuh jadi abu abu): w3-hover-sepia (kalau disentuh jadi warna sepia): w3-hover-opacity w3-hover-grayscale w3-hover-sepia Jika Kalian tertarik menulis tidak melulu melalui penulisan blogger opsi "compose" tetapi menulis melalui opsi "html" kalian bisa mencoba menerapkan kode berikut ke dalam halama...
Post a Comment
Lanjutin Baca »

MENGENAL KODE WARNA CSS

By -
Image
HTML CSS color codes Sering di sebut juga dengan kode warna HTML itu terjadi karena orang menafsirkan kode warna tersebut pada saat di terapkan ke dalam HTML.  Padahal sejatinya kode warna CSS dan HTML sama saja hanya berbeda dalam penerapannya dan sebenarnya pewarnaan CSS mengikuti matode matode berikut: Kode Warna Hex  (Hexadecimal) Kode Warna RGB Kode Warna RGBA Kode Warna HSL Kode Warna HSLA  Dll Contoh cara penerapannya: <style> #p1 {background-color:#ff0000;} #p2 {background-color:#00ff00;} #p3 {background-color:#0000ff;} #p4 {background-color:#ffff00;} #p5 {background-color:#ff00ff;} Contoh kode warna dengan hanya menuliskannya dengan sintaks biasa: #p6 {background-color:indigo;}  Dan cara penulisan kode warna RGB: #p7 {background-color:rgb(249, 0, 255);} </style> Kode diatas jika di tuliskan ke dalam blogger dengan opsi HTML (bukan compose) Secara visual akan terlihat sebagai berikut: Warna dengan kode HEX: ...
1 comment
Lanjutin Baca »

BLOGGER DAN TANTANGAN BERAT DI MASA DEPAN

By -
Image
blogging Waktu dalam hidup adalah sesuatu yang dapat kita manfaatkan, namun dia terbatas. Karena itulah saya menulis dan terus menulis, meskipun kelak menulis seperti sekarang mungkin lenyap dari sejarah karena modernisasi cara kita menulis terus berkembang semakin maju. Kalian dapat mempercayai hukum ini bahwa tidak akan ada yang abadi di dunia ini,  kecuali perubahan itu sendiri. Hari ini saya tetap Ngeblog atau blogging. Tetapi saya mulai merenungkan seperti apa kelak blogger di masa depan. Namun yang jelas masa depan akan berbeda dengan masa sekarang. Bisa jadi segalanya akan berubah dan tidak akan pernah sama lagi dengan masa lalu. Apa yang membuat kita terkadang merasa berputus asa? Banyak!  Hampir semua pekerjaan bisa mendatangkan putus asa. Namanya juga manusia. Dalam dunia blogging masa sekarang banyak sekali terdapat tantangan yang berbeda. Misalnya Google sebagai pemilik platform blogger mengawasi dengan ketat setiap kegiatan penggunanya melalui tool tool...
5 comments
Lanjutin Baca »

CARA MEMBUAT FORM TESTIMONIAL DI BLOG

By -
Image
testimoni itu bagian dari strategi bisnis Banyak situs bisnis membuat form testimoni untuk meyakinkan pelanggan bahwa situs mereka berharga dan dapat dipercayai sebagai tempat bertransaksi. Persoalannya seberapa menarik form tersebut dibuat, saya selalu menyarankan kesederhaan. Namun pembuatannya tidak jauh jauh dari elemen elemen HTML, contoh berikut dapat kalian terapkan, tinggal memodifikasi link eksternalnya: <style> .container { border: 2px solid #ccc; background-color: #eee; border-radius: 5px; padding: 16px; margin: 16px 0 } .container::after { content: ""; clear: both; display: table; } .container img { float: left; margin-right: 20px; border-radius: 50%; } .container span { font-size: 20px; margin-right: 15px; } @media (max-width: 500px) { .container { text-align: center; } .container img { margin: auto; float: none; display: block; } } </style> </head> <body> <h2>Testimonials</h2> <di...
1 comment
Lanjutin Baca »

TRIK CSS DASAR UNTUK PEMBUATAN WARNA INFINITE BERANIMASI PADA BLOG

By -
Image
Lily with infinite colors S aya seolah baru hidup kemaren sore, ketika menemukan template buatan Arlina dan saya mencoba menirunya melalui inspeksi halaman pada browser Chrome. Dan berhasil! (maafkan saya). Yang menarik perhatian saya adalah walaupun hal itu bukan hal baru, template mbak Arlina awalnya di penuhi oleh warna gradasi dan infinite. Di mata saya yang selalu kepingin tahu itu menakjubkan, indah dan hidup. Jadi saya mencari tahu: Bagaimana infinite sesungguhnya bekerja dan saya menemukan trik CSS di internet dari berbagai sumber. (Sekali walaupun bukan hal baru saya tetap ingin berbagi) Perhatikan kode warna infinite berikut: <!DOCTYPE html> <html> <head> <style> #myDIV { width: 300px; height: 200px; background: red; -webkit-animation: mymove 5s infinite; /* Untuk Chrome, Safari, Opera */ animation: mymove 5s infinite; } /* Untuk Chrome, Safari, Opera */ @-webkit-keyframes mymove { from {background-color: indigo;} to {backgr...
4 comments
Lanjutin Baca »

MEMBUAT BAR DAN MENU DENGAN BOOTSTRAP

By -
Image
bootstrap keyboard Di samping cara manual dengan membuatnya elalui elemen elemen HTML biasa, kita juga dapat memanfaatkan bootstrap untuk membuat menu blogger. Bootstrap bukanlah bahasa pemrograman, namun dia masuk kedalam bagian komponen itu kaerna memanfaatkan sekumpulan library dan elemen elemen HTML biasa. Bisa saya jelaskan sebagai berikut: Bootstrap adalah kerangka kerja front-end gratis untuk pengembangan web yang lebih cepat dan mudah. Bootstrap, termasuk templat desain berbasis HTML dan CSS untuk tipografi, formulir, tombol, tabel, navigasi, modem, korsel gambar dan banyak lainnya, serta plugin JavaScript opsional. Bootstrap juga memberikan kalian kemampuan untuk dengan mudah membuat desain responsif. Apa itu Desain Web Responsif? Desain web responsif adalah tentang membuat situs web yang secara otomatis menyesuaikan diri agar terlihat bagus di semua perangkat, dari ponsel kecil hingga desktop besar. Bootstrap dikembangkan oleh Mark Otto dan Jacob Thornton di Twi...
1 comment
Lanjutin Baca »

CARA MEMBUAT JAM ANALOG CANTIK DENGAN GRAFIK SVG

By -
Image
Jam analog SVG adalah singkatan dari Scalable Vector Graphics . Dan ia mendefinisikan grafik berbasis vektor dalam bentuk format XML, jadi sebenarnya SVG adalah tentang desain web. Atau sesuatu di dunia website terkait desain grafis. Nah dengan SVG kita dapat mendesain suatu bentuk grafis dengan sumber library yang melimpah, dengannya juga kita dapat membuat game game sederhana. Namun sekali ini saya mencoba memberikan gambaran bagaimana cara membuat jam dinding sederhana menggunakan SVG. Lihat Jam dibawah ini bukanlah dibuat dengan gambar biasa melainkan sebundel kode kode SVG: Jika kalian ingin menerapkannya ke dalam bentuk konten, maka kalian harus menuliskan kode grafis SVG berikut melalui opsi penulisan "HTML" bukan Compose: <canvas id="canvas" width="250" height="250" style="background-color:#f0f0f0"> </canvas> <script> var canvas = document.getElementById("canvas"); var ctx = canva...
Post a Comment
Lanjutin Baca »

CARA MEMBUAT INDIKATOR SKILL DI HALAMAN BLOGGER

By -
Image
skill internet Indikator ini dapat diterapkan untuk sekedar mempresentasikan skill personal atau keahlian masing masing anggota dalam suatu organisasi di halaman blog, contoh skill indicator berikut ini: Adelina Sofyan's Skills: HTML 90% CSS 80% JavaScript 99% PHP 60% Indikator di atas dengan gamblang menjelaskan sejumlah keahlian yang dikuasai oleh konstributor sebuah halaman web berikut prosentasi penguasaannya. Kegunaan lain adalah biasanya dengan mempresentasikan skill kita, orang akan lebih mudah memberi penilaian untuk merekrut kita dalam mengerjakan proyek proyek tertentu di internet. Tentu saja itu hanya dasar. Dan penerapanya lagi lagi sebagai penulis kalian harus mahir bukan hanya menggunakan opsi penulisan melalui opsi "compose" namun juga opsi "HTML" dan itu tentu saja mudah di lakukan karena memang telah tersedia di dasbor blogger. Yang kita perlukan hanyalah menerapkan HTML dan CSS ke dalam ops...
2 comments
Lanjutin Baca »

CARA MEMBUAT TOMBOL JAVASCRIPT UNTUK MENYEMBUNYIKAN ELEMEN

By -
Image
ilustrasi Gunanya tombol yang akan saya presentasi-kan berikut adalah untuk menghemat ruang konten agar tidak terlalu panjang. Tombol dapat di klik atau di "centang" untuk membuka kode kode HTML yang panjang dan disembunyikan pada saat mengakses tutorial.Hilangkan centang jika ingin kembali menyembunyikan kode. Misalnya saya bermaksud mengatakan kepada pengunjung: Silahkan klik atau centang tombol di bawah ini untuk melihat kode kodenya: Buka kode dengan mencentang atau sebaliknya hilangkan tanda centang jika kembali ingin menyembunyikan kode kode : Kodenya adalah: m x →a c = c lim x →a xn = an lim x →a c f(x) = c lim x →a f(x) lim x →a ( f(x) + g(x)) = lim x →a f(x) + lim x →a g(x) lim x →a ( f(x) x g(x)) = lim x →a f(x) x lim x →a g(x) lim x →a f(x)/g(x) = (lim x →a f(x))/(lim x →a g(x)) lim x →a f(x)n = (lim x →a f(x))n lim x →a n√ f(x) = n√lim x →a f(x) 2. Turunan : f(x) = c u(x), turunannya yaitu f”(x) = c u'(x) f(x) = u(x) + v(x), turunannya yaitu f”...
Post a Comment
Lanjutin Baca »

TRIK MEMBUAT MODAL DENGAN GAMBAR

By -
Image
Membuat  modal dengan gambar tidak berbeda dengan membuat modal "lightbox" pada tutorial saya sebelumnya, ini dapat kita terapkan untuk presentasi pada halaman blog agar gambar lebih atraktif, lebih detail di sesuaikan dengan kebutuhan. Pada contoh di bawah ini, kita menggunakan CSS untuk menciptakan suatu modal (layaknya sebuah kotak dialog) yang tersembunyi secara default. Lalu kita menggunakan JavaScript untuk memicu modal dan menampilkan gambar di dalam modal pada saat ia di klik/pencet. Dan juga kita menggunakan nilai daripada gambar yakini atribut "alt" sebagai text tangkapan (caption) di dalam modal Klik gambar di bawah untuk membuka MODAL, dan setelah itu tutup tanda "X" untuk menutup MODAL × Baca: CARA MEMBUAT MODAL PADA HALAMAN BLOGGER Untuk menerapkannya masuk ke dasbor blogger tempat biasanya menulis konten blog, pada saat menuliskan postingan tetap menggunakan opsi penulisan pada "compose" namun pa...
Post a Comment
Lanjutin Baca »

CARA MEMBUAT MODAL PADA HALAMAN BLOGGER MENGGUNAKAN JS DAN CSS

By -
Image
contoh tampilan modal Kalian jangan berfikir saya ini sebagai ahli keuangan ya...modal yang saya maksudkan tidak jauh dari beberapa rumpun kode kode HTML, CSS dan bahkan JavaScript yang di terapkan untuk menghasilkan sebuah "lightbox" dapat dimanfaatkan menarik atau mengalihkan perhatian pembaca terhadap sesuatu "pesan" yang ingin kita sampaikan dengan cara mengajak pembaca mengklik sebuah tombol dan jika mereka mengklik karena ingin tahu, maka pesanpun akan "tersampaikan" Contohnya cobalah klik tombol Modal dibawah ini: Buka Modal × Halo selamat datang di halaman blog editblogtema dan Saya Anissa mengajak kalian membaca halaman ini..halaman tempat kita belajar HTML, CSS, dan JavaScript untuk blogger ...Halaman yang akan bercerita apa adanya perihal koding dasar, teknologi, paradox dan kehidupan di sekitar kita... Cara penerapannya sama dengan tutorial yang saya berikan pada artikel artikel saya yang te...
3 comments
Lanjutin Baca »

CARA MEMBUAT FORM RESPONSIF MELALUI METODE PENULISAN HTML BLOGGER

By -
Image
form ilustration Terkadang kita harus membuat form isian untuk untuk kebutuhan blogging khusus, misalnya dengan tujuan meminta orang mendaftarkan diri mereka bergabung dengan komunitas bisnis kita. Percayalah kepada saya, kalian membutuhkan sebuah bentuk form untuk itu. Namun tidak mudah membuatnya di halaman blogger karena blogger bukan stylesheet seperti aplikasi perkantoran Microsoft Office Excel. Form yang saya buat ini sangat responsif, namun tombol "submit" belum saya aktifkan karena tujuannya hanya untuk memberikan contoh dan cara membuat suatu form, submit baru berfungsi jika kita telah menambahkan kode PHPnya, itu akan saya jelaskan pada tutorial yang berbeda. Perhatikan bentuk form responsif yang telah saya buat di bawah ini: First Name Last Name Pilih salah satu Kota: Batam Tanjung Pinang Jawa ...
Post a Comment
Lanjutin Baca »