Making you blog stylish and attractive help you to attract visitors to visit again and again. If you continuously improve designing of your blog then readers will always want to what you are going to add something new today and they visit your blog daily.Earlier I have shared how to move sidebar comment form to page in blogger and continue to adding more here today I am sharing how to make your comment count stylish with bubble images...So don't wasting time let start this small customization in blogger template.
Do not forgot to share what you have done new in your blog design. I always use this trick for example I have written one post
Step 1. Go to your blogger “Dash Board” >> Navigate to Layout >> Edit HTML section and a give tick to “Expand widget Template”.
Step 2. Find this Code ]]></b:skin>
Step 3. Paste following code just above mentioned code.
Step 4. Find first line of below mentioned code and paste following code..mentioned in red color..
Step 5. Paste following code..
Final Step. Now click on Preview button and have a look at your post first, if every thing is correct then save template and done. Pl consider sharing this trick with friends if you liked.
How to Make your comment count stylish with bubble images
Step 1. Go to your blogger “Dash Board” >> Navigate to Layout >> Edit HTML section and a give tick to “Expand widget Template”.
Step 2. Find this Code ]]></b:skin>
Step 3. Paste following code just above mentioned code.
/*bwideges4all.com codex*/
.comment-bubble {
float : right;
width : 48px;
height : 48px;
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj34MaHAIFrutky1Hxlr_3wuio79ehGKeKxJkb3Xg69rhC1eh6v6Ae4Ba4_kmYNo8NFmPe824Ywmv8lUK3FzA9s3oxeD85cRbS8U-qYZhZcAM9sODRJQ0VsJXFbGAbiaDn_acEJhrGGVWoK/s1600/Comment+Bubble+%2815%29.png) no-repeat;
font-size : 18px;
margin-top : -15px;
margin-right : 2px;
text-align : center;
}
/*bwideges4all.com codex*/
Step 4. Find first line of below mentioned code and paste following code..mentioned in red color..
<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
Step 5. Paste following code..
<b:if cond='data:post.allowComments'><a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a></b:if>
Final code that look like this..
<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'><b:if cond='data:post.allowComments'>
<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>
</b:if>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
Final Step. Now click on Preview button and have a look at your post first, if every thing is correct then save template and done. Pl consider sharing this trick with friends if you liked.
Hi! I am K Ajay, currently live in Chandigarh, India. A young Web Designer, Pro Blogger, Graphic Designer & an addicted Web Developer. I love working on Blogger and WordPress using CSS Tricks,and Web Designing.
0 comments:
Important - Make sure to click the "Subscribe By Email" link below the comment for to be notified of follow up comments and replies.If you use Name/URL don't use keywords as your name (You Know Who You Are).
Post a Comment