Tampilkan postingan dengan label kotak navigasi menu blog. Tampilkan semua postingan
Tampilkan postingan dengan label kotak navigasi menu blog. Tampilkan semua postingan
Apa itu CSS?

Mengapa ia terlihat semakin penting? Karena ketika saya belajar tiga bahasa web ini, yakni HTML/XML, CSS dan Javascript, saya melhat yang paling banyak terlibat dalam urusan desain adalah CSS. 

Oh ya perlu di ingatkan lagi, HTML bukan bahasa pemrograman ia hanya bahasa markup untuk membangun sebuah halaman website.
css 3
Kalau bahas CSS biasanya kita mendapatkan penjelasan begini:
  • CSS adalah singkatan dari 'Cascading Style Sheets'
  • CSS menjelaskan bagaimana elemen HTML akan ditampilkan di layar, kertas, atau di media lain. CSS membentuk HTML bagaimana cantiknya ia seperti yang kita lihat di layar monitor apapun. Dengan CSS kita melihat hitam, putih, merah, jingga dan warna warni tampilan HTML di layar monitor. Dengan CSS kita melihat bulatan, lingkaran, persegi, animasi hingga berbagai jenis tampilan font.
  • CSS menghemat banyak pekerjaan. Itu dapat mengontrol tata letak beberapa halaman web sekaligus
  • Stylesheet eksternal disimpan dalam file CSS
Walaupun HTML adalah inti dalam membangun web namun tanpa CSS, HTML hanyalah suatu yang 'telanjang' dan tanpa CSS HTML seperti seorang manusia yang tidak mengenakan pakaian. Namun tidak hanya sampai disana, dalam perkembangannya CSS melampaui hal hal yang kita sebutkan di atas. Dalam beberapa kasus ia bahkan menggantikan beberapa fungsi Javascript dalam menentukan 'prilaku' HTML di halaman web.

Bagaimana ya saya harus menjelaskannya dengan sederhana? Begini:

Di dunia web ada bahasa mark up, ya dia adalah HTML! Ia hanya tool mark up artinya bukan bahasa programming tulen. Namun, dengannya kita bisa membangun sebuah halaman website. Hanya dengan HTML? Yang sedianya hanya bahasa mark up dan bukan bahasa pemrograman tulen? Ya! 

Namun dua bahasa pemrograman front end yakni yang kita kenal sebagai CSS dan Javascript telah melengkapinya. Tanpa kedua bahasa ini maka kita hanya akan melihat halaman web itu sama semuanya, sama  dan monoton. Seperti tampilan awal dunia web ketika di bangun pada zaman dahulu kala (maksud saya di awal HTML ditemukan dan diaplikasikan ke dunia web).

Jika tadi kita menyinggung CSS ibarat pakaian, dan Javascript itu ibarat perilaku. Maka CSS itu bajunya si HTML dan Javascript itu ibarat perilaku dan kepribadiannya. Lupakan Javascript, kita sedang membahas CSS.

Dengan CSS kita melihat halaman web yang berbeda beda dalam segala hal. Beda warnanya, beda navigasinya, beda penampakan bodynya. Dengan pengaturan CSS template di buat sehingga kita mengenali bedanya template viomagz dengan template hasil desain editblogtema. Dan berton ton stok template tampak tidak sama. Itulah hasil pekerjaan CSS dalam membentuk HTML. 

Tentu saja javascript berperan namun secara kasat mata, secara visual, atau penampakan lahiriah orang akan mudah melihat warna warni, bentuk, dan lingkaran. Itu semua di lakukan oleh CSS.

Di dunia modern teknik dan rekayasa desain menggunakan CSS menjadi semakin berkembang hingga CSS memasukan versi ketiga, belum lagi terhitung projek projek dan framework, sebut saja CSS Compass, less dan sass, yang dapat bekerja pada platform web tertentu dengan sangat baik.

Apa yang dapat dilakukan CSS terhadap halaman blog?

a. CSS vs Javascript

Pada templatenya? Banyak! Lihat menu navigasi halaman blog editblogtema ini ia hanya trik CSS, tanpa javascript. Kalian dapat melihat tampilannya yang responsif berbeda beda pada setiap ukuran layar? Di buka pada tampilan layar desktop ia adalah bar horisontal, namun ketika di buka pada halaman seluler, ia menjadi hamburger menu dengan animasi yang hidup dan intuitif. Salut buat Adelina Sofyan yang telah merancangnya semalaman. 

CSS dalam beberapa hal dapat bekerja setara dengan Javascript karena ia dapat memanipulasi karakter dan perilaku web, ketika itu kita dapat mengabaikan Javascript.

b. Contoh murni CSS tanpa Javascript:

Dan CSS itu ringan kalau tidak bisa dikatakan super ringan, perhatikan bagaimana sebuah hamburger menu begitu hidup saat di klik! Silahkan klik hamburger menu (garis bersusun tiga) dan lihat reaksinya.

See the Pen CSS Hamburger Menu by Sufyan Yaan (@sufyan-yaan) on CodePen.

Murni CSS! Tentu saja tadinya (awal mengenal HTML) saya menyangka membuat hamburger menu yang terasa begitu intuitif harus melibatkan javascript, ternyata CSS murni dapat melakukannya.

c. contoh dengan CSS dan Javascript:

Alasannya pada saat pertama di w3school tempat pavorite saya belajar daring secara otodidak membuat menu seperti di atas adalah dengan menggunakan javascript, perhatikan contoh berikut:

See the Pen animated hamburger menu with css dan JS by Sufyan Yaan (@sufyan-yaan) on CodePen.

Hasilnya sama saja, bukan? Contoh pertama kode CSSnya panjang karena di tulis untuk menghasilkan reaksi berupa animasi buka dan tutup. Pada contoh kedua kita menggunakan Javascript sehingga kode CSSnya terlihat pendek sekali. Perintah yang diberikan oleh Javascript terhadap HTML adalah:

function myFunction(x) { x.classList.toggle("change"); }


Kesimpulannya:

Dengan belajar CSS kalian akan mengerti bagaimana HTML bekerja, dan akan meberikan pengertian apa beda peranannya dengan bahasa front end lainya yaitu Javascript. Dan dengan CSS kalian akan dapat membuat sebuah template menjadi lebih indah, lebih intuitif namun tetap ringan.

Namun lebih dari itu dengan CSS kalian akan mendapatkan pengatahuan yang lebih luas tentang seluk beluk dunia web dan membuka cakrawala untuk pengkodean web dan terutama dalam mengembangkan skill web desain.

Walaupun Javascript tetap sangat penting namun CSS makin kesininya menjadi semakin penting.


Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini! Share:

SHARE YA:

menu navigasi blog editblogtema melalui layar hape mobile
Menu style editblogtema melalui layar hape/mobile
Trik ini dapat sobat terapkan pada hampir semua tipe (baik model lama maupun model baru) template bawaan blogspot jika sobat ingin merombaknya atau mendesain ulang tampilannya sehingga menjadi tampak premium. Lihat gambar dibawah pada saat halaman blog dibuka melalui PC destop/laptop:
  1. Gaya pertama: Standar, tinggal pakai saja seperti yang dipakai oleh pembuatnya: editblogtema.
  2. Gaya kedua: Berwarna, ganti atau tambahkan kode warna: #1E90FF
  3. Gaya ketiga: Gradasi, ganti atau tambahkan kode warna gradasi: #0F466E;
    background:-webkit-linear-gradient(right,#0F466E 0%,#5093C475%);
Lihat gambar saja:
menu navigasi ala editblogtema dalam tiga style warna
Gambar menu navigasi editblogtema dalam 3 style
Terlebih dahulu saya promosikan fiturnya:
  1. Responsive dan mobile friendly, user friendly, simple UX
  2. Ringan dan fast loading
  3. Dapat diterapkan pada template lama (klasik) blogger hingga jenis template terbaru seperti Contempo, Emporio cs.
  4. Menggunakan elemen HTML dasar yang mudah diterapkan.
  5. Menu ini bekerja sempurna pada layar mobile atau layar hape yang lebih kecil. Perhatikan tampilan menu navigasi saat dibuka melalui ponsel seluler:
tampilan menu navigasi editblogtema saat dibuka melalui ponsel seluler
Tampilan menu navigasi dilihat dari layar mobile (hape)
Lihat demo videonya saat pembuatan masih tahap percobaan:
Saya berniat membuat pemasangan paket navigasi ini menjadi mudah dan portable dan dapat dipasang dengan mudah oleh setiap blogger melalui pengaturan blogger untuk kedepannya. Tetapi juga saya sedang melakukan beberapa percobaan pembuatan menu navigasi baru yang lebih baik yang tentunya dapat diterapkan lintas platform blog.

Melihat demo diatas sobat dapat membayangkan: Template diatas adalah template bawaan blogspot model sederhana (simple) yang tentu saja telah saya modifikasi struktur HTMLnya agar menjadi responsive terlebih dahulu, namun walaupun misalnya sobat tidak melakukan apa apa menu navigasi ini tidak akan meninggalkan eror saat diterapkan ke template asli (default atau bawaan) blogspot.

Hasilnya responsive, mobile friendly dan fast loading, bahkan dapat diterapkan hapir kesemua jenis template bawaan blogspot dan dapat dilakukan oleh pemula sekalipun.

Baiklah kita langsung saja kepada cara pembuatannya.

1. Tambahkan CSS

Masuk kepengaturan atau dasbor blogspot:
  • Pilih tema atau theme
  • Pilih edit HTML pada halaman editor HTML yang telah dibuka cari kode </head> dan copy-pastekan seluruh kode dibawah ini tepat diatasnya:
<style>
body {margin:0;font-family:Arial}
.topnav {
position: fixed;
z-index: 99;
width: 100%;
overflow: hidden;
background-color: #00BFFF;
border: solid;
color:#00BFFF;
}
.topnav a {
float: left;
display: block;
color: red; display: block;
color: white;
text-align: center;
padding: 16px 18px;
text-decoration: none;
font-size: 19px;
}
.active {
background-color:transparent;
}

.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 20px;
outline: 10px;
border-radius:30px;
border:none;
color: black;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: relative;
background-color: transparent;

box-shadow: rgb(135, 206, 250);
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left; 80%;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color:rgb(135, 206, 250);
color: black;
}
.dropdown-content a:hover {
background-color: rgb(135, 206, 250);
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
@media screen and (max-width: 800px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 800px) {
.topnav.responsive {position: fixed;}
.topnav.responsive .icon {
position: fixed;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float:none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
body {
font-family: Arial;
}

* {
box-sizing: border-box;
}

.openBtn {
background: #fff;
border: solid;
border-color:#00BFFF;
border-radius:100px;
padding: 10px 15px;
font-size: 20px;
cursor: pointer;
position: fixed;
z-index: 150;
top: 8px;
left:75%;
}
.openBtn:hover {
background: #FFB6C1;
}
.overlay {
height: 100px;
width: 100%;
display: none;
position: fixed;
z-index: 100;
top: 0;
left: 10;

background-color: rgb(43, 191, 254);
}

.overlay-content {
position: relative;
top: 5%;
width: 60%;
text-align: center;
margin-top: 10px;
margin: auto;
}

.overlay .closebtn {
position: absolute;
top: 0px;
right: 1%;
font-size: 60px;
cursor: pointer;
color: white;
z-index: 110;
}

.overlay .closebtn:hover {
color: #FFB6C1;
}

.overlay input[type=text] {
padding: 15px;
font-size: 17px;
border: solid;
border-radius:30px;
float: left;
width: 110%;
background: #fff;
}
.overlay input[type=text]:hover {
background: #fff;
}
.overlay button {
float: left;
width: 10%;
padding: 15px;
background: #fff;
font-size: 17px;
border: none;
cursor: pointer;
}
.overlay button:hover {
background: #fff;
}

</style>
<link crossorigin='anonymous' href='https://use.fontawesome.com/releases/v5.8.1/css/all.css' integrity='sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf' rel='stylesheet'/>


Save template. Perhatikan Kode yang saya sorot warna kuning background-color: #00BFFF;? Itulah kunci memberi warna menu navigasi ini.

2. Tambahkan HTML

Sama seperti langkah pertama

Masuk kepengaturan atau dasbor blogspot:
  • Pilih tema atau theme
  • Pilih edit HTML pada halaman editor HTML yang telah dibuka cari kode </head> dan copy-pastekan seluruh kode dibawah ini tepat dibawahnya:
<div class='topnav' id='myTopnav'>
<a class='active' href='/'><small><h1>Nama blog sobat</h1></small></a>
<a href='#'>Blog</a>
<a href='#'>Privacy</a>
<a href='#'>Formulir Kontak</a>
<a href='#'>Perihal</a>

<a class='icon' href='javascript:void(0);' onclick='myFunction()'>
<i class='fa fa-bars'/>
</a>
</div>

<div class='overlay' id='myOverlay'>
<span class='closebtn' onclick='closeSearch()' title='Close Overlay'>&#215;</span>
<div class='overlay-content'>
<form action='/search' id='searchthis' method='get' style='display:inline;'><input id='search-box' name='q' placeholder='cari...' size='25' type='text'/>
</form>
</div>
</div>
<button class='openBtn' onclick='openSearch()'><i class='fa fa-search'/></button>

Save template

3. Tambahkan JavaScript

Masuk kepengaturan atau dasbor blogspot:
  • Pilih tema atau theme
  • Pilih edit HTML pada halaman editor HTML yang telah dibuka cari kode </body> dan copy-pastekan seluruh kode dibawah ini tepat diatasnya:
     <script type='text/javascript'>
window.setTimeout(function() {
document.body.className = document.body.className.replace(&#39;loading&#39;, &#39;&#39;);
}, 10);

function myFunction() {
var x = document.getElementById(&quot;myTopnav&quot;);
if (x.className === &quot;topnav&quot;) {
x.className += &quot; responsive&quot;;
} else {
x.className = &quot;topnav&quot;;
}
}

function openSearch() {
document.getElementById(&quot;myOverlay&quot;).style.display = &quot;block&quot;;
}

function closeSearch() {
document.getElementById(&quot;myOverlay&quot;).style.display = &quot;none&quot;;
}
</script>

Save template. Selesai. Dan Lihat 2 Demo:
DEMO
Diterapkan ke template model lama
template sederhana editblogtema
Template default editblogtema
Gambar di atas adalah template simple atau sederhana versi default model lama yang telah saya modifikasi dan ternyata jadi sangat bagus penampilannya setelah diberi menu navigasi editblogtema. 
DEMO2
Diterapkan kepada template model baru support v.3 (contempo)
tema emporio setelah di lengkapi dengan menu navigasi editblogtema
Template emporio nampak beda setelah dilengkapi dengan navigasi editblogtema
Bagaimana, keren bukan? Jelas dong template apapun jadi cool setelah dipasangi dengan menu navigasi yang satu ini. Itu emporio saya tidak perlu merobah apa apa tampilannya pada desktop tampak grid namun ketika konten dibuka akan menampilkan halaman utama yang penuh...

www.editblogtema.net

SHARE YA: