Merubah Warna Kata Pertama Pada Title Widget Sidebar

Teknik mengubah warna text pada kata pertama di judul/heading dipakai 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 jikalau diterapkan cara berikut ini, judul widget sidebar tersebut akan bermetamorfosis “Postingan Terbaru”.

Demo

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

1. Masuk ke Edit HTML, tambahkan CSS berikut ini letakkan di atas instruksi </style>

.FirstWord{color:#ce0a46;}

2. Lalu cari instruksi </body> atau &lt;!--</body>--&gt;&lt;/body&gt; tambahkan instruksi jQuery berikut ini di atas instruksi 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 instruksi jQuery library (berapapun versinya) di template, jikalau sudah ada tidak perlu lagi ditambahkan. Kode jQuery library misalnya menyerupai 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 instruksi jQuery di atas, misalnya menjadi menyerupai 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, agar bermanfaat dan selamat mencoba!

Advertisement