Pro Simplo Blogger Template

Pro Simplo Blogger Template

Today, I’m releasing the first Blogger template that I’ve created after moving to Bloggerbits, “Pro Simplo“. It is a 2-column, clean, three-column footer, blue-yellow template. I’ve used custom Web font, “Chunk” from Kernest.com for the post titles.

Pro Simplo post title font

Sadly, some of the CSS3 features like the rounded corners and text shadow effects are not visible in Internet Explorer.

Instructions on editing the template

Navigation menu


<div id='nav'>
<ul>
<li><a class='home' expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a class='feed' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>Posts RSS</a></li>
<li><a class='comment' expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;'>Comments RSS</a></li>
<li><a class='edit' href='#'>Edit</a></li>
</ul>
</div>

Leave your comments below if you have any questions regarding the template or contact me via form.

25 Replies to “Pro Simplo Blogger Template”

  1. Hello, I love this template. I don’t understand much about html so here is my question. Is it possible to change the color of the blog name and the type of the letters? I mean now the name of my blog is in black and all the letters are capital. How can I change it? Thank you and great work, I love it 😉

    1. Kiril, search for this in you CSS in “EDIT HTML” page under “Design”.

      #header h1 {
      font-size:40px;
      font-weight:600;
      text-decoration:none;
      border-bottom:none;
      letter-spacing:-1px;
      line-height:40px;
      color:#282828;
      display:block;
      margin-top:1px;
      padding:13px;
      text-shadow:1px 1px 1px #FFFFFF;
      text-transform:uppercase;
      }

      To change the capital letters to normal remove the “text-transform:uppercase;” and to change the text color, edit the HEX code.

      color:#282828

      You may refer to this CSS Color chart if you want to know HEX code for colors.

      http://www.somacon.com/p142.php

  2. Thank you Rethnaraj, I changed it, but now the name is changed only in the home page. When I go to any of the posts the name changes again in black. How can I fix it so that it’s the same everywhere? Thanks!

  3. Thanks for the help! It worked perfectly! Now I have two more questions. First – How can I add a new page in the navigation menu(where Home, Posts RSS, Comments RSS, Edit are)? And the second question – Is it possible to change the color of the words in the posts that are linked to other sites? I mean, now they are very bright and I want to make them darker so that it will be easier to read.

    1. Welcome, kiril.

      Ans for Q1:
      Search for <div id=’nav’> using CTRL+F in EDIT HTML under Design tab in Blogger. You’ll see the code for Home, Posts RSS, Comments RSS, Edit just next to <div id=’nav’> .

      <div id=’nav’><ul>
      <li><a class=’home’ expr:href=’data:blog.homepageUrl’>Home</a></li>
      <li><a class=’feed’ expr:href=’data:blog.homepageUrl + &quot;feeds/posts/default&quot;’>Posts RSS</a></li>
      <li><a class=’comment’ expr:href=’data:blog.homepageUrl + &quot;feeds/comments/default&quot;’>Comments RSS</a></li>
      <li><a class=’edit’ href=’#’>Edit</a></li>
      </ul>
      </div>

      So, to add a page or link just add a <li><a class=’edit’ href=’#’>Edit</a></li> before </ul> closing tag. Change the source URL of the link in href=’#’. Replace # with URL. Change the “edit” with desired text.

      Ans for Q2:

      Change the text color here.

      a {
      text-decoration: none;
      color:#9F9F9F;
      text-shadow:1px 1px 0 #FFFFFF;
      }
      Done

  4. Hello I tried to add a blog page in the navigation menu just as you explained but it showed me this XML error: Open quote is expected for attribute “{1}” associated with an element type “class”. Can you tell me how to fix it? Thanks!

  5. Hello, when I upload a picture it is surrounded with a white frame. How can I remove this frame and leave only the image in my post? Thanks!

    1. Mico, Go to Edit HTML and search for the following code in CSS part

      .post img {
      -moz-box-shadow:0 0 3px #CCCCCC;
      background: #FBFBFB;
      float:left;
      margin:5px 20px 0 0;
      padding:10px;
      }

      Remove every property and values inside it leaving only the

      .post img {
      }

      and ‘Save”. Done 🙂

  6. It worked. Thanks a lot! It also fixed a bug which appeared when I posted an image and a text bellow it. The text was mixing with the image and appeared next to the image instead of bellow it. I had to leave a lot of empty lines in order for it to appear like I wanted.
    But now everything is working how it should and I have no problems. Thanks again!

  7. Thank you Rethnaraj! I’m glad too. You seem to be very good coder. Can I ask you a question? Look at this blog: napravisisait.com Look how the owner has made the “Google translate” widget to appear next to the title and description of the blog. Can this be done with your template and is it easy to be done or is it too much work? Thanks!

    1. Mico, follow these steps to add a translate gadget beside header title and description.

      1. Go to http://translate.google.com/translate_tools and get a code.

      2. Go to Edit HTML > Don’t check ‘Expand Widget Templates’.

      3. Paste the copied code immediately below the code shown below. You can find it insided header-wrapper code in body.

       <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
      <b:widget id='Header1' locked='true' title='xtra Blogger Templates (Header)' type='Header'/>
      </b:section>
      

      4. Now search for ]]></b:skin> tag and paste the following CSS code just above ]]></b:skin> tag.

      #google_translate_element {
      float:right;
      margin:20px;
      }
      

      Done.

  8. You are great bro! It worked perfectly. I don’t know how to thank you. In fact, I may think of a way 😉 I see some interesting ads up there 🙂 Thanks and all the best for you!

Leave a Reply to kiril Cancel reply

Your email address will not be published. Required fields are marked *

CommentLuv badge

This site uses Akismet to reduce spam. Learn how your comment data is processed.