How To Usage Journal Agency Alongside Postal Service Summaries Too Thumbnails On Blogger

The magazine or paper fashion templates are those that display the posts summaries inward the homepage yesteryear stacking the columns on overstep of each other. These kinds of templates are rattling pop nowadays, as well as whether it is a tidings or applied scientific discipline blog, everyone needs a fresh magazine fashion layout for their blogs.

There are several ways to brand posts appear this way. An selection would live to role the Read to a greater extent than script to display a summary of the posts as well as add together a conditional tag to add together a dissimilar fashion on the firstly postal service hence that it volition convey a larger width than the older posts. So, this tutorial volition present yous how to exercise a magazine fashion for a Blogger Template. By next this tutorial, yous tin brand your ho-hum as well as unproblematic Blogger template convey an attractive magazine fashion layout.

To run into how it looks, delight take in this demo blog.

Adding the Magazine/Newspaper fashion to a Blogger Template

Step 1. Before proceeding further, delight brand a backup of your electrical flow template to brand certain that yous won't lose anything of import - log into your Blogger Dashboard as well as become to Template, hence click on the Backup/Restore button. After you've got a re-create of the xml template, click on the Edit HTML button:

Step 2. Click anywhere within the code expanse as well as search yesteryear using CTRL + F keys for this line:

<data:post.body/>

Note: You'll discovery it to a greater extent than than i time, but terminate at the minute i inward social club to run into the changes.

Step 3. Remove that occupation as well as instead of it add together this code:

<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'>Read More &#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>

Note: yous tin supervene upon the Read More text, yesteryear changing the code inward red.

Step 4. Now discovery (CTRL + F) this line:

<b:include data='post' name='post'/>

Step 5. Remove this every bit good as well as instead of it add together this:

<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 != &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'>Read More &#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>

Note: yous tin alter the Read More text hither also, only supervene upon the code inward scarlet amongst the text that yous desire to show.

Step 6. Find the </head> tag as well as glue the next script before/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 = 580;
first_thumb_sum = 450;
img_thumb_height1 = 145;
img_thumb_width1 = 165;
</script>

<script type='text/javascript'>
//<![CDATA[
business office 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);
supply strx+'...';
}

business office 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 class="posts-thumb" 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 class="summary">' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}

business office 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 class="first-post-thumb" 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 class="summary">' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary1;
}

//]]>
</script>

Step 7. And below the script higher upwards add together the CSS styles:

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

.summary {
    height: 100%;
}

#first { /* Styles for the First Post Container */
    width: auto;
    height: 250px;
    float: left;
    margin-bottom: 10px;
    background-color: #F4F4F4; /* background color for the firstly postal service */
    border: 1px enterprise #E5E5E5; /* edge for the firstly postal service */}

.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 enterprise #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-scale posts container */
    float: left;
    margin: 0px 6px 2% 5px;
    width: 46%;
    height: 230px;
    padding: 0px 5px 5px 5px;
    background: #FCFCFC; /* background color for the small-scale posts */
    border: 1px enterprise #E5E5E5; /* edge for the small-scale posts */
    overflow: hidden;
}

.posts-thumb { /* Style for the small-scale posts thumbnails */
    margin-right: 10px;
}

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


h3.post-title a{ /* Style for the small-scale posts titles */
    font-size: 14px;
    color: #747474;
    text-transform: uppercase;
}

h2.date-header { /* Hide the postal service engagement */
    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 enterprise #E1E1E1;
    background: #EAEAEA; /* Background color for the Read More link */
    text-decoration: none;
    padding: 3px 5px;
    font-weight: bold;
    font-size: 11px;
    float: right;
    position: relative;
}

.post-comment-link { /* Style for the comment bubble of posts below */
    position: absolute;
    top: -35px;
    right: -10px;
    display: block;
    border: 1px enterprise #E1E1E1; /* edge for the comment bubble */
    background: #EAEAEA; /* background color for the comment bubble */
    font-size: 11px;
    position: absolute;
}

#first .post-comment-link { /* Style for the comment bubble of firstly postal service */
    position: absolute;
    top: 10px;
    right: 0px;
}

.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>

Customizing the Magazine Layout

1. At the start of the script from measurement 6, nosotros convey this section:

posts_no_thumb_sum = 290;
posts_thumb_sum = 240;
img_thumb_height = 80;
img_thumb_width = 80;
first_no_thumb_sum = 580;
first_thumb_sum = 450;
img_thumb_height1 = 145;
img_thumb_width1 = 165;

• the firstly publish is the publish of characters for the small-scale posts when at that topographic point volition live no icon available
• the sec publish is the publish of characters that volition present when the small-scale posts volition convey an image
• the tertiary as well as the fourth occupation is for the elevation as well as width of the small-scale posts thumbnails (images).
• the same goes for what is inward blue, but this affects alone the firstly post. Since the firstly postal service is wider, it may incorporate a larger publish of characters as well as we'll live able to brand the thumbnail size larger.

2. And finally, nosotros convey the CSS styles. That lastly matter nosotros added is a code that determines how the posts are going to await on the homepage - as well as archive pages every bit well, except for the firstly post.

To alter the width as well as height, respectively the size for the firstly postal service container, await for these lines:

width: auto;
height: 250px;

Underneath the firstly postal service are the values for the other posts, only await for this part:

width: 46%;
height: 230px;

The width volition ocuppy 46% of the chief column width as well as elevation is gear upwards to 230px. Here yous may ask to experiment a chip amongst the sizes inward social club to brand them appear correctly.

Finally, gear upwards the publish of posts to present on the homepage, hence that at that topographic point won't live whatever empty space. Go to Settings > Posts as well as comments > Show at most as well as lead the publish of posts that yous desire to appear.