Cara Mengubah Warna Teks Pada Kata Pertama Judul Postingan dan Widget

Mengubah warna tulisan kata pertama di blog menggunakan kode css dan jquery, teknik mengganti warna teks ini bisa Anda gunakan untuk mempercantik tampilan blog Anda.

Selain itu, teks atau kata yang ingin diganti bisa disesuaikan, misalnya disini saya akan menjelaskan tentang mengubah warna kata pertama pada judul artikel/postingan dan juga judul widget.

Kalau kalian paham mengenai fungsi ID dan Class pada bahasa pemrograman HTML, akan lebih mudah untuk menyesuaikan bagian mana saja yang ingin diganti warnanya. Misalnya selain heading atau judul artikel, Anda bisa mengganti warna tulisan kata pertama pada isi artikel Anda.

Ingat ya, tutorial ini buat kalian yang suka mendesain blog atau mengubah tampilan blog supaya terlihat lebih cantik lagi dan berbeda dengan punya orang lain.

Baca juga: Cara Membuat Efek Salju Berjatuhan di Blog

Karena mengubah warna teks ini memang tidak akan mengubah apapun selain mengubah warna judul postingan atau judul widget saja.

Jadi jangan bilang ini akan meningkatkan SEO blog ya, tapi bisa saja meningkatkan User Friendly karena blog terlihat lebih enak dilihat asalkan desain dan warna yang digunakan sesuai. Oke gak usah bahas SEO disini karena gak sesuai, nanti saja lain waktu.

Balik lagi ke topik utama, disini kita akan mencoba mengubah warna teks pada kata pertama judul postingan dan widget, mungkin sebelum mencobanya Anda bisa lihat dulu demonya seperti apa sih, klik tombol dibawah ini.

DEMO

Jika sudah melihat demonya silahkan coba praktekan di blog Anda masing-masing, karena rasanya akan beda loh dengan melihatnya di blog milik sendiri.

Cara Mengubah Warna Kata Pertama di Judul Postingan dan Widget

1. Masuk ke Blogger.com.
2. Klik Tema > Edit HTML.
3. Cari kode ]]></b:skin> atau </sytle>.
4. Copy kode CSS di bawah ini, lalu Paste di atas kode ]]></b:skin> atau </sytle>.

.FirstWord{color:#51dc85;}

5. Kemudian cari kode </body>.
6. Copy kode jQuery di bawah ini, lalu Paste di atas kode </body>.

<script type='text/javascript'>
//<![CDATA[
$('#sidebar-wrapper h4, .post 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>

7. Silahkan tambahkan kode jQuery library di bawah ini, dan simpan di atas kode </head>.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js' type='text/javascript'></script>

8. Lalu klik Simpan tema.

Catatan:

• Untuk nomor 7, jika pada template blog Anda sudah terpasang kode jQuery versi berapa saja maka kode tersebut tidak perlu ditambahkan lagi.
• Untuk nomor 6, disana terlihat ada kode #sidebar-wrapper h4, post h2. Kode #sidebar-wrapper h4 artinya jika judul widget sidebar blog Anda menggunakan heading tag H4 maka kode itu akan bekerja. Kode .post h2 kode ini untuk mengidentifikasi bagian judul artikel, Anda bisa menyesuaikannya apakah heading tag yang digunakan H2 atau H1.
• Anda juga masih bisa menambahkan bagian lain, misalnya judul atau nama blog dengan cara menambahkan koma dan ID atau Class dari kode HTML judul atau nama blog Anda.
• Gunakan inspect element untuk mengetahui kode HTML yang digunakan pada template blog Anda dengan cara klik kanan pada bagian tertentu lalu pilih inspect nanti akan muncul struktur HTML dibagian bawah browser.
• Jika ingin mengubah warna silahkan gunakan tools kode warna.

Source code by Bung Frangki.

Sekian artikel mengenai cara mengubah warna teks pada kata pertama judul postingan dan widget, seperti yang sudah saya katakan kalau Anda paham kode HTML pasti akan lebih mudah mempraktekannya.

Jika belum paham mengenai kode HTML silahkan ikuti langkah di atas, karena sudah saya sesuaikan dengan kebanyakan kode template blogger yang digunakan sekarang.

Baca juga: Kumpulan Kode HTML Lengkap dengan Fungsinya

Anda juga bisa coba mengubah H4 pada sidebar-wrapper dengan H2 atau H3, dan mengubah H2 pada post dengan H1.

Jika ada yang masih belum paham atau tidak bisa menerapkannya di blog, silahkan hubungi kami melalui halaman kontak, sebisa mungkin kami akan membantunya. Semoga bermanfaat, terima kasih.

Cara Manual

Cuman hobi nulis tentang tutorial blog jadi deh blog cara manual.

Bagikan Artikel ini