comments - 如何手动修补 Blogger 模板以使用 Disqus

Question

我正在尝试将 disqus 添加到我的博客中，并尝试按照本指南进行操作：

但是，他们的说明与我在自定义模板上的说明完全不同。

这是模板：

http://www.w3.org/1999/xhtml'xmlns:b='http://www.google.com/2005/gml/b'xmlns:data='http://www.google.com/ _ _ _ 2005/gml/data 'xmlns:expr=' http ://www.google.com/2005/gml/expr '>

<b:skin><![CDATA[/*-----------------------------------------------

Blogger 模板样式名称：图片窗口设计者：Josh Peterson 网址：www.noaesthetic.com -------------------------------- --------------- */

/* 变量定义 ==================== http://themes.googleusercontent.com/image?id=1OACCYOE0-eoTRTfsBuX1NMN9nz599ufI1Jh0CggPFA_sK80AGkIr8pLtYRpNUKPmwtEa) repeat-x 固定顶部中心" 值="#9a927f url( http://themes.googleusercontent.com/image?id=0BwVBOzw_-hbMODUwNDk4YWQtMjg4NS00MzlmLWJhNzMtYzM5ZmIzYzdkZDRj ) 无重复固定顶部中心 /* 来源：peeterv ( http://www.istockphoto.com/googleimages.php? id=2646746&platform=blogger ) */"/>

http://www.blogblog.com/1kt/transparent/white80.png) 重复滚动左上角"/>

http://www.blogblog.com/1kt/transparent/header_gradient_shade.png)"/>

http://www.blogblog.com/1kt/transparent/tabs_gradient_shade.png)"/> http://www.blogblog.com/1kt/transparent/white80.png)" value="url( http://www .blogblog.com/1kt/transparent/tabs_gradient_shade.png )"/> http://www.blogblog.com/1kt/transparent/black50.png) 左上角重复滚动" value="transparent none no-repeat scroll left top left "/>

http://www.blogblog.com/1kt/transparent/white80.png) 重复滚动左上角" value="透明无重复滚动顶部中心"/>

http://www.blogblog.com/1kt/transparent/black50.png) 重复滚动左上" value="透明 url( http://www.blogblog.com/1kt/transparent/black50.png ) 重复滚动顶部左"/>

*/

/* 内容 - - - - - - - - - - - - - - - - - - - - - - - - */ body { 字体：$(body.font); 颜色：$（body.text.color）；}

html body .region-inner { min-width: 0; 最大宽度：100%；宽度：自动；}

.content-outer { 字体大小：90%; }

一个：链接{文本装饰：无；颜色：$（链接颜色）；}

一：访问{文本装饰：无；颜色：$(link.visited.color); }

一个：悬停{文本装饰：下划线；颜色：$(link.hover.color); }

.body-fauxcolumn-outer { 背景：$(body.background); }

.content-outer { 背景：$(content.background);

-moz-border-radius: $(content.border.radius); -webkit-border-radius: $(content.border.radius); -goog-ms-border-radius: $(content.border.radius); 边界半径：$（content.border.radius）；

-moz-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15); -webkit-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15); -goog-ms-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15); 盒子阴影：0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);

边距：$(content.margin) 自动；}

.content-inner { 填充：$(content.padding); }

/* 标题 ----------------------------------------------- */ .header-outer { background: $(header.background.color) $(header.background.gradient) repeat-x 滚动左上角；_背景图像：无；

颜色：$(header.text.color);

-moz-border-radius: $(header.border.radius); -webkit-border-radius: $(header.border.radius); -goog-ms-border-radius: $(header.border.radius); 边界半径：$（header.border.radius）；}

.Header img, .Header #header-inner { -moz-border-radius: $(header.border.radius); -webkit-border-radius: $(header.border.radius); -goog-ms-border-radius: $(header.border.radius); 边界半径：$（header.border.radius）；}

.header-inner .Header .titlewrapper, .header-inner .Header .descriptionwrapper { padding-left: $(header.padding); padding-right: $(header.padding); }

.Header h1 { 字体：$(header.font); 文字阴影：1px 1px 3px rgba(0, 0, 0, 0.3); }

.Header h1 a { 颜色：$(header.text.color); }

.Header .description { 字体大小：130%; }

/* 选项卡 ----------------------------------------------- */ .tabs-inner { 边距：.5em $(tabs.margin.sides) $(tabs.margin.bottom); 填充：0；}

.tabs-inner .section { 边距：0; }

.tabs-inner .widget ul { padding: 0;

背景：$(tabs.background.color) $(tabs.background.gradient) 重复滚动底部；

-moz-border-radius: $(tabs.border.radius); -webkit-border-radius: $(tabs.border.radius); -goog-ms-border-radius: $(tabs.border.radius); 边框半径：$（tabs.border.radius）；}

.tabs-inner .widget li { 边框：无；}

.tabs-inner .widget li a { display: block;

填充：0.5em 1em；边距-$endSide: $(tabs.spacing);

颜色：$（tabs.text.color）；字体：$（tabs.font）；

-moz-border-radius: $(tab.border.radius) $(tab.border.radius) 0 0; -webkit-border-top-left-radius: $(tab.border.radius); -webkit-border-top-right-radius: $(tab.border.radius); -goog-ms-border-radius: $(tab.border.radius) $(tab.border.radius) 0 0; 边框半径：$（tab.border.radius）$（tab.border.radius）0 0；

背景：$（tab.background）；

边框-$endSide: 1px 实心 $(tabs.separator.color); }

.tabs-inner .widget li:first-child a { padding-$startSide: 1.25em;

-moz-border-radius-top$startSide: $(tab.first.border.radius); -moz-border-radius-bottom$startSide: $(tabs.border.radius); -webkit-border-top-$startSide-radius: $(tab.first.border.radius); -webkit-border-bottom-$startSide-radius: $(tabs.border.radius); -goog-ms-border-top-$startSide-radius: $(tab.first.border.radius); -goog-ms-border-bottom-$startSide-radius: $(tabs.border.radius); 边界顶部-$startSide-radius: $(tab.first.border.radius); 边界-底部-$startSide-radius: $(tabs.border.radius); }

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover { position: relative; z-index：1；

背景：$(tabs.selected.background.color) $(tab.selected.background.gradient) 重复滚动底部；颜色：$（tabs.selected.text.color）；

-moz-box-shadow: 0 0 $(region.shadow.spread) rgba(0, 0, 0, .15); -webkit-box-shadow: 0 0 $(region.shadow.spread) rgba(0, 0, 0, .15); -goog-ms-box-shadow: 0 0 $(region.shadow.spread) rgba(0, 0, 0, .15); 盒子阴影：0 0 $(region.shadow.spread) rgba(0, 0, 0, .15); }

/* 标题 ----------------------------------------------- */ h2 { 字体：$(widget.title.font); 文本转换：$(widget.title.text.transform); 颜色：$(widget.title.text.color); 边距：0.5em 0；}

/* 主要的 - - - - - - - - - - - - - - - - - - - - - - - - */ .main-outer { 背景：$(main.background);

-moz-border-radius: $(main.border.radius.top) $(main.border.radius.top) 0 0; -webkit-border-top-left-radius: $(main.border.radius.top); -webkit-border-top-right-radius: $(main.border.radius.top); -webkit-border-bottom-left-radius：0；-webkit-border-bottom-right-radius：0；-goog-ms-border-radius: $(main.border.radius.top) $(main.border.radius.top) 0 0; 边界半径：$（main.border.radius.top）$（main.border.radius.top）0 0；

-moz-box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15); -webkit-box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15); -goog-ms-box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15); 盒子阴影：0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15); }

.main-inner { 填充：15px $(main.padding.sides) 20px; }

.main-inner .column-center-inner { 填充：0 0; }

.main-inner .column-left-inner { padding-left: 0; }

.main-inner .column-right-inner { padding-right: 0; }

/* 帖子 ------------------------------------------------------------ */ h3.post-title { 边距：0; 字体：$（post.title.font）；}

.comments h4 { 边距：1em 0 0; 字体：$（post.title.font）；}

.post-outer { 背景颜色：$(post.background.color); 边框：实心 1px $(post.border.color);

-moz-border-radius: $(post.border.radius); -webkit-border-radius：$（post.border.radius）；边界半径：$（post.border.radius）；-goog-ms-border-radius：$（post.border.radius）；

填充：15px 20px；边距：0 $(post.margin.sides) 20px；}

.post-body { 行高：1.4; 字体大小：110%；}

.post-header { 边距：0 0 1.5em;

颜色：$（post.footer.text.color）；行高：1.6；}

.post-footer { 边距：.5em 0 0;

颜色：$（post.footer.text.color）；行高：1.6；}

博客寻呼机{

字体大小：140% }

评论 .comment-author {

填充顶部：1.5em；

边框顶部：虚线 1px #ccc; 边框顶部：虚线 1px rgba(128, 128, 128, .5);

背景位置：0 1.5em；}

评论 .comment-author:first-child {

填充顶部：0；

边框顶部：无；}

.avatar-image-container { 边距：.2em 0 0; }

/* 小部件 ------------------------------------------------------------ */ .widget ul, .widget #ArchiveList ul.flat { padding: 0; 列表样式：无；}

.widget ul li, .widget #ArchiveList ul.flat li {border-top: dashed 1px #ccc; 边框顶部：虚线 1px rgba(128, 128, 128, .5); }

.widget ul li:first-child, .widget #ArchiveList ul.flat li:first-child {border-top: none; }

.widget .post-body ul { 列表样式：光盘；}

.widget .post-body ul li { 边框：无；}

/* 页脚 ----------------------------------------------------------- */ .footer-outer { 颜色:$(footer.text.color); 背景：$（页脚。背景）；

-moz-border-radius: $(footer.border.radius.top) $(footer.border.radius.top) $(footer.border.radius.bottom) $(footer.border.radius.bottom); -webkit-border-top-left-radius: $(footer.border.radius.top); -webkit-border-top-right-radius: $(footer.border.radius.top); -webkit-border-bottom-left-radius: $(footer.border.radius.bottom); -webkit-border-bottom-right-radius: $(footer.border.radius.bottom); -goog-ms-border-radius: $(footer.border.radius.top) $(footer.border.radius.top) $(footer.border.radius.bottom) $(footer.border.radius.bottom); 边界半径： $(footer.border.radius.top) $(footer.border.radius.top) $(footer.border.radius.bottom) $(footer.border.radius.bottom);

-moz-box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15); -webkit-box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15); -goog-ms-box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15); 盒子阴影：0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15); }

.footer-inner { 填充：10px $(main.padding.sides) 20px; }

.footer-outer a { 颜色：$(footer.link.color); }

.footer-outer a:visited { 颜色: $(footer.link.visited.color); }

.footer-outer a:hover { 颜色: $(footer.link.hover.color); }

.footer-outer .widget h2 { 颜色：$(footer.widget.title.text.color); } ]]>

<b:template-skin>
  <b:variable default='930px' name='content.width' type='length' value='930px'/>
  <b:variable default='0' name='main.column.left.width' type='length' value='180px'/>
  <b:variable default='360px' name='main.column.right.width' type='length' value='180px'/>

  <![CDATA[
  body {
    min-width: $(content.width);
  }

  .content-outer, .region-inner {
    min-width: $(content.width);
    max-width: $(content.width);
    _width: $(content.width);
  }

  .main-inner .columns {
    padding-left: $(main.column.left.width);
    padding-right: $(main.column.right.width);
  }

  .main-inner .fauxcolumn-center-outer {
    left: $(main.column.left.width);
    right: $(main.column.right.width);
    /* IE6 does not respect left and right together */
    _width: expression(this.parentNode.offsetWidth -
        parseInt("$(main.column.left.width)") -
        parseInt("$(main.column.right.width)") + 'px');
  }

  .main-inner .fauxcolumn-left-outer {
    width: $(main.column.left.width);
  }

  .main-inner .fauxcolumn-right-outer {
    width: $(main.column.right.width);
  }

  .main-inner .column-left-outer {
    width: $(main.column.left.width);
    right: $(main.column.left.width);
    margin-right: -$(main.column.left.width);
  }

  .main-inner .column-right-outer {
    width: $(main.column.right.width);
    margin-right: -$(main.column.right.width);
  }

  #layout {
    min-width: 0;
  }

  #layout .content-outer {
    min-width: 0;
    width: 800px;
  }

  #layout .region-inner {
    min-width: 0;
    width: auto;
  }
  ]]>
</b:template-skin>

<header>
<div class='header-outer'>
<div class='header-cap-top cap-top'>
  <div class='cap-left'/>
  <div class='cap-right'/>
</div>
<div class='fauxborder-left header-fauxborder-left'>
<div class='fauxborder-right header-fauxborder-right'/>
<div class='region-inner header-inner'>
  <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<div class='tabs-outer'>
<div class='tabs-cap-top cap-top'>
  <div class='cap-left'/>
  <div class='cap-right'/>
</div>
<div class='fauxborder-left tabs-fauxborder-left'>
<div class='fauxborder-right tabs-fauxborder-right'/>
<div class='region-inner tabs-inner'>
  <b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>

<div class='main-outer'>
<div class='main-cap-top cap-top'>
  <div class='cap-left'/>
  <div class='cap-right'/>
</div>

<div class='fauxborder-left main-fauxborder-left'>
<div class='fauxborder-right main-fauxborder-right'/>
<div class='region-inner main-inner'>

  <div class='columns fauxcolumns'>

    <div class='fauxcolumn-outer fauxcolumn-center-outer'>
    <div class='cap-top'>
      <div class='cap-left'/>
      <div class='cap-right'/>
    </div>
    <div class='fauxborder-left'>
    <div class='fauxborder-right'/>
    <div class='fauxcolumn-inner'>
    </div>
    </div>
    <div class='cap-bottom'>
      <div class='cap-left'/>
      <div class='cap-right'/>
    </div>
    </div>

    <div class='fauxcolumn-outer fauxcolumn-left-outer'>
    <div class='cap-top'>
      <div class='cap-left'/>
      <div class='cap-right'/>
    </div>
    <div class='fauxborder-left'>
    <div class='fauxborder-right'/>
    <div class='fauxcolumn-inner'>
    </div>
    </div>
    <div class='cap-bottom'>
      <div class='cap-left'/>
      <div class='cap-right'/>
    </div>
    </div>

    <div class='fauxcolumn-outer fauxcolumn-right-outer'>
    <div class='cap-top'>
      <div class='cap-left'/>
      <div class='cap-right'/>
    </div>
    <div class='fauxborder-left'>
    <div class='fauxborder-right'/>
    <div class='fauxcolumn-inner'>
    </div>
    </div>
    <div class='cap-bottom'>
      <div class='cap-left'/>
      <div class='cap-right'/>
    </div>
    </div>

    <!-- corrects IE6 width calculation -->
    <div class='columns-inner'>

    <div class='column-center-outer'>
    <div class='column-center-inner'>
      <b:section class='main' id='main' showaddelement='no'>

    <div class='column-left-outer'>
    <div class='column-left-inner'>
      <aside>
      <macro:include id='main-column-left-sections' name='sections'>
        <macro:param default='0' name='num' value='1'/>
        <macro:param default='sidebar-left' name='idPrefix'/>
        <macro:param default='sidebar' name='class'/>
        <macro:param default='true' name='includeBottom'/>
      </macro:include>
      </aside>
    </div>
    </div>

    <div class='column-right-outer'>
    <div class='column-right-inner'>
      <aside>
      <macro:include id='main-column-right-sections' name='sections'>
        <macro:param default='2' name='num' value='1'/>
        <macro:param default='sidebar-right' name='idPrefix'/>
        <macro:param default='sidebar' name='class'/>
        <macro:param default='true' name='includeBottom'/>
      </macro:include>
      </aside>
    </div>
    </div>

    </div>

    <div style='clear: both'/>
  <!-- columns -->
  </div>

<!-- main -->
</div>
</div>
<div class='main-cap-bottom cap-bottom'>
  <div class='cap-left'/>
  <div class='cap-right'/>
</div>
</div>

<footer>
<div class='footer-outer'>
<div class='footer-cap-top cap-top'>
  <div class='cap-left'/>
  <div class='cap-right'/>
</div>
<div class='fauxborder-left footer-fauxborder-left'>
<div class='fauxborder-right footer-fauxborder-right'/>
<div class='region-inner footer-inner'>
  <macro:include id='footer-sections' name='sections'>
    <macro:param default='2' name='num' value='3'/>
    <macro:param default='footer' name='idPrefix'/>
    <macro:param default='foot' name='class'/>
    <macro:param default='false' name='includeBottom'/>
  </macro:include>
  <!-- outside of the include in order to lock Attribution widget -->
  <b:section class='foot' id='footer-3' showaddelement='no'>

document.body.className = document.body.className.replace('loading', '');

<macro:if cond='data:col.num &gt;= 2'>
  <table border='0' cellpadding='0' cellspacing='0' mexpr:class='&quot;section-columns columns-&quot; + data:col.num'>
  <tbody>
  <tr>
    <td class='first columns-cell'>
      <b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + &quot;-2-1&quot;'/>
    </td>

    <td class='columns-cell'>
      <b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + &quot;-2-2&quot;'/>
    </td>

    <macro:if cond='data:col.num &gt;= 3'>
      <td class='columns-cell'>
        <b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + &quot;-2-3&quot;'/>
      </td>
    </macro:if>

    <macro:if cond='data:col.num &gt;= 4'>
      <td class='columns-cell'>
        <b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + &quot;-2-4&quot;'/>
      </td>
    </macro:if>
  </tr>
  </tbody>
  </table>

  <macro:if cond='data:col.includeBottom'>
    <b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + &quot;-3&quot;' showaddelement='no'/>
  </macro:if>
</macro

comments - 如何手动修补 Blogger 模板以使用 Disqus

博客寻呼机{

评论 .comment-author {

评论 .comment-author:first-child {

0 回答 0

Related

Reference