Free Favicons: Blogger Posts with Preview

From an article "How to create Magazine Style with Post Summaries and Thumbnails on Blogger".

Very good article.

The code I use is as follows.

1. Perform a search for the following line in the blogger template.

The second search hit is the one you will search for:

Original

<data:post.body/>

Modified

<data:post.body/>

2. Over-write <data:post.body/> with the following code:

Original

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

Modified

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

3. Now, locate the following text in the template:

Original

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

Modified

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

4. Replace <b:include data='post' name='post'/> with the following script:

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

Original

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

Modified

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

5. Locate </head>. Paste the following code just above the </head> tag.

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

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

<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: 200px;
    float: middle;
    margin-bottom: 0px;
    background-color: #000000; /* background color for the first post */
    border: 1px solid #000000; /* border for the first post */}

.first-body { /* Style for the First Post summary */
    color: #cccccc;
    font-size: 16px;
    text-align: left;
    padding: 5px 10px;
    line-height: normal;
}

#first h3 a, #first h3 a:visited { /* Style for the First Post Title*/
    border-bottom: 2px solid #000000;
    color: #535dcd;
    font-size: 16px;
    display: block;
    margin: 10px auto;
    width: 95%;
    font-size: 16px;
    padding: 0px 0px 4px 0px;
    font-weight: normal;
    text-align: left;
    line-height: normal;
    background: #000000;
}

#first h3 a:hover { /* Color on mouseover for the First Post Title */
    color: #535dcd;
}

.post { /* Styles for the small posts container */
    float: middle;
    margin: 0px 6px 2% 5px;
    width: 95%;
    height: 220px;
    padding: 0px 5px 5px 5px;
    background: #000000; /* background color for the small posts */
    border: 1px solid #000000; /* border for the small posts */
    overflow: hidden;
}

.posts-thumb { /* Style for the small 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 posts titles */
    font-size: 16px;
    color: #535dcd;
    text-transform: none
}

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: #535dcd;
    border: 1px solid #000000;
    background: #000000; /* Background color for the Read More link */
    text-decoration: none;
    padding: 3px 5px;
    font-weight: normal;
    font-size: 16px;
    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 solid #000000; /* border for the comment bubble */
    background: #000000; /* background color for the comment bubble */
    font-size: 16px;
    position: absolute;
}

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

.post-comment-link a { /* Link color for the comments bubble*/
    padding: 10px;
    color: #cccccc;
    text-decoration: none;
    font-weight: normal;
}

#blog-pager {
    clear: both;
}
</style>
</b:if>
</b:if>

Original

Modified

SAVE AND EXIT THE TEMPLATE. Your blog should reflect the change, but will definitely require tweaking.

6. Go to "Advanced Settings" in blogger and tweak colors to suit your blog.

I recommend against trying to edit the template and using Advanced Settings at the same time as they will save and overwrite each other. Use one or the other at a given time.

Checking corresponding styles; font size, decoration, color. Note "Bold".

Checking corresponding styles for Link Color (Link, Visited and Hover).

#first { /* Styles for the First Post Container */
width: auto;
height: 320px; (hint: Value can be changed i.e., 250px or 350px. This will affect the height of the preview space.)
float: middle;
margin-bottom: 10px; (hint: affects distance between preview blocks)
background-color: #000000; /* background color for the first post */
border: 1px solid #000000; /* border for the first post */
} (hint: * if you do not want blocks with borders for your previews, as in the original script, change the whole post background in Advanced Settings to match color of the preview borders and background).

.first-body { /* Style for the First Post summary */
color: #cccccc;
font-size: 16px;
text-align: left; (hint: right, left, justify)
padding: 5px 10px;
line-height: normal; (hint: 1.5em)
}

#first h3 a, #first h3 a:visited { /* Style for the First Post Title*/
border-bottom: 2px solid #000000;
color: #535dcd;
font-size: 16px;
display: block;
margin: 10px auto;
width: 95%;
font-size: 16px;
padding: 0px 0px 4px 0px;
font-weight: normal; (hint: bold)
text-align: left; (hint: left, right, justify)
line-height: normal;
background: #000000;
}

#first h3 a:hover { /* Color on mouseover for the First Post Title */
color: #535dcd;

Be aware that if your blog front page loads with a mixture of "bold" and "normal" headline and text, or mismatched colors, check "Advanced Settings" in Blogger. Be certain that your template and advanced settings are given the same instructions
1) Font Size
2) Link Color; i.e., Hover, Visited Link
3) Bold or Normal text decoration

NOTE: In the original script this width was set to 46% to create rows with 2 blocks of post previews. I modified it to 95% and set older posts to align in the middle. To avoid lack of uniformity between the newest post and older posts, the text alignment was changed from "justify" to "left".

Original Script

.post { /* Styles for the small posts container */
float: left;
margin: 0px 6px 2% 5px;
width: 46%;

Modified Script

.post { /* Styles for the small posts container */
float: middle;
margin: 0px 6px 2% 5px;
width: 95%;

In the original script, 46% was designated to create previews in blocks. Like this:

To avoid variations in text (the newest post vs. older posts), I also modified all posts text alignment, set to the "left".

Original Script

.first-body { /* Style for the First Post summary */
color: #545454;
font-size: 13px;
text-align: justify;
padding: 5px 10px;
line-height: 1.5em;

Modified Script

.first-body { /* Style for the First Post summary */
color: #cccccc;
font-size: 16px;
text-align: left;
padding: 5px 10px;
line-height: normal;

NOTE: The template I have modified the code for is designed to work in the Travel template. Every template has variations and will have to be modified accordingly.

Again, the source for the original code is located at this link. And the preceding is my own modified code.

I have had to revise to suit my personal preference/blog style. To edit the blogger template:

Blogger Posts with Preview

The second search hit is the one you will search for:

Checking corresponding styles; font size, decoration, color. Note "Bold".

Checking corresponding styles for Link Color (Link, Visited and Hover).

Original Script

Modified Script

Original Script

Modified Script

No comments:

Post a Comment

Pages