Daftar Jadi Anggota Zencreator Bisa Dapat Laptop Gratis! Daftar Jadi Anggota Zencreator Bisa Dapat Laptop Gratis! Daftar Jadi Anggota Zencreator Bisa Dapat Laptop Gratis!
XKOMODOTCOM
No Result
View All Result
  • Login
  • TECH
    • Apps
    • Computer
    • Laptop
    • Peripheral
    • Smartphone
  • REVIEW
  • TUTORIAL
  • UNBOXING
XKOMODOTCOM
ernesthy
XKOMODOTCOM
  • TECH
    • Apps
    • Computer
    • Laptop
    • Peripheral
    • Smartphone
  • REVIEW
  • TUTORIAL
  • UNBOXING
  • Login
No Result
View All Result
XKOMODOTCOM
Cara Edit Gambar di Blog Menggunakan CSS

Cara Edit Gambar di Blog Menggunakan CSS

Tutorial menambahkan & mengedit kode HTML / CSS gambar (img) di blog jadi lebih menarik

Febri Tri Harmoko by Febri Tri Harmoko
April 19, 2014
in Blogger, Tutorial, Web
Reading Time: 4 mins read
1
A A
0
928
VIEWS
ShareTweet
Belanja Laptop ASUS Gratis Ongkos Kirim - Dijamin Aman 100% - ASUS Online Store Official Belanja Laptop ASUS Gratis Ongkos Kirim - Dijamin Aman 100% - ASUS Online Store Official Belanja Laptop ASUS Gratis Ongkos Kirim - Dijamin Aman 100% - ASUS Online Store Official

Untuk Anda yang sedang mencari tutorial bagaimana caranya edit gambar di blog, kali ini saya akan coba memberikan tutorial / caranya memasukan gambar ke dalam artikel blog dengan kode HTML dan mengedit gambar pada artikel / postingan blog dengan CSS.

Langsung saja kita bahas tutorialnya, caranya cukup sederhana. Anda cukup ikuti saja perlahan tutorial dalam artikel ini dan silahkan perhatikan kode berikut:

Cara Menambahkan Gambar ke Blog dengan Kode HTML Image (<img/>)

<img src="URL GAMBAR" title="KETERANGAN GAMBAR" alt="TAG GAMBAR"/>

Kode di atas merupakan kode HTML standar untuk memasukan gambar secara manual ke dalam postingan / artikel di blog.

Cara Edit Gambar di Blog Menggunakan CSS

Selanjutnya, bagaimana caranya mengedit / memodifikasi gambar agar lebih menarik dengan bantuan kode CSS? Simak baik-baik tutorial yang akan saya sampaikan berikut ini:

/* Dalam tag IMAGE atau img ada beberapa perintah yang bisa kita gunakan untuk modifikasi gambar */

img {
   border: 0px solid #666; /* ini untuk mengatur tepi gambar atau bentuk gambar mau persegi atau lingkaran*/
   box-shadow:0px 0px 0px #666; /* bayangan pada gambar*/

/* Filter */
   -webkit-filter:blur(1px)grayscale(0.4) sepia(0.5) brightness(0.6) contrast(0.6) hue-rotate(313deg) invert(0.4) saturate(2.8) drop-shadow(0px 0px 12px #808080);

/* Transform */
   transform:rotate(66deg);
   -ms-transform:rotate(66deg); /* IE 9 */
   -webkit-transform:rotate(66deg); /* Opera, Chrome, and Safari */
}

Dari kode CSS di atas kita bisa mengubah tampilan gambar sesuka hati kita, untuk lebih jelasnya kita coba satu persatu kodenya dengan mengedit CSS pada gambar.

Hasil Uji Coba Mengedit Gambar Blog Menggunakan CSS Style

/* CSS */
.tranformer{
    margin:75px;
    transform:rotate(66deg);
-ms-transform:rotate(66deg); /* IE 9 */
-webkit-transform:rotate(66deg); /* Opera, Chrome, and Safari */
}

.border{
border:2px solid Red;
    border-radius: 15px 25px 50px 100px;/*kiri^ kanan^ kananv kiriv*/
    padding:25px;/*ruang antara border dengan content(gambar)*/
    /*margin is ruang di luar border*/
}

.bayangan {
box-shadow: 5px 8px 10px #000;/*5px B ke kanan,8px B ke bawah, Lebar Bayangan*/
}


.complate:hover {/* Hover berfungsi ketika mouse berada di content*/
box-shadow: 5px 8px 10px #000;/*5px B ke kanan,8px B ke bawah, Lebar Bayangan*/
    padding: 15px;
    border-radius:5px;
    border:3px solid red;
    /*transform*/
   
transform:rotate(66deg);
-ms-transform:rotate(66deg); /* IE 9 */
-webkit-transform:rotate(66deg); /* Opera, Chrome, and Safari */
   /*filter*/
    margin:20px;
    /*filter*/
-webkit-filter:blur(0.3px)grayscale(0.4) sepia(0.5) brightness(0.6) contrast(0.6) hue-rotate(313deg) invert(0.4) saturate(0.8) ;
    transition:5s;
}

/* HTML */

<div>Contoh pengggunaan "Transform"
    <br/>
<img class="tranformer" src="http://2.bp.blogspot.com/-XlizGMsrK6Y/U05vOSpWFXI/AAAAAAAABWk/A9aIaMlejnY/s1600/logo+Komo.png" />
</div>
<div>
<br/>
Contoh penggunaan "Border"
<img class="border" src="http://2.bp.blogspot.com/-XlizGMsrK6Y/U05vOSpWFXI/AAAAAAAABWk/A9aIaMlejnY/s1600/logo+Komo.png" />
    <br/>
</div>

<div>
<br/>
Contoh penggunaan "box-Shadow" Bayangan
<img class="bayangan" src="http://2.bp.blogspot.com/-XlizGMsrK6Y/U05vOSpWFXI/AAAAAAAABWk/A9aIaMlejnY/s1600/logo+Komo.png" />
    <br/>
</div>

<br/>
<div>
<br/>
Contoh Penggabungan semua kode :) 
<img class="complate" src="http://2.bp.blogspot.com/-XlizGMsrK6Y/U05vOSpWFXI/AAAAAAAABWk/A9aIaMlejnY/s1600/logo+Komo.png" />
    <br/>
</div>

Untuk melihat hasil uji coba saya mengedit gambar menggunakan CSS style dan HTML di atas, Anda bisa langsung kunjungi link jsfiddle ini. Coding di atas merupakan contoh image yang kita edit menggunakan CSS, lalu muncul pertanyaan baru seperti di bawah ini.

Bagaimana caranya mengedit gambar tanpa melalui CSS / langsung lewat HTML?

Mungkin sebagian blogger merasa malas untuk mengedit CSS padahal lewat CSS-kan lebih cepat dan simple sih sebenarnya, tapi kalau lewat HTML kita bisa lebih cepat untuk melakukan modifikasi gambar pada saat itu juga dengan bantuan tag style pada Kode HTML.

Sebenar nya untuk memodifikasi gambar melalui HTML ini sangatlah mudah, kita hanya perlu menambahkan perintah tag style=”kode CSS” pada kode HTML <img/>, agar lebih jelas lihat penulisan kodenya di bawah ini:

/* Kode tag img default */

<img alt="INFO GAMBAR" src="URL GAMBAR" title="JUDUL GAMBAR" /> 

/* Biasakan untuk menambahkan Title dan Alt pada Tag IMG */

/* Modifikasi Img dengan menggunakan Style */

<img alt="INFO GAMBAR" src="URL GAMBAR" style="background: #FFF; border: 1px solid #blue; filter: Sepia(0.4); margin: 0; padding: 0;" title="JUDUL GAMBAR" widht="20px" />

/* Intinya pada style itu kita bisa menambahkan semua perintah yang kita gunakan pada css / contoh gambar di atas. untuk lebih jelas nya silahkan di coba-coba lagi yah */

Bagaimana sudah paham kah, cara edit gambar ataupun foto di blog menggunakan kode CSS ? Kalau masih bingung atau ada yang ingin ditanyakan terkait artikel ini, silahkan komentar di bawah.

Tags: BlogCoding
ShareTweet
Febri Tri Harmoko

Febri Tri Harmoko

Saya blogger yang gemar membaca dan berbagi informasi di dunia internet.

ARTIKEL TERKAIT

Video Tutorial Cara Mengganti Password Akun Admin dan User Modem ZTE F609 IndiHome
Internet

Video Tutorial Cara Mengganti Password Akun Admin dan User Modem ZTE F609 IndiHome

by Febri Tri Harmoko
2 weeks ago
27
Cara Login Modem HUAWEI HG8245H IndiHome (Username dan Password Admin Terbaru)
Tutorial

Cara Login Modem HUAWEI HG8245H IndiHome (Username dan Password Admin Terbaru)

by Febri Tri Harmoko
2 months ago
283.2k
Cara Login Modem IndiHome ZTE F609 Terbaru
Tutorial

Cara Login Modem ZTE F609 IndiHome Terbaru (Username dan Password Admin)

by Febri Tri Harmoko
3 months ago
449.5k

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

I agree to the Terms & Conditions and Privacy Policy.

ARTIKEL TERBARU

Video Tutorial Cara Mengganti Password Akun Admin dan User Modem ZTE F609 IndiHome
Internet

Video Tutorial Cara Mengganti Password Akun Admin dan User Modem ZTE F609 IndiHome

by Febri Tri Harmoko
2 weeks ago
0
27

Pada update video kali ini saya membahas tutorial tentang cara mengganti password akun admin dan user modem ZTE F609 IndiHome,...

Read more

Bagaimana Performa ASUS ZenBook Pro Duo 15 OLED (UX582) – Test Benchmark

ROG Zephyrus G14 Edisi Khusus – Hasil Kolaborasi ASUS ROG x ACRONYM®

Daftar Laptop Gaming ROG Terbaru dengan 10th Gen Intel® Core™ H-Series

ASUS Umumkan ROG Zephyrus G14 (GA401), Laptop Gaming Stylish 14 inci Paling Powerful di Dunia

  • About
  • Contact
  • Disclaimer
  • Privacy Policy
  • Terms & Conditions

© 2014 - 2022 XKOMODOTCOM — Made With in Indonesia

No Result
View All Result
  • Login
  • TECH
    • Apps
    • Computer
    • Laptop
    • Peripheral
    • Smartphone
  • REVIEW
  • TUTORIAL
  • UNBOXING

© 2014 - 2022 XKOMODOTCOM — Made With in Indonesia

Welcome Back!

Sign In with Google
OR

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In
This website uses cookies. By continuing to use this website you are giving consent to cookies being used. Visit our Privacy and Cookie Policy.