Pengaturan Saving SVG Illustrator untuk WEB design

Seperti yang sudah kita ketahui SVG adalah gambar vector yang berbasis XML. SVG sudah sangat banyak di gunakan untuk keperluan web design karena vector tidak merubah kualitas resolusi dari gambar yang di buat.cara untuk membuatnya kalian bisa gunakan software dari Adobe Illustrator karena aplikasi ini paling banyak dan mudah untuk di gunakan. berikut tutorial singkat cara mengatur gambar untuk menyimpan dalam format SVG untuk keperluan WEB Design. Saya menggunakan Adobe Illustrator CS6 untuk Windows-32bit.
Contoh gambar yang saya gunakan dengan 1 warna dan 1 elemen path. contohnya seperti ini

cara penyimpanan (Save/Save As) dalam format SVG. karena jika memilih export tidak ada pilihan untuk format SVG
pilih File > Save As

kemudian pilih

1. SVG Profile: SVG 1.1
2. Type: SVG
3. Subsetting: Only Glypsh Used

Untuk pengaturan lainnya kalian bisa gunakan pengaturan yang biasa saya gunakan. karena menurut saya ini yang terbaik.
sebelumnya klik dulu More Options

1. Image Location: Link
2. CSS Properties: Style Elements (Mempermudah Pengaturan CSS dengan tag CLASS)
3. Decimal Place: 1 (Tergantung lengkungan pada gambar dan beberapa jumlah elemen lainnya)

Finishing klik OK atau ambil code SVG nya untuk penyimpanan langsung pada xHTML

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="150px" height="150px" viewBox="0 0 150 150" style="enable-background:new 0 0 150 150;" xml:space="preserve">
<style type="text/css">
<![CDATA[
    .st0{fill:#F44336;}
]]>
</style>
<g>
        <path class="st0" d="M91.4,133.1c-5.2,1.9-10.5,2.8-16.4,2.8c-7,0-13.4-1.4-19.5-4c-6.1-2.6-11.3-6.3-15.9-11.3
            c-4.5-4.7-8-10.3-10.8-16.6c-2.1-5.4-3.5-11-3.7-16.9c0-1.2,0-2.3,0-3.3c0-1.2,0-2.3,0-3.3c0.2-6.1,1.6-11.7,3.7-16.9
            c2.6-6.3,6.1-12,10.8-16.6c4.5-4.7,9.8-8.4,15.9-11.3c6.1-2.8,12.7-4,19.5-4c7,0,13.4,1.4,19.5,4c6.1,2.8,11.2,6.3,15.9,11.3
            c2.3,2.3,4.2,4.9,6.1,7.7l-5.6,6.3c-8.7,9.8-17.3,19.7-26,29.3c13.8-28.6-10.8-41-27.2-23.9c-3,3-5.2,6.8-6.1,10.8
            c-0.9,3.5-1.4,8.4-0.7,12.2c1.9,9.4,8.9,16.6,17.8,19.2c2.3,0.5,4,0.9,6.3,0.9c2.6,0,5.2-0.5,7.5-1.2c6.6-2.3,29.1-28.4,47.8-51.1
            C103.1-7.3,8.2,13.6,8.2,84.4c0,13.8,4.2,26.7,11.5,37.5c-0.2,1.6-0.5,3.5-0.5,5.2c-9.1-11.7-14.5-26.5-14.5-42.7
            c0-38.7,31.4-70.3,70.3-70.3c38.2,0,69.1,29.5,70.3,67.5C134.3,94.2,105.7,128,91.4,133.1z"/>
</g>
</svg>

Referensi Lengkap : Export SVG

Mengganti Logo Header menggunakan image SVG

Seperti pada artikel menggunakan svg untuk penggabungan icon mengatakan tidak merekomendasikan mengganti logo header SVG dengan cara itu. Kenapa ? svg berbasis xml, setahu saya google index images lebih menyarankan url dalam tag <img src/> beserta atribut alt (ralat kalau admin salah mendefinisikan ^_^). meskipun saat ini Google sudah punya perangkat lunak yang berjalan untuk menangani SVG sebagai bitmap (konversi ke JPG) terlebih google pernah mengatakan "We index SVG content whether it is in a standalone file or embedded directly in HTML link". namun untuk embed SVG mentah langsung pada HTML saya masih meragukannya apa benar google bisa mengkonversi langsung dengan gambar utuh, tujuan pada artikel ini adalah untuk menghindari kasus-kasus seperti itu, dari pada ragu mending cari aman saja.
terus bagaimana menggunakan SVG untuk Logo header agar tetap terindex pada SEO images google ?

Image publishing guidelines.
Optimalisasi Gambar.

Biasanya ketika kita memasang SVG langsung pada HTML akan menggunakan baris code kurang lebih seperti ini.

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
   x="0px" y="0px" viewBox="0 0 612 792" xml:space="preserve">
<g id="XMLID_1_">
  <g>
    <circle fill="red" stroke="black" stroke-width="2" stroke-miterlimit="10" cx="50" cy="50" r="40"/>
  </g>
</g>
</svg>

kalau hanya untuk menggunakan SVG pada icon-icon tertentu tidak jadi masalah. namun untuk logo header saya tidak menyarankan memasang langsung code tersebut.
alangkah baiknya Logo header tetap dalam bentuk <img src/> saja.
Rekomendasi penggunaan logo header dengan images.

cara 1 : format gambar bisa berupa svg/png/jpg/gif ataupun webp(Chrome, Opera, Android) ataupun JPEG XR (IE).

<img src="../images/logo.svg/png/jpg/gif" alt="logo Header Blog">

<img src="data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath ........  %3e%3c/path%3e%3c/g%3e%3c/svg%3e" alt="logo Header Blog">

Saya tidak menyarankan penggunaan background image CSS untuk mengganti logo header karena tidak semua Browser support.
kecuali kalian menggunakan bantuan javascript. apapun itu tetap tidak baik hal penting seperti logo header jika tetap memaksaan menggunakan background images. seperti yang saya bilang kita cari aman saja ^_*

.logo { 
  background-image: url("logo/image.svg");
  background-repeat: no-repeat;
  background-color:transparent;
}

/*
atau
===================================================
*/

.logo {
   background-image:url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath ........  %3e%3c/path%3e%3c/g%3e%3c/svg%3e");
   background-repeat:no-repeat;
   background-color:transparent;
}

Cara 2 : SVG Fallback - Guide
SVG Fallback Rekomendasi
ambil url logo dengan format PNG dan SVG dan letakan dimana logo anda akan di tampilkan

<img src="../images/logo.svg"
 data-fallback="../images/logo.png"
       alt="SVG Support Icon"/>

Simpan Javascript pada HTML biasanya di letakan di atas </body>
<script type="text/javscript">

function svgasimg() {
  return document.implementation.hasFeature(
    "http://www.w3.org/TR/SVG11/feature#Image", "1.1");
}

if (!svgasimg()){
  var e = document.getElementsByTagName("img");
  if (!e.length){
    e = document.getElementsByTagName("IMG");
  }
  for (var i=0, n=e.length; i<n; i++){
    var img = e[i],
        src = img.getAttribute("src");
    if (src.match(/svgz?$/)) {
      /* URL ends in svg or svgz */
      img.setAttribute("src", 
             img.getAttribute("data-fallback"));
    }
  }    
}

</script>

Hasil Code di atas seperti ini

Example

Kesimpulannya tautan url img lebih cepat terkonversi google dibanding jenis xml langsung pada html.

Segala kekurangan tentang tutorial mengganti logo header menggunakan gambar SVG bisa kalian pertimbangkan mana yang lebih baik. mungkin di antara pembaca ada yang lebih tahu dengan SEO images google.
di sini saya hanya membantu sedikit bagi yang awam cara menggunakan SVG pada logo header saja.

Membuat Layout Sidebar Sama Tinggi Dengan Konten

masih dalam konteks CSS Flexbox. hampir sama dengan layout footer tetap di bawah dengan Flexbox. namun kali kali ini saya hususkan hanya pada sidebar dengan 2 kolom atau 3 kolom. Perhatikan code-code CSS agar lebih jelas apa dan bagaimana fungsinya.

ada beberapa cara agar sidebar sama tinggi dengan main konten atau sebaliknya yaitu menggunakan CSS ataupun dengan javascript atau jQuery, sebelum adanya CSS flexbox pilahan lain adalah menggunakan table namun bukan itu yang akan kita bahas, kita akan tetap memanfaatkan layout Flexbox.
cara pertama kita bahas dengan CSS Flexbox pada dasarnya hal ini paling mudah untuk kita pahami dan terapkan. hal yang pertama adalah membuat HTML nya dulu, tanpa itu CSS seribu kata pun gak akan nampak hasilnya..

kita ambil contoh HTML nya seperti ini

<div class="container"> <!-- FlexBox -->
    <div class="konten">Konten</div>
    <div class="sidebar-kiri">Sidebar Kiri</div>
    <div class="sidebar-kanan">Sidebar Kanan</div>
</div> 

Buat CSS pada container menggunakan display:flex

.container{
  display: flex; /* atau inline-flex */
}


/*

Atau Lengkap Dengan Dukungan Semua Browser.
   
*/


.container{
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex; /* atau inline-flex */
}

CSS di atas sudah mewakili bahwa item yang berada pada wadah container sudah dalam posisi flexible - standarnya item-item tersebut memiliki arah horizontal / row. hasilnya seperti ini, dan memiliki sama tinggi.


namun untuk masing-masing kolom jangan pernah memberi nilai masukan height. misal height:100% kecuali min-height.
Perlu di ingat penggunaan display:flex berbeda dengan display:inline | block yang bergantung berapa nilai masukan seperti width: <integer>%/<integer>px/<integer>vw/<integer>....
untuk tambahan CSS lain kalian bisa diskusikan pada komentar.
solusi lain yaitu dengan memanfaatkan jQuery. karena hampir semua Web design/Blog menyimpan Script jQuery kenapa tidak kita manfaatkan saja untuk mengatur sama tinggi.
Code scriptnya kurang lebih seperti berikut. (perkecil jika kalian menguasai script Variabl atau if else) script ini untuk 3 kolom. kalau 2 kolom script akan lebih pendek.

// Object Kolom
var    c = $('.konten'); // class box .konten
var    s = $('.sidebar-kiri'); // class box .sidebar-kiri
var    k = $('.sidebar-kanan'); // class box .sidebar-kanan
// Dapatkan nilai tinggi dengan outerHeight(); / Height();
var getKontenHeight = c.outerHeight();
var getKiriHeight = s.outerHeight();
var getKananHeight = k.outerHeight();
// Cek jika konten lebih tinggi dari sidebar
if ( getKontenHeight > getKiriHeight ) {
    s.css('min-height', getKontenHeight);
}else{
if(getKananHeight > getKiriHeight){
    s.css('min-height', getKananHeight);}
}
if ( getKontenHeight > getKananHeight) {
    k.css('min-height', getKontenHeight);
}else{
if(getKiriHeight > getKananHeight){
    k.css('min-height', getKiriHeight);}
}
// cek  jika sidebar lebih tinggi dari konten
if ( getKiriHeight > getKontenHeight) {
    c.css('min-height', getKiriHeight);
}else{
if(getKananHeight > getKontenHeight){
    c.css('min-height', getKananHeight);}
}

untuk 2 kolom kurang lebih seperti ini

// Object Kolom
var c = $('.konten'); // class box .konten
var s = $('.sidebar-kiri'); // class box .sidebar-kiri
// Dapatkan nilai tinggi dengan outerHeight(); / Height();
var getKontenHeight = c.outerHeight();
var getKiriHeight = s.outerHeight();
// Cek jika konten lebih tinggi dari sidebar
if ( getKontenHeight > getKiriHeight ) {
    s.css('min-height', getKontenHeight);
}
// cek  jika sidebar lebih tinggi dari konten
if ( getKiriHeight > getKontenHeight) {
    c.css('min-height', getKiriHeight);
}

Lihat Demo

Sesuatu yang tidak di inginkan terjadi. inilah kekurangan menggunakan jquary. kasus tersebut terjadi pada perangkat mobile/tablet/phone ketika memutar layar dari Potrait ke landscape ataupun sebaliknya. namun hal tersebut akan normal jika browser di refresh. mungkin ada beberapa faktor yang kurang pada script atau memang script tersebut akan berjalan dalam kondisi awal atau pada saat kita membuka pertama kali.

Cara Penerapan Layout kolom Header,Konten,Sidebar,Footer responsive menggunakan Pure CSS Flexbox lihat demonya.

Full Example

Membuat footer tetap dibawah jika isi Konten pendek atau kosong

Pada beberapa kasus layout halaman dimana posisi footer akan mengikuti tinggi layout bagian atas . jika konten terisi penuh dengan tinggi layar hal seperti itu tidak akan kita sadari. Namun pada beberapa media mobile akan terlihat perbedaanya. bagi pemula yang baru saja belajar tata letak web rasanya hal ini akan terabaikan. untung saja css memiliki tata letak dengan Flexbox,meski agak sulit untuk memahaminya tapi kalau kita tahu masing-masing fungsi element pada flex akan lebih mudah mereapkannya. saat ini flexbox hampir semua browser terbaru mendukung(support). (abaikan jika masih menggunakan browser lama ) browser support flexbox - www.w3.org/TR/css-flexbox-1/

Penggunaan float masih sering di gunakan. dengan CSS Flexbox float bisa saja di abaikan karena flex bisa memposisikan item,mengatur lebar/panjang item dengan ketentuan bahwa item tersebut dalam wadah yang sama.
Kali ini saya hanya akan memberikan tutorial cara membuat footer tetap di bawah (abaikan penggunaan absolute/fixed posisi) karena itu berbeda penggunaan.

Sebelum memulai pernahkan kalian mengalami seperti ini ? inilah yang akan di bahas bagaimana menyelesaikannya.


Anggap saja kalian memiliki HTML seperti ini.

<div class="wrapper"> <!-- bungkus semua item dengan flex-->
<header class="header-wrapper">
  <h1>Header</h1>
</header>
<div class="main-wrapper"> <!-- bungkus area flex-grow -->
<div class="main"> <!-- flex baru jika mempunyai sidebar-->
  <article>
    Artikel
  </article>
  <aside>
    sidebar
  </aside>
</div><!-- end main-->
</div> <!-- end main-wrapper-->

<footer class="footer-wrapper">

</footer>
</div><!-- end wrapper-->

CSS flex sebagai wadah semua item seperti ini.

.wrapper{
    background:#ddd;
    box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    margin: 0 auto;
    min-height: 100vh; /* menyesuaikan dengan tinggi layar*/
    height:100%;
}
.main-wrapper{
  width:100%;
  overflow:hidden;
  -webkit-flex-grow: 1;
  flex-grow: 1;
}

CSS area flexbox baru untuk class .main

.main {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:flex;
}
article{
  -webkit-flex-grow: 1;
  flex-grow: 1;
  width:70%;
  background:#9b9b9b;
}
aside{
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  width:30%;
  background:#1b96bc;
}

CSS di atas saya gunakan agar Sidebar sama tinggi dengan area content atau sebaliknya, ketahui lebih tentang flex-direction,flex-shrink,flex-grow - (flex Guide).
maka hasil dari CSS akan seperti gambar di bawah. namun masih ada area kosong. itu terjadi ketika pembungkus pada class .main-wrapper dan .main tidak mempunyai ketinggian (height) yang sama atau sama sekali tidak mempunyai ketinggian atau height:auto;


untuk mengatasinya masukan masing-masing height dengan nilai 100%.

.main-wrapper{
  height: 100%;
}
.main {
  height: 100%;
}

maka hasilnya seluruh area pada content selain header/footer akan memyesuaikan tinggi dengan layar yang terlihat jika content tersebut benar-benar kosong(blank).


Seluruh CSS Flexbox seperti berikut :

.wrapper {
    box-sizing:border-box;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -webkit-flex-direction:column;
    -ms-flex-direction:column;
    flex-direction:column;
    margin:0 auto;
    min-height:100vh;
    background:#ddd;
    position:relative;
    overflow:hidden;
    height:100%;
}
.main-wrapper {
    width:100%;
    height:100%;
    overflow:hidden;
    flex-grow:1;
}
.main {
    height:100%;
    margin:0 auto;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
}
article {
    -webkit-flex-grow:1;
    flex-grow:1;
    width:70%;
    background:#9b9b9b;
}
aside {
    -webkit-flex-shrink:0;
    flex-shrink:0;
    width:30%;
    background:#1b96bc;
}
.header-wrapper {
    background:#363c44;
    width:100%;
}
.footer-wrapper {
    background:#363c44;
    margin-top:auto;
}

Bonus !!! ^_^
Pengaturan Layout responsive pada lebar tertentu. saya berikan contoh pada layar berukuran 768px.
atur CSS pada tag .main dengan menambahkan flex-direction jika layar menyentuh lebar @media (max-width: 768px) screen ubah .main menjadi column vertical.

/* responsive */
@media (max-width:768px) {
    .main {
        height:100%;
        -webkit-box-orient:vertical;
        -webkit-box-direction:normal;
        -webkit-flex-direction:column;
        -ms-flex-direction:column;
        flex-direction:column;
    }
    article,aside {
        width:100%;
    }
}

Contoh lengkap langsung lihat demo dan source code

View Demo
or
Download

Menggunakan SVG untuk penggabungan icon pada icomoon

SVG (Scalable Vector Graphics) adalah format gambar yang berbasis XML (eXtensible Markup Language) sebagai dasar untuk membentuk gambar vektor. - id.wikipedia.org/wiki/Scalable_Vector_Graphics.
jelas di sini svg menggunakan format vector (berbasis xml) dimana penggunaan vector sangat baik untuk pengolahan gambar yang detail sekalipun gambar tersebut di perbesar/diperkecil hasil kualitas akan sama, berbeda dengan jpeg/png/gif dimana resolusi gambar jika di perbesar akan blur kecuali di perkecil.

Saya ambil contoh xml svg dan penerapan pada HTML menggunakan icomoon.io

Code SVG pada icomoon.io nampak seperti ini

HTML (SVG <use>)
Gunakan code ini untuk menampilkan icon dan xlink:href="#icon-github" harus spesifik dengan ID symbol

<svg class="icon icon-github">
    <use xlink:href="#icon-github"></use>
</svg>

Symbol Definition(s)

<symbol id="icon-github" viewBox="0 0 32 32">
   <title>github</title>
       <path d="M16 0.395c-8.836 0-16 7.163-16 16 0 7.069 4.585 13.067 10.942 15.182 0.8 0.148 1.094-0.347 1.094-0.77 0-0.381-0.015-1.642-0.022-2.979-4.452 0.968-5.391-1.888-5.391-1.888-0.728-1.849-1.776-2.341-1.776-2.341-1.452-0.993 0.11-0.973 0.11-0.973 1.606 0.113 2.452 1.649 2.452 1.649 1.427 2.446 3.743 1.739 4.656 1.33 0.143-1.034 0.558-1.74 1.016-2.14-3.554-0.404-7.29-1.777-7.29-7.907 0-1.747 0.625-3.174 1.649-4.295-0.166-0.403-0.714-2.030 0.155-4.234 0 0 1.344-0.43 4.401 1.64 1.276-0.355 2.645-0.532 4.005-0.539 1.359 0.006 2.729 0.184 4.008 0.539 3.054-2.070 4.395-1.64 4.395-1.64 0.871 2.204 0.323 3.831 0.157 4.234 1.026 1.12 1.647 2.548 1.647 4.295 0 6.145-3.743 7.498-7.306 7.895 0.574 0.497 1.085 1.47 1.085 2.963 0 2.141-0.019 3.864-0.019 4.391 0 0.426 0.288 0.925 1.099 0.768 6.354-2.118 10.933-8.113 10.933-15.18 0-8.837-7.164-16-16-16z">
       </path>
</symbol>

viewBox="0 0 32 32" menentukan ukuran pada icon

bagaimana penerapan pada HTML? contohnya akan nampak seperti ini:

<!DOCTYPE html>
<html lang="en">

<head>
  .................
</head>
<body>
<div class="social">
    <svg class="icon icon-github">
        <use xlink:href="#icon-github"></use> <!-- callback svg icon with <use xlink:href="#icon-github"></use> -->
    </svg>
</div>

<!-- simpan svg symbol di atas </body> -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" class="hidden">
<symbol id="icon-github" viewBox="0 0 32 32">
   <title>github</title>
       <path d="M16 0.395c-8.836 0-16 7.163-16 16 0 7.069 4.585 13.067 10.942 15.182 0.8 0.148 1.094-0.347 1.094-0.77 0-0.381-0.015-1.642-0.022-2.979-4.452 0.968-5.391-1.888-5.391-1.888-0.728-1.849-1.776-2.341-1.776-2.341-1.452-0.993 0.11-0.973 0.11-0.973 1.606 0.113 2.452 1.649 2.452 1.649 1.427 2.446 3.743 1.739 4.656 1.33 0.143-1.034 0.558-1.74 1.016-2.14-3.554-0.404-7.29-1.777-7.29-7.907 0-1.747 0.625-3.174 1.649-4.295-0.166-0.403-0.714-2.030 0.155-4.234 0 0 1.344-0.43 4.401 1.64 1.276-0.355 2.645-0.532 4.005-0.539 1.359 0.006 2.729 0.184 4.008 0.539 3.054-2.070 4.395-1.64 4.395-1.64 0.871 2.204 0.323 3.831 0.157 4.234 1.026 1.12 1.647 2.548 1.647 4.295 0 6.145-3.743 7.498-7.306 7.895 0.574 0.497 1.085 1.47 1.085 2.963 0 2.141-0.019 3.864-0.019 4.391 0 0.426 0.288 0.925 1.099 0.768 6.354-2.118 10.933-8.113 10.933-15.18 0-8.837-7.164-16-16-16z">
       </path>
</symbol>
</svg>
</body>
</html>

Hasilnya

Example

untuk menggabungkan (kombinasi) banyak file svg cukup memasukan code symbol pada area svg

<svg>

    <symbol id="icon-1">
        <path></path>
    </symbol>

    <symbol id="icon-2">
        <path></path>
    </symbol>
    ........ dan seterusnya ..............
    
</svg>

Hasilnya

Example

saya tidak menyarankan membuat logo header dengan cara penggunaan svg di atas sekalipun itu bisa. untuk menggunakan svg sendiri menjadi logo header saya bahas pada artikel Logo Header Menggunakan SVG

tautan luar : artikel mengenai Icon SVG sprites - Icon System with SVG Sprites & Documentasi icomon.io - icomoon.io/#docs/

Style CSS Garis Pemisah Dengan Gradient Color

Teknik CSS Gradasi Warna

Cara membuat garis pemisah horizontal atau yang biasa memakai code <hr/> pada artikel. pada dasarnya kode <hr/> ini sudah memiliki tampilan sendiri tanpa harus mengeditnya tapi hanya berupa garis hitam horizontal/lurus. pada CSS di bawah style dengan CSS gradient agar lebih menarik.



Gunakan code <hr/> untuk membuat garis pemisah.

hr {
  border: 0;
  height: 1px;
  background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 1) 50%, rgba(255, 255, 255, 0) 100%);
  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 1) 50%, rgba(255, 255, 255, 0) 100%);
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 1) 50%, rgba(255, 255, 255, 0) 100%);
  /*  Old CSS gradients */
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff', GradientType=1);
}

Simple Blockquote Dengan Animasi CSS

Cara membuat blockquote yang simple serta menarik untuk mempercantik tulisan artikel yang menandai bahwa itu penting. Blockquote ini tidak menggunakan gambar hanya dengan css saja dan sedikit element pseudo :before / :after sebagai media animasinya.

---

VIEW DEMO

<blockquote>

ISI TULISAN APA SAJA DI SINI

</blockquote>

blockquote{
  background-color:#fff;
  color:#444;
  font-size:1.2em;
  font-family:Georgia, Serif;
  text-align:center;
  line-height:1.6;
  position: relative;
  width: 75%;
  margin: 30px auto;
  border-top:4px dotted grey;
  border-bottom:4px dotted grey;
  padding:20px;
  padding-top:30px;
}
blockquote:before{
  font: bold 1.9em Georgia, serif;
  /* ganti jika menggunakan icon font */
  content: "\0201C";
  color: grey;
  /* Lingkaran*/
  width: 30px;
  height: 30px;
  line-height: 45px;
  border-radius: 30px;
  margin-top: -20px;
  margin-left: -20px;
  background: #fff;
  border:2px solid grey;
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  text-align: center;
  transition:all .4s;
}
blockquote:hover:before{
  background: grey;
  color:#fff;
}

---

Compress gambar untuk mempercepat loading web atau blog

Salah satu tips untuk mempercepat muat halaman web/blog salah satunya adalah mengurangi loading Gambar atau memuat tampilnya sebuah gambar.
Di antara para blogger mungkin dengan menyisipkan sebuah gambar pada artikel akan membuat lebih menarik terutama artikel yang membutuhkan gambar itu menjadi kewajiban. tapi apa dengan menyisipkan gambar para pengunjung akan nyaman. apalagi ketika loading membuka gambar itu terasa lama, otomatis pengunjung akan kabur dan cari info di blog lain. (Pengalaman pribadi ^_^)
Untuk memperkecil ukuran gambar tersebut tanpa mengurangi dimensi/resolution gambar silahkan kalian kunjungi beberapa web berikut untuk compress images (bisa mengatur kualitas sesuai yang di butuhkan):

Jenis gambar (JPG,PNG,GIF) > Di sini

Rekomendasi opsi lain :

Jenis gambar PNG > Di sini
Jenis gambar JPG > Di sini
Jenis gambar GIF > Di sini

Penggunaan tool di atas cukup mudah tinggal drag and drop.
Semua tool sudah di uji untuk keperluan pada blog EdenCreative. Pengaruhnya untuk speed blog cukup baik, pengujian Speed Blog saya test pada PageSpeed Google Chrome

- Saya sarankan untuk setiap membuat gambar usahakan menggunakan dengan warna solid.(Opsional)
- Pengguna blogspot sekarang Sudah banyak template blogger AMP gratis.
(Untuk belajar mengoptimalkan Theme AMP saya akan buat artikel terpisah)