Cara Membuat gambar dengan efek transparan pada gambar untuk postingan blog

transparent text
Gambar dengan Text transparan
Prinsipnya kita ingin membuat postingan kita menjadi semarik mungkin dimata pengunjung (baca: manusia) kalau robot txt, sampai sekarang belum bisa membaca gambar dan video berbasis flash. Jadi kalau misalkan sobat membuat halaman web khusus gambar dan video, ya harus rajin kampanye langsung melalui media media sosial langsung kepada manusia.

Namun faktor manusia itu penting, jadi terkadang kita harus berfikir untuk menyajikan konten kita semarik mungkin kehadapan pembaca karena kita menyadari ada beribu ribu konten yang sama bagusnya menunggu dan meminta perhatian. Mereka sama dengan kita, melakukan usaha usaha ini:
  • Ber"media-sosial" agar konten dapat dishare
  • Blogwalking agar saling promo terhadap sesama blogger yang nantinya secara tidak langsung mempromosikan blog kita kepada pembaca non blogger
  • Mengirim URL ke webmaster
  • dll
Namun penyajian juga tidak kalah penting agar pengunjung tertarik dan betah membaca artikel dan konten yang kita sajikan, banyak usaha yang dapat kita lakukan. Salah satunya adalah membuat konten yang rapi dan menarik. Saya ingin berbagi bagaimana caranya menampilkan gambar atau image berbeda daripada biasanya untuk menghiasi konten.

Perhatikan gambar diatas, cara meletakannya adalah dengan cara masuk ke opsi HTML bukan "compose" hasil kodenya adalah sebagai berikut yang telah saya tulis di CodePen Klik tombol CSS, HTML jika ingin mengkopy namun keduannya harus digabungkan dengan css diatas kode HTML jika ingin menerapkannya ke halaman konten HTML blogger:
See the Pen PrZoXP by sufyan (@sufyan33) on CodePen.
1. HTML
  • Masuk ke dasbor
  • Pilih entry baru
  • Pilih lewati "Compose" pilih HTML
Memang sebaiknya menuliskan artikelnya dulu dalam opsi compose dan setelah artikel selesai, terakhir baru pindah ke opsi HTML dan pastekan kode-nya tepat diatas artikel yang telah kita buat:
halaman konten dalam opsi HTML
Halaman konten dalam opsi HTML
Kodenya adalah sebagai berikut:

<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial;
font-size: 17px;
}
.container {
position: relative;
max-width: 800px;
margin: 0 auto;
}
.container img {vertical-align: middle;}
.container .content {
position: absolute;
bottom: 0;
background: rgb(0, 0, 0); /* Fallback color */
background: rgb(219, 112, 147, 0.5); /* Black background with 0.5 opacity */
color: #fff;
width: 100%;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<img src="https://1.bp.blogspot.com/-e5xpTVAa3QU/XQLm5T48_SI/AAAAAAAAmyc/tFWET7YTLD8cP0fLvZWLXmxGfLzqC0tYACLcBGAs/s1600/template%2Bsimple%2Bmodern.png" alt="Notebook" style="width:100%;">
<div class="content">
<p>Contoh gambar dengan text transparan yang dapat kita pergunakan untuk tayangan visula pada web dan blog.</p>
<p><small>Image By: Anissa Auliasari</small></p>
</div>
</div>
Yang saya sorot dengan higlight warna kuning adalah URL gambar yang telah saya sediakan atau saya ambil dari URL gambar dari salah satu konten atau artikel blog ini sendiri. Tapi ingat ini bukan efek paralx ya, dilain kesempatan saya akan memberikan trik membuat latar blog dengan efek Paralx secara sederhana dan simple.

www.editblogtema.net


Comments

  1. Aaah... aku keep dulu nih link-nya, mau coba-coba nanti. Makasih ya Kak...

    ReplyDelete

Post a Comment

Ajukan pertanyaan dan berikan detailnya.

Jika ingin komen dengan menyisipkan kode HTML, parse terlebih dahulu kodenya di :
Blogcrowds
Lalu hasil parse pastekan ke dalam kotak komentar. Terimakasih!

pilih pola label berikut:

Show more