Shoutmeloud Thesis Theme Customization - Part 5

Save on del.icio.us Add to Technorati Digg this article! Add it on Reddit! 15 Comments

We are constantly working on our SML blogger theme and updating the same to match the original WP version created by Harsh Agarwal. In our previous article - Part 4, we explained about the link hover effect and block-quotes section while this article deals with the tag section along with the inclusion of a Numbered Page Navigation widget similar to SML. Excited to add this to your existing SML theme?

Check out the live demo of the above mentioned hacks : LIVE DEMO

BLOCK TYPE TAG/LABELS ON SML BLOGGER THEME
So, let's get started. We'll first add the tag section beneath our posts similar to SML. To do so, first navigate to "Design>>Edit HTML" and make a backup of your template by clicking on the "Download full template" link at the top of the page.
1. Once the back up is over, expand your template and search for the following block of code.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div stlye='font-family:Times New Roman; font-size:16px; font-color:#A91B33;'><br/>For Further Reading,
<div style='display:none;'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name +   &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop></div>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script></div></b:if>

2. Place the following piece of code just below the block of code mentioned in step 1.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<span style='width=100px; float:left; margin-top:3px;'>Tagged as : </span><b:loop values='data:post.labels' var='label'><span class='new-labels' style='background-color: #006699; color: #FFFFFF; line-height: 30px;     text-decoration: none; float:left; display:block; padding-left:5px; padding-right:5px; width:auto; margin-left:5px;'><a expr:href='data:label.url' rel='tag'><data:label.name/></a></span><b:if cond='data:label.isLast != &quot;true&quot;'/>
</b:loop>
</b:if>
</span>
<br/>
</b:if>

3. Next, look for the following code.

]]></b:skin>

4. Place the following piece of code ( CSS part) just above the line mentioned in step 3.

.new-labels a{
background-color: #006699;
color: #fff;
text-decoration: none;
}

5. That's it!!! Save your template.

"The block type labels or tag section will be visible only the post pages. So, check out your individual articles rather than the homepage."

PAGE NAVIGATION FOR SML BLOGGER THEME
Let's move to the next tutorial on adding the page navigation to SML blogger theme. The hack is pretty similar to the one you installed above - addition of CSS and a script to work out the coding. Just make a backup of your template as explained earlier in the post. Later, follow these steps.
1. Search for the following piece of code.

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>

2. Place the code present in this text document - SML Page Navigation Script, just below the line mentioned in step 1.
3. Search for the following code in your template and remove/delete it.

#blog-pager-newer-link{ float:left; display:inline}
#blog-pager-older-link{ float:right; display:inline; margin-right:-20px}
#blog-pager{ text-align:center; display:inline}
.blog-pager{font-size:12px}
.blog-pager a:link, .blog-pager a:visited{ display:block; float:left; padding:6px 10px; text-align:center; background:#888; color:#FFF; font-size:12px; font-weight:bold; margin-right:8px}
.blog-pager a:hover{ background:#444; color:#FFF}

4. Next, search for the following piece of code.

]]></b:skin>

5. Add the following piece of code ( CSS part) just above the line mentioned in step 4.

#blog-pager-newer-link{float:left; display:inline;}
#blog-pager-older-link{float:right; display:inline; }
#blog-pager{display:inline; text-align:center;width:632px;margin-left:200px;padding:4px 0px;margin-top:5px;margin-right:0px;margin-bottom:0px;}
.showpageArea{float:left}
.showpageOf{margin:0 8px 0 0;padding:3px 7px;color:#fff;font:15px helvetica;background:#007EC4;border-radius: 4px 4px 4px 4px; border:1px solid #007EC4;}
.showpageArea{margin:10px 0;font:15px helvetica;color:#007EC4}
.showpageNum a{font:15px helvetica;padding:3px 7px;margin:0 4px;text-decoration:none;background:#007EC4;color:#fff;border-radius: 4px 4px 4px 4px;border:1px solid #007EC4;}
.showpageNum a:hover{color:#007EC4;background:#FFF;border-radius: 4px 4px 4px 4px;border:1px solid #007EC4;}
.showpage a{font:15px helvetica;padding:3px 7px;margin:0 4px;text-decoration:none;background:#007EC4;color:#fff;border-radius: 4px 4px 4px 4px; border:1px solid #007EC4;}
.showpage a:hover{color:#007EC4;background:#fff;border-radius: 4px 4px 4px 4px; border:1px solid #007EC4;}
.showpagePoint{color:#fff;font:bold 15px helvetica;padding:2px 7px;margin:2px;border-radius: 4px 4px 4px 4px; border:2px solid #fff;background:#007EC4;text-decoration:none}

Note: You may change the font-style by changing the code highlighted in green. You may decrease or increase the border radius for rounded corners (More About Rounder Corners Using CSS3) by changing the code highlighted in orange.
6. Save your template! That's it!

Please share your opinions about the customizations which you want to have on the template as well as comment on the customizations that we post. See you soon in another interesting article!

Enjoyed the article?

Subscribe to this Blog via Email:

Click here to subscribe to FREE email updates from "Everything About Blogging", so that you do not miss out anything that can be valuable to you and your blog!

What's Next?

Save on del.icio.us
Add to Technorati
Digg this article!
Add it on Reddit!
Leave a comment

Other Recommended Posts

• Thesis, Thesis Theme Customization