Showing posts with label BLOGGER HELP. Show all posts

How to Highlight Author Comments in Blogger Posts

How to Add CSS Styling to Author Comments in a Blogger Post
The following instructions will highlight author comments in the comments section of a Blogger post. The code creates a shaded box around the comments made by the blog author. These changes will not affect the CSS the styling of any of the other comments made.

Instructions to Add CSS Highlighting to Author Comments in Blogger

Login to Blogger
From the Dashboard go to Design > Edit HTML
Back up your template by downloading it to your computer
Check the Expand Widget Templates checkbox on the top righthand side
Use CTRL + F by entering the following into the search box

<dd class='comment-body'>
Immediately above this line paste the following code:

<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<data:comment.body/>
</dd>
<b:else/>
Now look for this code block

<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<data:comment.body/>
<b:else/>
<data:comment.body/>
</b:if>
</dd>

and paste </b:if> immediately after it.
Your code will now look like this:

<div expr:id='data:widget.instanceId + "_comments-block-wrapper"'>
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>

<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<data:comment.body/>
</dd>
<b:else/>

<dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<b:if cond='data:comment.isDeleted'>
<data:comment.body/>
<b:else/>

<data:comment.body/>

</b:if>
</dd>

</b:if>

</dd>
<dd class='comment-footer'>

<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>

</dd>
</b:loop>
</dl>
</div>
Now using CTRL + F again find this line ]]></b:skin>
Paste the following immediately before ]]></b:skin>

.comment-body-author {
background: #f5deb3;
border: 2px solid #de7008;
padding: 5px;
}
Save your template changes
Click on View Blog and go to a post that you have commented on to see the CSS styling has highlighted your comments

Add or Change Background Image of a Blogger Template

How to Change the Color of a Blogger Background (Default Templates)
If you are using a default Blogger template then you already have the option to change the background color to your own taste by going toLayout > Fonts and Colors. Some third party custom Blogger templates have this option too but by no means all. For instructions on changing the background color of custom templates see tips and troubleshooting below.

How to Add a Background Image to a Blogger Template

Log in to Blogger if not already logged in
Go to Layout > Edit HTML
Back up your Blogger template as a precaution by downloading the full template to your computer
Find the following line in your Blogger template

body {
Add the following line directly after this line

background-image: url(URL address of your image);

Your block of code will now look like this:

body {
background-image: url(URL address of your image);
(existing code in this block)
}
Now replace the code in red for the URL address of your image. Choose an image from the selection below to practise with or use your own image. Note if using your own image make sure you read the tips and troubleshooting section below.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFuDUYvgdEPbvA63K9xqg9KtZmgUBYnrZHc_hMril4kCyq57bsEchRFQMdLfrmHUsY9cNoz1AeN37eZr2LfjWWY4in1SPe2TU5-Pz-xWVP1lLwIOS3aaFHfxMCLqLL-qFSx-OEWzHhe1Y/s320/background_047.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbPFPJpDfHN5gaDZtQ0dl3Tova2JJIHyo1m2lVIzIPgLztzyHPImdXH-A_LL5_NFhtg2SpN0uIbq_88V-q9mQNV9O9zjiBbwu5_jX2ATLqpAiR3KnuJ8xqJib0a0E2h3oSsUGD_dV-yzI/s320/background_104.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7cN24htPg8jLEIudP1EFjIhLBxSaYA52HjnBcfWb4ZRQOjWS8UWGF5epnW_IbDZkol7tO6kJ2uwBUWpBCWH5AbOMhuN6eSyK0qfvwCCMle3-gCA3tCsGjdv6nkj1xerk5ZsusJpEj43Q/s320/background_126.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7eUY_NzET7_NTk1A3nZgNYsv7niA325Ifr7cFpWEV6-QO6BYsE3DBXPJ-5Inh6F2SFoU41Mwc-heoKRuFcsPw9VClj4Jhys11GYCYgoohKLU0JuQaIkuYBk8CDOnWb_QW3vqosM7UzGg/s320/background_073.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1IIfOnt0WIoB-ui383oGWFlirnn6aXsjJB9vSrm1reFtNGz5uLdlu362C1BDsMbosPsqJxJ8-HXXv-LR-NGJ0iRf8hcJXxUsOZsUzWBm8HfUsCwjBW-o0OkZ2R_6hs4wY8VmbHHIEZ1g/s320/background_083.gif

Green Paws Background

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN0MtBv3Qyqg9h4-tLK3keFUcK15q4m9rIUXWvG69zbqLFBOzOmgIw6-Yy_pOOQzKPAz0YRziUO2FVXS6a82mUGNx31Lu3IoQyYTeUT9FlU3_AoM2uPFUmUJFLKW3iUVQRLEDy1446Dx4/s320/green-paws.gif

Musical Notes Background

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM4YV6F2fX0Gzhag-YDfWjZP05z3lTVJ3ZFGaeJ4opnY9wedthSgd6dq2IJcUNH3WSM_OeQPbWtkmYGXzjlkVcUvxbXJWivT5lnQKfvTH85ck8u0uDev6QYLKFqQ8EcG879nfuuJ6vqyw/s320/melody.gif
Use the Preview button to see the effect of these different backgrounds on your template. It will help you get an idea of the kind of possibilities out there.
You are welcome to use one of the above Blogger backgrounds as they are all free to use without any restriction. If you decide to use one of these simply click on Save Template and you are in business. Alternatively go ahead and find your own background image on the net and follow the instructions below to insert it into your Blogger template.
<a href="http://www.diyodp.com/">Free Directory Submission</a>

Add a Post Divider Between Blogger Posts

This tweak is very easy and well within the capabilities of any Blogspot blogger. Only a few simple changes to your Blogger template are required and these are in the CSS styling section.

How to add a post divider between posts in Blogger

By way of example I will use a divider that I downloaded from the internet free by searching for free divider graphics. Here are some sample dividers you can use to get started:

URL address:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz08XtblVthwuf5Bg1MnmHRsjxyiB_NuEXzL_EtpTtPX3d2LF-oaATvltXLp2uce_G7AZDVIZsvcKwH4scR7Z1WoNUemaY8eR1sHjK77PIpo2WAjhPTXozYy2bY0gVyx7N1HmeX9wyJTQ/s400/ribbon.gif

URL address:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc4OVmiWOcX7MdSFHhIukkxhAHbZL3l6bnakiy-t0H3_AZZ040Gl5-VzFFU8OB7zt5X_UXBTbch_3iRriRJ_VZ99iSl1eGwkGF-dmflA6vvj2fn-mm8JmY6C2ZZQeaKymlIbjN3tvou3A/s400/bar1.gif

URL address:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG3aV2Z_fo5GFJTNulqmorVHz98S5R8Cb9Bzn3RwqpGC5JYTjfUsVpGz_z24BR49P-DEckbFvOd9TuTmEOqKXikEEpSWALxCxZ5kddANm6LXlEDkdXNkkC6-UOgvjK3vWKQrYlLW0TdBI/s400/barbsmpl.jpg

URL address:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGRmv-xYaU99au8Zi7p1ZngxcHgVmv_8uKE3S5wh7CRSI4QplzaXob0YemiffT9sG9E5NWpsxHNhWoBYq6F6OvRgEhIXciMMSSv1dya2ox3Wlt6dz3zohe3I3djtQX0Z2UBwoe_RUC-_Y/s400/bar47.gif

How to Add a Divider Between Posts in Blogger

Login to Blogger if not already logged in
From the Dashboard navigate to Layout > Edit HTML
Back up your Blogger template as a precaution by downloading it to your computer
Find the following line of code in your template:

.post {

You are likely to have something like this in your template already:

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}
Paste the following lines of code to this block making sure you paste them before the closing curly bracket:

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz08XtblVthwuf5Bg1MnmHRsjxyiB_NuEXzL_EtpTtPX3d2LF-oaATvltXLp2uce_G7AZDVIZsvcKwH4scR7Z1WoNUemaY8eR1sHjK77PIpo2WAjhPTXozYy2bY0gVyx7N1HmeX9wyJTQ/s400/ribbon.gif);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
padding-bottom:1.5em;
If any lines are duplicated remove them.
Remove any line beginning with: border-bottom: eg

border-bottom:1px dotted $bordercolor;
You will now have a block of code which looks like this plus any extra lines from the existing code in this block:

.post {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz08XtblVthwuf5Bg1MnmHRsjxyiB_NuEXzL_EtpTtPX3d2LF-oaATvltXLp2uce_G7AZDVIZsvcKwH4scR7Z1WoNUemaY8eR1sHjK77PIpo2WAjhPTXozYy2bY0gVyx7N1HmeX9wyJTQ/s400/ribbon.gif);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
padding-bottom:1.5em;
}
Click on Save Template to save your changes
Click on View Blog to see your new post divider between posts

How to Align and Justify Blogger Posts

How to Justify Blogger Posts (Blogspot Posts) Using CSS
It is easy to change the text alignment of your Blogger posts with the addition of one extra line in the CSS styling section of your Blogger template (Blogspot template). By default the alignment is set to left align so that the text aligns to the left while the right edge is ragged. You can also have right alignment where the text aligns to the right and the left edge is ragged.

Another not so common option is to justify the text so that both left and right edges are straight. Users of MS Word and other word processing programs will be familiar with justify as an alignment choice. Justify stretches out the text so that each line has an equal width similar to what you will find in newspapers and magazines. I have found justifying my Blogger posts to be a useful feature on several of my blogs and thought some of you might to. Below are instructions on how to justify your Blogger posts so that all your blog's articles are justified but first take a look at the difference in presentation of these 2 blog posts just by justifying the alignment of the text. Makes a big difference don't you think?

Before you start check how text is currently aligned on your Blogger posts. If it is left aligned you will be able to follow this trick to justify it. If it is already justified no need to go any further.
Login to Blogger if not already logged in
From the Dashboard click the Layout link for your blog and then click on Edit HTML
Back up your template by downloading it in full as a precaution
Use CTRL + F to find the code block beginning with .post in the CSS styling section of your Blogger template. As templates will differ greatly there are no hard and fast rules about what styling will be in this block. Here is a typical code block taken from the default Minima Blogger template

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}
Add the following line to the code block before the end brace (the end curly bracket)

text-align:justify;

so that your code now looks like:

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
text-align:justify;
}
Click on Save Template
Click View Blog to see the alignment of all your posts has now changed to justified

Blogger Post Image Borders Change or Remove

How to Delete, Remove, Get Rid of the Image Border in Blogger Posts
The following instructions will remove the little border around the images in your Blogger posts.

Login into Blogger if not already logged in
From the Dashboard navigate to your blog. Go to Design > Edit HTML by clicking on the Design tab and then choosing the Edit HTML link
Back up your existing Blogger template by clicking on theDownload Full Template button
Find the following code in your Blogger template (no need to check the Expand Widgets Template box as we are only working with the CSS Style Sheet). Note: the code in Blogger templates varies but this is the code you will find on a Blogger Minima template and most other default Blogger templates.

.post img {
padding:4px;
border:1px solid $bordercolor;
}

If you do not have this code look for the following:

img{
padding: 4px;
border:1px solid $bordercolor;
}
There are two ways to get rid of the unwanted border image code. You can either:
- Remove the following line:
  
  border:1px solid $bordercolor;
  or
- Change it to the following
  
  border:0px;
Click on the Save Template button
Click View Blog to admire your post images minus any image border.

How to Change the Color of the Image Border Around Posts in a Blogger Template
The following instructions will show you how to change the color of the border which appears around images in your Blogger posts

Follow Steps 1 to 4 as per removing the image border from Blogger posts.
There are several methods to change the color of the image border but the easiest is to
- Change the following line:
  
  border:1px solid $bordercolor;
  
  to
  
  border:1px solid #6698FF;
  
  The above change will make the border line color sky blue. To change the color (in red) to your own color choice replace with the hex color code for your chosen color
Click the Save Template button to save your changes
Click on View Blog to admire the new color around the images in your Blogger posts

how to center date header and change font size

"Do you know how centre the date?????"

Open the template editor by going to Dashboard > Layout > Edit HTML and look for these codes:

/* Posts
-----------------------------------------------
*/
h2.date-header {
margin:1.5em 0 .5em;
}

and change it to

/* Posts
-----------------------------------------------
*/
h2.date-header {
margin:1.5em 0 .5em;
text-align:center;
}

and if you also want to change the font size, add this line - font-size:200% or font-size:12px; or whatever values you wish, so that the codes become

/* Posts
-----------------------------------------------
*/
h2.date-header {
margin:1.5em 0 .5em;
text-align:center;
font-size:200%;
}

I-O-M