There is a lot of competition in the world of blogging and it has largely increased in the past year and it is expected that the it will increase in this year as well. All bloggers try to design their blog in a unique style and wants to make their blog stylish and provide as many details as possible to their readers. Many people design their blog well but forgot to look at minor things like Author name, Author bio, date and time of the post and labels etc. but they dont know these little things matter a lot. So, today I am showing you that How to Add Author, Date And Labels With Icons Below Post Titles in Blogger.
Why to Add Author, Date And Labels With Icons Below Post Titles in Blogger?
Adding Author name, date and labels give a professional look to your blog. Each and every visitors counts everyone knows that well. As now there is a though competition among blogger so try to add plus points to your blog. Author name, date and labels especially with icons can give your blog some extra professional look.
How to Add Author, Date And Labels With Icons Below Post Titles in Blogger
1. Backup your template first.
2. Go to Blogger Dashboard >> Template >> Edit HTML.
3. Check the expand widget Box.
4. Now find <div class='post-header-line-1'> in your template and place the following code just below it.
<font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmzOX5rpdGtuiS2gCaDI5PoOr4pQiUJyuUkalGJNu2JxhcI5E2sBzj7SbHLAbXWDvSxBSk6-n72fwpsZ0NVpL2A8FWt_Vitm0MyIGGWa8FSueuJPAhKoDxH4q5gtgR6s8Spmrq8NqvhmI/s1600/author.png) no-repeat scroll top left;padding-left:25px;font-size:11px;'><data:post.author/></font> | <font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhToGoxO39Gfi2FvROUqzISh1IheQYbmrf_iaNPZg2_KoGK8KRJny4p7tlUv95TahcTTQr1IEDXzuGKsvCrTtmBbgVtm77Js3X1RJyhiHQiHNHiM3FMfh6XMdm3wxuC77cngotnXzefrUM/s1600/calendar.gif) no-repeat scroll top left;padding-left:25px;font-size:11px;'><data:post.timestamp/></font> | <font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhTXFrcneGS1YDAWr9KEyIkw3zx4Q13jQE6AkQ0AwRcdw5tDvt4IJm0PkgFK5AMcX6HPlxwoekw3dDrlwgwoTtqTNsSIae76ag3TKVUdKRX7gDu7G_JQ6OYdBKwIvAC64fhe74w6NdYUM/s1600/icon_tags.png) no-repeat scroll top left;padding-left:25px;font-size:11px;'><b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url + "?max-results=8"' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != "true"'>|</b:if>
</b:loop>
</b:if></font><a href='http://www.bloggiks.com'><img alt='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcS_VZ4ie7Dh3qej1jYmxIJHi_865ezDCxvBde-y8e5luu-SPDtfflIhm0fOwh-k58lDDOkR724EqSUPIq_b13cS7lKhrFJSthJdPTHLwYbDxbF11QLdYdPp0akooSH9Ebo3Y29qGIMJZj/s1600/best+blogger+tips.png'/></a>
5. Now if you want to change the icons of author, calender and labels then just change the colored URLs in the above code with your image URLs.
6. After making changes save your template and check your Blog.
تم النشر يوم
الثلاثاء، 3 سبتمبر 2013 ' الساعة
ليست هناك تعليقات:
إرسال تعليق