√ Cara Mengubah Warna Teks Pada Kata Pertama Judul Postingan Dan Widget

Mengubah warna goresan pena kata pertama di blog memakai arahan css dan jquery, teknik mengganti warna teks ini dapat Anda gunakan untuk mempercantik tampilan blog Anda.

Selain itu, teks atau kata yang ingin diganti dapat disesuaikan, contohnya disini aku akan menjelaskan perihal 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 gampang untuk menyesuaikan belahan mana saja yang ingin diganti warnanya. Misalnya selain heading atau judul artikel, Anda dapat mengganti warna goresan pena kata pertama pada isi artikel Anda.

Ingat ya, tutorial ini buat kalian yang suka mendesain blog atau mengubah tampilan blog semoga terlihat lebih bagus 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.

Kaprikornus jangan bilang ini akan meningkatkan SEO blog ya, tapi dapat saja meningkatkan User Friendly sebab blog terlihat lebih lezat dilihat asalkan desain dan warna yang dipakai sesuai. Oke gak usah bahas SEO disini sebab 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 dapat lihat dulu demonya ibarat apa sih, klik tombol dibawah ini.

DEMO

Jika sudah melihat demonya silahkan coba praktekan di blog Anda masing-masing, sebab 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 arahan ]]></b:skin> atau </sytle>.
4. Copy kode CSS di bawah ini, kemudian Paste di atas arahan ]]></b:skin> atau </sytle>.

.FirstWord{color:#51dc85;}

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

<script type='text/j4vascript'> //<![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 arahan jQuery library di bawah ini, dan simpan di atas arahan </head>.

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

8. Lalu klik Simpan tema.

Catatan:

• Untuk nomor 7, bila pada template blog Anda sudah terpasang arahan jQuery versi berapa saja maka arahan tersebut tidak perlu ditambahkan lagi.
• Untuk nomor 6, disana terlihat ada arahan #sidebar-wrapper h4, post h2. Kode #sidebar-wrapper h4 artinya bila judul widget sidebar blog Anda memakai heading tag H4 maka arahan itu akan bekerja. Kode .post h2 arahan ini untuk mengidentifikasi belahan judul artikel, Anda dapat menyesuaikannya apakah heading tag yang dipakai H2 atau H1.
• Anda juga masih dapat menambahkan belahan lain, contohnya judul atau nama blog dengan cara menambahkan koma dan ID atau Class dari arahan HTML judul atau nama blog Anda.
• Gunakan inspect element untuk mengetahui arahan HTML yang dipakai pada template blog Anda dengan cara klik kanan pada belahan tertentu kemudian 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, ibarat yang sudah aku katakan kalau Anda paham arahan HTML niscaya akan lebih gampang mempraktekannya.

Jika belum paham mengenai arahan HTML silahkan ikuti langkah di atas, sebab sudah aku sesuaikan dengan kebanyakan arahan template blogger yang dipakai sekarang.

Baca juga: Kumpulan Kode HTML Lengkap dengan Fungsinya

Anda juga dapat 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 dapat menerapkannya di blog, silahkan hubungi kami melalui halaman kontak, sebisa mungkin kami akan membantunya. Semoga bermanfaat, terima kasih.
Sumber http://www.caramanual.com