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.

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!