Shoutmeloud Thesis Theme Customization - Part 5

Thesis-Theme-Customization
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!

    Other Recommended Posts

  • Thesis, Thesis Theme Customization
Sagar said on June 21, 2011 at 7:45 AM :

Hey thank you for the wonderful article Mukund, you have almost customized each and every page element from the thesis theme. I love the new block type tags, they look awesome below posts. I'm having a small issue with the numbered page navigation, the no. of pages get misaligned. I've copied the code properly, can't figure out the problem bro.

REPLY
Mukund said on June 21, 2011 at 10:20 AM :

@Sagar: Thanks for the comment Sagar! Well, you can always reach me via email and get your problems solved!

REPLY
Amit M B said on June 21, 2011 at 3:57 PM :

Hey nice mukund, there's absolutely no difference between this and SML theme. Keep up your good work...

REPLY
Mukund said on June 21, 2011 at 4:57 PM :

@Amit M B: Yup! To be very frank, it's more than 90% similar to SML. We are still working the remaining 10%. Hope we achieve the exact look. Thanks for your comments buddy! Keep them coming!

REPLY
Sagar said on June 23, 2011 at 9:50 AM :

Hey Mukund, I added the script to the template you sent me, it worked fine, but when I pressed the button for the second page the alignment of the numbered page navigation went hay-way. It looks fine on the homepage.

REPLY
Mukund said on June 24, 2011 at 9:52 PM :

@Sagar: Well, yes! I rechecked the coding and I have updated the posts with certain changes! Have a look at the updated post now! It should work fine!

REPLY
Sagar said on June 24, 2011 at 11:20 PM :

It Works fine, but only on the first page, on the second page the alignment gets distorted. I've sent you an email of the image after placing the updated code.

REPLY
Mukund said on June 25, 2011 at 12:10 AM :

@Sagar: Well, I did not receive any email from you Sagar! You can always reach me via gtalk. So, ping me there and we can solve this issue!

REPLY
Sam

The template is similar to that of shoutmeloud, just the featured post content widget is left, I guess :D

REPLY
Mukund said on June 26, 2011 at 2:05 PM :

@Sam: Yeah! Only few more customizations left out! Then we can have the perfect Shoutmeloud thesis theme! Thanks for the comment Sam!

REPLY
BIPUL*guru said on June 29, 2011 at 5:57 PM :

Page navigation widget code not working...only




this code is not along with it and blogger says the template cannot be parsed help me to do so

REPLY
Mukund said on June 29, 2011 at 11:23 PM :

@BIPUL*guru: Well, I guess you did not parse the coding before you paste it your template. The script which you downloaded should be parsed and pasted on your template. Then you will not find any error. Still got problems, well ping me on gtalk or email me!

REPLY
Govind Choudhary said on September 12, 2011 at 2:39 PM :

Bro..its giving this error after parsing script - The widget with id "Blog1" cannot contain element: "#text". A widget can only contain b:includable elements.how to fix this...plz help :(

REPLY
Mukund said on September 13, 2011 at 12:41 AM :

@Govind Choudhary: You never expanded your template I guess! I would be happy to help you - just contact via gmail and I'll help you out:)

REPLY
admin said on March 28, 2012 at 6:14 PM :

HELLO MUKUND I WANT TO KNOW HOW U MADE THT SLIDER PRESENT IN DEMO SITE IT ALSO HAS OPTION STOP AND START THT SLIDER AND ALSO I WANT TO KNOW HOW CONFIG THE RECENT POST

REPLY

Use the tab below to comment. No spam please!!!

[netinsert=0.0.1.11.14.1]