Memasang Background SVG Keren di Blogger seperti RahmanCyber

RahmanCyber Blogger - Hello Lurrr, kali ini RahmanCyber NET akan memberikan sedikit ilmu yang baru di dapet nih.. hehehe.. Membuat tampilan blog kamu jadi keren kayak gini nih..

{getToc} $title={Table of Contents}

Eits.. tetapi perlu diperhatikan ya, disini untuk kode SVG nya bukan Buatan dari RahmanCyber NET! jadi Kode ini dibuat oleh Matt dari svgbackgrounds.com

Jadi disini nanti saya arahkan langsung ke websitenya si Matt yah untuk tutorial kali ini.. hehe, karena disini saya mencoba untuk menghargai lisensi temen temen...

Apa itu SVG Scalable Vector Graphics

Scalable Vector Graphics adalah format gambar yang menggunakan XML sebagai dasar untuk membentuk gambar vektor dua dimensi. Vector disini artinya, walaupun di perbesar sekalipun tidak pecah seperti gambar Raster seperti JPG maupun PNG.

SVG adalah format gambar yang dikembangkan oleh Word Wide Web Consortium sejak tahun 1999, dengan rilis pertama 4 September 2001. Sebuah gambar dengan format SVG disimpan dalam bentuk file XML.

Penjelasan Lisensi Background SVG

Kode dari Matt tersebut bisa digunakan gratis, tapi kalian perlu menyertakan atribut atau credit ya..

Contohnya seperti ini :

.bg-zig-zag{
    background-color: #0b7;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpolygon fill='%23000' points='120%2C0 120%2C60 90%2C30 60%2C0 0%2C0 0%2C0 60%2C60 0%2C120 60%2C120 90%2C90 120%2C60 120%2C0'/%3E%3C/svg%3E");
    /* background by SVGBackgrounds.com */
}

kalian hanya perlu menambahkan yang saya kasih huruf tebal diatas... mudah kan... untuk detai lisensinya disini https://www.svgbackgrounds.com/license/

ini untuk penjelasan lisense CC 4.0 https://creativecommons.org/licenses/by/4.0/

Jujur saja pertama kali saya dapet ini kagum banget, menarik dan membuat tampilan Blog seketika menjadi Cerah dan Nyenii... hehe, yang paling enak ini bukan gambar .png atau .jpg ya, yang memakan Size banyak banget ketika di Load, biasanya kalo kalian masang background berupa gambar .jpg atau .png, mesti bakal menurunkan skor GTMETRIX atau Google PageSpeed.. haha

Tenang, ini sizenya kecil, karena formatnya SVG yang sudah di kompresi sedemikiaan rupa.. sehingga tidak memberatkan Load Blog Kalean...


Ada banyak pilihan yang ditawarkan untuk versi gratisnya (untuk premiumnya kalian bisa subscribe atau langganan, tetntunya ada banyak background premium lainnya yang kalean dapetin.. )

Cara Pemasangan Background SVG

Berikut ini saya jelasin langkah pemasangannya ya, sebenarnya tidak begitu sulit kok... tinggal templek aja.. langsung buuummm, tampilannya berubah...

1. Buka dulu Gih Dashboard Bloggernya

Silahkan kalian Buka Dashboard Blogger... saya yakin kalian udah bisa.. hehe ^_^ , sobat RahmanCyber khan Pinter Pinter...

2. Pilih Bagian Tema / Theme

Setelah itu silahkan Pergi ke Tema ATAU Theme kalo kalian pake bahasa inggris, Mudah Kok...

3. Edit HTML

Kalo sudah klik pada bagian Edit HTML, nah disini kita akan edit kode xml yah.. gak banyak kok// hanya bagian Background aja di CSS

4. Cari CSS Body

Cari body pada bagian kode CSS, seperti gambar diatas biasanya. Tinggal kalian ctrl+f lalu ketikan  body { , ctrl+f itu fungsinya untuk mencari kode dengan cepat ya, atau dalam bahasa inggris tuh adalah find.

5. Kurungin Kode Background

Lalu kalian kurungin kode background, seperti yang ada di gambar diatas ya... fungsinya apa, ya siapa tau kita nanti akan membutuhkannya lagi ntar... kan yang namanya mood orang bisa berubah ubah, siapa tau kalian kangen ama tampilan sebelumnya.. makannya biar tidak di hapus.. mending di kurungin di kode komentar khan... wkwkwk

/*========================================
background: #e8c380;
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
=========================================*/

kalo udah masuk dalam kurungan kayak gitu, kode cssnya udah gak bisa di load ya gan.. alias berubah jadi komen. Nah kalo kalian mau lepasin lagi tuh kode.. tinggal delet kode komennya... kayak gini

background: #e8c380;
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;


Pokoknya yang berbau pemformatan Background, kalian kuruh deh.. hehe biar tidak mengganggu kode yang akan kita pasang..

Kalo di RahmanCyber ada juga kode yang beginian... hehe, ini adalah kode untuk memasang Background berupa Image Jpg atau PNG, masih inget banget saya.. hehe, tetapi ya gitu deh.. bikin skor GTMETRIX atau Google Pagespeed jadi Anjlog...

/*========================================
background-image: url('https://images.alphacoders.com/605/thumb-1920-605592.png');

background-repeat: no-repeat; background-attachment: fixed;
=========================================*/

dulu saya gunakan untuk memperindah tampilan... ehehe

6. Pergi ke Website Pembuat Kode SVG Background

Nah sedulur RahmanCyber NET yang budiman.. tibalah saatnya kalian pergi ke Website si pembuat Kode SVG Backgroundd yaitu si MATT.. yeee

https://www.svgbackgrounds.com


*Yang Nulis Ganti Neh

kalian kopi yah websitenya... di browser kalian.. nanti akan tampil deh langsung pilihan background... untuk yang free sih menurutku udah amazing deh.. Untuk sekelas gratisan.. cuman lu perlu nyematin kodenya ya broh...

Hargailah jirih payah pembuatnya.. iye khaaan hohoho...

Nah okeh.. kalo tampilan website pembuatnya udah berhasil di load di broser lu, lalu tinggal pilih yang lu suka mana.. kalo gw background Diamond warna biru..

Nah lu bisa kustom tampilannya di panel yang udah disediain oleh si developer...

Kasta harap lu paham ya dari gambar diatas.. haha, itu adalah pengaturan parameternya... Gw jelasin deh satu per satu biar yang paham jadi lebih paham.. yang gak paham jadi paham...

Bagian Color, artinya lu bisa ganti warna sesuka hati lu... ntar kode CSS Output bakalan berubah se3suai dengan warna yang lu Pick di bagian Color... ingat! Color artinya Warna... ehehe, Bukan Celana Color...

Lalu Bagian Scale, atalah ukuran pattern atau sampel atau sesuatu yang diulang ulang... dah gitu deh, kasta harap lu paham.. jadi semakin lu geser ke kanan, maka patternnya akan membesar, begitupun sebaliknya jika lu geser ke kiri, maka pattern akan mengecil...

Selanjutnuya Bagian Opacity, Opacity artinya Transparency atau Keberlihatan Objek... semakin lu geser ke kanan, maka objek atau pattern akan terlihat jelhaaaasss begitupun juga sebaliknya jika lu geser kiri akan samarrr

Gw harap lu paham ya... haha,

Setelah selesai atur parameter.. lanjuuuttt ke Langkah selanjutnya broh!

7. Copy kode CSS OUTPUT SVG

Pada bagian ini, lu udah tinggal kopy aja semua kode yang ada di kotak CSS OUTPUT. Mudah kan Broh... CTRL+C kalo lu lupa..

8. Ke Blog Edit HTML yang Tadi

Oke temen temen, kalo kalian sudah melakukan copy code di website developer background SVG, kalian bisa langsung ke edit html yang tadi sudah dibuka ya, saya harap belum kalian tutup.. hihihi
Letakkanlah Kodenya di bagian CSS Body ya temen temen...

seperti gambar diatas ya.. karena saya pilih yang corak diamond, jadi kodenya agak panjang.. maaf ya itu gambarnya kepotong.

background-color: #00b7ff;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='540' height='450' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='.1'%3E%3Cpolygon fill='%23444' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%23999' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23444' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3E%3Cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3E%3Cpolygon points='90 450 180 300 0 300'/%3E%3Cpolygon fill='%23666' points='270 450 180 600 360 600'/%3E%3Cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3E%3Cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3E%3Cpolygon fill='%23999' points='450 450 540 300 360 300'/%3E%3Cpolygon fill='%23999' points='630 450 540 600 720 600'/%3E%3Cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3E%3Cpolygon points='810 450 720 600 900 600'/%3E%3Cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3E%3Cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3E%3Cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3E%3Cpolygon fill='%23222' points='90 750 0 900 180 900'/%3E%3Cpolygon points='270 750 180 900 360 900'/%3E%3Cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3E%3Cpolygon points='450 750 540 600 360 600'/%3E%3Cpolygon points='630 750 540 900 720 900'/%3E%3Cpolygon fill='%23444' points='630 750 720 600 540 600'/%3E%3Cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3E%3Cpolygon fill='%23666' points='810 750 900 600 720 600'/%3E%3Cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3E%3Cpolygon fill='%23999' points='180 0 90 150 270 150'/%3E%3Cpolygon fill='%23444' points='360 0 270 150 450 150'/%3E%3Cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3E%3Cpolygon points='900 0 810 150 990 150'/%3E%3Cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3E%3Cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3E%3Cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3E%3Cpolygon fill='%23666' points='180 300 270 150 90 150'/%3E%3Cpolygon fill='%23222' points='360 300 270 450 450 450'/%3E%3Cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3E%3Cpolygon fill='%23444' points='540 300 450 450 630 450'/%3E%3Cpolygon fill='%23222' points='540 300 630 150 450 150'/%3E%3Cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3E%3Cpolygon fill='%23666' points='720 300 810 150 630 150'/%3E%3Cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3E%3Cpolygon fill='%23999' points='900 300 990 150 810 150'/%3E%3Cpolygon points='0 600 -90 750 90 750'/%3E%3Cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3E%3Cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3E%3Cpolygon fill='%23444' points='180 600 270 450 90 450'/%3E%3Cpolygon fill='%23444' points='360 600 270 750 450 750'/%3E%3Cpolygon fill='%23999' points='360 600 450 450 270 450'/%3E%3Cpolygon fill='%23666' points='540 600 630 450 450 450'/%3E%3Cpolygon fill='%23222' points='720 600 630 750 810 750'/%3E%3Cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3E%3Cpolygon fill='%23222' points='900 600 990 450 810 450'/%3E%3Cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3E%3Cpolygon fill='%23444' points='180 900 270 750 90 750'/%3E%3Cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3E%3Cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3E%3Cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3E%3Cpolygon fill='%23222' points='900 900 990 750 810 750'/%3E%3Cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3E%3Cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3E%3Cpolygon points='1080 600 990 750 1170 750'/%3E%3Cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3E%3Cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3E%3C/g%3E%3C/svg%3E");

Jangan lupa ya temen temen untuk memberikan credit atau atribusi dibawah kode css..

/* background by SVGBackgrounds.com */ kalian copy aja ya ini

/* background by SVGBackgrounds.com */

Sehingga nanti jadinya akan seperti dibawah ini

background-color: #00b7ff;
background-image:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'  width='540' height='450' viewBox='0 0 1080 900'%3E%3Cg  fill-opacity='.1'%3E%3Cpolygon fill='%23444' points='90 150 0 300 180  300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23AAA'  points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23DDD' points='450  150 360 300 540 300'/%3E%3Cpolygon fill='%23999' points='450 150 540 0  360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon  fill='%23DDD' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23444'  points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23FFF' points='810  150 900 0 720 0'/%3E%3Cpolygon fill='%23DDD' points='990 150 900 300  1080 300'/%3E%3Cpolygon fill='%23444' points='990 150 1080 0 900  0'/%3E%3Cpolygon fill='%23DDD' points='90 450 0 600 180  600'/%3E%3Cpolygon points='90 450 180 300 0 300'/%3E%3Cpolygon  fill='%23666' points='270 450 180 600 360 600'/%3E%3Cpolygon  fill='%23AAA' points='270 450 360 300 180 300'/%3E%3Cpolygon  fill='%23DDD' points='450 450 360 600 540 600'/%3E%3Cpolygon  fill='%23999' points='450 450 540 300 360 300'/%3E%3Cpolygon  fill='%23999' points='630 450 540 600 720 600'/%3E%3Cpolygon  fill='%23FFF' points='630 450 720 300 540 300'/%3E%3Cpolygon points='810  450 720 600 900 600'/%3E%3Cpolygon fill='%23DDD' points='810 450 900  300 720 300'/%3E%3Cpolygon fill='%23AAA' points='990 450 900 600 1080  600'/%3E%3Cpolygon fill='%23444' points='990 450 1080 300 900  300'/%3E%3Cpolygon fill='%23222' points='90 750 0 900 180  900'/%3E%3Cpolygon points='270 750 180 900 360 900'/%3E%3Cpolygon  fill='%23DDD' points='270 750 360 600 180 600'/%3E%3Cpolygon points='450  750 540 600 360 600'/%3E%3Cpolygon points='630 750 540 900 720  900'/%3E%3Cpolygon fill='%23444' points='630 750 720 600 540  600'/%3E%3Cpolygon fill='%23AAA' points='810 750 720 900 900  900'/%3E%3Cpolygon fill='%23666' points='810 750 900 600 720  600'/%3E%3Cpolygon fill='%23999' points='990 750 900 900 1080  900'/%3E%3Cpolygon fill='%23999' points='180 0 90 150 270  150'/%3E%3Cpolygon fill='%23444' points='360 0 270 150 450  150'/%3E%3Cpolygon fill='%23FFF' points='540 0 450 150 630  150'/%3E%3Cpolygon points='900 0 810 150 990 150'/%3E%3Cpolygon  fill='%23222' points='0 300 -90 450 90 450'/%3E%3Cpolygon fill='%23FFF'  points='0 300 90 150 -90 150'/%3E%3Cpolygon fill='%23FFF' points='180  300 90 450 270 450'/%3E%3Cpolygon fill='%23666' points='180 300 270 150  90 150'/%3E%3Cpolygon fill='%23222' points='360 300 270 450 450  450'/%3E%3Cpolygon fill='%23FFF' points='360 300 450 150 270  150'/%3E%3Cpolygon fill='%23444' points='540 300 450 450 630  450'/%3E%3Cpolygon fill='%23222' points='540 300 630 150 450  150'/%3E%3Cpolygon fill='%23AAA' points='720 300 630 450 810  450'/%3E%3Cpolygon fill='%23666' points='720 300 810 150 630  150'/%3E%3Cpolygon fill='%23FFF' points='900 300 810 450 990  450'/%3E%3Cpolygon fill='%23999' points='900 300 990 150 810  150'/%3E%3Cpolygon points='0 600 -90 750 90 750'/%3E%3Cpolygon  fill='%23666' points='0 600 90 450 -90 450'/%3E%3Cpolygon fill='%23AAA'  points='180 600 90 750 270 750'/%3E%3Cpolygon fill='%23444' points='180  600 270 450 90 450'/%3E%3Cpolygon fill='%23444' points='360 600 270 750  450 750'/%3E%3Cpolygon fill='%23999' points='360 600 450 450 270  450'/%3E%3Cpolygon fill='%23666' points='540 600 630 450 450  450'/%3E%3Cpolygon fill='%23222' points='720 600 630 750 810  750'/%3E%3Cpolygon fill='%23FFF' points='900 600 810 750 990  750'/%3E%3Cpolygon fill='%23222' points='900 600 990 450 810  450'/%3E%3Cpolygon fill='%23DDD' points='0 900 90 750 -90  750'/%3E%3Cpolygon fill='%23444' points='180 900 270 750 90  750'/%3E%3Cpolygon fill='%23FFF' points='360 900 450 750 270  750'/%3E%3Cpolygon fill='%23AAA' points='540 900 630 750 450  750'/%3E%3Cpolygon fill='%23FFF' points='720 900 810 750 630  750'/%3E%3Cpolygon fill='%23222' points='900 900 990 750 810  750'/%3E%3Cpolygon fill='%23222' points='1080 300 990 450 1170  450'/%3E%3Cpolygon fill='%23FFF' points='1080 300 1170 150 990  150'/%3E%3Cpolygon points='1080 600 990 750 1170 750'/%3E%3Cpolygon  fill='%23666' points='1080 600 1170 450 990 450'/%3E%3Cpolygon  fill='%23DDD' points='1080 900 1170 750 990  750'/%3E%3C/g%3E%3C/svg%3E");
/* background by SVGBackgrounds.com */

Nah kalo udah, kalian bisa simpen deh templatenya seperti biasa...
Dan langkah selanjutnya, kalian bisa cek tampilan terbaru website blogger kalian di tab baru, Gimana hasilnya? bagus bukan.. hihihi

Kesimpulan

Kesimpulan untuk tutorial kali ini adalah, tampilan Blog Background kalian berubah hanya dengan beberapa langkah saja.. Jangan lupa untuk menghargai karya orang ya... agar karya kita juga nantinya dihargai orang.. hehe

Selamat mencoba...




*Oh iya maafin si Kasta ya... Bahasanya kalo nulis emang kayak gitu... ^_^






Jaaaa.... Mata Ashita..