Merubah Warna Kata Pertama Title Sidebar

Merubah Warna Kata Pertama Title 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.

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

Cara Menerapkannya Ikuti Langkah-Langkah Berikut

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 atau heading yang biasanya terdapat link atau 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!

Referensi : https://www.bungfrangki.com/2018/03/merubah-warna-kata-pertama-pada-title.html