Skip to content

Creating a Magazine Style with your Blogger Default Template

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.

blogger-awesome

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

[php] <data:post.body/> [/php]

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

[php] <b:if cond=’data:blog.pageType != &quot;item&quot;’>

<b:if cond=’data:blog.pageType != &quot;static_page&quot;’>

<span class=’post-comment-link’><b:if cond=’data:blog.pageType != &quot;item&quot;’><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=’&quot;summary&quot; + data:post.id’><data:post.body/></div>

<script type=’text/javascript’>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>

<span class=’readmorebutton’ style=’float:right’><a expr:href=’data:post.url’>Continue Reading &#187;</a></span></b:if></b:if>

<b:if cond=’data:blog.pageType == &quot;item&quot;’><data:post.body/></b:if>

<b:if cond=’data:blog.pageType == &quot;static_page&quot;’><data:post.body/></b:if>[/php]

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

[php]<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’>

&nbsp;

<b:if cond=’data:blog.pageType != &quot;item&quot;’>

<b:if cond=’data:blog.pageType != &quot;static_page&quot;’>

<div expr:id=’&quot;summary1&quot; + data:post.id’><data:post.body/></div>

<script type=’text/javascript’>createSummaryAndThumb1(&quot;summary1<data:post.id/>&quot;);</script>

<span class=’post-comment-link’><b:if cond=’data:blog.pageType != &quot;item&quot;’><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 &#187;</a></span>

</b:if></b:if>

<b:if cond=’data:blog.pageType == &quot;item&quot;’><data:post.body/></b:if>

<b:if cond=’data:blog.pageType == &quot;static_page&quot;’><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>[/php]

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

[php] <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>

&nbsp;

<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+’…’;

}

&nbsp;

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;

}

&nbsp;

var summary = imgtag + ‘<div>’ + removeHtmlTag(div.innerHTML,summ) + ‘</div>’;

div.innerHTML = summary;

}

&nbsp;

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;

}

&nbsp;

var summary1 = imgtag + ‘<div>’ + removeHtmlTag(div.innerHTML,summ) + ‘</div>’;

div.innerHTML = summary1;

}

&nbsp;

//]]>

</script>[/php]

Still Above the </head> tag, where you paste the above code, paste the below code as well

[php] <b:if cond=’data:blog.pageType != &quot;static_page&quot;’>

<b:if cond=’data:blog.pageType != &quot;item&quot;’>

<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;}

&nbsp;

.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>[/php]

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.

31 thoughts on “Creating a Magazine Style with your Blogger Default Template”

  1. Hi Babanature,

    Oh my! You know what codes do to me, don’t you?!!! 😉

    But I can so well understand the way they work so well for you and how you manage to create them or even find them and use them! Commendable dear friend. I’m sure your friend would be thrilled with the outcome.

    Been ages since I’ve been on Blogger, and when I was using its free platform, I had NO idea about codes and that you could even have a magazine style template there. Glad I have one for my present blog, well, somewhat on the those lines.

    Thanks for sharing this with us. I’d surely be sharing it on my page as I always do, because I know many readers will benefit from your post. Have a nice week ahead 🙂

    1. Hello Harleena,
      I do know that you’re not that techie kind but it is good to see posts like this every once in a while right?
      AHhh… Blogger is becoming more like wordpress because more developers are joining the train and providing resource for blogger users 🙂
      Indeed, your magazine style is awesome and i do love it. Do have a wonderful week as well dear friend

  2. That is really awesome, the magic series of codes could do to ones blog, meaning that with those codes at ones disposal one can avoid premium magazine style theme by just implementing them properly.

    1. You’re right Edwin, It does give a splendid design to your blog. If you ever want to do a magazine blog, i’d strongly recommend this for you 🙂
      Thanks for the comment and do have a blessed week ahead…

  3. I was thinking the other days, my friend babanature didn’t send any updates for some time, why, so now I’ve got your email and check this article, I’m said, is just code, 20 lines of text and that’s it, not your style, at least from what I’ve read so far, what is your friend blog anyway, you didn’t mention that either. I’m said bro’…

    1. Hey Daniel,
      I was out of my pc for days, so i couldn’t make my Thursday update but i am partially back now 🙂
      You should know that i always drop tips for my blogger blog users every now and then or don’t you know? if you don’t, you can always check my blogger section.
      I did not mention the name of my friend’s blog because it is still under construction and we both know that that’s not good. But when it’s time, you will know the name of the site.

      This post has always been my style, even if i talk about wordpress a lot, i still do talk about blogger as well, so you should get use to 🙂
      Anyways, that’s for the comment and do have a wonderful week ahead

      1. I didn’t said I don’t like blogger tips, I said this post is full of code.
        I understand you have visitors who looking for this kind of tips, no problem at all, just saying how I felt when I finished reading this post 😀

        Hope you don’t get upset, yesterday I had a horrible day, my internet speed connection was freaking slow, nerves etc, I couldn’t do what I want, you know I “love” man! Ha Ha Ha, see you next time, regards!

  4. Hi Babanature!

    Wow, I’m impressed. I didn’t know that you played around with coding, my dear. That’s impressive for someone like me who doesn’t know the first thing about coding but the very strict minimum. I sure your friend is happy.

    Now I wish I could see the site, though.

    Great work!

    1. Hello Sylviane,
      Good to see you here once again 🙂
      Plying around with codes is what i love doing. i love knowing what makes anything works, that’s me 🙂
      Indeed i would have provided a link to the blog but since the blog is still under construction, he will only get bounce in his first month.
      i would definitely provide link on my next tutorial. Thanks for stopping by and dropping your comment, do have a wonderful week ahead…

  5. It’s great post, I don’t know about code, you did great work, that is really awesome you give codes , now many bloggers (India used sevida template) thanks for sharing this with us, I’d sharing it in my Fb account, it used many people, thank you

  6. Awesome 😀 Would have been cool if you had a demo (you could do that with your tutorials…setup a setup site..under this domain and show them – showing has more power, right? :D).

    Btw, I thought blogger had a magazine style template (in-built?)…I remember seeing a whole array of templates (although blogger didn’t particularly call them templates..sort of like WP frameworks I think. Not sure).

    Anyways, thank you for the awesome tutorial, Babanature 🙂 These tutorials could have been really useful when I was blogging with Blogger (too bad for me! Well, good for those who are using Blogger!).

    Hope you had a great weekend!

    1. That’s indeed a nice idea Jeevan, i will definitely be creating a demo for my next tutorial 🙂
      Yea, blogger do have a magazine style but it is very wack and seriously holds valuable.
      Thanks for the lovely comment dear frind and do have a good week

  7. High-quality and great step by step guide no vagueness that if one interested blogger wanted a magazine style template, he will read it thoroughly and follow the steps. I must say, it is simple since you provide ideas on how to search the codes that we need to search.

    Your post has been shared on Kingged.com, IM social bookmarking site, enabling me to find this good piece.

  8. Nice tutorial and an easy to follow one as well. it is amazing how Blogger templates have evolved from the ugly non-responsive static looking pages to what it is today. I am amazed at the looks and features of some blogger templates these days like this one.

    Now one can easily set up a blogger blog that looks and feels like a Wordpres blog. I hope to try this tutorial soon on one of the blogs i am currently working on on Blogger platform. If i have any challenges i will definintely contact you.

    Thanks for sharing, i found this article on kingged.com and also left a comment on it.

  9. will this script affect SEO and affect adsense polices or slows down websites . Will it cause any problem ? Is it safe to use this script ?

  10. This is really a great and very helpful post i’ve just read. Baba! its very true about your points here. …lols now i would repent from not commenting on other blogs so as to help my blog too.

  11. Nice and very informative post

    Templates are always useful to people who are not good with coding.It is astounding how Blogger layouts have advanced from the appalling non-responsive static looking pages to the present days websites. There has been a drastic change . It has been even better as the changes were for best.

    It is actually a very useful post as I was looking for doing some great changes in my blog . I will surely try this on my blog. You have always given very helpful content and I hope you would continue with such good work more.

    Thank you for sharing.

  12. FOUND TWICE IN MY HTML. CAN’T DECIDE WHICH ONE TO REPLACE; 1st, 2nd or both?

    NOT FOUND IN MY HTML. NO IDEA HOW TO PROCEED FURTHER.

    Can anyone help here?

    A preview(screenshot) of the end result should be provided in the article too.

Leave a Reply to babanature Cancel reply

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