how to add post excerpt with thumbnail on blogger blog part2
TRANSCRIPT
7/28/2019 How to Add Post Excerpt With Thumbnail on Blogger Blog Part2
http://slidepdf.com/reader/full/how-to-add-post-excerpt-with-thumbnail-on-blogger-blog-part2 1/10
onenaijablog.com http://onenaijablog.com/2013/06/how-to-add-post-excerpt-with-thumbnail-on-blogger-blog-part2/
babanature June 1, 2013
How To Add Post Excerpt With Thumbnail On Blogger Blog
Part2
Hey guys, f irst let me say a big happy new month to you! Blogger blog, is a great platf orm that somebloggers should think of having a niche site with, why? Because compare to other platf orms, they have
some more benefits which I know you’ll agree with me. But we are not going to be talking about the benef its
or other goodies that blogger blog have but we are going to be discuss ing the main topic which is “How to
Add Post Exc erpt with Thumbnail on Blogger Blog Part2 ”.
Must Read: Top 20 WordPress Plugin I Just can’t Do without
In case you don’t know, I have written about this topic sometimes back but it looks like the code does no t
have facility f or adjust ing the excerpt, so today, I will be bringing a good tutorial that you can play with and it
is working 100%. If you ask me how I know it is working, i’ll say that i have implemented it on my blogger
blog.
How To Add Post Excerpt With Thumbnail On Blogger
Must Read: How To Stand Out From The Crowd, As A Blogger
Without t oo much talk, let’s go o n to the main to pic at hand and see what we’ll come up with. I’ll say that I
am bringing this tutorial out because a lady requested for it, so let’s ro ll.
Ok! First go to your blogger blog dashboard >>> Click Template >>> Click Edit HTML. Are you there? If yes!
Let’s proceed to the show…
Note: Before you start any coding, it is best to backup so you can always revert if you make any mistake .
Now search for t he </head> tag.
To make the search easy, click inside your code box and simultaneously press Ctrl + F key to bring out a
special blogger search box like the image below.
7/28/2019 How to Add Post Excerpt With Thumbnail on Blogger Blog Part2
http://slidepdf.com/reader/full/how-to-add-post-excerpt-with-thumbnail-on-blogger-blog-part2 2/10
Have you seen the tag? Right above the </head> tag, paste the below code
view so urce
print?
1 <<span id="IL_AD6" class="IL_AD">script type</span>='text/javascript'>
2
3 var thumbnail_mode ="no-float" ;
4
5 summary_noimg = 300;
6
7 summary_img = 350;
8
9 img_thumb_height = 200;
10
11 img_thumb_width = 300;
12
13 </script>
14
15 <script type='text/javascript'>
16
7/28/2019 How to Add Post Excerpt With Thumbnail on Blogger Blog Part2
http://slidepdf.com/reader/full/how-to-add-post-excerpt-with-thumbnail-on-blogger-blog-part2 3/10
17
18
19 function removeHtmlTag(strx,chop){
20
21 if(strx.indexOf("<")!=-1)
22
23 {
24
25 var s = strx.split("<");
26
27 for(var i=0;i<s.length;i++){
28
29 if(s[i].indexOf(">")!=-1){
30
31 s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
32
33 } }
34
35 st rx = s.join("");
36
37 }
38
39 chop = (chop < strx.length-1) ?chop : strx.length-2;
7/28/2019 How to Add Post Excerpt With Thumbnail on Blogger Blog Part2
http://slidepdf.com/reader/full/how-to-add-post-excerpt-with-thumbnail-on-blogger-blog-part2 4/10
40
41 while(st rx.charAt(chop-1)!=' ' && st rx.indexOf(' ',chop)!=-1)chop++;
42
43 st rx = st rx.substring(0,chop-1);
44
45 return strx+'...';
46
47 }
48
49 function createSummaryAndThumb(pID){
50
51 var div = document.getElementById(pID);
52
53 var imgtag ="";
54
55 var img = div.getElementsByTagName("img");
56
57 var summ = summary_noimg;
58
59 if(img.length>=1) {
60
61 imgtag ='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height +'px"/></span>';
7/28/2019 How to Add Post Excerpt With Thumbnail on Blogger Blog Part2
http://slidepdf.com/reader/full/how-to-add-post-excerpt-with-thumbnail-on-blogger-blog-part2 5/10
62
63 summ = summary_img;
64
65 }
66
67 var summary = imgtag +'<div>' + removeHtmlTag(div.innerHTML,summ) +'</div>';
68
69 div.innerHTML = summary;
70
71 }
72
73
74
75 </script>
Have you done that? If yes! That means we have done the part one of the whole series, now let’s move on
to the next part if you are ready!
Must Read: My Top 5 Video Editing and Screen Caption tools For Bloggers
Now search for t he below code as well.
view so urce
print?
1 <b:if cond='data:blog.metaDescript ion == ""'>
2
3 <!-- Thenuse the post bodyas the schema.org description,for good G+/FB snippet ing. -->
4
5 <divclass='post -body entry-content' expr:id='"post -body-" + data:post.id'
7/28/2019 How to Add Post Excerpt With Thumbnail on Blogger Blog Part2
http://slidepdf.com/reader/full/how-to-add-post-excerpt-with-thumbnail-on-blogger-blog-part2 6/10
itemprop='description articleBody'>
6
7 <data:post.body/>
8
9 <<span id="IL_AD3" class="IL_AD">div st yle</span>='clear: both;'/>
10
11 <!-- clearfor photos floats -->
12
13 </div> <b:else/>
14
15 <divclass='post -body entry-content' expr:id='"post -body-" + data:post.id' itemprop='articleBody'>
16
17 <data:post.body/>
18
19 <div style='clear: both;'/>
20
21 <!-- clearfor photos floats -->
22
23 </div>
24
25 </b:if>
26
27 <b:if cond='data:post.hasJumpLink'>
7/28/2019 How to Add Post Excerpt With Thumbnail on Blogger Blog Part2
http://slidepdf.com/reader/full/how-to-add-post-excerpt-with-thumbnail-on-blogger-blog-part2 7/10
28
29 <divclass='jump-link'>
30
31 <a expr:href='data:post .url + "#more" ;' expr:title='data:post.title'>
32
33 <data:post .jumpText/></a>
34
35 </div>
36
37 </b:if>
Have you seen it? If yes! Replace it with the below code.
view so urce
print?
1 <b:if cond='data:blog.pageType == "item"'>
2
3 <style>.fullpost{display:inline;}</style>
4
5 <p><data:post .body/></p>
6
7 <b:else/>
8
9 <style>.fullpost{display:none;}</style>
10
7/28/2019 How to Add Post Excerpt With Thumbnail on Blogger Blog Part2
http://slidepdf.com/reader/full/how-to-add-post-excerpt-with-thumbnail-on-blogger-blog-part2 8/10
11 <b:if cond='data:blog.pageType == "static_page"'>
12
13 <data:post.body/>
14
15 <b:else/>
16
17 <b:if cond='data:blog.pageType != "item"'>
18
19 <div expr:id='" ;summary" ; + data:post .id'>
20
21 <data:post .body/></div>
22
23 <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>"); </script> <spanclass='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'>continue reading "<data:post .title/>" ;</a></span> </b:if>
24
25 <b:if cond='data:blog.pageType == "item"'><data:post .body/></b:if> </b:if>
26
27 <b:if cond='data:blog.pageType == "static_page"'><b:else/>
28
29 <b:if cond='data:blog.pageType != "item"'>
30
31 <div st yle='padding-top:3px;float:right;text-align:right;'><spanclass='rmlink'><aclass='comment-link' expr:href='data:post .addCommentUrl' expr:<span id="IL_AD9" class="IL_AD">onclick</span>='data:post.addCommentOnclick' style='margin-right:10px;'>Add Your Opinion</a></span><spanclass='rmlink'><b:if cond=
7/28/2019 How to Add Post Excerpt With Thumbnail on Blogger Blog Part2
http://slidepdf.com/reader/full/how-to-add-post-excerpt-with-thumbnail-on-blogger-blog-part2 9/10
'data:blog.pageType != "item"'> <b:if cond='data:post.allowComments'><aclass='comment-link' expr:href='data:post .addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 Opinion<b:else/><data:post.numComments/> Opinions </b:if></a> </b:if> </b:if></span>
32
33 <div style='clear: both;'/>
34
35 <div style='clear: both;'/>
36
37 </div>
38
39 </b:if>
40
41 </b:if>
42
43 </b:if>
We have done this post greatly and now, it will be great t o add some great t ouches to the codes by adding
our css so it’ll look nicer and presentable.
Search for ]]></b:skin>
Have you seen it? If yes! Paste the below CSS right above the code
view so urce
print?
1 .rmlink a{color:#fff; text-decoration:none; float:right; font-family:Arial,Helvet ica,sans-serif;padding-left:5px; padding-right:5px; padding-top:-2px; font-size:13px; font-weight:bold;text-align:center; background:#444343; -moz-border-radius:5px; -webkit-border-radius:5px;height:22px} .rmlink a:hover{color:#FFF; text-decoration:none; background:#007EC4; -moz-border-radius:5px; -webkit-border-radius:5px}
Now click save and you are done with the coding. Now tell me how s imple can this get?
Go check your blog o ut and you’ll see it there.
Note: I am not the owner of this code, it was given to me by a friend and I have used it and it is working great
and as normal as normal can get.
7/28/2019 How to Add Post Excerpt With Thumbnail on Blogger Blog Part2
http://slidepdf.com/reader/full/how-to-add-post-excerpt-with-thumbnail-on-blogger-blog-part2 10/10
Must Read: Keyboard Shortcuts For IPhone And IPad
Now, do you have comments, quest ions o r thoughts you’d like to share with us? Then please do by using
the comment box below. Remember that your comments and thoughts are highly welcomed and appreciated
Was this post helpful? Please do click the like button, share us and recommend us to f riends because you’ll
never know who among your f riends might be in need of great information like this.
Powered by OnenaijaBlog