Hey guys! Today’s going to be a wonderful day because I am going to be sharing with you guys a cool way on how to pimp your blogger template.
I am creating a blog for a friend on the blogger platform. He wanted it to look simple and magazine style… hmmm… I don’t want to use any free template I see online. I wanted the blog to look good and “malicious” code free. So I went online, searching for ways to make the default blogger template as good :). After enough searches, I did see some codes. I tried it out on the blog and it worked beautifully, aint that nice? Since the code actually did an awesome job, I decide to share it with you guys because I am sure you all are going to love it.
Must Read: How To Drive Quality Traffic To A News or Entertainment Site
Without wasting much of your time, below is how you too can implement the code to make your blog as beautiful.
How to create an Awesome Magazine Style with your Blogger Template
Note: These code works on all blogger template and also note that the code is not mine
First off, go to your Blogger blog dashboard and click “Template” >>> Click “Edit HTML” >>> it will take you to your template editor area, now let’s get to work
Note: Before following this procedure, make sure you backup your blog so you can revert anytime you make a mistake.
Now simply search for the below tag
<data:post.body/>
Have you seen the code? If not, to make the search more simple and fast, click the code box and simultaneously press the ctrl + f key to bring out a search box to help you in your quest
Now replace the above code with the below code
<b:if cond='data:blog.pageType != "item"'> <b:if cond='data:blog.pageType != "static_page"'> <span class='post-comment-link'><b:if cond='data:blog.pageType != "item"'><b:if cond='data:post.allowComments'><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a></b:if></b:if></span> <div expr:id='"summary" + data:post.id'><data:post.body/></div> <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script> <span class='readmorebutton' style='float:right'><a expr:href='data:post.url'>Continue Reading »</a></span></b:if></b:if> <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if> <b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>
Have you done that? Now let’s move on to the next step…
Now simply search for the below tag as well
<b:include data=’post’ name=’post’/>
Have you seen it? Now simply replace it with the below code
<b:if cond='data:post.isFirstPost'> <b:if cond='data:blog.homepageUrl == data:blog.url'> <div id='first'> <b:if cond='data:post.title'> <h3 class='post-title entry-title'> <b:if cond='data:post.link'> <a expr:href='data:post.link'><data:post.title/></a> <b:else/> <b:if cond='data:post.url'> <a expr:href='data:post.url'><data:post.title/></a> <b:else/> <data:post.title/> </b:if> </b:if> </h3> </b:if> <div class='first-body'> <b:if cond='data:blog.pageType != "item"'> <b:if cond='data:blog.pageType != "static_page"'> <div expr:id='"summary1" + data:post.id'><data:post.body/></div> <script type='text/javascript'>createSummaryAndThumb1("summary1<data:post.id/>");</script> <span class='post-comment-link'><b:if cond='data:blog.pageType != "item"'><b:if cond='data:post.allowComments'><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a></b:if></b:if></span> <span class='readmorebutton' style='float:right'><a expr:href='data:post.url'>Continue Reading »</a></span> </b:if></b:if> <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if> <b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if> </div> </div> <b:else/> <b:include data='post' name='post'/> </b:if> <b:else/> <b:include data='post' name='post'/> </b:if>
If you have done all the above steps, that means we are almost through in making our template beautiful
Now search for the </head> tag and place the below code above it
<script type='text/javascript'>
posts_no_thumb_sum = 290;
posts_thumb_sum = 240;
img_thumb_height = 80;
img_thumb_width = 80;
first_no_thumb_sum = 600;
first_thumb_sum = 540;
img_thumb_height1 = 145;
img_thumb_width1 = 165;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' & strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span style="float:left;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = posts_thumb_sum;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
function createSummaryAndThumb1(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = first_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span style="float:left;"><img src="'+img[0].src+'" width="'+img_thumb_width1+'px" height="'+img_thumb_height1+'px"/></span>';
summ = first_thumb_sum;
}
var summary1 = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary1;
}
//]]>
</script>
Still Above the </head> tag, where you paste the above code, paste the below code as well
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>
.first-post-thumb {
margin-right: 10px;
border: 1px solid #fff;
-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img {
background: none;
border: none;
box-shadow: none;
padding: 0;
}
#first { /* Styles for the First Post Container */
width: auto;
height: 250px;
float: left;
margin-bottom:10px;
background-color: #F4F4F4; /* background color for the first post */
border: 1px solid #E5E5E5; /* border for the first post */
}
.first-body { /* Style for the First Post summary */
color: #545454;
font-size: 13px;
text-align: justify;
padding: 5px 10px;
line-height:1.5em;
}
#first h3 a, #first h3 a:visited { /* Style for the First Post Title*/
border-bottom: 2px solid #DFDFDF;
color: #515151;
font-size: 20px;
display:block;
margin: 10px auto;
width: 95%;
font-size: 20px;
padding: 0px 0px 4px 0px;
font-weight: bold;
text-align:left;
line-height: 1.4em;
background: none;
}
#first h3 a:hover { /* Color on mouseover for the First Post Title */
color: #1061A1;
}
.post { /* Styles for the small posts container */
float:left;
margin-right: 10px;
width: 290px;
height: 210px;
padding: 0px 5px 5px 5px;
background: #FCFCFC; /* background color for the small posts */
border: 1px solid #E5E5E5; /* border for the small posts */
overflow: hidden;
}
.posts-thumb { /* Style for the small posts thumbnails */
margin-right: 5px;
background: #ddd;
padding: 3px 3px 0px;
border: 1px solid #C4C4C4;
border-radius: 4px;
}
h3.post-title a{ /* Style for the small posts titles */
font-size: 14px;
color: #747474;
background-color: #F4F4F4; /* Background color for the small posts titles */
width: 95%;
font-weight: bold;
font-family: 'Arial Narrow', sans-serif;
padding: 5px;
}
h3.post-title a:hover { /* Color on mouseover for the Small Posts Title */
color: #005B77;
}
h2.date-header { /* Hide the post date */
display:none;
}
.post-footer { display: none;}
h3.post-title {margin: 0px;}
.readmorebutton { margin-top: 5px;}
.readmorebutton a { /* Styles for the Read More link */
color: #767676;
border: 1px solid #E1E1E1;
background: #EAEAEA; /* Background color for the Read More link */
text-decoration:none;
padding: 3px 5px;
font-weight: bold;
font-size: 11px;
}
.post-comment-link { /* Style for the comment bubble of posts below */
float: right;
display: inline;
margin: -35px 0px;
border: 1px solid #E1E1E1; /* border for the comment bubble */
background: #EAEAEA; /* background color for the comment bubble */
font-size: 11px;
position: relative;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
}
#first .post-comment-link { /* Style for the comment bubble of first post */
margin: -200px 10px;
}
.post-comment-link a{ /* Link color for the comments bubble*/
padding: 10px;
color: #6A6A6A;
text-decoration:none;
font-weight: bold;
}
#blog-pager {clear:both;}
</style>
</b:if>
</b:if>
Remember: to set how many post you want to show in your homepage, simply go to “Settings >>> Posts and comments >>> Show at most and type whatever figure you want.
The tutorial was very simple right? I know :)…
Must Read: Facebook and SEO: How to Bring Together
Do you have questions or thoughts you love to share with us? Please do, by using the comment box below. Remember that your comments and thoughts are highly welcomed and much appreciated.
Do click the like button and share us with friends because you will never know who among your friends might be in need of a lovely post as this one.
Don't Miss Any Post Again. Subscribe To Our Feed And Be Updated
Enter your email address below:
Powered by OnenaijaBlog