Hello Buddy! Today i am going to be unleashing a blogger widget which we see every now and then on premium blogger templates and we wonder how to add it to our custom template. Showing the name of the author, date post was published/Edited and the comment count below blogspot post titles help make your blog look professional.
Unique Features
Multi Author name
Date & Time working with blogger timestamp
Responsive and fully Customizable
Light weight - Does not affect the load speed of your blog
Makes use of FontAwesome
How to Show Author Name, Date/Time, Comment Count on Blogspot.
In other for you to be able to understand this tutorial, i have divided it into 5 steps. Note! Follow the steps, else it won't work for you. I have tried it on several blogs & for a quick demo, check below the post title of this post.
Login to your blogger.com account >> Locate template section >> Clink on HTML.
Step 1 - Adding FontAwesome to Blogger
FontAwesone is a huge list of web icons, that help style blog contents. It loads fast and easy to customize.
Using CTRL + F search for <head>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>
Just below the <head> tag, copy and paste the above script. Note! With out this, the icons will not show, and if you already use fontawesome icons on your blog, do not add this script.
Step 2 - Styling Post Info for blogspot blogs
Search for ]]></b:skin> using CTRL + F
.post-info{background:transparent;margin-top:5px;margin-bottom:5px;color:#fff;font-size:12px;text-align:left;padding:0;box-shadow:none}.post-info a{display:inline;background:transparent;color:#666;padding:4px 6px 4px 6px;transition:all .3s ease-out}.post-info a:hover{color:#00BE98}.author-info,.time-info,.comment-info,.label-info,.review-info{margin-right:8px!important;display:inline-block;color:#666;padding:10px}.post-info .avatar-author{float:left;border:0;padding:0;width:38px;height:38px;box-shadow:none}.timestamp-link abbr{border-bottom:none}
Copy and Paste the above CSS code just before/above ]]></b:skin>. You can customize it as you want.
Customization Tips
background: Change the color of the background
font-size: To increase the text size.
text-align; Decide the location. Whether left, center or right.
hover: text color when pointed with mouse.
Step 3 - Add Script Below Post Title in Blogger
We have successfully added FontAwesome sheet and have also styled the widget. Now lets add the actual script to make it show up. To show widgets below post title in blogger, we have to find the post header line of code.
<div class='post-info'>Copy and Paste the above script just below the second <div class='post-header'> in your template.
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/" + data:post.id + "?alt=json-in-script&amp;callback=av"'/>
</b:if>
<b:if cond='data:top.showAuthor'>
<b:if cond='data:post.authorProfileUrl'>
<span class='author-info'>
<i class='fa fa-user'/>
<span class='vcard' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<span class='fn'>
<a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
<span itemprop='name'><data:post.author/></span>
</a>
</span>
</span>
</span>
<b:else/>
<span class='author-info'>
<i class='fa fa-user'/>
<span class='fn'>
<span itemprop='name'><data:post.author/></span>
</span>
</span>
</b:if>
</b:if>
<b:if cond='data:top.showTimestamp'>
<b:if cond='data:post.url'>
<span class='time-info'>
<i class='fa fa-clock-o'/> <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published updated timeago' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
</span>
</b:if>
</b:if>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:post.allowComments'>
<span class='comment-info'>
<i class='fa fa-comments-o'/> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'> <b:if cond='data:post.numComments == 0'> Add Comment </b:if> <b:if cond='data:post.numComments == 1'>1 Comment</b:if><b:if cond='data:post.numComments > 1'><data:post.numComments/> Comments</b:if>
</a>
</span>
</b:if>
</b:if>
</b:if>
<b:include data='post' name='postQuickEdit'/>
</div>
Step 4 - Remove formal code
In other to make the author name, date/time, comment count show only below post titles we have to remove some line of codes.Simply use CTRL+ F to find <span class='post-author vcard'>, You will see lines of code similar to the one below.
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<b:if cond='data:post.authorProfileUrl'>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
<a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
<span itemprop='name'><data:post.author/></span>
</a>
</span>
<b:else/>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<span itemprop='name'><data:post.author/></span>
</span>
</b:if>
</b:if>
</span>
<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<meta expr:content='data:post.url.canonical' itemprop='url'/>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span>
Delete all occurrence of this. Now save your template.
Step 5
Now go to your layout, and locate your blog widget. Activate "Posted by", "at" (time) and you all done.Happy Coding!.
Mobile Binary Code
ReplyDeleteYou are either on a diet or do not wish to gain any more weight or any weight at all. Your choice is to ask for diet drinks with no calories containing artificial sweeteners, but are they the right choice? Read on to find out about the right choices for you.
http://binarymetabot.com/boombets-review/
It is worth understanding that you might want to avoid buying gloves for sparring as the coach will often want to assess their suitability to be used in his or her boxing ring. On a number of occasions I've had to disappoint boxers by Survive The End Days Review refusing to allow them to wear their freshly imported and eye-wateringly expensive gloves for sparring because of the lack of padding in the knuckle area. A boxing coach's primary responsibility is to the safety of the boxers, so they will not mind at all leaving you with a very, very expensive pair of bag gloves rather than allow those gloves into their sparring ring where the risk of injury to one of his or her boxers will increase.
ReplyDeletehttp://survivingthefinalbubblebookreview.com/
Regular mineral makeup in powder form is easy to apply with a wide brush and loose powder, you use a swirling motion to evenly brush the powder across your face. The look is iridescent and long lasting. If you are sensitive to regular makeup, mineral makeup just might be a good change of pace for Forskolin Ultra Trim 350 you.If you have dry skin, are concerned about wrinkles and fine lines, a liquid mineral makeup might be a better formula for you. I have also read that some mineral makeups have a calming effect on the skin, and are wonderful for skin conditions like acne or rosacea. It's good for cover up too because it won't irritate the skin as much. You can trust that this type of makeup will protect you from the sun's rays too. Generally mineral makeup has a minimum SPF factor of 15. You will want to double check your makeup bottle for this information.
ReplyDeletehttp://autobinarysignalssoftwarereviews.com/garcinia-cambogia-pure-extract-review/