Cara Menambahkan Gambar Watermark/Transparan di Belakang Posting Artikel di Blogger/Blogspot

Bismillaahirrahmaanirrahiim !

Baca Juga

Manteman, mungkin pernah membuat gambar watermark/Transparan di Microsoft Word yang ditempatkan di belakang tulisan/artikel. Nah, mungkin manteman ingin menambahkan juga pada setiap halaman posting artikel di blog. Ini berlaku untuk template blogger terbaru responsive untuk smeua jenis template responsive blogger. Contohnya punya ane nih manteman lihat di setiap artikel dengan label atau kategori tutorial gambar watermak ini akan muncul :

Cara Menambahkan Gambar Watermark/Transparan di Belakang Posting Artikel di Blogger/Blogspot

Langkah pertama silahkan login ke www.blogger.com

Langkah kedua klik template

Langkah ketiga klik edit html

Langkah keempat cari kode hmtl ini   <b:loop values='data:labels' var='label'> dan cari yang di bawahnya ada kode kurang lebih seperti ini <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'> dan lengkapnya seperti ini :

 <b:loop values='data:labels' var='label'>
        <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span class='label-count' dir='ltr'><data:label.count/></span>
          </b:if>
        </span>
      </b:loop>

Langkah kelima letakkan kode berikut di bawah kode </b:loop> :

<b:loop values='data:labels' var='label'>
<b:if cond='data:label.name == &quot;tutorial&quot;'>
<style type='text/css'>
.post-body{background: url(http://i587.photobucket.com/albums/ss316/vitiram/Banner%202016/logo%20master%20seni%202014%20PNG_zpsgpou8krr.png) no-repeat top right;}
</style>
</b:if>
</b:loop>


Langkah keenam ganti 'tutorial' dari kategori atau label mateman yang paling banyak digunakan karena watermark ini akan muncul berdasaarkan label yang kita tulis di atas.

Langkah ketujuh ganti url gambar .png milik manteman. Ukuran gambar bisa terserah kebutuhan manteman dan untuk edit gambarnya bisa menggunakan software adobe photoshop.

Untuk mendapatkan url gambarnya simpan gambar manteman di www.photobucket.com di bagain direct link.

Langkah ketujuh, selesaih sudah :)

Jika ada pertanyaan silahkan beri komentarnya di bawah ya :)


Salam blogger Indonesia !


Catatan : Ane sudah update gambar watermak ane seperti gambar di bawah ini :
 

Gambar watermark diupdate Selasa, 20 Oktober 2015

dan ini link URL nya http://i587.photobucket.com/albums/ss316/vitiram/Banner%202016/watermark%20behind%20posting%20article_zpsvmopsjxa.png dan gambar sebelumnya dah ane update pake sotoshop alias photoshop dengan ukuran 250 x 250px.

Share this

Master Seni