RISWAN NET
  • Home
  • Content Placement
  • Tekno
  • Internet
  • Komputer
  • Bisnisnew
No Result
View All Result
  • Home
  • Content Placement
  • Tekno
  • Internet
  • Komputer
  • Bisnisnew
No Result
View All Result
RISWAN NET
No Result
View All Result
Home Blogger

Menambahkan Style Button Pada Tulisan Tertentu di Blog

Riswan by Riswan
31 Oktober 2018
in Blogger
3
61
SHARES
ShareTweetSend
Menambahkan Style Button Pada Tulisan di Blog

RISWAN.NET – Menambahkan Style Button Pada Tulisan Tertentu di Blog, Halo sobat Riswan, dengan meguasai ilmu CSS dan HTML akan mempermudah kita dalam mengedit tampilan blog,

Pada postingan kali ini saya akan berbagi cara membuat tulisan dengan style button pada postingan di blog, memenuhi permintaan dari teman saya Kang Rezza.

Menambahkan Style Button Pada Tulisan Tertentu di Blog

Mungkin kalian baru dengar “Tulisan dengan Style Button”, yup karena saya sendiri yang membuat istilah tersebut, entah apa nama yang cocok, tapi kelihatannya terlihat seperti button.

Untuk membuatnya sendiri cukup mudah, sobat cukup menerapkan kode css pada template sobat lalu memanggilnya dengan tag class css tersebut ketika hendak memakainya pada postingan.

Menambahkan Style Button Pada Tulisan di Blog

Pertama silahkan login di Blogger, lalu masuk ke Edit HTML, selanjutnya cari kode ]]></b:skin> lalu letakan css di bawah ini tepat sebelum kode ]]></b:skin>

.post qode{background:#fff;border:1px solid rgba(0,0,0,0.1);border-radius:3px;box-shadow:0 1px 0 rgba(0,0,0,0.2),0 0 0 2px #fff inset;color:#333;display:inline-block;font-size:14px;line-height:1.4;font-family:consolas;margin:0 .1em;padding:.1em .6em;font-weight:700}

Sedangkan untuk pengguna cms WordPress dapat meletakan kode css tersebut pada bagian custom code yang telah disediakan oleh theme atau melalui theme editor dan pilih file css lalu ganti .post sesuai element yang digunakan oleh theme contohnya .entry-content

.entry-content qode{background:#fff;border:1px solid rgba(0,0,0,0.1);border-radius:3px;box-shadow:0 1px 0 rgba(0,0,0,0.2),0 0 0 2px #fff inset;color:#333;display:inline-block;font-size:14px;line-height:1.4;font-family:consolas;margin:0 .1em;padding:.1em .6em;font-weight:700}

Kemudian simpan template, selanjutnya untuk mengaplikasikan pada tulisan postingan sobat tinggal memangil css tadi dengan menambahkan kode pada tulisan tertentu. Pengaplikasiannya kurang lebih seperti berikut ini, pastikan sobat menulisnya pada mode HTML

<qode> Contoh Tulisan </qode>

Selesai, lalu pratinjau untuk melihat perubahan. Mudah bukan? Dengan menerapkan style css ini setidaknya dapat mempercantik tampilan tulisan dan dapat digunakan untuk menandai bagian tulisan yang sekiranya penting.

Baca Juga: Cara Modifikasi Style Heading H2 Pada postingan

Demikianlah artikel mengenai Menambahkan Style Button Pada Tulisan Tertentu di Blog, semoga tutorial blogger ini dapat bermanfaat bagi sobat blogger semua, terima kasih.

-7.5012204107.763621
Riswan

Riswan

Pengembang Digital dan Content Creator. Saat ini sedang menempuh pendidikan strata satu di Universitas Pendidikan Indonesia (UPI) dengan program studi Bisnis Digital.

Related Posts

Cek Plagiarisme, 3 Pemeriksa Plagiarisme Khusus pada Tahun 2022
Bisnis Online

Cek plagiarisme | 03 Pemeriksa Plagiarisme Khusus pada tahun 2022

29 Juni 2022
Cara Membuat Jump Link di Blog
Blogger

Cara Membuat Jump Link di Blog dengan HTML

24 Januari 2020
Cara Submit URL di Google Webmaster Yang Baru
Blogger

Cara Submit URL di Google Webmaster Yang Baru

2 April 2019

Comments 3

  1. KuotaMedia says:
    4 tahun ago

    Udah dicoba om di wp tapi gak berhasil 🙁

    Balas
  2. Riswan Net says:
    4 tahun ago

    Seharusnya tidak ada maslah om, hehe

    Balas
  3. Riswan Net says:
    4 tahun ago

    silahkan dicoba lagi mas, sudah saya update untuk wp

    Balas

Tinggalkan Balasan Batalkan balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Baru-baru Ini

5 Makanan Khas Papua yang Unik dan Rasanya Enak, Wajib Dicoba!

5 Makanan Khas Papua yang Unik dan Enak, Wajib Dicoba!

26 Juli 2022
Kredit Mobil Baru Online Masa Kini

Kredit Mobil Baru Online Masa Kini

14 Juli 2022
Cek Plagiarisme, 3 Pemeriksa Plagiarisme Khusus pada Tahun 2022

Cek plagiarisme | 03 Pemeriksa Plagiarisme Khusus pada tahun 2022

29 Juni 2022
Bonus Bulanan untuk Para Content Creator di GoPlay Creator fund

Bonus Bulanan untuk Para Content Creator di GoPlay Creator fund

15 Juni 2022
Tips Lancar Cicil Mobil Baru tanpa Perlu Cari Sumber Tambahan

Tips Lancar Cicil Mobil Baru tanpa Perlu Cari Sumber Tambahan

14 Juni 2022

Riswan Net AMP

Riswan Net menyajikan informasi update seputar Teknologi, Tips Trik Internet, Perbankan, Media Sosial sampai Panduan Bisnis Online.

playstore download logo 2

Kategori

  • Adsense
  • Aplikasi
  • Bisnis
  • Bitcoin
  • Blogger
  • Desain
  • Gadget
  • Internet
  • Komputer
  • Media Soaial
  • Review
  • SEO
  • Software
  • Teknologi
  • WhatsApp

Tags

Android Bisnis Bisnis Online daily Life Kesehatan Keuangan Komputer Media Sosial Perbankan Tips Trik Travel WhatsApp

© 2019 Riswan Net All Right Reserved

  • About
  • Kontak
  • Iklan
  • Privasi
No Result
View All Result
  • Home
  • Content Placement
  • Tekno
  • Internet
  • Komputer
  • Bisnis

© 2020 Riswan Net All Right Reserved.

This website uses cookies. By continuing to use this website you are giving consent to cookies being used. Visit our Privacy and Cookie Policy.