Change and Edit Multiple Labels

The situation is that when we start
writing posts, we assign different
words as labels to our posts. As we had
mentioned in Technorati Tags in
Blogger Posts, such labels are tagged
by Technorati and other third party
sites and your posts appear in their
tag search results. It is therefore good
to assign the relevant keywords or
labels that can best describe your
posts. Over time, after publishing
several posts, you may realize that
some of the labels are not appropriate,
or you may simply want to streamline
the words to make them consistent.
Instead of editing each individual post,
you can click the Manage Posts link on
the Blogger Dashboard or go to
Posting -> Edit Posts. Click the label on
the left panel and you will see a list of
all the posts containing that label.
Against these posts are check-boxes.
Click all the posts that you want to
change. The dropdown menu titled
"Label Actions" allows you to insert
labels or create "New Label" for the
posts that you have ticked. Once
applied, the new labels will be added
to the posts.
The menu option also includes
"Remove Label". To change the
published post label to something else,
remove the existing label and add a
new label to the posts. Refresh the
blog to view the change in the Post
Labels.
©trick-to-blog comment and share

Read more »

Unable to Remove Or Add Header Image

Uploading Header Image
For those who have yet to put images
into their Headers, read this how-to
guide on Adding a Background Image
into the Blogger Header. This Blogger
feature allows you to have the image
as a backdrop to the Title and
Description, or as a replacement to
both the Title and Description. If you
choose the latter, only the image will
be seen and the Title and Description
are hidden from view.
Removing Header Image
To remove or substitute the image, all
you need to do is to go back to the
Header page element via Template ->
Page Elements and click the "Edit" link
at the bottom right corner. Remove the
picture and save.
If, for whatever reason the image
cannot be removed, a solution is to
remove the Header altogether. As per
our article Add Page Element to
Blogger Header, go to Template -> Edit
HTML and scroll to these lines:-
<div id='header-wrapper'>
<b:section class='header'
id='header' maxwidgets=' 1'
showaddelement='no'>
<b:widget id='Header1'
locked=' true' title='(Header)'
type='Header'/>
</b:section>
</div>
Change them to these and save the
template:-
<div id='header-wrapper'>
<b:section class='header'
id='header' maxwidgets=' 3'
showaddelement='yes'>
<b:widget id='Header1'
locked=' false' title='(Header)'
type='Header'/>
</b:section>
</div>
Go to Template -> Page Elements and
you should now see the option to Add
a Page Element in the Header and be
able to remove the Header. Click the
"Edit" link in the Header, select
"Remove Page Element". The Header
together with the image will disappear.
Next, reinstate the Header by clicking
"Add a Page Element" at the Header
area. Near the bottom of the list is the
"Page Header" element. (You are
entitled to have one Page Header. The
previous Header has to be removed
before you can add a new one.) Enter
the Title and Description and upload
your new picture if you'd like. Save
when done. You should see a new
Header and/or Header image.
©trick-to-blog Comment and share

Read more »

Change Post a Comment Link

At the bottom of every article, you will
see the Comments posted by readers
(that is if you have configured the blog
to Show comments and not Hide
comments) as well as a " Post a
Comment" link. This is a default
message. To change the words "Post a
Comment" and rename or customize
them to a message that suits your
blog, we can modify the template
code.
First, backup your template. Go to
Template -> Edit HTML. Click the
"Download Full Template" link to save
a copy of your template.
Next, click the check-box next to
"Expand Widget Templates". Ctrl+F
and search for these lines:-
<p class='comment-footer'>
<a
expr:href='data:post.addCommentUrl'
expr:onclick='data:post.
addCommentOnclick'> <data:
postCommentMsg/></a>
</p>
Replace the portion (in red) with words
of your choice. For example, you can
call it "Share your views" and change
the code to this:-
<p class='comment-footer'>
<a
expr:href='data:post.addCommentUrl'
expr:onclick='data:post.
addCommentOnclick'> Share your
views</a>
</p>
Save your template. Refresh the Blog.
When you click on any of your articles,
this is what you will see at the footer of
that article:-
If you want to change the author
comment styles to distinguish the blog
author's comments from the rest, have
a look at the tutorial Author Comments
- Different Styles.
©trick-to-blog comment and share

Read more »

Separator Line between Each Comment on Blogger

the
readers' comments after each Blogger
post come one after the other without
a line separating each comment. If
your post has numerous comments, it
is difficult even for readers to locate
their own comments. A solution to this
is to add a divider or a separator line
after each comment so that readers
can easily see where the comment
starts and ends. We had explained in
our article Author Comments - Different
Styles how blog owners can make their
own comments different and stand out
from the rest. Here, we shall let you
know how to insert a divider or
underline after each comment to
separate the various comments.
Login and go to Template -> Edit
HTML. Scroll through the template to
locate this:-
#comments-block .comment-footer
{
In templates other than the Minima
template, you may see this instead:-
.comment-footer {
Insert under that the following line:-
border-bottom:1px dotted
$bordercolor;
This adds a thin line at the bottom of
each comment. You can have a thicker
line with a different color. Just change
the above code to this:-
border-bottom:2px solid #736AFF;
For more variations and ideas on how
to customize this separator line, take a
look at Add or Remove Borders in CSS
Templates.
Finally, if the line is too close to the
end of the comments, you can add a
little spacing between the comments
and the separator line. Either insert
this extra padding code, or if it already
exists, adjust the values. Save the
template, click any article to view the
comments and go back to change the
padding values if necessary.
padding:0 0 1px 0;
The first value is for the top spacing,
the second is for the right, the third is
for the bottom, and the fourth is for
the left. In our example, we have
added a 1px spacing at the bottom of
the comments footer.
©trick-to-blog comment and share

Read more »

Add Scrollbars to Blog Posts

Scrollbars to Blog Post body
As we had mentioned in our article, to
have the scrollbars to each of the blog
posts, once you are logged into
Blogger account, go to Template ->
Edit HTML and scroll to this code. Add
the portion shown in red:-
.post {
height:200px;
overflow:auto;
}
This will give you scrollbars to every
post:-
Scrollbars within Blog Post
Sometimes, you may not want to have
the scrollbars to all the blog posts, but
only for several paragraphs within a
post. Assuming you are writing an
article and you wish to enclose some
long text within a scrollbox, you have
to first define a class within the
stylesheet.
For example, we can insert in the
stylesheet this code to specify the
maximum height and width of the
scrollbox. Once the text overflows this
setting, scrollbars will automatically
appear:-
.scrollbox {
height:100px;
width:400px;
overflow:auto;
}
Save the template. Next, when you are
writing a post, switch from the
"Compose" mode to the "Edit HTML"
mode.
Add these tags (shown in red) before
and after the part of the text that you
want to enclose within the scrollbox.
<div class="scrollbox">TEXT TO BE
INCLUDED IN THE SCROLLBOX.</
div>
You can continue typing the post by
switching back to the "Compose"
mode.
After you are done, when you publish
your post, you will see that only the
part of the text comprised with the
tags will be in a scrollbox, like this:-
Adjust the size of the scrollbox in the
stylesheet accordingly. You can also
consider having a HTML text box to
enclose certain text.
© trick-to-blog comment and share

Read more »

How To Remove Label Number Count In Blogger

By default, the Labels Widget that can
be added into your Blog through
Template -> Page Element -> Add a
Page Element will have an automatic
count of the number of posts bearing
that label tag.
If you don't like to see the count, or you
want to change the brackets to square
brackets or something else, you can
edit the template code. Before any
change, remember to back up your
template. Go to Template -> Edit HTML
and save a copy of your existing
template by clicking the "Download Full
Template" link. Next, check the
"Expand Widgets Template" box.
We assume you already have a Labels
widget in your Blog. Our task is to
locate this widget in the template. If
your Labels widget has a title, it is
easy. Simply search (using Ctrl-F in
most browsers) for the title. Every label
widget is assigned an ID such as
id='Label1' or id='Label2' and so on. If
you don't have a title for your Labels
widget, search for these IDs. Another
method which we strongly recommend
is for you to enter a temporary title into
that Labels widget and search for that
title. You can always remove the title
after you have amended the template.
The part of the template that defines
your Labels widget will look like this:-
<b:widget id='Label1'
locked='false' title=''
type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels'
var='label'>
<li>
<b:if cond='data:blog.url ==
data:label.url'>
<data:label.name/>
<b:else/>
<a
expr:href='data:label.url'><data:label
.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
If you don't want the number count to
appear after the Labels, delete the
portion in red.
Should you want a square bracket,
change the portion in red to:-
[<data:label.count/>]
If you want a hyphen followed by the
number, change the red line to:-
-<data:label.count/>
Preview the Template. If this is what
you want, save the Template and
refresh the Blog page.
© trick-to-bolg comment ans share

Read more »