Blogger HTML & CSS code

August 16, 2009

Blogger HTML & CSS code

本文記錄着本站已套用過的Html & CSS Code，以及修改過的一些屬性，以免日後出現bug又找不到原碼的情況。
※ jquery資料庫加一次就可以
HTML轉碼：HTML Encoder

　回到頂端按鈕
　</head>上方加入以下程式碼 (第一行是Jquery資料庫)

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'/>

<script type='text/javascript'>
$(function(){

    $("#gotop").click(function(){

        jQuery("html,body").animate({

            scrollTop:0

        },600);
    });

    $(window).scroll(function() {

        if ( $(this).scrollTop() &gt; 300){

            $('#gotop').fadeIn("fast");

        } else {

            $('#gotop').stop().fadeOut("fast");

        }

    });
});

</script>

<style type='text/css'>
<!--
#gotop {

    z-index: 999;

    top: 1;

    position: fixed;

    display: none;

    right: 0px;

    bottom: 40px; 

    padding: 2px 8px;

    font-size: 11px;

    background: rgba(0,0,0,0);

    color: #38c5fd;

    cursor: pointer;

    border: 0px #38c5fd solid

}

-->

</style>

　600是回到頂端的速度 (0為最快)
　300是下拉多少距離出現按鈕
　right是離頁面右邊距離
　bottom是離頁面底部距離
　padding是按鈕大小
　接著在<body>下方加入以下程式碼 <div id='gotop'><center><b>︿</b></center><center>Top</center></div>

　側欄連結清單—另開新頁 (第一行是Jquery資料庫)


<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'>

<script type='text/javascript'>

jQuery('a').each(function(index) {

var r = new RegExp('網頁URL');

if (!r.test(jQuery(this).attr('href'))) {

jQuery(this).attr('target', '_blank');

}

});

</script>

　側欄小工具預設—摺疊 & 展開


摺疊
cond='data:view.isArchive'
cond='data:view.isLabelSearch'


展開
cond='!data:view.isArchive'
cond='!data:view.isLabelSearch'

　Archive (文章目錄)

<div id="newPosts">
  <noscript>failed!<br/>Javascript not supported here!</noscript>
</div>

<script>
var nPostStartIndex = 1;
var nPostShow = 50;

function showRecentPosts(nIndex) {
  if (!nIndex)
    nIndex = nPostStartIndex;
  var sFeedURL = '/feeds/posts/summary?orderby=published&start-index='+nIndex+'&max-results='+(nPostShow+1)+'&alt=json-in-script&callback=generatePosts';
  var script = document.createElement('script');
  document.getElementById('newPosts').innerHTML = 'Loading <blink>...</blink>';
  script.setAttribute('src', sFeedURL);
  script.setAttribute('type', 'text/javascript');
  document.documentElement.firstChild.appendChild(script);
}

function generatePosts(json) {
  function compareentry(a,b) {
    order= Date.parse(a.published.$t.replace(/^(\d{4})-(\d{2})-(\d{2})T([0-9:]*)([.0-9]*)(.)(.*)$/, '$1/$2/$3 $4 GMT')) - Date.parse(b.published.$t.replace(/^(\d{4})-(\d{2})-(\d{2})T([0-9:]*)([.0-9]*)(.)(.*)$/, '$1/$2/$3 $4 GMT'));
    return 0-order;
  }

  var sHTML = '<ul>';
  var sortentry = json.feed.entry.sort(compareentry);
  var nIndex = parseInt(json.feed.openSearch$startIndex.$t);
  var nTotalPost = parseInt(json.feed.openSearch$totalResults.$t);
  for (var i = 0, Post; Post = sortentry[i]; i++) {
    if (i >= nPostShow)
      break;
    var title = Post.title.$t;
    var j = 0;
    while (j < Post.link.length && Post.link[j].rel != "alternate")
      j++;
    var link = Post.link[j].href;
    var timestamp=Post.published.$t.substr(0,10);
    sHTML += '<li><span class="item-title"><a href="'+link+'">'+ title +'</a> </span></li>';
  }
  sHTML += '</ul>';
  sHTML += generatePostLink(parseInt(json.feed.entry.length), nIndex, nTotalPost);
  document.getElementById('newPosts').innerHTML = sHTML;
}

function generatePostLink(nFetch, nIndex, nTotalPost) {
  var bOld = (nFetch > nPostShow);
  if (bOld) nFetch = nPostShow;
  var sResult = '<p align="right">Recent '+nIndex+'-'+(nIndex+nFetch-1)+', total: '+nTotalPost+'.&nbsp;&nbsp;';
  if (nIndex > nPostStartIndex)
    sResult += '<a href="javascript:showRecentPosts('+(nIndex-nPostShow)+');" title="Newer Posts">&lt;&lt;</a>&nbsp;&nbsp;';
  if (bOld)
    sResult += '<a href="javascript:showRecentPosts('+(nIndex+nPostShow)+');" title="Older Posts">&gt;&gt;</a>';
  sResult += '</p>';
  return sResult;
}
</script>


<script language="javascript">showRecentPosts();</script>

　Total post & comment (Blogger的文章與評論總數)

<script>
  function calculateAmount(json) {
  document.write(json.feed.openSearch$totalResults.$t);
  }
</script>


Post : <span style="color: #66fcf1;"><script src="/feeds/posts/default?alt=json-in-script&amp;callback=calculateAmount" type="text/javascript"></script></span>
　
Comment : <span style="color: #66fcf1;"><script src="/feeds/comments/default?alt=json-in-script&amp;callback=calculateAmount" type="text/javascript"></script></span>

　CSS code (使用<code></code>顯示程式碼)

code {

  display: block;

  font-family: 'Courier New';

  font-size: 9pt;

  overflow: auto;

  padding: 10px 10px 10px 21px;

  max-height: 1200px;

  line-height: 1.2em;

  letter-spacing: 0px;

  color: #ccc;

  background: #0B0C10 url(https://1.bp.blogspot.com/-IRq8RsX0yv8/XCdclc9Q0_I/AAAAAAAAFuE/U5G72c4YaP0w7snrd1E_4Fyr8Ww8ijyFwCEwYBhgL/s1600/code.bmp) left top repeat-y;

}

Search

🆆🆇🆆

Blogger HTML & CSS code

Comments

Post a Comment