Logo Görünümlü Blog Başlığı

25.5.16
Logo Görünümlü Blog Başlığı

Blog sitelerinde kullanılan logoların sayfaların yüklenmesinde ve blog hızında yavaşlamalara neden olması, blog sorgu sayısında da artışların olması blog kullanıcıları düşündüren blog sorununu çözmek için blogunuzun daha sade bir logoya sahip olması blogunuza sizinle paylaştığımız aşağıdaki CSS ve JQuery kodları ile çözmek artık mümkün.

Blog başlığına logo görünümü kazandırmak için aşağıdaki adımları takip edin.

Blog Başlığına Logo Görünümü Nasıl Verilir?


1- Blogger hesabınıza giriş yapın ve blogunuzun kumanda panelinden Tema > HTML'i Düzenle tıklayın ve CTRL+F yardımıyla </style> yada ]]></b:skin> kodunu bulun ve aşağıdaki CSS kodunu </style> yada ]]></b:skin> bir satır üzerine ekleyin.

.headerword2 {
    background: #f44336;
    color: #fff;
    padding: 0 10px;
    border-radius: 2px;
}

2- CTRL+F yardımıyla </body> kodunu bulun ve aşağıdaki JQuery kodunu </body> kodunun bir satır üzerine ekleyin ve şablonu kaydedin.

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

Blog başlığı (title) zemin rengini yukarıdaki CSS kodları içerisinde belirtilen renk kodunda değişiklik yaparak blogunuzun renklerine uygun hale getirebilirsiniz.
Faydalı mı?
Blogger
Disqus
Yorum Ekle

1 yorum

Harika! Gerçekten işime yaradı, çok teşekkür ederim bu yararlı paylaşımınız için.

Cevap