Cara Membuat Judul Blog Menjadi Dua Warna Tanpa JavaScript - Blogger Bandung

Cara Membuat Judul Blog Menjadi Dua Warna Tanpa JavaScript Tanpa Gambar.

JUDUL blog bisa dibuat dua warna, jika nama blognya terdiri dari dua kata seperti Blogger Bandung.

Cara membuat nama blog dua warna yang termudah memang dengan menggunakan CorelDraw, PhotoShop, atau dengan membuat logo gambar.

Namun, jika pake gambar logo (image), maka kemungkinan blog tambah berat, bisa juga skor seonya berkurang jika tidak diatasi di kode title blognya dengan penambahan Heading tag H1.

Tips berikut ini Cara Membuat Judul Blog Menjadi Dua Warna Tanpa JavasScript dan tanpa gambar logo. Murni teks dan murni kode CSS sehingga fast loading.

Cara Membuat Judul Blog Menjadi Dua Warna

Langsung saya ke Cara Membuat Judul Blog Menjadi Dua Warna Tanpa JavasScript sebagai berikut.

1. Tema > Edit HTML
2. Cari Kode <data:title/> seperti kode di bawah ini:

 <a expr:href='data:blog.homepageUrl' expr:title='data:title' itemprop='url'>
<span itemprop='name'>
<data:title/>
</span></a>

atau

<b:includable id='title'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <data:title/>
  <b:else/>
    <a expr:href='data:blog.homepageUrl'><data:title/></a>
  </b:if>
</b:includable>

3. Ganti kode <data:title/> dengan kode seperti in:

<span style='color:#KODE WARNA'>NAMA</span><span style='color:#KODE WARNA'>BLOG</span>

Di blog ini, hasilnya di sumber kode seperti ini:

 <a expr:href='data:blog.homepageUrl' expr:title='data:title' itemprop='url'>
<span itemprop='name'>
<span style='color:#KODE WARNA'>NAMA</span><span style='color:#KODE WARNA'>BLOG</span>
</span></a>

Itu dia Cara Membuat Judul Blog Menjadi Dua Warna Tanpa JavasScript.

Nama Blog Dua Warna dengan Mengunakan JavaScript

Jika Cara Membuat Judul Blog Menjadi Dua Warna Tanpa JavaScript dirasa sulit, silakan gunakan cara berikut ini (menggunakan javascript).

Kode CSS
Simpan di atas kode ]]></b:skin>

.secondWord{color:#4aa3df;transition:all .3s}.secondWord:hover,#header .title a:hover span{color:#222;}

Kode JavaScript
Simpan di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
$("h1.title a,h2.title a").each(function(){var t=$(this).text().split(" ");t.length<2||(t[1]='<span class="secondWord">'+t[1]+"</span>",$(this).html(t.join(" ")))});
//]]>
</script>

Cara Lainnya:

1. Copas kode CSS berikut ini di atas kode ]]</b:skin>

.headerword2{color: #48d;} 

2. Copy kode Javascript di bawah di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
(function($) {
//ubah widget title
$('.title,.widget-title')
.each(function() {
var me = jQuery(this);
me.html(me.html()
.replace(/^(\w+)/, '<span>$1</span>'));
});
$('h1.title').each(function(){
var text = $(this).text().split(' ');
if(text.length < 2)
return;
text[0] = '<span class="headerword2">
<span class="headerword">'+text[0]+'</span></span>';
$(this).html( text.join(' ') );
});
})(jQuery);
//]]>
</script>

3. Save!

Itu dia Cara Membuat Judul Blog Dua Warna Tanpa JavaScript dan dengan JavaScript. (bloggerbandung.net).*