Belajar Membuat Border Teks Menggunakan Element Text-Shadow Dan Text-Stroke - Pada tutorial kali ini kita akan mencoba membuat sebuah border pada teks, yang akan kita bungkus menggunakan element text-shadow dan juga text-stroke.
Seperti yang telah kita ketahui, terdapat banyak sekali element - element atau bahasa pemrograman yang bisa kita pelajari diluaran sana atau bisa juga melalui W3Schools atau situs lainnya, mulai dari yang mudah di cerna hingga yang tersulit sekalipun. Salah satu contoh nya yang akan kita bahas text-shadow, text-stroke. Mungkin disini saya akan menerangkan untuk yang mudahnya atau dasarnya dulu agar mudah untuk kalian mengerti.
Bagaimana Cara Dan Proses Pembuatan Border Text Menggunakan Element Text-Shadow Dan Text-Stroke?
Untuk memulai langkah pada tutorial ini, kita hanya perlu sedikit syntax, yaitu Css Dan Html.
Lalu apakah kegunaan dari text-stroke ini?
Kegunaannya hanya untuk mempercantik sebuah teks agar terlihat lebih keren.
Nah untuk praktek yang pertama, disini saya akan coba dengan menggunakan text-shadow terlebih dahulu.
Langkah yang pertama adalah, buat file css nya atau bisa kalian perhatikan css berikut ini:
Pada contoh diatas terlihat di dalam text-shadow nya, disitu saya beri nilai 2px 2px dengan diakhiri nilai 3px. 3px ini fungsinya sebagai pengatur tingkat ketebalan bayangan pada teks tersebut, dan 2px 2px nya untuk mengatur posisi bayangan itu sendiri dan #333 adalah target warna untuk shawdownya.
Untuk mengeksekusinya, sangat mudah cukup dengan menggunakan html seperti ini:
<div class="contoh">BERI TEKS DISINI</div>
Lanjut ketahap selanjutnya yaitu,
Cara Membuat Border Untuk Teks Menggunakan Text-Stroke
Untuk caranya mari perhatikan pada contoh berikut ini:
Bisa dilihat sangat jelas berbeda dengan text-shadow sebelumnya, pada text-sroke kita menggunakan element webkit agar syntax tersebut bekerja. Coba kalian buat dengan tidak menggunakan element webkit, seperti ini:
Tutorial Membuat Kalkulator Keren Menggunakan Html, Css, Dan Javascript - Setelah berhari - hari tidak membuat tutorial, dengan alasan sibuk di dunia nyata dan banyak pula pekerjaan yang belum terselesaikan ditambah dengan minimnya ide.
Namun sewaktu - waktu saya sempatkan untuk berfikir, tutorial apa yang harus saya buat untuk postingan diblog saya ini? Sambil berfikir.. ? ? ?
Dan pada akhirnya munculah ide ini yaitu membuat sebuah kalkulator sederhana namun tetap keren dengan perpaduan antara HTML, CSS, dan juga JAVASCRIPT.
Mungkin sobat semua berfikir, ah ini sih tutorial jadul.
Saya akui memang jadul, sudah banyak dan berserakan tutorial seperti ini di Google. Akan tetapi jika diulas kembali, selagi ini bermanfaat ya kenapa tidak.
Oke saya rasa cukup untuk basa basinya, mungkin kita langsung saja ketahap cara pembuatannya.
Untuk melengkapinya, disini kita memerlukan beberapa file script diantaranya:
1. Html
2. Css
3. Javascript
Bagaimana Cara Membuatnya?
Silahkan sobat simak dan perhatikan langkah dibawah ini.
Langkah pertama yaitu, kita buat file Css terlebih dahulu untuk keperluan agar tampilannya terlihat keren.
Bisa sobat lihat syntax Css berikut ini:
Jika sudah kita klik simpan jangan lupa beri nama style.css atau yang lain terserah sobat.
Langkah selanjutnya, kita buat Javascript nya supaya kalkulator ini bekerja, perhatikan berikut ini:
// Get all the keys from document
var keys = document.querySelectorAll('#calculator span');
var operators = ['+', '-', 'x', '÷'];
var decimalAdded = false;
// Add onclick event to all the keys and perform operations
for(var i = 0; i < keys.length; i++) {
keys[i].onclick = function(e) {
// Get the input and button values
var input = document.querySelector('.screen');
var inputVal = input.innerHTML;
var btnVal = this.innerHTML;
// Now, just append the key values (btnValue) to the input string and finally use javascript's eval function to get the result
// If clear key is pressed, erase everything
if(btnVal == 'C') {
input.innerHTML = '';
decimalAdded = false;
}
// If eval key is pressed, calculate and display the result
else if(btnVal == '=') {
var equation = inputVal;
var lastChar = equation[equation.length - 1];
// Replace all instances of x and ÷ with * and / respectively. This can be done easily using regex and the 'g' tag which will replace all instances of the matched character/substring
equation = equation.replace(/x/g, '*').replace(/÷/g, '/');
// Final thing left to do is checking the last character of the equation. If it's an operator or a decimal, remove it
if(operators.indexOf(lastChar) > -1 || lastChar == '.')
equation = equation.replace(/.$/, '');
if(equation)
input.innerHTML = eval(equation);
decimalAdded = false;
}
// Basic functionality of the calculator is complete. But there are some problems like
// 1. No two operators should be added consecutively.
// 2. The equation shouldn't start from an operator except minus
// 3. not more than 1 decimal should be there in a number
// We'll fix these issues using some simple checks
// indexOf works only in IE9+
else if(operators.indexOf(btnVal) > -1) {
// Operator is clicked
// Get the last character from the equation
var lastChar = inputVal[inputVal.length - 1];
// Only add operator if input is not empty and there is no operator at the last
if(inputVal != '' && operators.indexOf(lastChar) == -1)
input.innerHTML += btnVal;
// Allow minus if the string is empty
else if(inputVal == '' && btnVal == '-')
input.innerHTML += btnVal;
// Replace the last operator (if exists) with the newly pressed operator
if(operators.indexOf(lastChar) > -1 && inputVal.length > 1) {
// Here, '.' matches any character while $ denotes the end of string, so anything (will be an operator in this case) at the end of string will get replaced by new operator
input.innerHTML = inputVal.replace(/.$/, btnVal);
}
decimalAdded =false;
}
// Now only the decimal problem is left. We can solve it easily using a flag 'decimalAdded' which we'll set once the decimal is added and prevent more decimals to be added once it's set. It will be reset when an operator, eval or clear key is pressed.
else if(btnVal == '.') {
if(!decimalAdded) {
input.innerHTML += btnVal;
decimalAdded = true;
}
}
// if any other key is pressed, just append it
else {
input.innerHTML += btnVal;
}
// prevent page jumps
e.preventDefault();
}
}
Lalu sobat berinama kalkulator.js, jika sudah klik simpan file.
Yang selanjutnya adalah kita buat Html nya untuk membangun kerangka kalkulator ini.
Nah untuk Jquery.min.js dan Prefixfree-1.0.7.js sobat bisa download dan cari di google.
Jika semuanya sudah terselesaikan, Html, Css, dan Javascriptnya sudah kita buat. Langkah terakhir adalah sobat akses dan lihat hasilnya seperti apa dari ketiga script diatas.
Tidak lupa pula disini saya sisipkan untuk live demonya, sobat bisa klik linknya dibawah:
Jangan lupa jika ingin mencoba membuatnya, silahkan di modifikasi sesuai dengan selera masing - masing.
Mungkin saya rasa cukup sekian saja untuk pembahasan hari ini, semoga apa yang hari ini saya jelaskan dapat bermanfaat dan memberi pengetahuan baru terutama para pemula diluar sana.
Cara Membuat Sitemap Html Terbaru Keren Dan Juga Menarik - Oke, pada tutorial kali ini saya akan mengajak kalian untuk membuat Sitemap otomatis di website ataupun di blog.
Mungkin dengan saya mengangkat tutorial seperti ini, saya rasa agak ketinggalan jaman dan itupun sudah banyak diperbincangkan di blog teman-teman semua. Namun disini saya sedikit memodifikasinya, sehingga tampilan dari sitemap tersebut jadi lebih menarik dan terlihat baru.
Pastinya kalian sudah tahu dong ya, apa fungsi dan kegunaan dari sitemap ini. Nah disini ada #2 tahapan atau cara pembuatanya, yang dimana saya jabarkan sebagai berikut:
- Cara Membuat Sitemap Html Otomatis Part #1. - Cara Membuat Sitemap Html Otomatis Part #2.
Apa saja perbedaan dari keduanya?
Perbedaannya hanya pada tampilan dan sedikit tambahan scroll saja, simple namun tetap keren. Jika kalian tertarik mari kita simak cara pembuatannya dan ikuti setiap langkah-langkah dibawah agar hasilnya 100% tampil di blog kalian.
I. Cara Membuat Sitemap Html Otomatis Part #1.
Untuk memulai langkah pada tutotial ini, disini kita hanya memerlukan sebuah html dan javascript yang tidak lain yaitu untuk membuat sitemapnya. Dan maka dari itu simak baik-baik cara berikut ini:
1. Seperti biasa pergi kehalaman dasboard Blogger kalian -> Klik Halaman -> Buat Halaman Baru.
2. Pada langkah yang kedua ini, ingat klik html jangan compose.
3. Setelah itu kalian copy paste javascriptnya seperti tampak dibawah ini:
Bisa dilihat, disitu saya menambahkan sebuah element div untuk mengatur background dan yang lain-lain. Pada height nya saya beri nilai 100px bisa kalian ubah dan disesuaikan. Untuk link https://www.google.com silahkan ganti dengan alamat URL blog kalian, dan untuk warna background kalian ganti dengan warna lain sesuai dengan selera.
Jika sudah langsung klik simpan halaman, selanjutnya coba kalian akses dan lihat bagaimana tampilannya.
II. Cara Membuat Sitemap Html Otomatis Part #2.
Caranya lakukan sama seperti langkah yang pertama, copy paste lagi html dan javascript berikut:
Klik simpan halaman, jika sudah coba akses kembali dan lihat hasil dan perbedaannya.
Nah untuk selanjutnya terserah kalian mau diapakan, selamat berkreasi dan selamat mencobanya.
Bila ingin melihat contoh sitemap blog saya, bisa dilihat melalui link dibawah ini:
Tidak kurang dan tidak lebih mungkin hanya itu yang bisa saya berikan lewat pembelajaran hari ini.
Dan akhir kata saya ucapkan terimakasih banyak sampai berjumpa di tutorial selanjutnya.
Cara Memasang Dan Membuat Breadcrumb Flat Seo Friendly Di Website Html Menggunakan Css3 - Apa itu Breadcrumb? Pada umumnya fungsi dan arti dari Breadcrumb adalah fitur atau sistem navigasi menu halaman sebuah website, yang kegunaannya untuk mempermudah para pengunjung website supaya lebih mudah melacak lokasi mereka saat ini dan dari mana awal mereka mulai melakukan perjalanan diwebsite atau blog tersebut.
Tahukah kalian, bahwa Breadcrumb juga telah menyediakan suatu link penghubung untuk menghubungkan halaman yang sedang dibuka dengan diikuti halaman - halaman yang sudah lebih dulu dibuka sebelumnya. Dengan kata lain, Breadcrumb ini juga akan memberikan sebuah jejak bagi pengunjung website atau blog.
Itulah sedikit pengertian dari Breadcrumb.
Nah untuk tutorial yang akan saya berikan saat ini yaitu, cara membuat Breadcrumb website Html menggunakan Css3.
Oke, sebelum kita lanjut dan mulai kedalam tahap pembuatannya, disini kita memerlukan beberapa buah file seperti:
• Html
• Css
• Scss
• Jquery
Untuk cara pembuatannya ikuti langkah - langkah dibawah ini:
Yang pertama yaitu, buatlah file html nya dan beri nama index.html atau terserah kalian. Lalu copy contoh syntax berikut ini:
Untuk saat ini apa ada pertanyaan?
Jika tidak, mari kita lanjutkan ke tahap berikutnya.
Langkah selanjutnya yaitu, buat sebuah file scss disini sebagai contoh saya beri nama style.scss setelah itu copy paste syntaxnya kedalam style.scss.
Perhatikan dibawah ini:
Setelah semuanya sudah kalian buat dengan mengkuti panduan diatas, sekarang coba kalian akses pada browser dan bagaimana hasilnya.
Live demonya untuk saat ini saya hanya melampirkan screenshoot hasil dari syntax diatas.
Apabila kalian ingin mendapatkan hasil yang lebih bagus dan maksimal, kalian hanya cukup memainkan atau edit pada bagian Css nya sehingga menjadi terlihat sebegitu menarik breadcrumbs itu.
Mungkin saya rasa cukup untuk pembahasan kali ini, mudah - mudahan bermanfaat selalu untuk semuanya.
Cara Membuat Web Design Html Sederhana - Pada dasarnya jika kita ingin membuat sebuah web atau halaman website, tentunya kita harus mengerti pokok atau inti dasar dari isi web tersebut.
Apa yang dimaksud dengan pokok dasar dari isi web tersebut? Pokok-pokok dasarnya yaitu, disini kita dituntut harus memahami kode-kode tertentu atau sering disebut sebagai bahasa pemrograman.
Contohnya seperti:
Html, Css, Php, Javascript dan masih banyak lainnya.
Mungkin untuk seorang pemula, ini adalah hal yang rumit bagaimana caranya agar bisa paham dan mengerti dengan segitu banyaknya istilah pada kode tersebut.
Nah maka dari itu, pada kesempatan kali ini saya akan mencoba membahas bagaimana contoh dasar atau cara dasar membuat web dengan html. Tidak hanya sebatas memahami atau mengerti jika kita ingin memulai membuat web, kitapun harus memiliki rumah dan alamat rumah kita agar bisa dikunjungi oleh banyak orang nantinya.
Apa yang dimaksud dengan rumah dan alamat rumah? Yang dimaksud dengan rumah dan alamat rumah yaitu, Hosting dan Domain.
Apa itu hosting?
Hosting jika diibaratkan sama seperti sebuah rumah atau apartemen yang memiliki ukuran luas dan lebar yang berbeda. Sedangkan Domain adalah sebagai alamat kita nantinya, yang mana jika kita telah selesai membuat rumah tersebut kita sudah dapat mengunjunginya.
Dimana tempat untuk membeli hosting dan domain yang terpercaya dengan support 24jam fast respon? Kalian bisa kunjungi alamat dibawah:
• Untuk order hosting murah bisa Disini
• Untuk Order Domain Disini.
Oke, disini saya anggap kalian sudah mempunyai hosting dan domainnya. Dan untuk memulai langkah pada tutorial ini, kita membutuhkan:
1. Html (Kerangka Web)
2. Css (Sebagai Penghias Kerangka Web)
Langkah yang pertama yaitu, masuk ke hosting cpanel kalian terlebih dahulu. Setelah itu klik filemanager yang terdapat didalam cpanel itu, kemudian buat sebuah file yang berekstensi index.html dan copy kode html berikut ini:
<div class="navbar">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</div>
<div class="container">
<div class="row">
<h1>Demo Web Html</h1>
<p>Selamat datang di web kami.</p>
<p>Web ini hanya sekedar contoh untuk keperluan demo.</p>
</div>
</div>
<div class="container">
<div class="row">
<h3>Tutorial</h3>
<p>- Cara cara membuat web html -</p>
<p>- Design web html dan css -</p>
<p>- Membuat web sederhana -</p>
<p>- Membuat simple web html -</p>
</div>
</div>
<div class="footer">
Copyright @ 2019 <a href="https://www.seotechman.com">SEO TECHMAN</a> | Allright Reserved.
</div>
Pastekan kedalam file index.html yang sudah kalian buat sebelumnya.
Langkah berikutnya adalah, kalian buat file lagi didalam root filemanager tersebut beri nama style.css sebagai contoh dan copy kode css dibawah ini:
Setelah itu pastekan kedalam file style.css dan klik simpan.
Untuk menggabungkan kedua file diatas antara index.html dan style.css, bisa kalian lihat seperti contoh dibawah:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="navbar">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</div>
<div class="container">
<div class="row">
<h1>Demo Web Html</h1>
<p>Selamat datang di web kami.</p>
<p>Web ini hanya sekedar contoh untuk keperluan demo.</p>
</div>
</div>
<div class="container">
<div class="row">
<h3>Tutorial</h3>
<p>- Cara cara membuat web html -</p>
<p>- Design web html dan css -</p>
<p>- Membuat web sederhana -</p>
<p>- Membuat simple web html -</p>
</div>
</div>
<div class="footer">
Copyright @ 2019 <a href="https://www.seotechman.com">SEO TECHMAN</a> | Allright Reserved.
</div>
</body>
</html>
Jika semua persiapan seperti diatas sudah kalian buat semua, tinggal kalian simpan. Kemudian coba dilihat hasilnya seperti apa.
Disini saya lampirkan juga untuk demonya, jika ingin melihatnya silahkan menuju link yang sudah saya sediakan dibawah.
Intinya, membuat sebuah web dengan html dan css ini bisa dibilang mudah. Itupun kalau kita telah paham dan mengerti dasar-dasarnya, sama seperti apa yang sudah saya jelaskan sebelumnya.
Untuk contoh seperti kode diatas, bisa kalian kreasikan sendiri entah itu html nya ataupun css nya. Edit dengan sebaik mungkin agar tampilannya menarik dan bagus.
Itulah sedikit tutorial kali ini dari saya Cara Membuat Web Design Html Sederhana, kurang lebihnya hanya itu yang dapat saya tutorialkan untuk pembahasan kali ini.
Ambil sisi positifnya dari pembelajaran ini dan buang sisi negatifnya. Mudah-mudahan bermanfaat dan sedikit membantu, terutama untuk para pemula.
Akhir kata saya ucapkan, terimakasih dan sampai bertemu kembali dilain waktu.
