CARA MEMBUAT WATERMARK PADA LAY OUT BLOGGER MENGGUNAKAN CSS

letaknya pada layout atau pengaturan blogspot
Gambar watermark buatan editblog
Gambar diatas adalah Lay Out Contempo Hybrid dan boleh dikatakan saya telah membuang lebih separoh gagdet bawaan tema contempo dan menambahkan separoh gagdet atau widget klasik pilihan yang terbaik untuk membentuk template yang satu ini. Saya juga telah mengkompres kode kode yang saya tambahkan kedalam HTML, satu satunya ganjalan paling serius pada loading kecepatan tema ini adalah ukuran gambar yang sebagian "enggan" saya kecilkan karena pertimbangan estetika.

Kalau sobat perhatikan pada gambar (ditunjukan oleh marking anak panah warna merah) kanan atas lay out saya juga telah menempatkan sebuah watermark cantik, jika sobat ingin membuatnya cukup melalui cara berikut:
  1. Masuk kepengaturan blogger
  2. Pilih tema
  3. Pilih Edit HTML
  4. Cari kode: (lebih mudah dengan cara tekan ctrl+f)
]]></b:skin>
<b:template-skin>
<![CDATA[
Yang sobat cari itu sebenarnya adalah kode yang telah saya sorot warna kuning, karena tepat dibawah kode tersebut sobat pastekan kode dibawah ini:
body#layout, body#layout div.section { font-family: Arial, sans-serif;}body#layout { max-width: 1040px;}body#layout .sidebar-sticky { z-index:0;}body#layout #wrapper { overflow: unset;}body#layout #header-container { height: auto;}body#layout:before { content: "ContempoHybrid ultimate";    position: absolute;    top: 20px;    right: 20px;    z-index: 1;    padding: 10px 20px;    font-size: 18px;    color: #87CEEB;    background: #FFE4E1;    border-radius: 20px;    border: 1px solid #d6d6d6;}body#layout .widget-content { box-shadow: none;}
Save template. Perhatikan kode yang saya sorot merah pink yakni: ContempoHybrid Ultimate Silahkan sobat ganti dengan nama template hasil desain sobat sendiri. Kode ini dapat dipasang pada template contempo biasa dengan cara yang sama seperti petunjuk diatas.

Kode ini juga terpasang pada template template premium yang harganya selangit, dan juga pada lay out VioMagz-nya Mas Sugeng dan seperti sobat lihat kode ini menghasilkan watermark yang indah.

Jika sobat ingin merobah warna tulisan silahkan ganti kode HEX yang saya sorot biru dan jika sobat ingin merobah warna latar watermark silahkan sobat ganti kode HEX yang saya sorot warna kuning.

Beri Komentar atau, Ajukan Pertanyaan

5 Comments

  1. kalo saya sih tinggal pake aja bang tempaltenya, kalo edit ato tambah apa gitu masih rada bingung :D

    ReplyDelete
    Replies
    1. ok deh...tinggal pesan sama saya yang model apa gratis he he he

      Delete
    2. banga bagi dong samaku satu yang contempo yang navigasinya responsive

      Delete
  2. Bagus juga ya kalau ditambahin watermark gini jadi lebih keren diliatnya, tapi saya langsung pake aja.

    ReplyDelete
  3. wah bagus juga ya gan, bisa bikin watermark otomatis getu, kebetulan ane masih sering pakai manual gan, memang cukup memakan waktu hahaha :D boleh dicoba gan tutorialnya makasih :)

    ReplyDelete