[Blogger Tutorial] Numbering Comments

This is a question that 99.7% of new or growing bloggers ask.  Some of the more techie bloggers are able to figure this trick out for themselves.  But alas, not all of us grew up thinking that learning HTML would be a killer second language.  So here’s a tutorial to help you out!

ALWAYS BACK UP YOUR TEMPLATE BEFORE MAKING CHANGES.  I beg of you! Even if this seems easy, you have no idea how many people e-mail me saying “Help! I forgot to save my code! Look at my blog! It’s RUINED!” just because they mistyped one little thing or deleted an extra line.  Save yourself the panic attack!  Usually, I open a Word Doc and copy and paste it there.  That way, I know I have the unmarred code in a totally separate place!

 

1. Click the Design link on the Blogger Dashboard, then click Edit HTML Code
2. Make sure you click the box that says Expand Widget Templates that’s right above the text box
3. Back up your code before making changes
4. Press Ctrl + F and search for the following code:

   <b:loop values='data:post.comments' var='comment'>

5. Directly above that line, paste this:

   <!-- COMMENT NUMBER START --><<script type='text/javascript'>var CommentsCounter=0;</script></span>

6. Now, press Ctrl + F and search for this code:

   <data:commentPostedByMsg/>

7. Right below that line, paste the following code:

   <!-- COMMENT NUMBER START --> <span class='comm-num'> <a expr:href='data:comment.url' title='Comment Link'> <script type='text/javascript'> CommentsCounter=CommentsCounter+1; document.write(CommentsCounter) </script></span> </a> </span> <!-- COMMENT NUMBER END -->

8. Save and done!  To make sure it’s worked, view one of your posts that has comments, and viola! Awesome numbers hanging out on the right of every comment. Hooray!

 

As usual, feel free to comment or e-mail with questions or for help. Please keep in mind that if you’ve previously had someone work on your HTML or you have done it yourself, the coding might not be the same, so it’s even more important to save your HTML beforehand!

 

Technorati Tags: Blogger,Tutorial,Blogger Tutorial,Comments,Numbering,Blogging,Tips

Changing Image Sizes [Tutorial]

Okay, so after one of my Blogger Tutorials, a reader had a question about changing the sizes of buttons that she picked up from other blogs.  There’s no way to ensure that all buttons will be the same size without adding a bit of HTML!  This would also be helpful to make sure images fit your posts or sidebars, and keeps things the same size so they look nice and neat.

So here we go…

1. ALWAYS BACK UP CODE BEFORE CHANGING HTML! It will save you lots of potential tears.
2. Go wherever you need to to change the HTML, whether it’s a specific post, a gadget on Blogger, or the HTML of your template.
3. Find the portion of the HTML for your image.  It should look something like this: <img src=”url of image”>.
4. This next part is really easy!  All you have to do to change the size of the image is add height and width elements in by adding height=”desired height” and width=”desired width”. 

• For example, if I wanted to change my button size, which normally looks like this:

And here is the code for that:

<center><a href="http://www.cheapgeeksanonymous.blogspot.com"><img src="http://i14.photobucket.com/albums/a306/Selana46/CGA%20Stuff/CGAButton.gif" /></a></center>

 
• All I have to do to change the size is add the bolded areas:

<center><a href="http://www.cheapgeeksanonymous.blogspot.com"><img height=”100px” width=”100px” src="http://i14.photobucket.com/albums/a306/Selana46/CGA%20Stuff/CGAButton.gif" /></a></center>

And we end up with this:

 

• Save, and you’re done!

__________________________________________________________

So, to answer the original question, all you have to do to make your button page look uniform and tidy is go into the page’s HTML and change/add the height and width to a uniform size for every button.  Depending on how many buttons you have, it might be a little time-consuming, but once you get the hang of it, you’ll be done in no time.

 

Feel free to link to or share this tutorial, but please credit me!

 

If you have anything else you’d like me to create a tutorial for, don’t hesitate to ask.  I do have a few others that I have to write yet (sorry it’s taking so long!), but I do promise to get to each and every request.

[Blogger Tutorial] Changing Post Color

Ever get sick of having to change the color of your posts every time you want to post?  Here’s a quick and easy tutorial to change your Blogger template code so your posts are in the color you want!  This is a little different from changing the text color in Blogger’s “Design” tool, as that applies to the whole body, sidebars and all, and this tutorial will change the color for only your posts.

Remember to ALWAYS BACK UP YOUR TEMPLATE BEFORE CHANGING ANYTHING!  This tutorial may be easy, but deleting one little character can seriously mess up your blog!

1. Click the Design link on the Blogger Dashboard.  Then click Edit HTML Code
2. Be sure to back up the code before editing!
3. Press Ctrl + F and search for the following:

   .post

4. Now, you should see the following lines of code:

   .post {
   margin:.5cm 0 1.5cm;
   border-bottom: 1px dotted $bordercolor;
   padding-bottom: 1.5cm;

5. Just below this last line, you can easily customize the post color!  Just add the red portion below!

   .post {
   margin:.5cm 0 1.5cm;
   border-bottom: 1px dotted $bordercolor;
   padding-bottom: 1.5cm;
   color:#0000FF;
   }

6. Change the #0000FF to whatever color code you’d like (that one just happens to be blue).  Just do a search for “HTML Color Codes” to find a list of colors and the corresponding code!

7. Click Preview to see your newly colored posts!

8. Click Save to make it official!

----------------------

That’s it!  Let me know if it worked or if you had problems.  And as always, if you have suggestions for new tutorials, just let me know! I love learning this stuff, too!

[Blogger Tutorial] Creating a Label Page

When I asked my readers what they wanted me to write about, making a page that showed posts with a specific label was the first suggestion I received.  When would this come in handy?  Well, say you want all of your giveaways to show up on the Giveaway page.  Or, you have a daily/weekly post and you’d like all of them to show up on one page (sure, you could just click the label, but having a page is so much cooler!)

Well, here’s the tutorial!  Please keep in mind that I am not an expert at HTML coding, but I do test everything out before posting it. Please let me know if you have a problem!

ALWAYS BACK UP YOUR TEMPLATE BEFORE MAKING CHANGES.  Seriously, I can’t stress that enough!  Usually, I open a Word Doc and copy and paste it there.  That way, I know I have the unmarred code in a totally separate place!

Let’s begin!

• NOTE: Before you start editing, you will need the unique label link. Get it just by going to your blog and clicking on whichever label you want to make the page for, then copying the URL.

1. Click the Design link on the Blogger Dashboard, then click Edit HTML Code
2. Make sure you click the box that says Expand Widget Templates that’s right above the text box
3. Back up your code before making changes
4. Press Ctrl + F and search for the following code:
   <b:widget id='PageList1' locked='false' title='Pages' type='PageList'>
5. A few lines under this, you will see a line that only says </b:loop>
6. DIRECTLY UNDER THAT, copy and paste the following code:

   <b:if cond='data:blog.pageTitle == &quot;Title of Label Page&quot;'> 
   <li class='selected'><a href=’Label Link' title=’Label Name’>Title of Label Page</a></li> 
   <b:else/> 
   <li><a href='Label Link' title=’Label Name’>Title of Label Page</a></li> 
   </b:if>

7. Change the red parts, and make sure you don’t delete anything else!

8. Click Preview, and if you see that a new page was created with the correct title, it worked! But you might want to save and click on the tab yourself to make sure the posts show up.

9. You’re DONE! Wasn’t that easy?

• Please note that this code will make the page for you; you don’t have to make one beforehand!
• I tested out this code with the “Guest Posts” page up top.  As you can see, clicking on that tab will show you all posts that have the label “Guest Post”.  So it really works!

------------------

Please tell me if the code works, and if my directions were easy to follow.  I’ve never made a tutorial before, so all feedback helps! Also, if you want to know why this code works and what it does, I can give a very simple explanation if you ask.

Also, if you’re interested in any other tutorials (not limited to Blogger), I would love to make a weekly tutorial post, so tell me what you need to know!

P.S. Feel free to copy or link to this post!  Just PLEASE remember to give me credit! I worked hard on this!