Hey, we have a new template! This one's just really simple. Very toned down. You know how I love minimalist designs.
For this one you'll need to create your own header (I used this font for the demo) and add your own social media icons, as well as the search bar (instructions at the bottom of this post).
You will have to manually add your profile photo, too, if you want to do it like the demo. You just need to adjust the width of the profile pic to 255px.
This template is also customizable using the Blogger Template Designer.
Demo | Download XML File | Download HTML File
You know the drill. Back up your template first, then upload the XML or HTML file of the template above.
Add the search bar
The formatting for the search bar is already embedded in the XML file, but you will have to manually add the search bar in your layout. Go to LAYOUT, select HTML/Javascript, and then copy and paste the code below.
Change or remove set image size
The images are set to a default size. If you want to change or remove this, go to Edit HTML and look for this code:
Preview and then SAVE!
For this one you'll need to create your own header (I used this font for the demo) and add your own social media icons, as well as the search bar (instructions at the bottom of this post).
You will have to manually add your profile photo, too, if you want to do it like the demo. You just need to adjust the width of the profile pic to 255px.
This template is also customizable using the Blogger Template Designer.
Demo | Download XML File | Download HTML File
You know the drill. Back up your template first, then upload the XML or HTML file of the template above.
Add the search bar
The formatting for the search bar is already embedded in the XML file, but you will have to manually add the search bar in your layout. Go to LAYOUT, select HTML/Javascript, and then copy and paste the code below.
<div align="left">Preview and then SAVE!
<form action="http://YOUR BLOG URL/search/" id="searchform" method="get">
<input class="field" id="searchinput" name="q" placeholder="Search" type="text" />
<input class="submit" id="searchsubmit" name="submit" type="submit" value="Search" />
</form>
</div>
Change or remove set image size
The images are set to a default size. If you want to change or remove this, go to Edit HTML and look for this code:
.post-body img {You can change the width or remove the entire code. If you remove the entire code, it will just revert back to the usual options for images (original size, small, medium, large, x-large).
width: 635px;
height: auto;
float: left;
}
.post table.tr-caption-container img {
width: 635px;
height: auto;
float: left;
}
Preview and then SAVE!
BLOGGER TEMPLATE EXPERIMENT 4: SUNNY BUT ALL BUSINESS BLOGGER TEMPLATE
This one has a split header so technically you can add a gadget on the top left (above the page tabs). I prefer keeping that space empty though.
For the longest time I couldn't figure out how to make the header overlap with the main content until I googled it and found the answer. Sheesh. ;)
Demo | Download XML File
Don't forget to back up your original template first before uploading a new one! ;)
Upload your own header image
This template works best with a header image that's less than 200px in height. If you have a big header image and it covers up a part of the sidebar widget, you'll need to adjust the header height. Go to Template, Edit HTML, expand the code (click on the little black arrows on the left side), and look for this code:
Adjust the height (text in red) until it looks just about right to you. :)
Keep your page tabs to a minimum
You can't have too many page tabs because some of them will get covered up by the header image. If you really have a lot of pages, you can try adjusting the spaces between tabs to make them fit. Go to Template, Edit HTML, expand the code (click on the little black arrows on the left side), and look for this code:
Adjust the padding (text in red) until it looks just about right to you. In addition, if you don't want the tabs to be in all caps, change text-transform into lowercase (text in blue). ;)
That's it!
This template can be customized using the template designer.
Let me know if you're having any problems with this template! :)
For the longest time I couldn't figure out how to make the header overlap with the main content until I googled it and found the answer. Sheesh. ;)
Demo | Download XML File
Don't forget to back up your original template first before uploading a new one! ;)
Upload your own header image
This template works best with a header image that's less than 200px in height. If you have a big header image and it covers up a part of the sidebar widget, you'll need to adjust the header height. Go to Template, Edit HTML, expand the code (click on the little black arrows on the left side), and look for this code:
.header-left{
display: inline-block;
height: 70px;
width: 280px;
float: right;
position:relative;
z-index:9999;
}
display: inline-block;
height: 70px;
width: 280px;
float: right;
position:relative;
z-index:9999;
}
Adjust the height (text in red) until it looks just about right to you. :)
Keep your page tabs to a minimum
You can't have too many page tabs because some of them will get covered up by the header image. If you really have a lot of pages, you can try adjusting the spaces between tabs to make them fit. Go to Template, Edit HTML, expand the code (click on the little black arrows on the left side), and look for this code:
.tabs-inner .widget li a {
display: inline-block;
padding: .25em 1.5em;
font: $(tabs.font);
font-size: 90%;
text-transform: uppercase;
color: $(tabs.text.color);
border-$endSide: 1px solid $(tabs.separator.color);
}
display: inline-block;
padding: .25em 1.5em;
font: $(tabs.font);
font-size: 90%;
text-transform: uppercase;
color: $(tabs.text.color);
border-$endSide: 1px solid $(tabs.separator.color);
}
Adjust the padding (text in red) until it looks just about right to you. In addition, if you don't want the tabs to be in all caps, change text-transform into lowercase (text in blue). ;)
That's it!
This template can be customized using the template designer.
Let me know if you're having any problems with this template! :)
BLOGGER TEMPLATE EXPERIMENT 3: STICKY TAPE BLOGGER TEMPLATE
Last February I wrote a post on customizing your sidebar widgets. I used the same principle and applied it to this template, but this time the customization would appear automatically on every sidebar widget. You won't need to customize each widget every time you add a new one.
Let me know if you're having issues with this template! :)
Demo | XML File
You can customize this template further using the Blogger Template Designer.
Don't forget to back up your templates first before uploading a new one!
Changing the sticky tape on the sidebar widgets
Let me know if you're having issues with this template! :)
Demo | XML File
You can customize this template further using the Blogger Template Designer.
Don't forget to back up your templates first before uploading a new one!
Changing the sticky tape on the sidebar widgets
If you want a different kind of sticky tape, you can simply edit the HTML code.
First, you have to find a sticky tape image that you like. When you find one, make sure the width fits the width of your sidebar. The one I'm using in the demo has a width of 200px and a height of just under 50px.
Once you have your sticky tape ready, upload it in your image sharing site and copy the image URL. Save it somewhere first.
Next, go to Template, then Edit HTML, and look for the code below.
.sidebar .widget h2 {
background: url(http://i39.tinypic.com/wtw013.png) no-repeat top center;
height:45px;
margin-top: -35px;
padding-top: 10px;
text-align:center;
}
Replace the text in red with the image URL of your sticky tape.
Edit the margin-top and padding-top measurements if needed.
Edit the margin-top and padding-top measurements if needed.
BLOGGER TEMPLATE EXPERIMENT 2: EASY MINIMALIST BLOGGER TEMPLATE
I'm sharing another one of my favorite simple Blogger templates. I'm using a slightly different version of this right now on the main blog.
Demo | XML
I basically split the header on this template to add a place for a gadget next to it. You'll see it in the Layout page and you can place a rectangular ad, images or whatever you want.
For the demo of this template I uploaded an image for the header. You can download the image background here and just add your blog name to it using any photo editor.
To move the header to the right, you can edit the following code in HTML. Change the code in blue to switch the header-widgets. To fix the height and width, change the code in orange.
You can customize this template further using the Blogger Template Designer.
Don't forget to back up your templates first before uploading a new one!
Let me know if you need help with installation! ;)
9/10/2013 IMPORTANT: I uploaded an updated version of the XML file. I realized the old version had third party codes that are not supposed to be there. If you downloaded the old version, you'll need to use this new one! Sorry about that.
Demo | XML
I basically split the header on this template to add a place for a gadget next to it. You'll see it in the Layout page and you can place a rectangular ad, images or whatever you want.
For the demo of this template I uploaded an image for the header. You can download the image background here and just add your blog name to it using any photo editor.
To move the header to the right, you can edit the following code in HTML. Change the code in blue to switch the header-widgets. To fix the height and width, change the code in orange.
.header-left {
display: inline-block;
height: 120px;
width: 290px;
float: left;
}
.header-right {
display:inline-block;
float:right;
}
.header-right {
display:inline-block;
float:right;
width:800px;
}
display: inline-block;
height: 120px;
width: 290px;
float: left;
}
.header-right {
display:inline-block;
float:right;
}
.header-right {
display:inline-block;
float:right;
width:800px;
}
You can customize this template further using the Blogger Template Designer.
Don't forget to back up your templates first before uploading a new one!
Let me know if you need help with installation! ;)
9/10/2013 IMPORTANT: I uploaded an updated version of the XML file. I realized the old version had third party codes that are not supposed to be there. If you downloaded the old version, you'll need to use this new one! Sorry about that.
BLOGGER TEMPLATE EXPERIMENT 1: BOXY STYLE BLOGGER TEMPLATE
So I've decided to share one of my favorite simple blogger templates. It's based on styles and layouts I've used in the past for my main blog. I've always liked boxy and structured layouts because they look so neat and organized!
You can easily customize this template using the blogger template designer.
Demo | XML File
You know how this works. Back up your template first, then upload the XML file of the template above.
To add your social media icons, you can refer to this tutorial.
If you're having problems with installation, let me know! :)
9/10/2013 IMPORTANT: I uploaded an updated version of the XML file. I just realized the old version had third party codes that are not supposed to be there. You'll have to upload this new one. So sorry about that!
You can easily customize this template using the blogger template designer.
Demo | XML File
You know how this works. Back up your template first, then upload the XML file of the template above.
To add your social media icons, you can refer to this tutorial.
If you're having problems with installation, let me know! :)
9/10/2013 IMPORTANT: I uploaded an updated version of the XML file. I just realized the old version had third party codes that are not supposed to be there. You'll have to upload this new one. So sorry about that!
Popular
Tags
Videos
0 comments:
Post a Comment