Apa Itu HTML ? Inilah Pengertian dan Fungsinya - Apakah masih ada yang belum tahu pengertian perihal apa itu html, padahal kita sering menjumpainya setiap hari di internet. Sebenarnya yang kita lihat kini ini yaitu html namun sudah di intergrasikan kedalam bentuk yang sudah di tentukan atau istilah programmernya yaitu sudah di compiler atau di terjemahkan kedalam bentuk grafik. Nah, bagi yang belum tahu perihal html ini silahkan simak dibawah ini pengertian dan fungsi dari html, selain itu di blog ini aku juga akan menjelaskan fungsi-fungsi dari setiap instruksi html secara bertahap.
Apa Itu HTML ?
HyperText Markup Language (HTML) adalah sebuah bahasa standar pemrograman yang di gunakan untuk menciptakan sebuah halaman web yang terdiri dari beberapa instruksi singkat, yang sanggup menampilkan aneka macam gosip menyerupai teks, grafik, audio, dan video pada web browser. Sedangkan web browser atau penjelajah web yaitu jadwal atau aplikasi yang sanggup membaca bahasa html sehingga kita sanggup membaca dan melihat dengan gampang isi dari instruksi html tersebut. Beberapa web browser yang sanggup kita gunakan yaitu Google Chrome dan Mozilla Firefox, kedua browser ini sanggup kita gunakan untuk mencari aneka macam gosip di internet.
Versi HTML Hingga Saat Ini
Seiring berjalannya waktu, versi dari hiperteks atau markah ini terus berkembang sehingga memperlihatkan fasilitas dalam penggunaannya. Berikut perkembangan html dari awal hingga hingga dikala ini :
Tahun 1989 : Tim Berners-Lee mengusulkan html berada di internet
Tahun 1991 : Tim Berners-Lee mengenalkan html di internet
Tahun 1993 : Dave Raggett menyusun HTML+
Tahun 1995 : HTML 2.0
Tahun 1997 : HTML 3.2
Tahun 1999 : HTML 4.01
Tahun 2000 : XHTML 1.0
Tahun 2008 : Menyusun HTML5
Tahun 2012 : Penggunaan Standard HTML5
Tahun 2014 : HTML5
Tahun 2016 : HTML 5.1
Apa Fungsi HTML ?
Tentu html ini mempunyai peranan penting dalam dunia internet, kita tidak sanggup melihat objek atau goresan pena yang tersusun rapih pada web browser kalau tidak memakai html ini, namun untuk mempunyai tampilan web yang baik kita memerlukan instruksi komplemen untuk desainer yaitu css. CSS ini yang sanggup mengatur letak dan warna dari objek html sehingga sanggup tersusun dengan baik. Lalu apa fungsi dari html tersebut ?
Pada dasarnya HTML berguna atau fungsi yang sama menyerupai teks pada umumnya, namun dalam dokumen ini sebuah teks atau goresan pena sanggup memuat intruksi tertentu yang ditandai dengan instruksi atau istilah lainnya yaitu Tag. Misalnya kita akan menulis karakter tebal BOLD maka cara penulisan dalam bentuk html menyerupai berikut <b> BOLD </b>. Tanda <b> di gunakan untuk memperlihatkan intruksi kepada pembaca instruksi html menyerupai web browser untuk menampilkan teks dalam bentuk tebal, sedangkan tanda </b> merupakan tanda epilog untuk menakhiri perintah teks tebal, jadi sehabis tanda epilog teks akan tampil menyerupai normal.
Kegunaan Lainnya :
Mengintegrasikan goresan pena dan grafik
Mengintegrasikan audio dan video
Membuat hyperlink atau pranala
Membuat form interaktif
Apa Saja Kode atau Tag HTML ?
Kode HTML sangatlah banyak, beberapa instruksi atau tag html yang usang atau tag html dari versi sebelumnya tidak di hapus melainkan tetap dipakai jadi kalau Anda memakai html versi usang anggap saja versi HTML 4 maka hasil compiler instruksi akan tetap terbaca namun beberapa instruksi lainnya mungkin sudah tidak mendukung dengan versi yang usang sehingga akan mengalami beberapa duduk perkara hingga Anda mengupdatenya atau memakai versi html terbaru. Berikut beberapa instruksi atau tag html yang umum di gunakan :
<a> tag html untuk menciptakan hyperlink
<b> tag html untuk mencetak karakter tebal
<i> tag html untuk mencetak karakter miring
<u> tag html untuk memperlihatkan garis bawah pada huruf
<title> tag html untuk memperlihatkan judul pada web browser
<img> tag html untuk menampilkan gambar
<br> tag html untuk menciptakan garis gres pada dokumen
<p> tag html untuk menciptakan paragraf pada dokumen
Itulah klarifikasi mengenai html beserta fungsinya, tentunya dengan memahami dan berguru mengenai instruksi html Anda akan sanggup menciptakan sebuah halaman web menyerupai yang Anda inginkan, oleh alasannya yaitu itu silahkan Anda berguru mengenai HTML ini baik di sini maupun di luar sana, aku akan membahas html ini secara terencana supaya Anda sanggup dengan gampang dan mengingat dari masing-masing instruksi yang akan aku jelaskan disini.
Kumpulan Kode Tag HTML Lengkap Dengan Fungsinya - Setelah sebelumnya kita mengetahui apa yang dimaksud dengan HTML, sekarang kita saatnya mengenal beberapa arahan tag yang ada pada HTML. Sesuai dengan perkembangannya versi html yang terbaru yaitu HTML5, disini juga aku sudah menawarkan tanda checklist pada versi HTML5 yang paling baru.
Jika Anda belum membaca atau mengerti mengenai pengertian html silahkan untuk membacanya terlebih dahulu, sehabis itu gres kita mengenal jenis-jenis arahan yang ada pada html. Sebuah halaman web page di susun dengan html sehingga terlihat lebih rapih, apalagi kalau di tambahkan dengan arahan CSS maka tampilan web akan lebih menarik lagi.
Dalam pembuatan halaman website tentu arahan HTML sangat kuat besar, walaupun Anda memakai CMS Wordpress yang sebagian besar di dominasi dengan script PHP tetap saja web browser akan menerjemahkannya atau membacanya kedalam bentuk arahan HTML. Kaprikornus kiprah arahan html di dalam sebuah website sangatlah penting.
Nah, untuk Anda yang ingin sanggup menciptakan sebuah halaman website yang sederhana Anda sanggup mencar ilmu mengenal arahan HTML disini, aku akan update artikel ini dan menjelaskan setiap arahan tag pada html. Untuk sementara Anda sanggup melihat dan mempelajari fungsi dasar dari masing-masing arahan html sesuai dengan huruf dibawah ini :
Kumpulan Kode Tag HTML dan Fungsinya
Tag
HTML5
Deskripsi
<! --...-->
Mendefinisikan komentar
<!DOCTYPE>
Mendefinisikan jenis dokumen
<a>
Mendefinisikan hyperlink
<abbr>
Mendefinisikan sebuah singkatan atau akronim
<acronym>
Tidak didukung di HTML5. Gunakan <abbr> sebagai gantinya. Mendefinisikan akronim
<address>
Mendefinisikan gosip kontak untuk penulis/pemilik dokumen
<applet>
Tidak didukung di HTML5. Gunakan <embed> atau <object> gantinya. Mendefinisikan sebuah applet tertanam
<area>
Mendefinisikan sebuah area inside sebuah image-map
<article>
✓
Mendefinisikan sebuah artikel
<aside>
✓
Mendefinisikan konten selain dari konten halaman
<audio>
✓
Mendefinisikan konten suara
<b>
Mendefinisikan teks tebal
<base>
Menentukan basis URL/target untuk semua URL relatif dalam dokumen
<basefont>
Tidak didukung di HTML5. Gunakan CSS sebagai gantinya. Menentukan warna default, ukuran, dan font untuk semua teks dalam dokumen
<bdi>
✓
Isolat/memisahkan bab dari teks yang mungkin diformat dalam arah yang berbeda dari teks lain di luar itu
<bdo>
Mengganti arah teks ketika ini
<big>
Tidak didukung di HTML5. Gunakan CSS sebagai gantinya. Mendefinisikan teks besar
<blockquote>
Mendefinisikan bab yang dikutip dari sumber lain
<body>
Mendefinisikan badan dokumen
<br>
Mendefinisikan satu baris tunggal
<button>
Mendefinisikan sebuah tombol diklik
<canvas>
✓
Digunakan untuk menggambar grafik, dengan cepat, melalui scripting (biasanya JavaScript)
<caption>
Mendefinisikan sebuah caption tabel
<center>
Tidak didukung di HTML5. Gunakan CSS sebagai gantinya. Mendefinisikan teks berada ditengah
<cite>
Mendefinisikan judul karya
<code>
Mendefinisikan sebuah bab dari arahan komputer
<col>
Menentukan sifat kolom untuk setiap kolom dalam <colgroup> elemen
<colgroup>
Menentukan kelompok dari satu atau lebih kolom dalam sebuah tabel untuk memformat
<datalist>
✓
Menentukan daftar pilihan yang telah ditentukan untuk kontrol input
<dd>
Mendefinisikan deskripsi/nilai istilah dalam daftar deskripsi
<del>
Mendefinisikan teks yang telah dihapus dari dokumen
<details>
✓
Mendefinisikan rincian komplemen bahwa pengguna sanggup melihat atau menyembunyikan
<dfn>
Merupakan pola mendefinisikan istilah
<dialog>
✓
Mendefinisikan sebuah kotak obrolan atau jendela
<dir>
Tidak didukung di HTML5. Gunakan <ul> sebagai gantinya. Mendefinisikan daftar direktori
<div>
Mendefinisikan sebuah bab dalam sebuah dokumen
<dl>
Mendefinisikan daftar deskripsi
<dt>
Mendefinisikan istilah/nama dalam daftar deskripsi
<em>
Mendefinisikan menekankan teks
<embed>
✓
Mendefinisikan sebuah wadah untuk aplikasi eksternal (non-HTML)
<fieldset>
Grup terkait unsur-unsur dalam bentuk
<figcaption>
✓
Mendefinisikan sebuah caption untuk <figure> elemen
<figure>
✓
Menentukan konten mandiri
<font>
Tidak didukung di HTML5. Gunakan CSS sebagai gantinya. Mendefinisikan font, warna, dan ukuran untuk teks
<footer>
✓
Mendefinisikan footer untuk dokumen atau bagian
<form>
Mendefinisikan sebuah form HTML untuk input pengguna
<frame>
Tidak didukung di HTML5. Mendefinisikan sebuah jendela (frame) dalam sebuah frameset
<frameset>
Tidak didukung di HTML5. Mendefinisikan satu set frame
<h1 - h6>
Mendefinisikan judul HTML
<head>
Mendefinisikan gosip wacana dokumen
<header>
✓
Mendefinisikan sebuah header untuk dokumen atau bagian
<hr>
Mendefinisikan perubahan tematik dalam konten
<html>
Mendefinisikan root dari suatu dokumen HTML
<i>
Mendefinisikan teks miring
<iframe>
Mendefinisikan sebuah frame inline
<img>
Mendefinisikan gambar
<input>
Mendefinisikan kontrol input
<ins>
Mendefinisikan teks yang telah dimasukkan ke dalam dokumen
<kbd>
Mendefinisikan input keyboard
<keygen>
✓
Mendefinisikan sebuah bidang pasangan kunci Generator (untuk forms)
<label>
Mendefinisikan label untuk sebuah <input> elemen
<legend>
Mendefinisikan sebuah caption untuk <fieldset> elemen
<li>
Mendefinisikan sebuah daftar item
<link>
Mendefinisikan hubungan antara dokumen dan sumber daya eksternal (kebanyakan dipakai untuk link ke style sheet)
<main>
✓
Menentukan konten utama dari dokumen
<map>
Mendefinisikan peta gambar klien
<mark>
✓
Mendefinisikan ditandai/teks yang disorot
<menu>
Mendefinisikan daftar/menu perintah
<menuitem>
✓
Mendefinisikan item perintah/menu bahwa pengguna sanggup memanggil dari sajian popup
Mendefinisikan pengukuran skalar dalam kisaran dikenal (gauge)
<nav>
✓
Mendefinisikan navigasi link
<noframes>
Tidak didukung di HTML5. Mendefinisikan sebuah konten alternatif untuk pengguna yang tidak mendukung frame
<noscript>
Mendefinisikan sebuah konten alternatif untuk pengguna yang tidak mendukung script klien
<object>
Mendefinisikan sebuah objek tertanam
<ol>
Mendefinisikan sebuah daftar ordered
<optgroup>
Mendefinisikan sekelompok opsi terkait dalam daftar drop-down
<option>
Mendefinisikan pilihan dalam daftar drop-down
<output>
✓
Mendefinisikan hasil perhitungan
<p>
Mendefinisikan sebuah paragraf
<param>
Mendefinisikan sebuah parameter untuk objek
<pre>
Mendefinisikan teks terformat
<progress>
✓
Merupakan kemajuan tugas
<q>
Mendefinisikan sebuah kutipan singkat
<rp>
✓
Mendefinisikan apa yang harus ditampilkan di browser yang tidak mendukung klarifikasi ruby
<rt>
✓
Mendefinisikan sebuah penjelasan/pengucapan karakter (untuk tipografi Asia Timur)
<ruby>
✓
Mendefinisikan sebuah klarifikasi ruby (untuk tipografi Asia Timur)
<s>
Mendefinisikan teks yang tidak lagi benar
<samp>
Mendefinisikan pola output dari jadwal komputer
<script>
Mendefinisikan sebuah script klien
<section>
✓
Mendefinisikan sebuah bab dalam sebuah dokumen
<select>
Mendefinisikan sebuah daftar drop-down
<small>
Mendefinisikan teks kecil
<source>
✓
Mendefinisikan sumber beberapa media untuk elemen media (<video> dan <audio>)
<span>
Mendefinisikan sebuah bab dalam sebuah dokumen
<strike>
Tidak didukung di HTML5. Gunakan <del> atau <s> sebagai gantinya. Mendefinisikan teks dicoret
<strong>
Mendefinisikan teks penting
<style>
Mendefinisikan gosip style untuk dokumen
<sub>
Mendefinisikan teks subscript
<summary>
✓
Mendefinisikan sebuah judul terlihat untuk <details> elemen
<sup>
Mendefinisikan teks superscripted
<table>
Mendefinisikan tabel
<tbody>
Grup isi badan dalam sebuah tabel
<td>
Mendefinisikan sebuah sel dalam tabel
<textarea>
Mendefinisikan sebuah input control multiline (area teks)
<tfoot>
Grup isi footer dalam sebuah tabel
<th>
Mendefinisikan sebuah header cell dalam sebuah tabel
<thead>
Grup isi header dalam sebuah tabel
<time>
✓
Mendefinisikan tanggal/waktu
<title>
Mendefinisikan judul untuk dokumen
<tr>
Mendefinisikan baris dalam sebuah tabel
<track>
✓
Mendefinisikan trek teks untuk elemen media (<video> dan <audio>)
<tt>
Tidak didukung di HTML5. Gunakan CSS sebagai gantinya. Mendefinisikan teletype text
<u>
Mendefinisikan teks dengan garis bawah
<ul>
Mendefinisikan sebuah daftar unordered
<var>
Mendefinisikan variabel
<video>
Mendefinisikan sebuah video atau film
<wbr>
Mendefinisikan sebuah kemungkinan line-break
Catatan : Tanda ✓ (checklist) menunjukan bahwa itu yaitu arahan HTML5 terbaru
Semoga kumpulan arahan tag html lengkap dengan fungsinya sanggup Anda pelajari secara sedikit demi sedikit sehingga Anda akan gampang dalam memahami arahan html. Sehingga kita sanggup dengan gampang memahami arti dari setiap arahan html yang ada pada template blogger yang sedang kita gunakan. Dan berharap dengan mempelajari arahan html ini kita sanggup menciptakan halaman web yang sederhana dan sanggup berkembang secara terus-menerus. Sumber http://www.caramanual.com
Contoh Sederhana Penerapan Kode HTML - Setelah kemarin kita mempelajari mengenai pengertian html dan aneka macam macam instruksi html, sekarang saatnya kita coba untuk menerapkannya. Pada umumnya instruksi html sangat gampang dipakai dan dipahami oleh siapa saja asalkan ia mau belajar, tapi terkadang kita sebagai orang awam yang gres mengenal internet dan blog masih merasa galau bagaimana kita menerapkan kode-kode html untuk menciptakan atau menampilkan suatu objek dengan memakai instruksi html.
Kode-kode html sangatlah banyak dan disini aku akan menawarkan pola sederhana menerapkan kode-kode html yang sudah aku bagikan sebelumnya. Kode html sangatlah kompleks tida sanggup kita menyesuaikan sendiri dengan kemauan kita beda halnya menyerupai instruksi css yang sanggup kita gunakan sesuai dengan ke inginan kita, tapi perlu Anda ketahui bahwa script atau instruksi html dan css sangatlah berafiliasi bersahabat keduanya sanggup saling melengkapi satu sama lain.
Nah, dalam penerapan instruksi html ini sangatlah gampang kita pelajari tapi ingat Anda harus benar-benar berguru dan mencoba untuk mempraktekannya. Dari gambar di atas kita sanggup lihat bahwa kadang masih ada saja yang menerapkan instruksi html ini terbalik sehingga instruksi tersebut error dan tidak akan berfungsi padahal hanya persoalan sepele, yup dalam bahasa pemrogramman salah satu titik saja akan menjadikan error secara keseluruhan jadi perhatikanlah setiap instruksi yang Anda tulis.
Contoh bila kita ingin menulis abjad teks miring, tebal, dan bergaris bawah memakai instruksi html : <i>Tulisan ini miring</i> jadinya Tulisan ini miring <b>Tulisan ini tebal</b> jadinya Tulisan ini tebal <u>Tulisan ini bergaris bawah</u> jadinya Tulisan ini bergaris bawah <s>Tulisan ini dicoret</s> jadinya Tulisan ini dicoret
Pertanyaan Umum : Dari mana kita tahu instruksi html <i> <b> <u> <s> dan instruksi html lainnya ? Anda sanggup membaca artikel kumpulan instruksi tag html lengkap yang ada di blog ini.
Apa arti dari <i> <b> <u> <s> ? Anda sanggup membacanya kembali artikel mengenai kumpulan instruksi tag html yang ada di blog ini, tetapi bila ingin tahu instruksi di atas akan aku jelaskan disini : <i> atau sanggup disebut dengan italic yang berfungsi untuk menciptakan teks miring. <b> atau sanggup disebut dengan bold yang berfungsi untuk menciptakan teks tebal. <u> atau sanggup disebut dengan under line yang berfungsi untuk menciptakan teks bergaris bawah. <s> atau sanggup disebut dengan strike yang berfungsi untuk menciptakan teks dicoret.
Lalu apa bedanya dengan </i> </b> </u> </s> ? Tanda / atau garis miring atau disebut dengan (slash) merupaka instruksi atau tanda epilog pada setiap instruksi pembuka html, jadi bila Anda menulis <i> maka Anda harus menutupnya dengan instruksi </i> dan tanda slash harus berada di depannya, untuk lebih terang sanggup lihat juga pada gambar diatas.
Dimana aku sanggup mencoba menerapkan instruksi html ini ? Ada banyak situs yang sanggup Anda gunakan untuk menerapkan instruksi html, salah satunya pada blogger ketika Anda akan menulis artikel cobalah mengubah Compose menjadi HTML dan sebaliknya, tapi bila tidak mau ribet Anda sanggup mencobanya disini https://jsfiddle.net/kreasikan/j8wvfew6/3/
Nah, supaya dengan mempelajari cara penerapan instruksi html diatas Anda tidak salah dalam memakai tag html khususnya ketika Anda lupa menutup instruksi tag html sehingga script yang Anda buat tidak berjalan lancar, oleh sebab itu ketika Anda sedang melaksanakan coding atau sedang mencoba pemrogramman html atau lainnya perlu hati-hati dan ketelitian yang tanjam. Sumber http://www.caramanual.com
Apa Itu Tag Meta ? Inilah Pengertian dan Fungsinya - Blogger niscaya sudah tidak absurd lagi dengan meta tag ini, alasannya ialah kita sering menjumpainya pada template blog yang kita gunakan. Tapi, apakah kalian sudah tahu pengertian dari meta tag dan apa fungsi dari meta tag tersebut ? Nah, kali ini aku akan menjelaskan salah satu bab dari tag HTML yaitu tag meta.
Saya harap Anda telah mengetahui apa yang dimaksud dengan HTML alasannya ialah Tag Meta merupakan bab dari HTML, jadi untuk lebih memahaminya Anda harus tahu yang dimaksud dengan HTML tersebut. HTML tidak hanya mempunyai tag meta saja, masih banyak tag lainnya yang perlu kita ketahui oleh alasannya ialah itu Anda sanggup mengetahui kumpulan instruksi tag html dengan membaca konten dibawah ini.
Setelah paham dan mengerti apa itu html dan apa saja yang termasuk tag html, sekarang kita coba pelajari salah satu tag html yaitu tag meta yang sudah kita sering dengar di kalangan webmaster. Untuk mengetahui klarifikasi dan fungsi dari tag meta silahkan simak dibawah ini.
Apa Itu Tag Meta ?
Meta ialah salah satu bab dari Tag HTML yang berfungsi memperlihatkan warta metadata dari sebuah halaman web, elemen meta ini tidak akan tampil pada halaman tetapi akan terbaca oleh bot mesin telusur. Tag meta ini selalu ada didalam elemen <head> dan mempunyai nama atau nilai tertentu.
Apa Fungsi Tag Meta ?
Meta tag biasanya dipakai untuk memilih deskripsi halaman, kata kunci, penulis dokumen, dan metadata lainnya. Tag meta sanggup dibaca oleh aneka macam macam browser untuk memilih bagaimana suatu halaman tersebut di tampilkan pada mesin pencarian. Dengan tag meta kita juga sanggup menolak mesin pencarian untuk menampilkan suatu halaman atau dokumen yang ada pada web kita.
Bagaimana Contoh Tag Meta ?
Berikut ialah referensi meta tag sederhana yang sering kita jumpai pada aneka macam template web.
Contoh 3 : Mendefinisikan penulis dokumen dari sebuah halaman web.
<meta name='author' content='Kreasikan Group'/>
Contoh 4 : Mendefinisikan reload halaman dokumen setiap 60 detik.
<meta http-equiv='refresh' content='60'/>
Itulah beberapa klarifikasi mengenai attribute name yang ada pada tag meta, agar Anda sanggup lebih memahami apa yang dimaksud dengan tag meta dan sanggup mempelajarinya untuk keperluan pelengkap suatu blog atau halaman web pada umumnya.
Tag Meta Yang Dipahami Oleh Google - Meta tag yaitu cara terbaik bagi para webmaster untuk memperlihatkan isu pada mesin telusur. Sebelumnya saya juga pernah menjelaskan dengan rinci pengertian mengenai tag meta yang merupakan bab dari isyarat html. Untuk sanggup memahami lebih lanjut mengenai tag meta Anda sanggup membaca artikel sebelumnya dibawah ini.
Setelah paham dengan definisi dari tag meta kini kita coba pahami lebih dalam mengenai tag meta tersebut. Meta tag tidak akan tampil pada halaman web tetapi meta tag sanggup di baca oleh mesin telusur khususnya robots yang sudah di jadwal untuk merayapi setiap halam web, dan meta tag tersebut yang akan memperlihatkan isu kepada robots tersebut. Oleh alasannya yaitu itu penting sekali kita memahami tag meta ini, biar komunikasi dengan robots sanggup berjalan lancar dan sesuai dengan impian kita.
Google sebagai salah satu mesin pencarian terbesar sampai ketika ini akan kita jadikan sebagai contoh utama, beberapa tag meta yang dipahami google akan dengan gampang membantu kita dalam memperlihatkan isu mengenai halaman web atau blog kepada mesin telusur. Namun, bila Anda memasang beberapa tag meta yang tidak dipahami mesin telusur Google maka akan mengabaikan meta tag yang tidak dikenalinya.
Tag Meta Yang Dipahami Oleh Google
<meta name='description' content='Deskripsi dari halaman web.'/>
Tag ini berfungsi untuk memperlihatkan deskripsi singkat sebuah halaman web. Biasanya deskripsi dari tag ini muncul pada hasil penelusuran.
<title>Judul Halaman Web</title>
Secara teknis tag ini bukanlah termasuk dalam tag meta, namun biasanya tag ini dipakai bersama tag 'description', yang berfungsi untuk memperlihatkan judul laman pada browser yang Anda gunakan.
Tag ini mengontrol sikap perayapan dan pengindeksan sebuah halaman web pada mesin telusur. Tag meta robots berlaku untuk semua jenis mesin telusur, sedangkan googlebot hanya berlaku untuk mesin telusur Google saja. Nilai standarnya yaitu "index,follow" atau sama dengan "all" dan tidak perlu ditetapkan. Google memahami nilai dibawah ini (untuk memakai banyak nilai, pisahkan dengan koma) : - noindex : artinya mencegah laman untuk diindeks - nofollow : artinya mencegah Googlebot untuk mengikuti tautan pada laman tersebut - none : artinya setara dengan noindex, nofollow - nosnippet : artinya mencegah kutipan/cuplikan muncul dalam hasil penelusuran - noodp : artinya mencegah penggunaan deskripsi alternatif dari ODP/DMOZ - noarchive : mencegah Googlebot untuk menampilkan tautan yang tersimpan dalam cache untuk suatu laman - noimageindex : artinya mencegah gambar dari suatu laman muncul pada hasil penelusuran Google - unavailable_after:[date] : artinya Anda sanggup mengatur waktu untuk menghentikan perayapan dan pengindeksan suatu laman
Saat pengguna menelusuri situs Anda pada mesin penelusuran Google, mungkin situs Anda menampilkan kotak telusur khusus untuk situs Anda dan tautan langsung ke laman web Anda. Tag meta ini memberi tahu Google untuk tidak menampilkan kotak telusur dan tautan langsung ke situs web Anda.
<meta name='google' content='notranslate'/>
Saat Google mengetahui bahwa laman konten tidak dalam bahasa yang mungkin ingin dibaca oleh pengguna, Google sering memperlihatkan tautan terjemahan dalam hasil penelusuran. Secara umum, hal ini memungkinkan kita mempunyai konten yang unik dan sanggup menarik pengguna lebih banyak lagi. Namun, mungkin akan terjadi situasi ketika hal ini tidak diinginkan. Tag meta ini berfungsi untuk menginformasikan kepada Google kita tidak ingin memperlihatkan terjemahan untuk laman tersebut.
Anda sanggup memakai tag ini untuk memverifikasi kepemilikan situs pada Search Console. Pastikan bahwa tag meta ini mempunyai nilai atribut "name" dan "content" harus sama persis yang diberikan kepada Anda termasuk abjad besar dan abjad kecil pada nilai tersebut.
Tag meta ini mendefinisikan jenis konten dan kumpulan karakter laman. Pastikan bahwa Anda mengurung atau menutup nilai dari setiap atribut dengan tanda petik, bila tidak maka atribut charset sanggup ditafsirkan dengan tidak benar. Sebaiknya Anda menggunakan Unicode/UTF-8 bila memungkinkan.
Tag meta ini mengantarkan pengguna ke URL gres sehabis beberapa waktu tertentu, dan terkadang dipakai sebagai bentuk pengalihan sederhana. Namun, hal ini tidak didukung oleh semua jenis browser dan sanggup membingungkan pengguna.
Itulah beberapa tag meta yang dipahami oleh Google, tag meta tersebut bukanlah daftar langsung dari meta tag yang tersedia, Anda sanggup memakai meta tag lain selain yang ada pada daftar diatas bila memang itu penting untuk situs Anda. Ingat bahwa Google akan mengabaikan tag meta yang tidak dikenalinya. Sumber http://www.caramanual.com
Kumpulan Tag Conditional Blogger dan Fungsinya - Kode tag kondisional ini mempunyai fungsi untuk menampilkan dan menyembunyikan widget tertentu yang ada pada blogger. Misalnya, Anda ingin menampilkan widget popular post di homepage blog tetapi ketika berada di halaman postingan widget popular post tidak ditampilkan atau disembunyikan. Hal ini sanggup Anda lakukan dengan cara menambahkan isyarat tag conditional pada kepingan popular post atau widget lainnya.
Dalam dunia pemrogramman ada banyak jenis tag conditional, namun disini saya akan menjelaskan beberapa kumpulan tag conditional untuk template blogger isyarat tag kondisional ini sangat membantu untuk mengatur beberapa elemen yang nantinya akan ditampilkan atau disembunyikan, oleh lantaran itu bagi Anda yang ingin menciptakan template blog sendiri atau yang suka edit template blog wajib mengetahui fungsi dasar dari tag conditional blogger ini.
Fungsi Tag Conditional
Tag Kondisional atau Conditional Tag ialah tag yang dipakai untuk mengatur elemen-elemen tertentu yang berfungsi untuk menampilkan atau menyembunyikan elemen pada kondisi tertentu.
Cara Membaca Tag Conditional
Kode tag kondisional selalu diawali dengan tag <b:if> dan ditutup dengan tag </b:if>. Setiap isyarat tag <b:if> mempunyai atribut cond, dimana atribut cond ini mempunyai banyak sekali jenis nilai yang berfungsi untuk mengambarkan suatu kondisi. Kita ambil salah satu teladan tag conditional yang paling umum digunakan.
Dari teladan diatas kita lihat bahwa atribut cond mempunyai nilai data:blog.url == data:blog.homepageUrl yang mengambarkan kondisi yang diinginkan.
Kode data:blog.url adalah pernyataan untuk mewakili keadaan sebuah halaman URL, sedangkan kode data:blog.homepageUrl adalah perwakilan dari halaman homepage blog Anda. Kita ambil teladan kembali contohnya Anda mempunyai blog dengan alamat URL https://www.caramanual.com, maka kode data:blog.homepageUrl dapat diartikan sebagai https://www.caramanual.com.
Menampilkan Elemen Tertentu Menggunakan Tag Conditional
Kita ambil teladan dari isyarat diatas, contohnya saya ingin menampilkan sebuah objek hanya di halaman beranda atau homepage blog saja dan akan hilang atau tidak tampil pada halaman lainnya. Maka isyarat tag conditional yang dipakai ialah menyerupai dibawah ini.
Menyembunyikan Elemen Tertentu Menggunakan Tag Conditional
Kebalikan dari cara sebelumnya, contohnya saya ingin menghilangkan atau menyembunyikan sebuah objek pada halaman beranda atau homepage blog dan akan muncul atau tampil pada halaman lainnya. Maka isyarat tag conditional yang dipakai ialah menyerupai dibawah ini.
Perhatikan baik-baik kedua teladan diatas hanya mempunyai perbedaan antara == dan !=. Dimana arti dari == ialah sama dengan atau menyetujui kondisi. Sedangkan != ialah tidak sama dengan atau tidak menyetujui kondisi. Cukup gampang bukan, untuk menampilkan atau menyembunyikan suatu elemen pada blog Anda hanya perlu mengetahui kondisi tag dan memakai kedua pembanding diatas untuk mengatur keadaan atau kondisi.
Cara Menerapkan Tag Conditional
Ada dua cara penerapan isyarat tag conditional, yang pertama yaitu dengan menerapkannya secara eksklusif pada target atau objek tertentu, yang kedua yaitu dengan menerapkannya secara tidak eksklusif dengan memanfaatkan kemampuan CSS.
Penerapan Kondisi Secara Langsung
Penerapan tag conditional secara eksklusif ini sangat mudah, Anda cukup mengapit sebuah objek atau target dengan tag conditional, contohnya menyerupai dibawah ini.
Artinya: Jika keadaan halaman ketika ini sama dengan URL halaman homepage, maka OBJEK akan ditampilkan atau difungsikan.
Penerapan Kondisi Secara Tidak Langsung
Penerapan tag conditional secara tidak eksklusif sanggup dilakukan dengan cara mengapitkannya pada isyarat CSS selektor objek yang menjadi sasarannya. Untuk menghilangkan objek sasaran, kita gunakan deklarasi display:none pada kepingan CSS menyerupai dibawah ini.
Artinya: Seluruh elemen yang mempunyai ID obyek akan disembunyikan atau tidak akan ditampilkan apabila keadaan halaman ketika ini tidak sama dengan URL halaman homepage.
Perlu Anda Ketahui: - Dalam isyarat HTML untuk memanggil isyarat css selektor memakai atribut id atau class. - Dalam isyarat CSS id ditandai dengan tanda pagar atau (hastag) sedangkan class ditandai dengan titik (dot).
<b:if cond='data:blog.pageType == "item"'> KODE OBJEK </b:if>
Tag Conditional Halaman Arsip
Ciri khusus pada halaman arsip ialah halaman homepage yang diikuti oleh cabang URL tahun, bulan, dan tanggal, namun tidak hingga kepada nama berkas halaman item, ciri khusunya yaitu pada simpulan URL mempunyai cabang archive.html, contonya Seperti ini.
<b:if cond='data:blog.pageType == "archive"'> KODE OBJEK </b:if>
Tag Conditional Halaman Statis
Halaman statis ialah jenis halaman Istimewa dari blogger yang berakhir pada nama berkas dan tidak akan masuk dalam daftar arsip blog, contohnya menyerupai ini.
https://www.caramanual.com/p/about.html
Tag conditionalnya menyerupai ini:
<b:if cond='data:blog.pageType == "static_page"'> KODE OBJEK </b:if>
Tag Conditional Halaman Indeks
Halaman indeks ialah semua jenis halaman yang bukan halaman item.
<b:if cond='data:blog.pageType == "index"'> KODE OBJEK </b:if>
Tag Conditional Halaman Label
Halaman label ialah tipe halaman hasil sortir dari label item atau postingan, halaman ini diawali dengan cabang atau folder search/label/ kemudian diakhiri dengan nama label, contohnya menyerupai ini.
https://www.caramanual.com/search/label/Blogger
Tag conditionalnya menyerupai ini:
<b:if cond='data:blog.searchLabel'> KODE OBJEK </b:if>
Tag Conditional Halaman Label Tertentu
Sama saja dengan halaman label, hanya saja ini lebih spesifik pada nama label tertentu, contohnya menyerupai ini.
https://www.caramanual.com/search/label/Blogger
Tag conditionalnya menyerupai ini:
<b:if cond='data:blog.searchLabel == "Blogger"'> KODE OBJEK </b:if>
Tag Conditional Halaman Pencarian
Halaman pencarian ialah tipe halaman hasil dari pencarian atau penelusuran didalam blog Anda, halaman pencarian diawali dengan search/?q= dan diakhiri oleh kata kunci pencarian, contohnya menyerupai ini.
https://www.caramanual.com/search/?q=Blogger
Tag conditionalnya menyerupai ini:
<b:if cond='data:blog.searchQuery'> KODE OBJEK </b:if>
Tag Conditional Halaman Pencarian Tertentu
Sama saja dengan halaman pencarian, hanya saha ini lebih spesifik pada kata kunci pencarian tertentu, contohnya menyerupai ini.
https://www.caramanual.com/search/?q=Blogger
Tag conditionalnya menyerupai ini:
<b:if cond='data:blog.searchQuery == "Blogger"'> KODE OBJEK </b:if>
Tag Conditional Halaman Tertentu (Custom)
Anda sanggup membedakan halaman tertentu dengan halaman pada umumnya yang ada di blog Anda dengan memakai tag conditional.
Tag conditionalnya menyerupai ini:
<b:if cond='data:blog.url == "URL HALAMAN"'> KODE OBJEK </b:if>
Tag Conditional Halaman Kesalahan (Error Page)
Halaman kesalahan atau error page ialah halaman yang tidak ditemukan pada blog Anda, halaman ini ditandai dengan isyarat error 404 not found. Halaman ini disebabkan oleh penulisan URL yang salah atau bisa disebabkan lantaran item atau postingan yang Anda buat sudah dihapus.
Tag conditionalnya menyerupai ini:
<b:if cond='data:blog.pageType == "error_page"'> KODE OBJEK </b:if>
Itulah kumpulan tag conditional blogger dan fungsinya, isyarat tag kondisional diatas sanggup Anda susuaikan dengan kebutuhan Anda, kalau mempunyai pertanyaan atau masukkan silahkan menghubungi kami melalui halaman kontak atau dengan menunjukkan komentar dibawah ini. Sumber http://www.caramanual.com
Meta Tag SEO Friendly Valid HTML5 2019 untuk Blog - Banyak dari para blogger yang belum mengetahui perihal meta tag SEO, terutama bagi para pemula yang gres terjun ke dunia blogger yang ingin mempelajari perihal SEO dan ingin blognya cepat di indeks di mesin penelusuran.
Meta Tag SEO ialah barisan isyarat yang berfungsi untuk mengoptimasi suatu blog dan artikel kita biar mempunyai identitas dan deskripsi yang jelas, yang bertujuan biar blog atau artikel kita gampang ditelusuri oleh mesin penelusuran atau robot penelusuran ibarat google, Yandex, bing, maupun mesin penelusuran lainnya, sehingga blog atau artikel kita sanggup bersaing di peringkat teratas mesin penelusuran.
Meta Tag SEO Friendly ini berfungsi biar data-data yang di dalam artikel kita lebih gampang dikenali dan biar blog lebih cepat terindeks di dalam mesin penelusuran, contohnya biar cepat terindeks pada mesin pencari google, bing webmaster, yandex dan tentunya menciptakan blog kita menjadi 100% SEO.
Meta tag ini juga aku menerapkannya di blog saya, meta tag di bawah ini aku susun sedemikian rupa biar terlihat lebih rapi, gampang dipahami dan gampang untuk di edit, yang di dalamnya terdapat meta deskripsi, meta tag color, meta keyword, meta title, author, facebook, twitter dan lainnya.
Adanya pembatalan Google Plus ini pula menciptakan sedikit perubahan pada meta tag seo ini. Untuk lebih jelasnya bagaimana cara memasangnya silahkan perhatikan tutorial cara memasang meta tag ini.
Cara Memasang Meta Tag SEO Friendly Valid HTML5 2019 untuk Blogger
1. Buka blog anda > Tema > Pilih Edit HTML
2. Cari isyarat dan letakkan isyarat ini sempurna berada di bawah <head> atau <head>
Isi dengan isyarat validasi Google di Search Console
KODE-VALIDASI-BING-WEBMASTER
Diisi dengan isyarat validasi Bing Webmaster
NAMA-ADMIN
Isi dengan nama penulis
id dan Indonesia
Isi dengan isyarat negara lokasi dimana blog teman dipublikasikan atau diposting
PROFIL-FACEBOOK
Isi dengan link profil Facebook sobat*
FAN-PAGE-FACEBOOK
Isi dengan link Fans Page Facebook*
KODE-APLIKASI-FACEBOOK
Isi dengan isyarat Aplikasi Facebook*
KODE-ADMIN-FACEBOOK
Isi dengan isyarat profil Facebook*
USER-TWITTER
Isi dengan nama user Twitter anda*
* = Dapat dihapus atau dibiarkan saja bila tidak digunakan
Keterangan Meta Tag Theme Color:
Nilai
Keterangan
#00000
Diisi dengan warna template atau warna harapan anda (ini berefek pada penggunaan smartphone, akan merubah warna tampilan System Ui anda
Jika ada yang belum paham kegunaan dari DNS-Prefetch pada Meta Tag SEO yaitu berfungsi untuk memaksimalkan loading blog biar dalam memuat tautan blog tidak mengganggu loading blog kita.
Demikian tutorial dari analisyuki.com perihal cara memasang Meta Tag SEO Friendly Valid HTML5 2019 untuk Blogger untuk blog serta kegunaannya, semoga sanggup bermanfaat bagi kita semua, Selamat Blogging, Terimakasih.
Mempercepat Loading Blog dan Iklan dengan Lazy Load AdSense - beberapa ahad yang kemudian aku di kagetkan dengan kecepatan blog usang aku di PageSpeed Insights Google menurun menjadi 60%. Hal ini tentu saja menciptakan aku khawatir, alasannya yakni kecepatan dan skor adsense merupakan salah satu penentu banyaknya pengunjung dalam blog kita.
Bagi sebagian besar kalangan Google adsense merupakan sumber penghasilan bagi seorang blogger, Google adsense merupakan salah satu alasan untuk tetap terus menjadi publisher blogger untuk memperlihatkan konten yang menarik dan gampang dipahami bagi para pembaca.
Namun disisi lain Iklan dalam Google Adsense menciptakan kecepatan memuat data blog kita menjadi lebih lambat. Saat suatu blog atau website di pasang iklan adsense maka proses loadingnya blog kita akan menjadi lebih usang dan memakan banyak waktu.
Dikarenakan proses memuat konten adsense menyerupai gambar, teks atau animasi sanggup berukuran kurang lebih sekitar 120KB hanya untuk 1 iklan saja, bayang jikalau kita memasangnya 5 konten iklan atau lebih maka akan menciptakan skor PageSpeed Insights kita menjadi lebih turun dan memakan waktu lebih usang dalam memuat satu konten artikel.
kebanyakan pengunjung suatu blog lebih menentukan mengunjungi suatu situ yang kecepatan memuat datanya tidak memakan waktu lama, terutama aku sendiri aku lebih menentukan mencari dam melihat-lihat suatu blog yang memuat datanya lebih cepat dan tidak banyak memakan banyak data internet. Untuk itu aku akan membagikan tutorial mempercepat loading blog supaya sanggup menaikkan skor pagespeed insights dengan lazy load adsense.
Tutorial Cara Mempercepat Loading Blog dengan Lazy Load Adsense
1. Buka Blogger anda > Pilih hidangan Tema > Pilih Edit HTML kemudian tambahkan instruksi ini sempurna berada di atas </body> atau <!--</body>--></body>
kemudian cek PageSpeed Insights Google anda maka skoprnya akan lebih tinggi contohnya menyerupai blog usang aku ini:
Jika sudah, lihatlah alhasil di blog anda, tampilan artikel terlebih dahulu akan muncul kemudian dilanjutkan dengan konten adsense. Untuk imbas pendapatan adsense juga aku belum tau, alasannya yakni duduk kasus ini gres aku alami dan pertama kali aku mencobanya maka kita lihat saja menyerupai apa alhasil nanti.
Untuk Blog AMP sendiri aku juga kurang tau apakah harus diterapkan atau tidak alasannya yakni blog AMP sudah memiliki instruksi tersendiri.
Demikianlah Tutorial Cara Mempercepat Loading Blog dan Iklan dengan Lazy Load AdSense, jikalau ada sesuatu yang ingin di tanyakan dan kurang dipahami silahkan ke kolom komentar dibawah, terimakasih.
Cara Membuat Tombol Demo dan Download Sederhana di Postingan Blog - Membuat tombol demo dan d0wnl0ad pada suatu blog sangatlah gampang dan sederhana. Sama Halnya menciptakan link ulr pada postingan blog biasa, namun dibentuk lebih menarik dan terlihat lebih keren dengan menunjukkan kotak berwarna tanpa memerlukan dampak elemen namun tetap terlihat indah, dan terang dilihat.
Membuat tombol demo pada postingan blog tidak hanya sekedar tombol demo saja, tetapi sanggup juga di ubah secara bebas contohnya saja mengubahnya dengan tombol Lihat, Kunjung, Contoh Beli dan lain-lain. Pembuatan tombol ini juga sangat menguntungkan bagi para pembaca untuk melihat lebih terang hasil apa yang akan di tampilkan. Jika ada yang belum paham, cara kerja tombol blog ini yaitu sama halnya link biasa yang diubah menjadi teks atau yang menggantikan tombol link dan diarahkan ke link tujuan jikalau anda menekan tombol tersebut namun tetap ringan sebab memakai isyarat CSS.
Menurut aku satu atau kedua tombol ini sangatlah penting bagi seorang blogger, terutama bagi pembuat tutorial blogger atau penjual template blog, niscaya menyertakan yang namanya tombol demo atau review. Dengan adanya Tombol link Demo/Result ini juga sanggup menciptakan blog kita jadi terlihat lebih rapi dan jelas. Penggunaan tombol yang terlihat mencolok ini juga memudahkan para pembaca untuk tidak salah memilih.
Tutorial Cara Praktis Memasang Tombol Demo dan Download pada Postingan Blog
1. Pertama buka Blog anda > Pilih sajian Tema > lalu pilih Edit HTML
2. Kemudian letakkan isyarat berikut sebelum ]]></b:skin> atau </style>
Demikianlah Tutorial Cara Membuat Tombol Demo dan Download di Postingan Blog dari analisyuki.com, jikalau ada sesuatu yang kurang terang dan tidak dimengerti silahkan berkomentar dibawah ini, Terimakasih.
Cara menciptakan Efek Salju di Blogger Versi Terbaru - Banyak cara yang sanggup kita lakukan untuk mempercantik blog kita supaya terlihat lebih menarik, salah satu misalnya yaitu memasang imbas salju di dalam blog kita.
Efek salju berjatuhan pada blog pernah saya gunakan dikala jaman saya sekolah dulu, bukan hanya sekedar mempercantik blog, tapi juga menarik minat pembaca supaya tetap berlama-lama berada di blog saya. Entah mengapa imbas salju di dunia blogger dikala ini jadi begitu tidak populer, hanya beberapa orang saja yang menggunakannya. Mungkin banyak orang yang menyampaikan bahwa memasang imbas salju dikatakan sebagai pemula atau ada juga yang bilang menghalangi pandang pembaca.
Namun pada kesempatan ini saya akan menciptakan imbas salju versi terbaru pada blog, terlihat indah, tidak menghalangi pandangan pembaca dan tidak terlalu memberatkan proses memuat blog. Efek salju ini pun saya gunakan beberapa blog pribadi saya untuk mempercantik tampilan blog saya, bahkan kadang saya gunakan pada dikala tahun baru, supaya suasana animo salju sanggup dinikmati di dalam blog.
Untuk tampilan salju di dalam blog ini berbeda dengan versi terbaru yang terlihat kecil dan menumpuk di bawah blog. Di dalam versi terbaru ini efeknya lebih halus, bola salju yang berukuran tidak tidak terlalu berasa dan lebih yummy dipandang mata. Bagi anda yang ingin memasang imbas salju di blog ini, anda sanggup mengikuti langkah-langkah di bawah ini supaya sanggup di terapkan di dalam blog anda yaitu dengan memakai HTML/JavaSript.
Cara Membuat Efek Salju Bertaburan di Blogger
1. Masuk kedalam blog anda > pilih Tema > kemudian pilih Edit HTML
2. Kemudian letakkan arahan di bawah ini sempurna berada di atas arahan </body>
Sebenarnya ada banyak cara untuk mempercantik tampilan blog kita misalnya menyerupai memasang imbas bintang, imbas daun berjatuhan atau mengganti template blog yang lebih hidup. Namun untuk kali ini cukup sekian saja dari saya, bila ada yang ingin ditambahkan sanggup pribadi ke kolom komentar, Terimakasih.
Cara Agar Artikel Blog Tidak Dapat di Copy Paste - Di jaman kini ini artikel original yang kita miliki sering sekali di copas oleh orang yang tidak bertanggung jawab hanya untuk kepentingan blognya sendiri. Artikel yang sudah susah payah kita buat berjam-jam dengan begitu mudahnya di copas dan diletakkan di dalam blognya.
Kita sebagai blogger sudah susah payah menciptakan konten yang berkualitas supaya di sukai banyak pembaca jadi begitu kesal alasannya yaitu maraknya blogger malas yang kerjanya hanya copy paste artikel orang lain, yang menciptakan lebih kesal lagi yaitu artikel yang kita tulis selama bertahun-tahun semua semuanya disalin hanya dalam waktu beberapa menit saja, bahkan tanpa memasukkan sumber darimana artikel itu didapatkan.
Tidak sedikit yang mempermasalahkan hal tersebut, walaupun sudah di laporkan dan peringatkan tapi tetap saja tidak ada jerah-jerahnya. Seharusnya kita sebagai blogger yang baik harus sanggup menghargai karya orang lain dan setidaknya jikalau ingin menciptakan artikel kita sanggup menulisnya ulang dengan kata-kata anda sendiri, namun ada juga sebagian orang yang tidak mempermasalahkan hal tersebut.
Sebenarnya ada banyak cara yang sanggup kita lakukan supaya artikel di dalam blog kita tidak sanggup disalin oleh orang lain contohnya kita sanggup melaporkannya kedalam DCMA. Namun pada kesempatan kali ini kita akan membuatnya dengan memakai instruksi HTML. Jika ada yang bertanya, bagaimana dengan blogger tutorial yang menerapkan kode-kode di dalamnya?. Nah oleh alasannya yaitu itu saya akan membagikan instruksi di bawah ini, walaupun artikelnya tidak sanggup di salin tapi kode, tag-tag, black quotes sanggup disalin oleh para pembaca, teladan sanggup dilihat pada blog saya ini. Tanpa berlama-lama lagi berikut kita akan bahas tutorial instruksi anti copas ini.
Tutorial Agar Artikel Blog Tidak Dapat di Salin dan Klik Kanan
1. Masuk ke dalam Blog anda > Pilih Tema > lalu pilih Edit HTML
2. letakkan instruksi ini sempurna berada di atas ]]></b:skin>
Sebenarnya banyak anda juga sanggup memakai instruksi css atau j4vascript lain, namun saya sarankan memakai instruksi di atas saja, alasannya yaitu sesuai dengan yang saya alami, instruksi tersebut cocok untuk semua jenis template blog dan kondusif untuk dipakai tanpa mengganggu pengunjung blog, khususnya pada blog tutorial.
Cukup sekian dari saya tutorial supaya blog kita tidak sanggup di copy paste, semoga artikel ini sanggup sangat bermanfaat bagi kita semua, Terimakasih.
Cara Praktis Membuat Tabel Responsive di Blogger - Membuat postingan yang responsive merupakan salah satu cara untuk meningkatkan pengunjung di blog. Apalagi dalam menciptakan tabel di dalam postingan blog tentunya harus responsive baik pada tampilan desktop atau pada tampilan mobile.
Oleh sebab itu pada kesempatan kali ini aku akan membagikan cara menciptakan tabel keterangan pada postingan blog. Tabel ini juga aku gunakan dan aku terapkan sendiri di dalam blog saya, sebab selain tampilannya yang keren, responsive juga cocok untuk tampilan smartphone (mobile).
Tentunya hal yang baik jikalau kita menerapkan tabel pada postingan blog, sebab blog kita tidak terlihat menyerupai koran, lebih menarik, sanggup menarik minat pengunjung untuk berlama-lama dalam blog kita, juga memudahkan para pembaca dalam memahami isi postingan kita.
Sebenarnya beberapa ahad yang kemudian aku pernah membagikan cara menciptakan tabel keterangan. Namun sebab ada beberapa alasan, maka aku menciptakan tabel responsive terbaru ini, sebab berdasarkan aku terlihat lebih baik dan tentunya cocok untuk banyak sekali macam template pada blog.
Cara Membuat Tabel Responsive di Blogger
1. Petama masuk ke Blog anda > Pilih Tema > kemudian pilih Edit HTML
2. Kemudian letakkan arahan ini sempurna berada di atas arahan ]]></b:skin> atau </style>
Sampai disini cukup sekian saja dari saya, biar dengan tutorial cara memasang tabel pada postingan blog ini sanggup bermanfaat bagi kita semua, jikalau ada sesuatu yang tidak dipahami sanggup pribadi menuju kolom komentar, Terimakasih. Sumber http://www.analisyuki.com/
Cara Membuat Contact Form Responsive di Blogger - Saya akan membagikan tutorial cara menciptakan contact form / contact us pada blog dengan mudah, serta dengan tampilan dampak yang keren dan lezat di pandang.
Sebenarnya aku sudah pernah membahas ihwal cara menciptakan kontak pada blog, namun pada kesempatan kali ini aku akan membagikan Contact Form yang lebih responsive, lebih keren dan cocok untuk banyak sekali macam template pada blog. Sebelumnya aku jelaskan terlebih dahulu contact form ini mempunyai beberapa nama yang cukup terkenal menyerupai contact us, hubungi kami, kontak namun bekerjsama mempunyai pengertian yang sama.
Halaman kontak atau contact form pada blog sangatlah penting, selain sebagai kelengkapan dalam blog contact form juga berfungsi untuk mempermudah pengunjung untuk menghubungi admin atau pemilik blog secara pribadi atau bertanya suatu hal pribadi atau melaksanakan kerjasama.
Cara menciptakan Contct Form pada blog ini sangatlah mudah, kita tidak perlu memakai jasa website pihak ketiga untuk menggunakannya, cukup dengan menyalin arahan di bawah ini kita pribadi sanggup menggunakannya dengan mudah dan tentunya dengan tampilan yang lebih keren. Untuk itu aku akan membagikan 2 Versi Contact Form, anda tinggal menentukan mana yang anda suka dan ingin digunakan.
Cara Membuat Contact Form Responsive di Blogger
1. Masuk ke Blog anda > pilih sajian Halaman > kemudian buat Halaman Baru
2. Selanjutnya pilih sajian HTML > kemudian letakkan arahan ini di dalamnya
Kode di atas pribadi sanggup anda gunakan dan sanggup bekerja dengan baik ketika mengirim pesan, Untuk Versi 2 nya anda sanggup mengunakan arahan di bawah ini.
Versi 2
<div class="analisyuki-icon"> <i class="material-icons md-48">contact_mail</i> </div> <br /> Jika ada sesuatu yang ingin ditanyakan secara pribadi, anda sanggup mengirimkan email melalui form di bawah ini. Admin akan pribadi merespon pesan yang anda kirim, terimkasih.<style scoped="scoped"> .analisyuki-icon{text-align:center;} @font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5ewrjPiaoEww8AihgqWRJAo.woff) format('woff'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5bbKic1PW3nceB3q24YFOMg.ttf) format('truetype'); } .material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: inherit; display: inline-block; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; vertical-align:middle; /* Support for all WebKit browsers. */ -webkit-font-smoothing: antialiased; /* Support for Safari and Chrome. */ text-rendering: optimizeLegibility; /* Support for Firefox. */ -moz-osx-font-smoothing: grayscale; /* Support for IE. */ font-feature-settings: 'liga'; } .md-48{font-size: 100px; color: #1E8BC3; padding: 10px; background: #dde3ff; border-radius: 100px;} .analisyuki-code{float:none;position:relative;margin-bottom:45px;margin-right:10px}.analisyuki-code input,.analisyuki-code textarea{font-size:15px;padding:15px 0;display:block;width:100%;border:none;border-bottom:1px solid #ddd}.analisyuki-code input:focus,.analisyuki-code textarea:focus{outline:none}.analisyuki-code label{color:#999;font-size:15px;font-weight:400;position:absolute;pointer-events:none;left:0;top:10px;transition:.2s ease all}.analisyuki-code input:focus label,.analisyuki-code input:valid label,.analisyuki-code textarea:focus label,.analisyuki-code textarea:valid label{top:-20px;font-size:14px;color:#f14062}.bar{position:relative;display:block;width:100%}.bar:before,.bar:after{content:'';height:2px;width:0;bottom:1px;position:absolute;background:#f14062;transition:1.2s cubic-bezier(1, 0.12, 0.25, 1) all}.bar:before{left:50%}.bar:after{right:50%}.analisyuki-code input:focus .bar:before,.analisyuki-code input:focus .bar:after,.analisyuki-code textarea:focus .bar:before,.analisyuki-code textarea:focus .bar:after{width:50%}.highlight{position:absolute;height:50%;width:100px;top:25%;left:0;pointer-events:none;opacity:.5}.analisyuki-code input:focus .highlight,.analisyuki-code textarea:focus .highlight{animation:inputHighlighter .3s ease}.analisyuki-code input:focus label,.analisyuki-code input:valid label,.analisyuki-code textarea:focus label,.analisyuki-code textarea:valid label{top:-20px;font-size:13px;color:#f14062} input#ContactForm1_contact-form-email-message{height:150px} input#ContactForm1_contact-form-submit{width:100%;color:#fff!important;background:#000000;padding:15px 25px;border-radius:4px;border:none;outline:none;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);cursor:pointer;transition:all .4s ease-in-out;text-transform:uppercase;float:left;margin-top:15px} input#ContactForm1_contact-form-submit:hover{box-shadow:0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)} #ContactForm1_contact-form-error-message{float:right;background:#D32F2F;color:#fff;font-size:13px;font-weight:700;border-radius:3px}#ContactForm1_contact-form-success-message{float:right;background:#4CAF50;color:#fff;font-size:13px;font-weight:700;border-radius:3px} </style> <br /> <form name="contact-form"> <div class="analisyuki-code"> <input class="validate" id="ContactForm1_contact-form-name" name="name" required="" type="text" value="" /> <span class="highlight"></span> <span class="bar"></span> <label><i class="material-icons"> account_circle </i> Name</label> </div> <div class="analisyuki-code"> <input class="validate" id="ContactForm1_contact-form-email" name="email" required="" type="email" value="" /> <span class="highlight"></span> <span class="bar"></span> <label><i class="material-icons"> email </i> Email</label> </div> <div class="analisyuki-code"> <textarea class="validate" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" required="" rows="5"></textarea> <span class="highlight"></span> <span class="bar"></span> <label><i class="material-icons"> mode_comment </i> Message</label> </div> <link crossorigin="anonymous" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" rel="stylesheet"></link> <input id="ContactForm1_contact-form-submit" type="button" value="Send" /> <br /> <div id="ContactForm1_contact-form-error-message"> </div> <div id="ContactForm1_contact-form-success-message"> </div> </form> <script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/j4vascript"></script> <script type="text/j4vascript"> //<![CDATA[ if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '6154920600666252113';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogIDx3d6154920600666252113','//analisyuki.com/','6154920600666252113'); _WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': '<span style="padding:5px 10px">Sending...</span>', 'contactFormMessageSentMsg': '<span style="padding:5px 10px">Your message has been sent.</span>', 'contactFormMessageNotSentMsg': '<span style="padding:5px 10px">Message could not be sent. Please try again later.</span>', 'contactFormInvalidEmailMsg': '<span style="padding:5px 10px">A valid email address is required.</span>', 'contactFormEmptyMessageMsg': '<span style="padding:5px 10px">Message field cannot be empty.</span>', 'title': 'Contact Form', 'blogId': '6154920600666252113', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull')); //]]> </script>
Untuk tampilan Versi 2 ganti semua arahan yang di tandai 6154920600666252113 dengan ID Blog anda dan analisyuki.com dengan Blog Anda, Jika sudah silahkan Publikasikan.
Bagaimana berdasarkan anda? cukup kere kan dampak dan tampilannya. Sebelum aku akhiri dan bagi yang belum tau BlogID anda, kau sanggup melihatnya sempurna berada di URL pada sajian blog anda.
