Merubah Warna Kata Pertama pada Title Widget Sidebar

Teknik mengubah warna text pada kata pertama di judul/heading digunakan untuk mempercantik tampilan template blog. Trik ini biasanya diterapkan pada title widget sidebar dan tag heading di blog. Sehingga akan terlihat style judul widget menjadi dua warna yang berbeda antara kata pertama dan kata selanjutnya.
Merubah Warna Kata Pertama pada Judul Widget Sidebar

Contohnya, sidebar di website/blog Anda terdapat widget yang berjudul “Postingan Terbaru”, maka jika diterapkan cara berikut ini, judul widget sidebar tersebut akan berubah menjadi “Postingan Terbaru”.

Demo: https://berminat-template.blogspot.com

Cara menerapkannya  silahkan ikuti langkah-langkah pada tutorial berikut ini:

1. Masuk ke Edit HTML, tambahkan CSS berikut ini letakkan di atas kode </style>
.FirstWord{color:#ce0a46;}

2. Lalu cari kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt; tambahkan kode jQuery berikut ini di atas kode tadi:
<script type='text/javascript'>
//<![CDATA[
$('#sidebar-wrapper h2').each(function(){var text = $(this).text().split(' ');if(text.length < 1)return;text[0] = '<span class="FirstWord">'+text[0]+'</span>';$(this).html( text.join(' ') );});
//]]>
</script>

3. Jangan lupa pasang juga kode jQuery library (berapapun versinya) di template, jika sudah ada tidak perlu lagi ditambahkan. Kode jQuery library contohnya seperti ini:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js' type='text/javascript'></script>

4. Simpan Theme

Silahkan reload kembali blog Anda dan lihat hasilnya.

Jika hendak ingin menerapkan cara yang sama pada judul header blog, post heading title, sekaligus sidebar title, maka tinggal menambahkan masing-masing attribute ID atau Class (dari masing-masing) ke dalam kode jQuery di atas, contohnya menjadi seperti ini:
<script type='text/javascript'>
//<![CDATA[
$('#sidebar-wrapper h2, #header h1, .post h2, .post-body h2').each(function(){var text = $(this).text().split(' ');if(text.length < 1)return;text[0] = '<span class="FirstWord">'+text[0]+'</span>';$(this).html( text.join(' ') );});
//]]>
</script>

Catatan:
Kode jQuery di atas akan mematikan fungsi link pada title, jadi pastikan cara ini tidak diterapkan pada title/heading yang biasanya terdapat link/URL. Seperti judul postingan .post h1 dan lain sebagainya.

Demikian tutorial tentang  Cara Mengubah Warna Kata Pertama pada Judul Widget Sidebar atau Heading Menggunakan jQuery, semoga bermanfaat dan selamat mencoba!
Niagahoster
VPS Starts from
$2.5
/Month

Vultr

Read Review
  • One-click installation of 20+ apps
  • Available 17 worldwide locations
  • 100% local SSD and high performance Intel CPUs
  • Infinite OS combinations
Visit Site
Gunakan link di atas untuk saldo akun $100 gratis
DigitalOcean
VPS Starts from
$5
/Month

DigitalOcean

Read Review
  • Deploy custom image, RDP, 1-Click App, or standard distribution
  • Flexibility and scalability
  • Fantastic average uptime of 99.99%
  • Infinite OS combinations (Linux and Windows)
  • Developer-friendly tools and APIs
Visit Site
Topup $25 to gets $100 in credit over 60 days with refer link above
Niagahoster
Mulai dari
Rp10K
/Bulan

Niagahoster

View Details
  • Free SSL Certificate
  • Garansi 30 hari
  • Free domain & website migration
  • Tersedia unlimited disk space (shared hosting, kecuali paket bayi)
Visit Site
Diskon unlimited hosting hingga 75%
Niagahoster
VPS mulai dari
Rp68
/Jam

IDCloudHost

View Details
  • One-Click Deploy
  • Lokasi server Indonesia termurah
  • Instal berbagai Control Panel, VM, OS dan aplikasi
  • Menghubungkan dengan API
Visit Site
Dapatkan free credit Rp50K dengan minimal topup Rp50K

Komentar telah ditutup dan disembunyikan. Jika ada yang perlu disampaikan silahkan kirim pesan lewat laman kontak.