Cara Membuat Pesan dibawah Postingan Blog seperti Kompiajaib - Kurazone Blog | Panduan Belajar Blogger Pemula

Cara Membuat Pesan dibawah Postingan Blog seperti Kompiajaib

Pilihan Editor :

Cara Membuat Pesan dibawah Postingan Blog seperti Kompiajaib
Penulis Bagus Surochman
2
Modus malam



KURAZONE ~ Halo sahabat Kurazer, pada kesempatan kali ini kita akan belajar mengenai "Cara Membuat Pesan dibawah Postingan Blog Seperti Kompiajaib", penampakan pesan dibawah postingan ini akan nampak seperti gambar dibawah ini :


Nah, untuk membuat pesan seperti gambar diatas, maka kita cukup menggunakan HTML dan CSS saja, berikut adalah langkahnya

Cara Membuat Pesan dibawah Postingan Blog Seperti Kompiajaib

1. Masuk ke Akun Blogger >> Pilih Menu Tema >> Pilih Edit HTML
2. Cari kode </style> atau ]]></b:skin>, copy kode CSS dibawah ini lalu letakkan / paste tepat diatas kode  </style> atau ]]></b:skin>
.boxz{padding:2px;border-radius:5px;background:-moz-linear-gradient(to left,#2b0c93,#a54098,#f84272);background:-webkit-linear-gradient(to left,#2b0c93,#a54098,#f84272);background:linear-gradient(to right,#2b0c93,#a54098,#f84272);}
.pesan{background:#fff;padding:8px 12px;font-size:16px;border-radius:4px;box-shadow:0 0 0 3px rgba(255,255,255,.3);line-height:1.5;}
.kurabilo{background-color:#2B0C93;border-radius:4px;padding:1px 5px;cursor:pointer;}
a.kurabilo{color:#fff;}
3. Copy kode HTML dibawah ini :
<div class="boxz">
<div class="pesan">
Jika Anda merasa bahwa artikel-artikel di blog ini bermanfaat, Anda bisa memberikan donasi melalui <a class="kurabilo" href="https://www.alamatpaypalmu" rel="nofollow noopener" target="_blank" title="Donasi dengan Paypal">Paypal</a> atau dengan <a class="kurabilo" href="https://www.alamatdonasipulsamu" rel="nofollow noopener" target="_blank" title="Donasi dengan pulsa">Pulsa</a> Dana hasil dari donasi akan digunakan untuk memperpanjang domain <code>kurazone.net</code> - Terima kasih.
</div></div>
4. Selanjutnya, letakkan / paste kode HTML nya terserah dimana kalian ingin memunculkan pesan tersebut, misalnya bisa diletakkan dibawah tombol share, diatas related posts atau diatas kode </article> (silahkan kalian tentukan sendiri mau diletakkan dimana pesan tersebut)
5. Simpan template

Note :
  1. Jangan lupa untuk mengubah URL Paypal dan URL donasi pulsa nya
  2. Ubah juga teks "kurazone.net" menjadi alamat blog kalian
  3. Untuk mengganti warna gradasinya, kalian bisa mengedit angka - angka hexadecimal berikut ini : #2b0c93,#a54098,#f84272
  4. Untuk mengganti warna background pada Paypal dan Pulsa, edit kode ini : #2B0C93
  5. Untuk melihat kode - kode hexadecimalnya, kalian bisa mampir kesini >> Color Picker
  6. Sisanya bisa kalian kembangkan sendiri

DIBAWAH INI ADALAH CONTOH HASIL JADINYA

MODEL TAMPILAN PESAN VERSI KOMPIAJAIB

Jika Anda merasa bahwa artikel-artikel di blog ini bermanfaat, Anda bisa memberikan donasi melalui Paypal atau dengan Pulsa Dana hasil dari donasi akan digunakan untuk memperpanjang domain kurazone.net - Terima kasih.

MODEL TAMPILAN PESAN VERSI KURAZONE + Animation

Jika Anda merasa bahwa artikel-artikel di blog ini bermanfaat, Anda bisa memberikan donasi melalui Paypal atau dengan Pulsa Dana hasil dari donasi akan digunakan untuk memperpanjang domain kurazone.net - Terima kasih.

Ternyata gak susah ya bikin gituan, haha... Itulah informasi mengenai "Cara Membuat Pesan dibawah Postingan Blog Seperti Kompiajaib", selamat mencoba dan semoga bermanfaat. Goodluck!!

nanio
Cara Membuat Pesan dibawah Postingan Blog seperti Kompiajaib
Cara Membuat Pesan dibawah Postingan Blog seperti Kompiajaib Cara Membuat Pesan dibawah Postingan Blog seperti Kompiajaib Reviewed by Bagus Surochman on 8/18/2018

2 komentar:

  1. Balasan
    1. Tampilan font nya relatif mas.,, bentuk Font otomatis mengikuti settingan di template yg kamu pakai.,

      Hapus

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar 1 per 1.
5. Komentar selalu di moderasi.