How To Utilise Magazine Manner Amongst Postal Service Summaries In Addition To Thumbnails On Blogger

The magazine or paper means templates are those that display the posts summaries inwards the homepage yesteryear stacking the columns on exceed of each other. These kinds of templates are really pop nowadays, too whether it is a word or applied scientific discipline blog, everyone needs a fresh magazine means layout for their blogs.

There are several ways to brand posts appear this way. An pick would move to usage the Read to a greater extent than script to display a summary of the posts too add together a conditional tag to add together a dissimilar means on the initiatory of all postal service hence that it volition convey a larger width than the older posts. So, this tutorial volition demo y'all how to practise a magazine means for a Blogger Template. By next this tutorial, y'all tin plough over the axe brand your tedious too uncomplicated Blogger template convey an attractive magazine means layout.

inwards the homepage yesteryear stacking the columns on exceed of each other How to Create Magazine Style amongst Post Summaries too Thumbnails on Blogger

To run across how it looks, delight watch this demo blog.

Adding the Magazine/Newspaper means to a Blogger Template

Step 1. Before proceeding further, delight brand a backup of your electrical flow template to brand certain that y'all won't lose anything of import - log into your Blogger Dashboard too 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 too search yesteryear using CTRL + F keys for this line:

<data:post.body/>

Note: You'll discovery it to a greater extent than than 1 time, but terminate at the instant 1 inwards guild to run across the changes.

Step 3. Remove that business too instead of it add together this 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'>Read More »</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>

Note: y'all tin plough over the axe supervene upon the Read More text, yesteryear changing the code inwards red.

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

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

Step 5. Remove this every bit good too 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 != "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'>Read More »</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>

Note: y'all tin plough over the axe alter the Read More text hither also, simply supervene upon the code inwards blood-red amongst the text that y'all desire to show.

Step 6. Find the </head> tag too 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[
purpose 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);
provide strx+'...';
}

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

purpose 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 upward add together the CSS styles:

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

.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 initiatory of all postal service */
    border: 1px corporation #E5E5E5; /* edge for the initiatory of all 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 corporation #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 pocket-size posts container */
    float: left;
    margin: 0px 6px 2% 5px;
    width: 46%;
    height: 230px;
    padding: 0px 5px 5px 5px;
    background: #FCFCFC; /* background color for the pocket-size posts */
    border: 1px corporation #E5E5E5; /* edge for the pocket-size posts */
    overflow: hidden;
}

.posts-thumb { /* Style for the pocket-size 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 pocket-size posts titles */
    font-size: 14px;
    color: #747474;
    text-transform: uppercase;
}

h2.date-header { /* Hide the postal service appointment */
    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 corporation #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 corporation #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 initiatory of all 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 starting fourth dimension of the script from mensuration 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 initiatory of all pose out is the pose out of characters for the pocket-size posts when in that place volition move no icon available
the 2d pose out is the pose out of characters that volition demo when the pocket-size posts volition convey an image
the third too the quaternary business is for the peak too width of the pocket-size posts thumbnails (images).
the same goes for what is inwards blue, but this affects exclusively the initiatory of all post. Since the initiatory of all postal service is wider, it may comprise a larger pose out of characters too we'll move able to brand the thumbnail size larger.

2. And finally, nosotros convey the CSS styles. That in conclusion matter nosotros added is a code that determines how the posts are going to hold off on the homepage - too archive pages every bit well, except for the initiatory of all post.

To alter the width too height, respectively the size for the initiatory of all postal service container, hold off for these lines:

width: auto;
height: 250px;

Underneath the initiatory of all postal service are the values for the other posts, simply hold off for this part:

width: 46%;
height: 230px;

The width volition ocuppy 46% of the master copy column width too peak is laid upward to 230px. Here y'all may involve to experiment a fighting amongst the sizes inwards guild to brand them appear correctly.

Finally, laid upward the pose out of posts to demo on the homepage, hence that in that place won't move whatever empty space. Go to Settings > Posts too comments > Show at most too direct the pose out of posts that y'all desire to appear.