Metro Modern Solar Blogger Theme

Date Released: Nov, 2012
Designer: Hong Hoa
Price: FREE

Features: SEO Ready
Metro Modern Solar template is optimized for Search engines like Google. This template helps your website to rank higher in search engines. Show a thumbnail image (small image) for every post using this template.
Width of your website adjusts to the user browser resolution. User can enjoy Full page content. Show featured posts in home page using this template. Engage your users by showing your top content in home page. Metro Modern Solar template comes with hierarchical dropdown navigation menu.

<div id=’menu-module’>
<div class=’mattblackmenu’ id=’ddtopmenubar’>
<ul>
<li><a href=’/’>Home</a></li>
<li><a href=’#’ rel=’ddsubmenu1′>Freebies</a></li>
<li><a href=’#’ rel=’ddsubmenu2′>Blogging</a> </li>
<li><a href=’#’ rel=’ddsubmenu3′>Blogger</a></li>
<li><a href=’#’>Wordpress</a></li>
<li><a href=’#’ rel=’ddsubmenu4′>Marketing Online</a></li>
<li><a href=’#’>MMO</a></li>
<li><a href=’#’ rel=’ddsubmenu5′>Others</a> </li>
<li><a href=’#’ rel=’ddsubmenu6′>Tools</a> </li>
</ul>
</div>
<!–Top Drop Down Menu 1 HTML–>
<ul class=’ddsubmenustyle’ id=’ddsubmenu1′>
<li><a href=’#’>Ebooks</a></li>
<li><a href=’#’>Wallpapers</a></li>
<li><a href=’#’>Web Gallery</a></li>
<li><a href=’#’>Others Freebies</a></li>
</ul>
………
</ul>

Edit the above code and add your navigation links

Featured Posts in Home page

This is going to be little challenging. Follow the steps below carefully.

First of all decide which Label (category) you want to use for Featured posts section. In the demo, we used a label called “hothot”. All posts from “hothot” label are displayed as Featured post.
Go to Layout, Click Edit on Feature Gadget. Make sure ONLY following options are checked in the Show section. Please uncheck if Icons and/or Date of last update is already selected (Title of most recent item and Thumbnail of most recent item)
Now, you have to add 5 blog list URLs to display 5 featured posts in the home page. Please add exactly 5 urls. I added following URLs to the blog list

http://metro-modern-solar-lovely.blogspot.com/feeds/posts/default/-/hothot?start-index=1
http://metro-modern-solar-lovely.blogspot.com/feeds/posts/default/-/hothot?start-index=2
http://metro-modern-solar-lovely.blogspot.com/feeds/posts/default/-/hothot?start-index=3
http://metro-modern-solar-lovely.blogspot.com/feeds/posts/default/-/hothot?start-index=4
http://metro-modern-solar-lovely.blogspot.com/feeds/posts/default/-/hothot?start-index=5

Here “hothot” in the url refers to the Label that you want to use. Index number refers to the recent post number to display. Do not forget to change the domain in the above urls. I used http://metro-modern-solar-lovely.blogspot.com to refer to my blog. Use your blog url instead.

Now, you are all done. You may have to wait up to 24 hours for this to work. Sometimes it work immediately.

Carousel Slider Widget

This template has a Carousel Slider widget which appears on all post pages. Configuration for this slider is in the template code. Find following code in the template xml file. Update label1 = “hot” with any label you want. We are using “hot” label posts. numposts1 = 15 represents that 15 posts will be loaded in the slider. Change this number as per your wish

showRandomImg = true;
aBold = true;
summaryPost = 140;
summaryTitle = 25;
numposts1 = 15;
label1 = “hot”;

Metro Social Widget

In Template code, Find following. Update the social links with your social links

<div class=’social’>
<span class=’fade’><ul>
<li><a href=’http://facebook.com/blogthietke’><img src=’http://2.bp.blogspot.com/-QDVCH07Xois/UTPWhsanV8I/AAAAAAAABK4/BhziRxg3KK4/s1600/Facebook+alt+1.png’/></a></li>
<li><a href=’#’><img src=’http://1.bp.blogspot.com/-bTjkcbUwcMk/UTPWhW3wtuI/AAAAAAAABLE/qsalOcpRG-0/s1600/Google++alt.png’/></a></li>
<li><a href=’http://pinterest.com/honghoavi’><img src=’http://3.bp.blogspot.com/-aCvgNwCdcTI/UTPWhx3I4qI/AAAAAAAABK8/10x2ZowT8rQ/s1600/Pinterest+alt.png’/></a></li>
<li><a href=’http://feeds.feedburner.com/blogthietke’><img src=’http://3.bp.blogspot.com/-ZaolXcz404Q/UTPWiKShvzI/AAAAAAAABLA/K5OW3Jcy4ng/s1600/RSS+Feed.png’/></a></li>
<li style=’padding:0px’><a href=’#’><img src=’http://4.bp.blogspot.com/-OHlEUI32044/UTPWihT5wbI/AAAAAAAABLM/VBu99K-pMwI/s1600/YouTube+alt+1.png’/></a></li>
</ul></span><div style=’clear: both;’/>
</div>

Pagination

This template comes out of box with pagination. First set how many posts to display per page in Settings — Posts and comments page. Here you have to update “Show at most” option to the number of posts you want to display per page. Then, go to the template code and find following. Update perPage value to the same value.

var pageNaviConf = {
perPage: 4,
numPages: 5,
firstText: "First",
lastText: "Last",
nextText: "Next",
prevText: "Prev"
}

Bottom Navigation

You can have Footer navigation links using this template. Go to Layout — Click Edit on Bottom Navi widget. Paste the following code. Ofcouse, please update the links and text with your navigation links.

<p align = “center” >
<a href = “http://www.lovelytemplates.com/wordpress-themes” > WordPress Themes
<a href = “http://www.lovelytemplates.com/blogger-templates” > Blogger Templates
<a href = “http://www.lovelytemplates.com/wordpress-themes/premium-themes” > Best Premium Themes
<a href = “http://www.lovelytemplates.com/wordpress-themes/usages/wordpress-photography-templates” > Photography WordPress themes
<a href = “http://www.lovelytemplates.com/wordpress-themes/usages/wordpress-business-templates” > Business WP Themes
<a href = “#” > Add your Link
</a></a></a></a></a></a></p>

Meta Description

This template uses Search preferences options for meta description. Go to settings — Search Preferences and enter a description for your site. This description will come as meta description for your home page. Helpful for Search engines. Also, you can add meta descriptions for every page you create in blogger. This template is completely optimized for SEO.

Navigation Menu