Menu

  • Home
  • Latest
  • Trending
  • FORUM
  • Activity
  • Members
  • Announcement
  • Need help?

Categories

  • Android (16)
  • Apps (38)
  • Blogger (22)
  • Computer (10)
  • Cryptocurrency (2)
  • Culinary (1)
  • Download (30)
  • Entertainment (1)
  • Event (17)
  • Game (3)
  • Internet (21)
  • Laptop (73)
  • News (3)
  • OS (15)
  • Peripheral (25)
  • Personal (259)
  • Publisher (3)
  • Review (23)
  • Smartphone (56)
  • Social Media (7)
  • Tablet (1)
  • Technology (157)
  • Tips (77)
  • Travel (5)
  • Tutorial (138)
  • Unboxing (18)
  • Video (47)
  • Web (27)
  • Windows (6)
  • Wordpress (20)
  • YouTube (21)

Tags

Advertise Android Android 4 KitKat Android 9 Pie ASUS Bardi Blog Coding Competition CSS Experience ExpertBook Firmware Game Mobile Google Google Play Store HTML IndiHome Laptop Bisnis Laptop Gaming Plugins Press Release Republic of Gamers ROG Phone Smart Home Smartphone Gaming Spesifikasi dan Harga Technology Troubleshooting Update Upgrade VivoBook VPN Widget Youtube Zenbook Zenfone Zenfone 3 Zenfone 3 Max Zenfone 4 Zenfone 5 Zenfone 6 Zenfone Max Zenfone Max Pro M1 Zenfone Zoom S
XKOMODOTCOM - Sharing is Caring
No Result
View All Result
  • Account
XKOMODOTCOM
XKOMODOTCOM - Sharing is Caring
Home Web Blogger
Tutorial Cara Edit CSS & HTML Gambar di Blogger

Tutorial Cara Edit CSS/HTML Gambar di Blogger

Belajar coding gambar di Blogger bisa membuat tampilan artikel jadi lebih menarik

Febri Tri Harmoko by Febri Tri Harmoko
February 9, 2023
in Blogger, Tutorial, Web
1
0

Untuk kamu yang sedang mencari tutorial cara edit CSS/HTML gambar di Blogger, kali ini saya akan coba memberikan tutorial / caranya secara lengkap dan sederhana seperti mulai dari tutorial memasukan gambar ke dalam artikel blogger dengan kode HTML dan tutorial mengedit gambar pada artikel Blogger dengan CSS.

Table of Contents

  • Cara Menambahkan Gambar ke Blogger dengan Kode HTML Image
  • Cara Edit Gambar di Blogger Menggunakan CSS
  • Hasil Percobaan Edit Gambar di Blogger Menggunakan CSS

Cara Menambahkan Gambar ke Blogger dengan Kode HTML Image

Langsung saja kita bahas tutorialnya, caranya cukup sederhana. Kamu cukup ikuti saja perlahan tutorial cara edit CSS/HTML gambar di Blogger dalam artikel ini dan silakan perhatikan kode berikut:

HTML
<img src="URL GAMBAR" title="<strong>KETERANGAN GAMBAR</strong>" 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 Blogger 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:

CSS
/* 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 Percobaan Edit Gambar di Blogger Menggunakan CSS

Lalu muncul pertanyaan, 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.

Sebenarnya 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:

HTML
/* 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: ArticleCoding
Previous Post

Selamat Datang

Next Post

Download Script Mouse Macro X7 A4tech untuk All Weapon Sniper dan Shotgun

Leave a Reply Cancel reply

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

Promo Jagoan Hosting

Promo Hosting Murah - Jagoan Hosting

Recommended Videos

For You
Cara Menghubungkan 1 Nomor WhatsApp di 2 HP Android yang Berbeda Tanpa Aplikasi Tambahan

Cara Menghubungkan 1 Nomor WhatsApp di 2 HP Android yang Berbeda Tanpa Aplikasi Tambahan!

39 VIEWS
March 13, 2023
Cara Upgrade Android 13 ROG di Phone 6/6 Pro (AI2201) via FOTA (Firmware Over-The-Air)

Cara Upgrade Android 13 di ROG Phone 6/6 Pro (AI2201) via FOTA (Firmware Over-The-Air)

57 VIEWS
March 3, 2023
Cara Membuat Website di Jagoan Hosting

Cara Membuat Website WordPress di Jagoan Hosting, 100% Mudah dan Cepat untuk Pemula!

38 VIEWS
February 26, 2023
Show More

© 2023 XKOMODOTCOM

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

© 2023 XKOMODOTCOM

No Result
View All Result
  • Account
XKOMODOTCOM
  • MENU
  • Home
  • Latest
  • Trending
  • FORUM
  • Members
  • Announcement
  • Need help?
  • CATEGORIES
  • Cryptocurrency
  • Download
  • Event
  • Internet
    • Social Media
  • Personal
    • Culinary
    • Travel
  • Publisher
  • Review
  • Technology
    • Apps
    • Computer
    • Game
    • Laptop
    • OS
      • Android
      • Windows
    • Peripheral
    • Smartphone
  • Tips
  • Tutorial
  • Unboxing
  • Web
    • Blogger
    • WordPress

© 2023 XKOMODOTCOM

Link Start!

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

Add New Playlist