o ne naijablo g.

co m

http://o nenaijablo g.co m/2013/06/ho w-to -add-po st-excerpt-with-thumbnail-o n-blo gger-blo g-part2/

How To Add Post Excerpt With Thumbnail On Blogger Blog Part2

babanature June 1, 2013

Hey guys, f irst let me say a big happy new month to you! Blogger blog, is a great platf orm that some bloggers should think of having a niche site with, why? Because compare to other platf orms, they have some more benef its which I know youll 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 discussing the main topic which is How to Add Post Excerpt with Thumbnail on Blogger Blog Part2. Must Read: Top 20 WordPress Plugin I Just cant Do without

In case you dont know, I have written about this topic sometimes back but it looks like the code does not have f acility f or adjusting 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, ill 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 too much talk, lets go on to the main topic at hand and see what well come up with. Ill say that I am bringing this tutorial out because a lady requested f or it, so lets roll. Ok! First go to your blogger blog dashboard >>> Click Template >>> Click Edit HT ML. Are you there? If yes! Lets 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 f or the </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.

Have you seen the tag? Right above the </head> tag, paste the below code view source print? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <script t ype='t ext /javascript '> </script > img_t humb_widt h = 300; img_t humb_height = 200; summary_img = 350; summary_noimg = 300; var t humbnail_mode ="no-oat " ; <<span id="IL_AD6" class="IL_AD">script t ype</span>='t ext /javascript '>

17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 chop = (chop < st rx.lengt h-1) ?chop : st rx.lengt h-2; } st rx = s.join(""); }} s[i] = s[i].subst ring(s[i].indexOf(">")+1,s[i].lengt h); if(s[i].indexOf(">")!=-1){ for(var i=0;i<s.lengt h;i++){ var s = st rx.split ("<"); { if(st rx.indexOf("<")!=-1) funct ion removeHt mlTag(st rx,chop){

40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 imgt ag ='<span st yle="oat :left ; padding:0px 10px 5px 0px;"><img src="'+img[0].src+ '" widt h="'+img_t humb_widt h+'px" height ="'+img_t humb_height +'px"/></span>'; if(img.lengt h>=1) { var summ = summary_noimg; var img = div.get Element sByTagName("img"); var imgt ag =""; var div = document .get Element ById(pID); funct ion creat eSummaryAndThumb(pID){ } ret urn st rx+'...'; st rx = st rx.subst ring(0,chop-1); while(st rx.charAt (chop-1)!=' ' && st rx.indexOf(' ',chop)!=-1)chop++;

62 63 64 65 66 67 68 69 70 71 72 73 74 75 </script > } div.innerHTML = summary; var summary = imgt ag +'<div>' + removeHt mlTag(div.innerHTML,summ) +'</div>'; } summ = summary_img;

Have you done that? If yes! T hat means we have done the part one of the whole series, now lets 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 f or the below code as well. view source print? 1 2 3 4 5 <divclass='post -body ent ry-cont ent ' expr:id='&quot ;post -body-&quot ; + dat a:post .id' <!-- Thenuse t he post bodyas t he schema.org descript ion,for good G+/FB snippet ing. --> <b:if cond='dat a:blog.met aDescript ion == &quot ;&quot ;'>

it emprop='descript ion art icleBody'> 6 7 8 9 10 11 12 13 14 15 <divclass='post -body ent ry-cont ent ' expr:id='&quot ;post -body-&quot ; + dat a:post .id' it emprop='art icleBody'> </div> <b:else/> <!-- clearfor phot os oat s --> <<span id="IL_AD3" class="IL_AD">div st yle</span>='clear: bot h;'/> <dat a:post .body/>

16 17 18 19 20 21 22 23 24 25 26 27 <b:if cond='dat a:post .hasJumpLink'> </b:if> </div> <!-- clearfor phot os oat s --> <div st yle='clear: bot h;'/> <dat a:post .body/>

28 29 30 31 32 33 34 35 36 37 </b:if> </div> <dat a:post .jumpText /></a> <a expr:href='dat a:post .url + &quot ;#more&quot ;' expr:t it le='dat a:post .t it le'> <divclass='jump-link'>

Have you seen it? If yes! Replace it with the below code. view source print? 1 2 3 4 5 6 7 8 9 10 <st yle>.fullpost {display:none;}</st yle> <b:else/> <p><dat a:post .body/></p> <st yle>.fullpost {display:inline;}</st yle> <b:if cond='dat a:blog.pageType == &quot ;it em&quot ;'>

11 12 13 14 15 16 17 18 19 20 21 22 23

<b:if cond='dat a:blog.pageType == &quot ;st at ic_page&quot ;'>

<dat a:post .body/>

<b:else/>

<b:if cond='dat a:blog.pageType != &quot ;it em&quot ;'>

<div expr:id='&quot ;summary&quot ; + dat a:post .id'>

<dat a:post .body/></div>

<script t ype='t ext /javascript ' >creat eSummaryAndThumb(&quot ;summary<dat a:post .id/>&quot ;); </script > <spanclass= 'rmlink' st yle='oat :right ;padding-t op:20px;'><a expr:href='dat a:post .url'>cont inue reading &quot ;<dat a:post .t it le/>&quot ;</a></span> </b:if>

24 25 26 27 28 29 30 31 <div st yle='padding-t op:3px;oat :right ;t ext -align:right ;'><spanclass='rmlink'><aclass= 'comment -link' expr:href='dat a:post .addComment Url' expr:<span id="IL_AD9" class="IL_AD" >onclick</span>='dat a:post .addComment Onclick' st yle='margin-right :10px;' >Add Your Opinion</a></span><spanclass='rmlink'><b:if cond= <b:if cond='dat a:blog.pageType != &quot ;it em&quot ;'> <b:if cond='dat a:blog.pageType == &quot ;st at ic_page&quot ;'><b:else/> <b:if cond='dat a:blog.pageType == &quot ;it em&quot ;'><dat a:post .body/></b:if> </b:if>

'dat a:blog.pageType != &quot ;it em&quot ;'> <b:if cond='dat a:post .allowComment s'><aclass ='comment -link' expr:href='dat a:post .addComment Url' expr:onclick= 'dat a:post .addComment Onclick'><b:if cond='dat a:post .numComment s == 1'>1 Opinion<b: else/><dat a:post .numComment s/> Opinions </b:if></a> </b:if> </b:if></span> 32 33 34 35 36 37 38 39 40 41 42 43 </b:if> </b:if> </b:if> </div> <div st yle='clear: bot h;'/> <div st yle='clear: bot h;'/>

We have done this post greatly and now, it will be great to add some great touches to the codes by adding our css so itll look nicer and presentable. Search f or ]]></b:skin> Have you seen it? If yes! Paste the below CSS right above the code view source print? 1 .rmlink a{color:#f; t ext -decorat ion:none; oat :right ; font -family:Arial,Helvet ica,sans-serif; padding-left :5px; padding-right :5px; padding-t op:-2px; font -size:13px; font -weight :bold; t ext -align:cent er; background:#444343; -moz-border-radius:5px; -webkit -border-radius:5px; height :22px} .rmlink a:hover{color:#FFF; t ext -decorat ion:none; background:#007EC4; -mozborder-radius:5px; -webkit -border-radius:5px}

Now click save and you are done with the coding. Now tell me how simple can this get? Go check your blog out and youll 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.

Must Read: Keyboard Shortcuts For IPhone And IPad Now, do you have comments, questions or thoughts youd like to share with us? T hen please do by using the comment box below. Remember that your comments and thoughts are highly welcomed and appreciated Was this post helpf ul? Please do click the like button, share us and recommend us to f riends because youll never know who among your f riends might be in need of great inf ormation like this.

Powered by OnenaijaBlog