Membuat Palette Kode Warna Flat UI

Bagi para blogger tentunya sudah tidak asing lagi dengan kode warna HTML, karena sebagian besar pembentuk design blogger adalah kode warna. Ini pula yang menjadi ciri khas tampilan dari web atau blog sesuai pemiliknya. Untuk melihat kode warna ini kita bisa menggunakan inspect element html maupun source code pada browser yang kita gunakan. 

Seiring berkembangnya wedesign saat ini kini telah hadir Flat UI Color yang menawarkan kontras tampilan warna yang lebih berani dan elegan. Dan untuk update artikel kali ini saya akan berbagi cara membuat kode warna flat ui agar lebih mudah kita gunakan saat edit template blogger maupun kostumisasi widget blogger.

Untuk lebih jelasnya bisa lihat pada menu blog ini atau demo dibawah ini :

DEMO

Langkah langkah pembuatan button kode warna Flat UI :

1. Membuat Susunan CSS Button

.button_wrap {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-align-content: center;
  align-content: center;
margin-bottom:20px;
}
.button {
  text-transform: none;
  cursor: pointer;
  font-size: 12px;
  line-height: 2.4em;
  flex: 100 100 8%;
  -webkit-flex: 100 100 8%;
}

Untuk menambahkan button warna yang lain silakan kunjungi Flat UI Color Picker yang lebih lengkap, kemudian copy kode dan nama warna masing masing dan buatlah struktur CSS seperti dibawah ini :

.button_turquoise {
  border: 5px solid #1abc9c;
  background: #1abc9c;
  color: #fff;
  padding: 1px;
}

dan seterusnya ....dan seterusnya

Kemudian tambahkan lagi CSS seperti ini:

.hasil-kode {border:1px solid #777;
  padding-top: 15px;
  font-size:24px;
  color: #999;
  width: 100%;
  background: #ececec;
}

@media (max-width: 800px) {
  .button_wrap {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-align-content: center;
    align-content: center;
  }
  .button {
    font-size: 4px;
  }
  .hasil-kode {
    width: 100%;
  }
}

@media (max-width: 360px) {
  .button_wrap {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-align-content: center;
    align-content: center;
  }
  .button {
    font-size: 3px;
  }

@media (max-width: 320px) {
  .button_wrap {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-align-content: center;
    align-content: center;
  }
  .button {
    font-size: 3px;
  }
  .hasil-kode {
    width: 100%;
  }
}

2. Membuat Struktur HTML

<center class="button_wrap">
<a class="button button_turquoise" onClick="colorToTurquoise()">Turquoise</a> dan seterusnya...dan seterusnya  sesuai elemen button warna yang di buat pada CSS diatas
<div class="virlyz-header">
FLAT UI COLOR</div>
<div class="hasil-kode" id="hasil-kode">
<div class="colorName" id="colorName">
Silakan klik button warna diatas,</div>
<div class="colorText" id="colorText">
Kemudian copy kode warna yang dihasilkan sesuai yang anda pilih..!!!</div>
</div>
</center>

3. Kemudian Membuat Javascript sesuai kode warna yang akan ditampilkan saat button di klik

<script type='text/javascript'>
function colorToTurquoise() {
 document.getElementById("hasil-kode").style.backgroundColor = "#1abc9c";
 var ColorName = document.getElementById("colorName");
 ColorName.innerHTML = "Turquoise";
 ColorName.style.color = "white";
 var ColorText = document.getElementById("colorText");
 ColorText.style.color = "white";
 ColorText.innerHTML = "#1abc9c";
}

Dan seterusnya ...dan seterusnya sesuai element yang di buat pada css diatas
</script>

Text berwarna biru adalah element untuk kode warna yang dibuat, jadi sesuaikan kode dan nama warnanya

Cara Optimalkan CSS Delivery Blogger

Cara Optimalkan CSS Delivery Blogger - Banyak faktor yang mempengaruhi kecepatan loading blog yang utamannya berasal dari struktur modifikasi design blogger itu sendiri. Dalam hal ini saya akan membahas tentang optimasi design blogger terkait pengiriman css di blog agar tampil lebih cepat dan ringan. Semua browser yang kita pakai akan memblokir lebih dulu semua CSS eksternal yang ada untuk kemudian ditampilkan secara penuh. Dan artinya akan membutuhkan waktu lebih lama untuk memuat data dari CSS ektenal tersebut yang membuat loading blog terasa berat. Baca cara Mempercepat blog untuk seo friendly

Langkah langkah mengoptimalkan CSS delivery menurut google insight rules :

1. Metode Inline CSS Ekternal

Dalam metode inline ini hanya diperbolehkan untuk css yang berukuran kecil kemudian kita gabungkan menjadi satu dalam skin template blog. Contoh formatnya seperti dibawah ini :

<!DOCTYPE html>
<HTML>
<head>
<link type='text/css' rel='stylesheet' href='http:// css eksternal.css'/>
<b:skin> isi css......</b:skin>
</head>
<body>
</body>
</HTML>

Lalu kita akan membuat css eksternal tadi menjadi inline CSS dengan copy url diatas kemudian paste ke new tab browser, maka akan muncul sederetan isi dari CSS eksternal tersebut. Sebagai contoh isi CSS nya seperti ini :

.element{
 float:right;
 background:#fff;
 font-size: 1.2em;
 text-decoration:none;
 }

Untuk inline cssnya akan menjadi seperti ini :

<!DOCTYPE html>
<HTML>
<head>
<b:skin>
.element{
 float:right;
 background:#fff;
 font-size: 1.2em;
 text-decoration:none;
 }
</b:skin>
</head>
<body>
</body>
</HTML>

2. Menghindari Inline CSS Attribute Pada HTML Element

Ini sering terjadi pada saat menulis draft mode compose dipostingan sebelum kita publikasikan, mulai dari mengubah warna font, text align dan sebagainya.
Contoh bentuk inline css attributenya akan tampak seperti ini :

<span style="color: #444444;"> TULISAN</span>
<div style="text-align:center"> TULISAN </div>

Tidak menutup kemungkinan inline css attribute ini berada pada HTML template, biasanya pada <div style="clear:both"/> untuk mengatasinya ganti kode tersebut menjadi <div class='clear'/> dan menambahkan css .clear{clear:both;}

3. Optimalkan CSS Ekternal Blogger

Gunakan inspect element untuk edit html untuk melihat kode css ekternal ini, dan biasanya untuk default blogger setidaknya ada 2 css ekternal yaitu :

<link type='text/css' rel='stylesheet' href='https://www.blogger.com/static/v1/widgets/.....-widget_css_bundle.css'/>
<link type='text/css' rel='stylesheet' href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=.....'/>

Cara "optimize css delivery blogger" pada kedua kode css ekternal ini tidak cukup hanya dengan menghapusnya, karena masih akan muncul saat kita check di Page speed insight dan GTMetrix. Untuk mengatasinya silakan :

Ganti kode <head> menjadi &lt;head&gt; dan </head> menjadi &lt;!--<head/>--&gt;

Cara seperti ini hanya berlaku pada template selain bawaan blogger alias template pihak ketiga, dan mungkin akan mengubah tampilan blog anda karena element yang digunakan tidak sama dengan template yang anda gunakan.

Demikian sedikit tutorial blogger terkait optimalkan css delivery agar menjadi blog cantik dan cepat sesuai standar SEO.