Skip to main content

Posts

Showing posts from November, 2019

CARA MEMBUAT NAVIGASI MENU BLOGGER YANG RESPONSIF DENGAN MENU DROPDOWN

Mungkin 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 HTMLCSS ya CSSJavascript ya Javascript. Baca juga:

MEMBUAT NAVIGASI MENU DI DALAM GAMBAR PADA BLOGCARA 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: HomeNewsContactDropdown Link 1Link 2Link 3 About 1. CSS
Cara penerapannya juga mudah: Kalian tinggal masuk ke pengaturan blogger.
Pilih theme…

BAHASA PROGRAM APA YANG BISA MEMBUAT KALIAN MENDAPATKAN PEKERJAAN DI GOOGLE?

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 menyelesaikan …

FAKTA ATAU MITOS:USIA DOMAIN MENINGKATKAN RANKING WEBSITE.

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) | Twittertelah menja…

APA BEDANYA JAVASCRIPT DENGAN JQUERY?

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. 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.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"…

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

Graham 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 waktu 34 jam s…

CARA MEMBUAT EFEK HOVER DENGAN W3-CSS

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 halaman html di blogger kalian:
<link rel="styl…

MENGENAL KODE WARNA CSS

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 RGBKode Warna RGBAKode Warna HSLKode 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:
Red Green Blue Yellow Cerise Indigo Fuchsia
Dengan terus belajar kalian akan memaham…

BLOGGER DAN TANTANGAN BERAT DI MASA DEPAN

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 pintar yang mereka ciptaka…

CARA MEMBUAT FORM TESTIMONIAL DI BLOG

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>
<div class="container">
<img src="https://1.bp.blogspot.com/-7T9vP…

CARA MEMASANG TOMBOL TOGGLE DARK MODE KE TEMPLATE BLOGGER MENGGUNAKAN JAVASCRIPT

Toggle artinya tombol pengalihan mengalihkan suatu bentuk ke bentuk lain. Toggle dark mode berarti mengalihkan dari terang kepada gelap. Banyak yang memasangnya contohnya template igniel.com milik mbak igniel memiliki opsi dark mode. Dark mode berguna untuk membaca di tempat gelap atau terlalu terang. Dan menyehatkan mata.

Tetapi yang paling penting adalah kalian bisa menerapkan ini dengan sangat mudah ke template template blogger terbaru blogger seperti Contempo. Namun, jangan salah panduan yang saya berikan ini hanyalah contoh ya....

Syarat pertama kalian belum memasang navigasi menu custom karena dia bisa membuat posisi navigasi jadi kacau, kecuali jika kalian mengerti mengatur posisinya melalui kode CSS.

Dan syarat kedua tentu saja harus masuk ke dasbor blogger.
Klik customPilih background, lalu hapus backgroundLalu pilih advance pilih satu persatu menu dan pada setiap ada kata background, pilih atau centang: transparent.Save tema. Kode kodenya sangat sederhana dan singkat, kalian …

TRIK CSS DASAR UNTUK PEMBUATAN WARNA INFINITE BERANIMASI PADA BLOG

Saya 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 {background-color: pink;}
}
/* Sintaks standar */
@keyframes …

MEMBUAT BAR DAN MENU DENGAN BOOTSTRAP

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 Twitter, dan dirilis sebagai produk op…

CARA MEMBUAT JAM ANALOG CANTIK DENGAN GRAFIK SVG

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 = canvas.getContext("2d");
v…

CARA MEMBUAT INDIKATOR SKILL DI HALAMAN BLOGGER

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 opsi penulisan "HTML"

Perhatikan kode kodenya:
<style&g…

CARA MEMBUAT TOMBOL JAVASCRIPT UNTUK MENYEMBUNYIKAN ELEMEN

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”(x) = u'(x) + v'…

TRIK MEMBUAT MODAL DENGAN GAMBAR

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 pada saat menerapkan kode modal, …

CARA MEMBUAT MODAL PADA HALAMAN BLOGGER

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 telah saya posting sebelumnya di halaman blog ini, yakni meletakan kod…

CARA MEMBUAT FORM RESPONSIF MELALUI METODE PENULISAN HTML BLOGGER

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: BatamTanjung PinangJawaMalukuTembilahanSungai luarBelantaraya Riwayat singkat Cobalah menuliskan nama, memilih kota dan menuliskan riwayat hidup kalian di dalam form ajakan diatas. Dan bagaimana menerapkannya?

Jika kalia…
Copyright © editblogtema. All rights reserved.