[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

Epic Changes…Did You Notice?

I’ve made a few changes to my blog recently.  First and foremost, I have my own domain now! Instead of the annoying “cheapgeeksanonymous.blogspot.com”, my blog is now simply “http://cheapgeeksanonymous.com”.  Sweet, right?

The second change is that I now have really awesome Social Media icons! They were a free download; I didn’t make them myself, but I am going to be editing one to make an icon so you can subscribe to my e-mails by clicking on it. 

But the awesome part is you can simply click the facebook lego to go to my facebook page, the twitter lego to go to my twitter page, etc!  It’s really freakin’ awesome!

The final change I’ve made is adding a Paypal Donation button to the sidebar.  Now, I want to make it clear that I’m not expecting any of you to give me money.  The reason I added it to the blog is that I’m starting to spend money to maintain my blog now, and frankly I don’t have a lot of extra money to do so.  Right now I’m saving up for a blog makeover!

Anyway, thanks for reading, and I hope you like the changes that my blog has undergone! Leave me a comment and let me know what you think!

[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!