如何设置横向＆＃34;最近的帖子＆＃34;博主的小部件？

Question

（第一次发帖，所以我希望我做得对！编辑：不，显然我不是OTL）

我希望在我的博客博客中添加一个小部件，该博客显示我最近的3个帖子，并附有缩略图和内容的简短预览（例如帖子的标题和前100个字符） ）。例如，看起来像this的东西，但是对于最近的帖子而不是相关的帖子（并且它不一定非常花哨= p）。

不幸的是，我还没有找到一个可以开展工作的模板。我能得到的最接近的是this。 （我希望代码可以从博客本身中检索出来，因为它差不多有250行，而且我不太清楚如何分享它。而且，我知道博客看起来很难看。我只是把它扔在一起所以我可以把它作为参考 - 我更喜欢把我的实际博客保密：））。

问题是，每当我按照指示调整参数时，某些东西似乎就会破裂。我似乎无法添加标题，日期，摘要或＆＃34;阅读更多＆＃34;链接，因为当我尝试调整相关参数时，第2和第3个缩略图就会消失。

我知道一些HTML和CSS，但javascript对我来说还是一个新手。我不知道从哪里开始找出问题所在，更不用说修复它或者从头开始自己。任何帮助将不胜感激！

编辑：添加了小部件的完整html - 添加我的博客的整个编码，甚至只是模板的内容（只有CSS和变量定义，没有小部件或任何东西）会在字符限制上发布帖子，所以我希望这已经足够了！如果没有，请告诉我，让我知道还需要什么才能解决这个问题。

<b:widget id='HTML1' locked='false' title='Recent' type='HTML'>
                              <b:widget-settings>
                                <b:widget-setting name='content'>&lt;div id=&quot;bp_recent&quot;&gt;&lt;/div&gt;

&lt;script style=&quot;text/javascript&quot;&gt;

var postTitleOriginal,  myLink, myDiv, myImage,mySeparator;
var    main;
var float_clear=false;
var flag = 0;
function bprecentpostswiththumbnails(json) {

for (var i = 0; i &lt; numberOfPosts; i++) {
if (i == json.feed.entry.length) break;
var s;
    var entry = json.feed.entry[i];
    var postTitle = entry.title.$t;
    postTitleOriginal = postTitle;
    if (isNaN(titleLength) || titleLength == 0) {
        postTitle = &#39;&#39;;

    }
    else if (postTitle.length &gt; titleLength) postTitle = postTitle.substring(0, titleLength) + &quot;...&quot;;
    var postUrl=&quot;&quot;;
    for (var k = 0; k &lt; entry.link.length; k++) {
        if (entry.link[k].rel == &#39;replies&#39; &amp;&amp; entry.link[k].type == &#39;text/html&#39;) {
            var commentText = entry.link[k].title;
            var commentUrl = entry.link[k].href;
        }
        if (entry.link[k].rel == &#39;alternate&#39;) {
            postUrl = entry.link[k].href;
            break;
        }
    }
    if (showThumbs == true) {
        var thumbUrl = &quot;&quot;;
        try {
            thumbUrl = entry.media$thumbnail.url;
            thumbUrl = thumbUrl.replace(&quot;/s72-c/&quot;,&quot;/s&quot;+imgDim+&quot;-c/&quot;);
        } catch (error) {
            if (&quot;content&quot; in entry) s = entry.content.$t; else s=&quot;&quot;;
            if (thumbUrl == &quot;&quot; &amp;&amp; mediaThumbsOnly == false) {
                 regex = /http\:\/\/www\.youtube(-nocookie){0,1}\.com\/(v){0,1}(embed){0,1}\/(([^&quot;&amp;?&#39; ]*))/;
                videoIds = s.match(regex);
                if (videoIds != null) {
                    videoId = videoIds[4];
                }
                if (videoIds != null &amp;&amp; videoId != null) thumbUrl = &quot;http://img.youtube.com/vi/&quot; + videoId + &quot;/2.jpg&quot;
            }
            if (thumbUrl == &quot;&quot; &amp;&amp; mediaThumbsOnly == false) {
                a = s.indexOf(&quot;&lt;img&quot;);
                b = s.indexOf(&quot;src=\&quot;&quot;, a);
                c = s.indexOf(&quot;\&quot;&quot;, b + 5);
                d = s.substr(b + 5, c - b - 5);
                if ((a != -1) &amp;&amp; (b != -1) &amp;&amp; (c != -1) &amp;&amp; (d != &quot;&quot;)) thumbUrl = d;

            }

        }
        if(thumbUrl.indexOf(&quot;static.flickr.com&quot;)!=-1) {thumbUrl= thumbUrl.replace(&quot;_b_t.jpg&quot;,&quot;_s.jpg&quot;);thumbUrl= thumbUrl.replace(&quot;_m_t.jpg&quot;,&quot;_s.jpg&quot;);thumbUrl= thumbUrl.replace(&quot;_s_t.jpg&quot;,&quot;_s.jpg&quot;);
        thumbUrl= thumbUrl.replace(&quot;_b.jpg&quot;,&quot;_s.jpg&quot;);thumbUrl= thumbUrl.replace(&quot;_m.jpg&quot;,&quot;_s.jpg&quot;);}
        if (thumbUrl == &quot;&quot; &amp;&amp; showNoImage == true) 
        {
        thumbUrl = &quot;http://2.bp.blogspot.com/-erTXCq61ULM/TmHYAQBZ0GI/AAAAAAAACCs/6cBX54Dn6Gs/s72-c/default.png&quot;;
        try{if(defaultImage!=&quot;&quot;) thumbUrl=defaultImage;}catch(error){}
        thumbUrl = thumbUrl.replace(&quot;/s72-c/&quot;,&quot;/s&quot;+imgDim+&quot;-c/&quot;);
        }
    } 
    if (showPostDate == true) {
        var postdate = entry.published.$t;
        var cdyear = postdate.substring(0, 4);
        var cdmonth = postdate.substring(5, 7);
        var cdday = postdate.substring(8, 10);
        var monthnames = new Array();
        monthnames[1] = &quot;Jan&quot;;
        monthnames[2] = &quot;Feb&quot;;
        monthnames[3] = &quot;Mar&quot;;
        monthnames[4] = &quot;Apr&quot;;
        monthnames[5] = &quot;May&quot;;
        monthnames[6] = &quot;Jun&quot;;
        monthnames[7] = &quot;Jul&quot;;
        monthnames[8] = &quot;Aug&quot;;
        monthnames[9] = &quot;Sep&quot;;
        monthnames[10] = &quot;Oct&quot;;
        monthnames[11] = &quot;Nov&quot;;
        monthnames[12] = &quot;Dec&quot;;
    } 
    code = &quot;&quot;;
        main = document.getElementById(&#39;bp_recent&#39;);
        myDiv = document.createElement(&#39;div&#39;);
        myDiv.setAttribute(&quot;class&quot;, &quot;bp_item_title&quot;);
        myLink = createLink(postUrl,&quot;_top&quot;,postTitleOriginal)
        if(main.innerHTML!=&quot;&quot;){
        mySeparator = createDiv(&quot;bp_recent_separator&quot;);
        main.appendChild(mySeparator)
        }
        if(postTitle != &#39;&#39;){myDiv.appendChild(myLink);}
        main.appendChild(myDiv);if(postTitle != &#39;&#39;)myLink.innerHTML = postTitle;





    if (showThumbs == true &amp;&amp; thumbUrl != &quot;&quot;) {
        myImage = document.createElement(&#39;img&#39;);
        myImage.setAttribute(&quot;src&quot;, thumbUrl);
        if(imgFloat!=&quot;none&quot;)
        {
        float_clear=true;
        myImage.style.cssFloat=imgFloat;
        myImage.style.styleFloat=imgFloat;
        }
      try{if(myMargin!=0)myImage.style.margin = myMargin+&quot;px&quot;;} catch(error){}
        myImage.setAttribute(&quot;alt&quot;, postTitleOriginal);
        myImage.setAttribute(&quot;width&quot;, imgDim);
        myImage.setAttribute(&quot;height&quot;, imgDim);
        myLink = document.createElement(&#39;a&#39;);
        myLink.setAttribute(&quot;href&quot;, postUrl+&quot;?utm_source=bp_recent&amp;utm-medium=gadget&amp;utm_campaign=bp_recent&quot;);
        myLink.setAttribute(&quot;target&quot;, &quot;_top&quot;);
        myLink.setAttribute(&quot;title&quot;, postTitleOriginal);
        myLink.appendChild(myImage);

        myDiv = document.createElement(&#39;div&#39;);
        myDiv.setAttribute(&quot;class&quot;, &quot;bp_item_thumb&quot;);
        myDiv.appendChild(myLink);
        main.appendChild(myDiv);
    }

 try {
        if (&quot;content&quot; in entry) {
            var postContent = entry.content.$t;
        }
        else if (&quot;summary&quot; in entry) {
            var postContent = entry.summary.$t;
        }
        else var postContent = &quot;&quot;;
        var re = /&lt;\S[^&gt;]*&gt;/g;
        postContent = postContent.replace(re, &quot;&quot;);


        if (showSummary == true) {
            myDiv = createDiv(&quot;bp_item_summary&quot;);
                if (postContent.length &lt; summaryLength) {myDiv.appendChild(document.createTextNode(postContent));}
            else {
                postContent = postContent.substring(0, summaryLength);
                var quoteEnd = postContent.lastIndexOf(&quot; &quot;);
                postContent = postContent.substring(0, quoteEnd);
                myDiv.appendChild(document.createTextNode(postContent + &#39;...&#39;));
            }

            main.appendChild(myDiv);
        }
    } //end try
    catch (error) {}

    myDiv =  createDiv(&quot;bp_item_meta&quot;);
    myDiv.style.clear=&quot;both&quot;;
    myDiv.style.marginBottom=&quot;4px&quot;;


    if (showPostDate == true) {
        myDiv.appendChild(document.createTextNode(monthnames[parseInt(cdmonth, 10)] + &#39;-&#39; + cdday + &#39;-&#39; + cdyear));
        flag = 1;
    }

    if (showCommentCount == true) {
        if (flag == 1) {
            myDiv.appendChild(document.createTextNode(&quot; | &quot;));
        }
        if (commentText == &#39;1 Comments&#39;) commentText = &#39;1 Comment&#39;;
        if (commentText == &#39;0 Comments&#39;) commentText = &#39;No Comments&#39;;
        var myLink = createLink(commentUrl,&quot;_top&quot;,commentText + &quot; on &quot; + postTitleOriginal)
        myDiv.appendChild(myLink);
        myLink.innerHTML=commentText;
        flag = 1;;
    }

    if (showReadMore == true) {
        if (flag == 1) {
            myDiv.appendChild(document.createTextNode(&quot; | &quot;));
        }
        var myLink = createLink(postUrl,&quot;_top&quot;,postTitleOriginal)
        myDiv.appendChild(myLink);
        myLink.innerHTML = readMore+&quot; &amp;raquo;&quot;;
        flag = 1;;
    }



    if (flag == 1) main.appendChild(myDiv);

}

if(float_clear==true &amp;&amp; imgFloat!=&quot;none&quot;)
{
myDiv = createDiv(&quot;bp_clear_float&quot;);
myDiv.style.clear=imgFloat;
main.appendChild(myDiv);
}
document.getElementById(&quot;bp_recent_link&quot;).style.backgroundImage=&quot;url(&#39;http://3.bp.blogspot.com/-H8WPIh3wjr4/TmHnuo9tnnI/AAAAAAAACDE/_yuVqfb1HAk/blogger-widgets.png&#39;)&quot;;
document.getElementById(&quot;bp_recent_link&quot;).style.backgroundRepeat=&quot;no-repeat&quot;;
try{
if(myMargin!=0 &amp;&amp; imgFloat==&quot;left&quot; &amp;&amp; flag==0) document.getElementById(&quot;bp_recent_link&quot;).style.marginLeft = myMargin+&quot;px&quot;;
} catch(error){}
}


function createDiv(className)
{
var myDiv = document.createElement(&#39;div&#39;);
myDiv.setAttribute(&quot;class&quot;, className);
return myDiv;
}


function createLink(href,target,title)
{

var myLink = document.createElement(&#39;a&#39;);
        if(href.substring(href.length-13,href.length)==&quot;#comment-form&quot;) {href= href.substring(0,href.length-13)+&quot;?utm_source=bp_recent&amp;utm-medium=gadget&amp;utm_campaign=bp_recent&quot;+&quot;#comment-form&quot;;myLink.setAttribute(&quot;href&quot;, href);}
        else myLink.setAttribute(&quot;href&quot;, href+&quot;?utm_source=BP_recent&amp;utm-medium=gadget&amp;utm_campaign=bp_recent&quot;);
        myLink.setAttribute(&quot;target&quot;, target);
        myLink.setAttribute(&quot;title&quot;, title);
        return myLink;
}



&lt;/script&gt;

&lt;script style=&quot;text/javascript&quot;&gt;
var numberOfPosts = 3;
var showPostDate = true;
var showSummary = true;
var titleLength = 0;
var showCommentCount = false;
var showThumbs = true;
var showNoImage = true;
var imgDim = 180;
var imgFloat = &quot;left&quot;;
var myMargin = 5;
var mediaThumbsOnly = true;
var showReadMore = true;
&lt;/script&gt;

&lt;script src=&quot;http://thbdemo.blogspot.com/feeds/posts/default?max-results=5&amp;orderby=published&amp;alt=json-in-script&amp;callback=bprecentpostswiththumbnails&quot;&gt;
&lt;/script&gt;</b:widget-setting>
                              </b:widget-settings>
                              <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:includable>
</b:widget>

如上所述，我不能包含我的整个博客编码，因为这会使这篇文章超过字符限制，但我认为变量定义可能也有用/需要，所以我＆＃ 39; ll包括下面的部分（fyi：是的，变量是在小部件之前定义的）：

/* Variable definitions
====================
<Variable name="keycolor" description="Main Color" type="color" default="#66bbdd" value="#cc8366"/>
<Group description="Page Text" selector="body">
<Variable name="body.font" description="Font" type="font"
default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 12px Verdana, Geneva, sans-serif"/>
<Variable name="body.text.color" description="Text Color" type="color" default="#222222" value="#222222"/>
</Group>
<Group description="Backgrounds" selector=".body-fauxcolumns-outer">
<Variable name="body.background.color" description="Outer Background" type="color" default="#66bbdd" value="#51313a"/>
<Variable name="content.background.color" description="Main Background" type="color" default="#ffffff" value="#fff0ee"/>
<Variable name="header.background.color" description="Header Background" type="color" default="transparent" value="#cc8366"/>
</Group>
<Group description="Links" selector=".main-outer">
<Variable name="link.color" description="Link Color" type="color" default="#2288bb" value="#990019"/>
<Variable name="link.visited.color" description="Visited Color" type="color" default="#888888" value="#888888"/>
<Variable name="link.hover.color" description="Hover Color" type="color" default="#33aaff" value="#ff0066"/>
</Group>
<Group description="Blog Title" selector=".header h1">
<Variable name="header.font" description="Font" type="font"
default="normal normal 60px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 40px Fontdiner Swanky"/>
<Variable name="header.text.color" description="Title Color" type="color" default="#3399bb"  value="#ffffff"/>
</Group>
<Group description="Blog Description" selector=".header .description">
<Variable name="description.text.color" description="Description Color" type="color"
default="#777777"  value="#ffffff"/>
</Group>
<Group description="Tabs Text" selector=".tabs-inner .widget li a">
<Variable name="tabs.font" description="Font" type="font"
default="normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 16px Calibri"/>
<Variable name="tabs.text.color" description="Text Color" type="color" default="#999999" value="#997777"/>
<Variable name="tabs.selected.text.color" description="Selected Color" type="color" default="#000000" value="#000000"/>
</Group>
<Group description="Tabs Background" selector=".tabs-outer .PageList">
<Variable name="tabs.background.color" description="Background Color" type="color" default="#f5f5f5" value="#ffeeee"/>
<Variable name="tabs.selected.background.color" description="Selected Color" type="color" default="#eeeeee" value="#fff0ee"/>
</Group>
<Group description="Post Title" selector="h3.post-title, .comments h4">
<Variable name="post.title.font" description="Font" type="font"
default="normal normal 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 24px Georgia, Utopia, &#39;Palatino Linotype&#39;, Palatino, serif"/>
</Group>
<Group description="Date Header" selector=".date-header">
<Variable name="date.header.color" description="Text Color" type="color"
default="$(body.text.color)" value="#222222"/>
<Variable name="date.header.background.color" description="Background Color" type="color"
default="transparent" value="rgba(0, 0, 0, 0)"/>
<Variable name="date.header.font" description="Text Font" type="font"
default="normal bold 11px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal bold 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
<Variable name="date.header.padding" description="Date Header Padding" type="string" default="inherit" value="inherit"/>
<Variable name="date.header.letterspacing" description="Date Header Letter Spacing" type="string" default="inherit" value="inherit"/>
<Variable name="date.header.margin" description="Date Header Margin" type="string" default="inherit" value="inherit"/>
</Group>
<Group description="Post Footer" selector=".post-footer">
<Variable name="post.footer.text.color" description="Text Color" type="color" default="#666666" value="#665c55"/>
<Variable name="post.footer.background.color" description="Background Color" type="color"
default="#f9f9f9" value="#eee0dd"/>
<Variable name="post.footer.border.color" description="Shadow Color" type="color" default="#eeeeee" value="#eeeeee"/>
</Group>
<Group description="Gadgets" selector="h2">
<Variable name="widget.title.font" description="Title Font" type="font"
default="normal bold 11px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal bold 12px Georgia, Utopia, &#39;Palatino Linotype&#39;, Palatino, serif"/>
<Variable name="widget.title.text.color" description="Title Color" type="color" default="#000000" value="#000000"/>
<Variable name="widget.alternate.text.color" description="Alternate Color" type="color" default="#999999" value="#999999"/>
</Group>
<Group description="Images" selector=".main-inner">
<Variable name="image.background.color" description="Background Color" type="color" default="#ffffff" value="#ffffff"/>
<Variable name="image.border.color" description="Border Color" type="color" default="#eeeeee" value="#eeeeee"/>
<Variable name="image.text.color" description="Caption Text Color" type="color" default="$(body.text.color)" value="#222222"/>
</Group>
<Group description="Accents" selector=".content-inner">
<Variable name="body.rule.color" description="Separator Line Color" type="color" default="#eeeeee" value="#eedddd"/>
<Variable name="tabs.border.color" description="Tabs Border Color" type="color" default="$(body.rule.color)" value="#eee5dd"/>
</Group>
<Variable name="body.background" description="Body Background" type="background"
color="$(body.background.color)" default="$(color) none repeat scroll top left" value="$(color) none no-repeat scroll center center"/>
<Variable name="body.background.override" description="Body Background Override" type="string" default="" value=""/>
<Variable name="body.background.gradient.cap" description="Body Gradient Cap" type="url"
default="url(https://resources.blogblog.com/blogblog/data/1kt/simple/gradients_light.png)" value="none"/>
<Variable name="body.background.gradient.tile" description="Body Gradient Tile" type="url"
default="url(https://resources.blogblog.com/blogblog/data/1kt/simple/body_gradient_tile_light.png)" value="none"/>
<Variable name="content.background.color.selector" description="Content Background Color Selector" type="string" default=".content-inner" value=".content-inner"/>
<Variable name="content.padding" description="Content Padding" type="length" default="10px" min="0" max="100px" value="10px"/>
<Variable name="content.padding.horizontal" description="Content Horizontal Padding" type="length" default="$(content.padding)" min="0" max="100px" value="10px"/>
<Variable name="content.shadow.spread" description="Content Shadow Spread" type="length" default="40px" min="0" max="100px" value="40px"/>
<Variable name="content.shadow.spread.webkit" description="Content Shadow Spread (WebKit)" type="length" default="5px" min="0" max="100px" value="5px"/>
<Variable name="content.shadow.spread.ie" description="Content Shadow Spread (IE)" type="length" default="10px" min="0" max="100px" value="10px"/>
<Variable name="main.border.width" description="Main Border Width" type="length" default="0" min="0" max="10px" value="0"/>
<Variable name="header.background.gradient" description="Header Gradient" type="url" default="none" value="url(https://www.blogblog.com/1kt/simple/gradients_light.png)"/>
<Variable name="header.shadow.offset.left" description="Header Shadow Offset Left" type="length" default="-1px" min="-50px" max="50px" value="1px"/>
<Variable name="header.shadow.offset.top" description="Header Shadow Offset Top" type="length" default="-1px" min="-50px" max="50px" value="2px"/>
<Variable name="header.shadow.spread" description="Header Shadow Spread" type="length" default="1px" min="0" max="100px" value="3px"/>
<Variable name="header.padding" description="Header Padding" type="length" default="30px" min="0" max="100px" value="30px"/>
<Variable name="header.border.size" description="Header Border Size" type="length" default="1px" min="0" max="10px" value="0"/>
<Variable name="header.bottom.border.size" description="Header Bottom Border Size" type="length" default="$(header.border.size)" min="0" max="10px" value="0"/>
<Variable name="header.border.horizontalsize" description="Header Horizontal Border Size" type="length" default="0" min="0" max="10px" value="0"/>
<Variable name="description.text.size" description="Description Text Size" type="string" default="140%" value="140%"/>
<Variable name="tabs.margin.top" description="Tabs Margin Top" type="length" default="0" min="0" max="100px" value="0"/>
<Variable name="tabs.margin.side" description="Tabs Side Margin" type="length" default="30px" min="0" max="100px" value="30px"/>
<Variable name="tabs.background.gradient" description="Tabs Background Gradient" type="url"
default="url(https://resources.blogblog.com/blogblog/data/1kt/simple/gradients_light.png)" value="none"/>
<Variable name="tabs.border.width" description="Tabs Border Width" type="length" default="1px" min="0" max="10px" value="1px"/>
<Variable name="tabs.bevel.border.width" description="Tabs Bevel Border Width" type="length" default="1px" min="0" max="10px" value="1px"/>
<Variable name="post.margin.bottom" description="Post Bottom Margin" type="length" default="25px" min="0" max="100px" value="25px"/>
<Variable name="image.border.small.size" description="Image Border Small Size" type="length" default="2px" min="0" max="10px" value="2px"/>
<Variable name="image.border.large.size" description="Image Border Large Size" type="length" default="5px" min="0" max="10px" value="5px"/>
<Variable name="page.width.selector" description="Page Width Selector" type="string" default=".region-inner" value=".region-inner"/>
<Variable name="page.width" description="Page Width" type="string" default="auto" value="auto"/>
<Variable name="main.section.margin" description="Main Section Margin" type="length" default="15px" max="100px" value="15px"/>
<Variable name="main.padding" description="Main Padding" type="length" default="15px" min="0" max="100px" value="15px"/>
<Variable name="main.padding.top" description="Main Padding Top" type="length" default="30px" min="0" max="100px" value="30px"/>
<Variable name="main.padding.bottom" description="Main Padding Bottom" type="length" default="30px" min="0" max="100px" value="30px"/>
<Variable name="paging.background"
color="$(content.background.color)"
description="Background of blog paging area" type="background"
default="transparent none no-repeat scroll top center" value="transparent none no-repeat scroll top center"/>
<Variable name="footer.bevel" description="Bevel border length of footer" type="length" default="0" min="0" max="10px" value="0"/>
<Variable name="mobile.background.overlay" description="Mobile Background Overlay" type="string"
default="transparent none repeat scroll top left" value="transparent none repeat scroll top left"/>
<Variable name="mobile.background.size" description="Mobile Background Size" type="string" default="auto" value="auto"/>
<Variable name="mobile.button.color" description="Mobile Button Color" type="color" default="#ffffff"  value="#ffffff"/>
<Variable name="startSide" description="Side where text starts in blog language" type="automatic" default="left"/>
<Variable name="endSide" description="Side where text ends in blog language" type="automatic" default="right"/>