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.
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 + "feeds/posts/default"'>Posts RSS</a></li> <li><a class='comment' expr:href='data:blog.homepageUrl + "feeds/comments/default"'>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.
nice template bro.. minimalist but more tahn minimalist template..
Thank you, dhe…..
That is awesome…thank you…
Welcome, Bergg.
Can’t download the file,can you pack into zip…
Hi Kall, I’ve updated the download link (RAR folder)…
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 😉
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
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!
Change this
#header a {
color:#282828;
}
To change the text color when hovered
#header a:hover {
color:#999999;
}
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.
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 + "feeds/posts/default"’>Posts RSS</a></li>
<li><a class=’comment’ expr:href=’data:blog.homepageUrl + "feeds/comments/default"’>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
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!
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!
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 🙂
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!
Welcome, Mico. Glad that you’ve fixed two problems in one short 🙂
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!
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.
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.
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!
Hahaha…..thank you. There is another way too. You can subscribe to my RSS feed. 😉
It’s done 😉
Hi, it’s me again 🙂
I put a widget at the bottom of the blog, and put there 2 banners which look like this:
http://img801.imageshack.us/img801/6056/bannersskin.png
How can I make them appear one next to the other or at least to be in the middle of the space? Thanks!
Hi Mico! Yeah I saw that picture. But, can you provide your Blog URL please? It would be much easier for my to find a way to fix it 😉