Blogger Templates

Blogger Templates, Tips and Tricks. We Walk the Talk Blog.
Send me One Million FREE Guaranteed Visitors

7:55 AM

Charcoal Template - Improvement

Posted by leather leathergloves on Friday, January 23, 2009

I like to improve a few things on the Charcoal Blogger 3 columns template. My tests will reflect on http://blogger-templates-123.blogspot.com. The final version will be implemented to this blog.

©Blogging with blogger is basically 123.
  1. Add a footer widget
  2. Modify the links below the body to match Minima Black
  3. Modify body to include Google Adsense
  4. Google Adsense color scheme

I also noticed whenever I saved the html, the Google Adsense changed to the default 125 x 125 layout. I will try to find out why.


1. I have added a footer widget but not to my liking. Not full length like the title and not centered (right aligned for some reason). Also after adding the first widget, subsequent widgets cannot be seen. Investigating...


2.1 Modified HTML code to include posted dates (makes more sense).

Find these lines (Ctrl+F)

<span class="date">
<b:if cond="data:top.showAuthor">
<data:top.authorLabel/> <data:post.author/>
</b:if>
</span>

Insert line on <data:post.dateHeader/>

<span class="date">
<b:if cond="data:top.showAuthor">
<data:top.authorLabel/> <data:post.author/>
on <data:post.dateHeader/>
</b:if>
</span>


2.2 Include a QuickEdit icon.

Find this line (Ctrl+F)

...
<span class="quick-edit-icon"> </span>
...

Comment & Insert line
<img alt="" class="icon-action" height="18" src="http://www.blogger.com/img/icon18_edit_allbkg.gif" width="18"/> :


...
<!-- <span class="quick-edit-icon"> </span> -->
<!-- Added edit icon 20090202 -->
<img alt="" class="icon-action" height="18" src="http://www.blogger.com/img/icon18_edit_allbkg.gif" width="18"/>

...

Find these lines (Ctrl+F)

<b:if cond="data:post.allowComments">
<a class="comment-link" expr:href="data:post.addCommentUrl" expr:onclick="data:post.addCommentOnclick"><b:if cond="data:post.numComments == 1"><data:top.commentLabel/> (1)<b:else/><data:top.commentLabelPlural/> (<data:post.numComments/>)</b:if></a>
</b:if>

Append line <b:include data="post" name="postQuickEdit"/> directly below:

<!-- QuickEdit pencil 20092020 (Start) -->
<b:include data="post" name="postQuickEdit"/>
<!-- QuickEdit pencil 20092020 (End) -->



4. Charcoal Template Google Adsense Color Scheme (I prefer the title to be orange)





After all these implementations, I will upload it to the zip file.


Next post, I will give you a workaround for unable to save javascript.

3 comments:

Frequent Reader said...

Hello all,
While I surf blog , i found a all new trick in http://pic-memory.blogspot.com/

Vistor can comment and EMBED VIDEO YOUTUBE , IMAGE. Showed Immediately!
EX : View Source.
http://pic-memory.blogspot.com/2009/02/photos-women-latin-asian-pictu...
(add photos and videos to Blogspot comments).
Written it very smart!
I wonder how they do it ? Anyone know about this , please tell me :D
(sr for my bad english ^_^)

email: ya76oo@ya76oo.com
thanks.

leathergloves said...

My observation is that he has done something the HTML code.

If comments contains .jpg, .gif etc., then convert it to <img src="http://www.asianbite.com/HongKongImages/Joey-Yung-in-an-Armor-Dance-Suit-1.jpg" width="576" />

Similarly for videos...

leathergloves said...

Anyway, I asked the author of the blog directly.

Related Posts Plugin for WordPress, Blogger...
Copyright © 2017 Blogger Templates 123. All rights reserved.

Home | About | Contact | Privacy Policy | Disclaimer