Metro Modern Solar

Love this
  • Layout
  • 2 Column with Right Sidebar
  • Colors
  • Metro Modern Solar template color schemes:
About this template
  • Date Released:   Nov, 2012
  • Designer:   Hong Hoa
  • Price:   FREE
  • Creative Commons Attribution: You are free to use for personal/commercial use. But, you must attribute the work to the author. Should not remove credit links.
  • Downloads:   3715
  • Demo views:   7933
  • 20 people love this template
Shortlist this Blogger template
Lovely Template Editor's Choice award winning template
Design Features
  • Fluid Width
  • Width of your website adjusts to the user browser resolution. User can enjoy Full page content
  • Post Thumbnails
  • Show a thumbnail image (small image) for every post using this template
  • Featured Post
  • Show featured posts in home page using this template. Engage your users by showing your top content in home page
  • Hierarchical Menu
  • Metro Modern Solar template comes with hierarchical dropdown navigation menu.
Customization Features
  • HTML Menu
  • Navigation menu for this template is customizable in HTML. Edit the HTML to add your menu links
  • Widget Ready
  • Metro Modern Solar template comes with many widgetized area. Add your widgets easily using this template
More 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
  • Related Posts
  • Metro Modern Solar template shows related posts in the bottom of every post. This improves user engagement of your site
  • Ad Ready
  • Use this template to show Banner advertisement or Google ads easily. Make money using your site
  • RSS Buttons
  • Metro Modern Solar template comes with RSS Buttons. Let your user follow you using your RSS feed
  • Social Buttons
  • This template comes with social buttons like facebook, twitter etc., Let your users share your content easily
  • Search box
  • Metro Modern Solar template has search box in it. Search box helps your user to find the content easily on your site
  • Pagination
  • Pagination links helps users to navigate easily to your older posts. Users can click easy to use buttons to go to Page 2, Page 3 etc.,

Navigation Menu

Open Metro Modern Solar template.xml file in a text editor like notepad for following changes. Find following code in the template. Update the links and text for your navigation menu

<div id='menu-module'>
<div class='mattblackmenu' id='ddtopmenubar'>
<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>
<!--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>


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.

1) 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.

2) 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
  • Thumbnail of most recent item
3) 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

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 to refer to my blog. Use your blog url instead.

4) 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=''><img src=''/></a></li>
<li><a href='#'><img src=''/></a></li>
<li><a href=''><img src=''/></a></li>
<li><a href=''><img src=''/></a></li>
<li style='padding:0px'><a href='#'><img src=''/></a></li>
</ul></span><div style='clear: both;'/>


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: &quot;First&quot;,
lastText: &quot;Last&quot;,
nextText: &quot;Next&quot;,
prevText: &quot;Prev&quot;

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 = "" > WordPress Themes
<a href = "" > Blogger Templates
<a href = "" > Best Premium Themes
<a href = "" > Photography WordPress themes
<a href = "" > Business WP Themes
<a href = "#" > Add your Link

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.

Layout for Metro Modern Solar Blogger Template

  • Ness


    There's a problem with the thumbnail size. When i post pics hosted on external source like photobucket, it became out of proportion on the homepage. You can see it in my blog here:-

    • lovelytemplates

      You made your blog private. I am not able to see your blog. Anyway, I know the reason for your problem. This template requires images to be hosted in your Blogger blog itself. Actually, it is a good idea to move your images from photobucket to Blogger itself. If you started to get more traffic then photobucket will disable your account. Instead you just upload your images to Blogger and use that.

  • Ness


    I didn't realise that it was private. Sry about that. I have temporarily set it to public. The problem is I wanna use this template on my actual blog & I have about 1000+ posts.It would be tiresome to edit the post one by one. Can you advise me on this? or i'll need to find another template? thanks:)

    • lovelytemplates

      First of all, read the answer to this question here –

      Blogger decides which image to use as thumbnail. Sometimes it won't pick any of your images if your images are hosted in third party sites. Sometimes it won't pick images if your image size is too big or too small.

      If you want, you can try other templates. We are a template collection website. You may find other interesting templates in our site or in Web

      • Ness

        Thanks for the tip. I get it now. :)

  • Akumaru

    I find it difficult to activate the featured post, do I have to wait 24 hours after I upload photos to
    because I know if we do not use a photo upload of, our pages will not be opened.

    • lovelytemplates

      You have to set up Featured posts by following the Documentation. Please refer to the Documentation and follow the steps.

  • rohun

    How can I edit the link contents of the dropdown menu pages?

    • lovelytemplates

      Follow the "Navigation Menu" section in Documentation

  • neomestafa

    why i have in my link post this caracter :#.Uhxo4H-Yt0U
    thank you

  • lenmark

    hi….the youtube button on my site is quite off…how can i fix it?

    • lovelytemplates

      Find the following code in the template

      Replace this with

    • James

      Hi your website is looking good. How did you get the featured pictures

  • lovelytemplates

    Yes, it is possible to show posts from different labels in the slider. In the documentation, I asked you to use following links for “hothot” label. You can change this for each post and use like this

  • lovelytemplates

    It should be possible. But Sorry, we cannot help on customization requests.

    • James

      do you know anyone who can?

  • james

    Hi your website is looking good. How did you get the featured pictures and post section on the homepage to work. I have tried but it does not work. It only lets me add 1 url so only one post

  • disqus_I2gVD9n9d2

    The posts in the featured section will within hours revert to where they show only the last post and same picture in all 5 slots. Have not been able to get this going satisfactory. Blog is at

  • jazs

    my pagination doesnt work at all. i set my posts per page to 5 on my posts comments settings and change the perpage to 5 on edit html. nothing happens. lol god has forsaken me.

  • Michael

    How can i make the mobile version of the template load comments directly. Thank you.

  • ︻╦テ╤──

    How can i make it responsive. I mean how can i customize its navigation and posts so that it wll look good on tablets and smartphones through meta viewport tag.
    Please help