$show=home

$type=ticker$count=12$cols=4$cate=0$show=post$hide=mobile

$type=grid$count=4$tbg=rainbow$meta=0$snip=0$rm=0$show=home$ic=show

Modifikasi Kode HTML & CSS Gambar / Image pada blog jadi lebih keren dan menarik

Modifikasi Kode HTML & CSS Gambar / Image pada blog jadi lebih keren dan menarik

Hi brother. kali ini saya akan coba memberikan tutorial / Cara memasukan gambar ke dalam artikel / blog dengan kode HTML dan Mengedit Gambar pada artikel / postingan dengan CSS

langsung ajah yah,
cara nya simple kok
[
<img src="URL_GAMBAR" Title="keterangan gambar" alt="tag gambar"/>
]
HTML dan CSS Gambar
Contoh Gambar

Nah bagaimana untuk mengedit / memodifikasi gambar agar lebih menarik lewat CSS ?
mari simak yah baik-baik Tutorial yang akan saya sampaikan di sini.
[post_ads]
[
/* 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 merubah tampilan gambar sesuka hati kita
Nah .. untuk lebih jelas nya kita coba satu persatu kode nya dengan mengedit CSS nya yah ..

[post_ads_2]
Gambar di atas merupakan contoh Image yang kita edit melalui CSS, lalu bagaimana cara mengedit Gambar tanpa melalui CSS / langsung lewat HTML ?
mu0ngkin sebagian kakak merasa malas untuk mengedit css padahal lewat css kan lebih cepat dan simple sih sebenar nya 😀 cuma kalau kita lewat HTML kita bisa mengubah / memodifikasi gambar (IMG) pada artikel sesuka hati kita dengan tampilan yang berbeda cuma lumayan memakan waktu sih 😀
sebenar nya untuk memodifikasi gambar melalui HTML ini sangat lah mudah kita hanya perlu menambahkan perintah Style pada Tag <img agar lebih jelas lihat penulisan kode nya
[

/*kode tag Img default */

<img alt="" src="url_gambar" title="" /> /* biasakan untuk menambahkan Title dan Alt pada Tag IMG*/

/* modifikasi Img dengan menggunakan Style */

<img alt="" src="URL_gambar" style="background: #code_warna; border: 1px solid #blue; filter: Sepia(0.4); margin: 0; padding: 0;" title="" 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 memodifikasi kode HTML & CSS Gambar / Image (img) Pada Blog
Kalau masih bingun atau ada yang ingin di tanyakan silahkan beri komentar di bawah yah 😀

COMMENTS

BLOGGER: 17
Loading...
Mengingat blog x komo akan pindah platform dari blogger ke wordpress, jika kamu punya pertanyaan atau request update artikel silahkan join ke sini https://blog.xkomo.com/forums.
Silahkan Bookmark blog saya yang baru ya, karna kedepan blog ini akan di hapus.
Name

Accessories,5,All Weapon,4,Android,36,Anime,1,App,8,ASUS,41,ASUS Zenfone,7,Blogger,33,Clash Of Clan,2,Computer,3,CSS,6,Documentary,5,dr. Zen,2,Event,10,Facebook,15,Firmware,23,Game,9,Gemscool,1,Google,6,Google Adsense,2,Hardware,2,Internet,6,Jambi,2,Javascript,1,Komputer,3,Laptop,2,Mouse,3,Mouse Gaming,1,Mouse Macro,6,News,40,Ninja Saga,2,Notebook,4,Padfone S,1,Point Blank,1,Press Release,8,Preview,12,Review,27,Root,13,Script,3,SEO,3,Shotgun,1,Smartphone,18,Template,1,Theme,3,Tips & Tricks,2,Troubleshooting,1,Tutorial,44,Unboxing,4,Video,10,Widget,8,Windows,2,ZenEar,1,Zenfestival,1,Zenflash,1,Zenfone 2,5,Zenfone 2 Deluxe,2,Zenfone 2 Laser,9,Zenfone 3,3,Zenfone 3 Laser,1,Zenfone 3 Max,3,Zenfone 3 Zoom,1,Zenfone 4,2,Zenfone 5,5,Zenfone 6,9,Zenfone Go,1,Zenfone Max,1,Zenfone Selfie,3,Zenfone Zoom,3,ZenHow,1,ZenPad,2,Zenpower,2,Zentalk,2,Zenvestival,3,Zenvolution,1,
ltr
item
BLOG X KOMO: Modifikasi Kode HTML & CSS Gambar / Image pada blog jadi lebih keren dan menarik
Modifikasi Kode HTML & CSS Gambar / Image pada blog jadi lebih keren dan menarik
Modifikasi Kode HTML & CSS Gambar / Image pada blog jadi lebih keren dan menarik
https://2.bp.blogspot.com/-XlizGMsrK6Y/U05vOSpWFXI/AAAAAAAABWk/A9aIaMlejnY/s150/logo+Komo.png
https://2.bp.blogspot.com/-XlizGMsrK6Y/U05vOSpWFXI/AAAAAAAABWk/A9aIaMlejnY/s72-c/logo+Komo.png
BLOG X KOMO
http://www.xkomo.com/2014/04/modifikasi-kode-html-gambar-image-pada.html
http://www.xkomo.com/
http://www.xkomo.com/
http://www.xkomo.com/2014/04/modifikasi-kode-html-gambar-image-pada.html
true
4848727032668058109
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy