Jangan galau ! Pelajari Cara membuat watermark diblogger

Hello sobat IcloudZer kali ini admin akan memberikan informasi mengenai blogger dan kali ini admin akan membahas bagaiamana sih caranya membuat watermark pada thumbnail gambar diblogger, yuk simak cara dan pembahasannya

Info: Baiklah jika kamunya sudah penasaran yuk langsung aja kita bahas bersama sama okay

Watermark

Apa itu watermark? Yaitu kalau di terjemahkan adalah penanda air, atau bisa disebut sebagi logo yang mewakili dari sebuah perusahaan, semisal kamu pengguna blogger, maka website yang dibuat menggunakan blogger akan memiliki watermark Blogger, lebih senang nya begini deh! Watermark kita samakan saja sebagai credit atau hak cipta pada suatu tampilan di internet Okay

Menggunakan kode CSS

Sedangkan untuk membuat watermark pada thumbnail gambar kita bisa menggunakan kode CSS untuk membuatnya, nah dikarnakan proses pembuatannya menggunakan kode CSS, maka hal tersebut tidak akan menghambat kinerja blog anda

Cara penggunaan

Sekarang saatnya admin akan membahas bagaiamana caranya membuat watermark pada gambar diblogger, pelajari artikel kali ini hingga selesai ok

Kode CSS

Baiklah sobat untuk membuat watermark diblogger mudah sekali kamu bisa menyalin kode CSS dibawah ini kemudian kamu bisa meletakkannya diatas kode ]]><b:skin>

.post-thumbnail a:before, .Blog .post .separator:before, img:hover::before{
content:'Icloudice.com';
position:absolute;
right:0;
bottom:0;
display:flex;
font-size:10px;
font-weight:bold;
color:#fff;
z-index:2;
border-radius:5px;
background-color:#f80000;
padding:5px 3px 5px 3px;
opacity:.8;
}

Info: Atau kamu bisa menggunakan tag kode style untuk meletakkan kode tersebut

Kode HTML

Saat kamu memposting gambar, kamu harus menggunakan kode <div class='separator' untuk menutup tag <img>, nah jadi kode lengkap untuk menampilkan gamabar dalam format HTML nya seperti contoh dibawah ini

<div class="separator" style="clear: both;">
<a href="/" style="display: block; padding: 1em 0; text-align: center; ">
<img alt="" border="0" data-original-height="400" data-original-width="400" src="link_gambar_saat_uplpad"/>
</a>
</div>

Penjelasan kode

Baiklah admin akan menjelaskan ulang mengenai cara pembuatan watermark diblogger ini, dan mengapa admin hanya menampilkan kode CSS saja? sedangkan pada kode HTML tersebut hanya menjelaskan cara penggunaannya! karena sekali lagi admin jelaskan bahwa watermark tersebut dibuat hanya menggunakan Kode CSS

Penting: Dan kamu harus menyertakan <div class='separator' menampilkan gambar menggunakan tag <img> saat ingin menampilkan gamabr dalam format HTML

Contoh Tampilan

Baiklah sekarang saatnya admin bakalan memberikan contoh tampilan dari watermark pada thumbnail gambar tersebut, berikut ini adalah contoh tampilan nya