Cara Upload Gambar SVG Didalam Postingan Blog - CariPengetahuan-Id

Cara Upload /  Memunculkan gambar Vektor di blog

Assalamu'alaikum warahmatullahi wabarakatuh.



Pada umumnya meletakan gambar didalam postingan blog merupakan hal yang lumayan penting menurut admin sendiri,hal tersebut membuat blog kalian lebih hidup dan terkesan menarik.

Kalian bisa meletakan gambar PNG,JPG dan bahkan gambar bergerak yaitu gif.
Namun tahukah kalian,Mengupload gambar di blogger mempunyai batasan tersendiri salah satunya ialah Kita tidak bisa upload gambar vektor atau format SVG kedalam postingan blog.

Jika dilihat dari segi keuntungan,Menggantikan gambar Bitmap (jpg,Gif,PNG) Dengan gambar vektor (SVG) ,membuat loading blog kalian lebih cepat, mengapa demikian?.karena ukuran SVG relatif lebih kecil ketimbang bitmap,Kode kode pada SVG lebih cepat terbaca oleh browser daripada harus memuat gambar Bitmap.

Kelebihan :


  1. Bersifat sclable artinya jika kita memperbesar gambar maka gambar tersebut tidak akan pecah.
  2. Ukuran file relatif lebih kecil ketimbang bitmap.
  3. Membuat loading Blog lebih cepat.


Baca juga : Cara Mengubah Gambar PNG /Jpg ke SVG Tanpa Ribet

Nah,Postingan kali ini Admin akan memberikan tutorial bagaimana cara meletakan gambar SVG ke dalam blog.

Siapkan dulu gambar SVG yang akan diletakkan kedalam blog.

Ada 2 Toturial berbeda untuk meletakan gambar SVG di blog,Kalian pilih salah satu nya saja yang paling mudah menurut kalian.(Admin sarankan pake cara 1 )

Cara 1


1.Buat Link menuju gambar terlebih dahulu

  1. Upload gambar SVG ke Google Drive Kalian.
  2. Setelah selesai di upload 1.klik file >> 2.klik gambar link >> 3.Aktifkan berbagi link : Aktif >> 4.Salin Url
  3. Maka Url akan seperti ini hasilnya https://drive.google.com/open?id=1FH3IkkhvdBII__nm4dac82hxU5kv6L32
  4. Salin id file yang berwarna "merah".
  5. Lalu salin code ini https://drive.google.com/uc?export=view&id=
  6. Letakan id file tadi dibelakang view&id contoh seperti ini https://drive.google.com/uc?export=view&id=1FH3IkkhvdBII__nm4dac82hxU5kv6L32
  7. Link gambar sudah jadi.

2.Selanjutnya meletakan gambar SVG tersebut ke dalam postingan blog

  1. Salin tag img ini untuk memanggil gambar <img alt="Logo CariPengetahuan-id" src="#"/>
  2. Ganti tanda "#" dengan url gambar yang sudah kalian buat
  3. Contoh  <img alt="Logo CariPengetahuan-id" src="https://drive.google.com/uc?export=view&id=1FH3IkkhvdBII__nm4dac82hxU5kv6L32"/>
  4. Nah letakan codenya di dalam postingan (Pilih mode HTML jangan di letakan di compose)

Note : Untuk mengubah ukuran lebar gambar gunakan width="" ,untuk mengubah tinggi gambar height=""

Contoh :

<img alt=""Logo CariPengetahuan-id" src="https://drive.google.com/uc?export=view&id=1FH3IkkhvdBII__nm4dac82hxU5kv6L32" height="50" width="50" />

Taadaaaaaaa dan inilah hasilnya

gambar koala
Zoom sepuas kalian,gambar tidak akan pecah.

Cara 2


1.Pertama ubah dulu SVG ke format HTML 

  1. Untuk meletakan gambar SVG ke dalam blog .kalian ubah dulu SVG ke html melalui url ini https://anyconv.com/svg-to-html-converter/
  2. Upload gambar yang ingin dijadikan html "Choose File"
    Convert SVG to Html

  3. Jika sudah,tunggu beberapa saat nanti akan muncul file gambar yang sudah terconvert ke html."DOWNLOAD HTML"
2.Meletakan Code gambar SVG tersebut kedalam postingan blog

  1. Admin anggap kalian sudah mengubah gambar SVG tadi ke html,langkah selanjutnya cari dan buka html yang sudah didownload tadi,lalu salin code html nya.disarankan rename dulu html ke txt agar yang terbuka adalah kode bukan gambar.
  2. Admin anggap Kalian sudah mencopy.lalu tempel code tadi di postingan pada mode HTML jangan di mode compose
  3. Untuk mengubah ukuran yang kalian mau cari code width=" (untuk mengubah lebar gambar) dan code height=" (untuk mengubah tinggi gambar. Contoh width="50 berarti dengan lebar 50 pixel.
  4. Selesaiiiii
Yups itu tadi 2 cara meletakan Gambar vektor ke dalam blog yang sangat mudah dilakukan jika diikuti step demi step.

Jika soal SEO Admin kurang tau apakah itu berpengaruh pada SEO atau tidak? Kemungkinan gambar vektor tidak terindex oleh mesin pencari.mungkin juga iya.

Baca juga : Cara Mengubah Gambar PNG /Jpg ke SVG Tanpa Ribet



Cara Upload Gambar SVG Didalam Postingan Blog

Cara Upload /  Memunculkan gambar Vektor di blog

Assalamu'alaikum warahmatullahi wabarakatuh.



Pada umumnya meletakan gambar didalam postingan blog merupakan hal yang lumayan penting menurut admin sendiri,hal tersebut membuat blog kalian lebih hidup dan terkesan menarik.

Kalian bisa meletakan gambar PNG,JPG dan bahkan gambar bergerak yaitu gif.
Namun tahukah kalian,Mengupload gambar di blogger mempunyai batasan tersendiri salah satunya ialah Kita tidak bisa upload gambar vektor atau format SVG kedalam postingan blog.

Jika dilihat dari segi keuntungan,Menggantikan gambar Bitmap (jpg,Gif,PNG) Dengan gambar vektor (SVG) ,membuat loading blog kalian lebih cepat, mengapa demikian?.karena ukuran SVG relatif lebih kecil ketimbang bitmap,Kode kode pada SVG lebih cepat terbaca oleh browser daripada harus memuat gambar Bitmap.

Kelebihan :


  1. Bersifat sclable artinya jika kita memperbesar gambar maka gambar tersebut tidak akan pecah.
  2. Ukuran file relatif lebih kecil ketimbang bitmap.
  3. Membuat loading Blog lebih cepat.


Baca juga : Cara Mengubah Gambar PNG /Jpg ke SVG Tanpa Ribet

Nah,Postingan kali ini Admin akan memberikan tutorial bagaimana cara meletakan gambar SVG ke dalam blog.

Siapkan dulu gambar SVG yang akan diletakkan kedalam blog.

Ada 2 Toturial berbeda untuk meletakan gambar SVG di blog,Kalian pilih salah satu nya saja yang paling mudah menurut kalian.(Admin sarankan pake cara 1 )

Cara 1


1.Buat Link menuju gambar terlebih dahulu

  1. Upload gambar SVG ke Google Drive Kalian.
  2. Setelah selesai di upload 1.klik file >> 2.klik gambar link >> 3.Aktifkan berbagi link : Aktif >> 4.Salin Url
  3. Maka Url akan seperti ini hasilnya https://drive.google.com/open?id=1FH3IkkhvdBII__nm4dac82hxU5kv6L32
  4. Salin id file yang berwarna "merah".
  5. Lalu salin code ini https://drive.google.com/uc?export=view&id=
  6. Letakan id file tadi dibelakang view&id contoh seperti ini https://drive.google.com/uc?export=view&id=1FH3IkkhvdBII__nm4dac82hxU5kv6L32
  7. Link gambar sudah jadi.

2.Selanjutnya meletakan gambar SVG tersebut ke dalam postingan blog

  1. Salin tag img ini untuk memanggil gambar <img alt="Logo CariPengetahuan-id" src="#"/>
  2. Ganti tanda "#" dengan url gambar yang sudah kalian buat
  3. Contoh  <img alt="Logo CariPengetahuan-id" src="https://drive.google.com/uc?export=view&id=1FH3IkkhvdBII__nm4dac82hxU5kv6L32"/>
  4. Nah letakan codenya di dalam postingan (Pilih mode HTML jangan di letakan di compose)

Note : Untuk mengubah ukuran lebar gambar gunakan width="" ,untuk mengubah tinggi gambar height=""

Contoh :

<img alt=""Logo CariPengetahuan-id" src="https://drive.google.com/uc?export=view&id=1FH3IkkhvdBII__nm4dac82hxU5kv6L32" height="50" width="50" />

Taadaaaaaaa dan inilah hasilnya

gambar koala
Zoom sepuas kalian,gambar tidak akan pecah.

Cara 2


1.Pertama ubah dulu SVG ke format HTML 

  1. Untuk meletakan gambar SVG ke dalam blog .kalian ubah dulu SVG ke html melalui url ini https://anyconv.com/svg-to-html-converter/
  2. Upload gambar yang ingin dijadikan html "Choose File"
    Convert SVG to Html

  3. Jika sudah,tunggu beberapa saat nanti akan muncul file gambar yang sudah terconvert ke html."DOWNLOAD HTML"
2.Meletakan Code gambar SVG tersebut kedalam postingan blog

  1. Admin anggap kalian sudah mengubah gambar SVG tadi ke html,langkah selanjutnya cari dan buka html yang sudah didownload tadi,lalu salin code html nya.disarankan rename dulu html ke txt agar yang terbuka adalah kode bukan gambar.
  2. Admin anggap Kalian sudah mencopy.lalu tempel code tadi di postingan pada mode HTML jangan di mode compose
  3. Untuk mengubah ukuran yang kalian mau cari code width=" (untuk mengubah lebar gambar) dan code height=" (untuk mengubah tinggi gambar. Contoh width="50 berarti dengan lebar 50 pixel.
  4. Selesaiiiii
Yups itu tadi 2 cara meletakan Gambar vektor ke dalam blog yang sangat mudah dilakukan jika diikuti step demi step.

Jika soal SEO Admin kurang tau apakah itu berpengaruh pada SEO atau tidak? Kemungkinan gambar vektor tidak terindex oleh mesin pencari.mungkin juga iya.

Baca juga : Cara Mengubah Gambar PNG /Jpg ke SVG Tanpa Ribet