2017年8月27日 星期日

網誌一些語法紀錄

為了救救我的金魚腦和各種手殘
紀錄到底我都對網誌做了什麼2333
大概充滿了各種複製貼上......

✜ Google Blogger官方文件 ✜

Page elements tags for layouts
/ 說明  <b:section/>  <b:widget/>  屬性
Widget Tags for Layouts
/ 一些Blogger Template的語法
Layouts Data Tags
/ 各種 elements 的參數
超級簡略...大多參數都沒有文件可以看

▪ 調整元件背景為半透明:  type="color" default="transparent" value="rgba(245, 245, 245, 0.9)" 


✜ 在新視窗開啟連結 ✜

Blogger 技巧 _ 讓外部連結在新視窗開啟
Source file
01 <!-- 讓內文裡的超連結開新視窗 JavaScript START-->
02 <script type="text/javascript" src="https://ajax.googleapis.
   com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
03 <script type="text/javascript">
04 jQuery("a").each(function(index) {
05 var r = new RegExp("^https://9527manda");
06 if (!r.test(jQuery(this).attr('href'))) {
07 jQuery(this).attr('target', '_blank');
08 }
09 });
10 </script>
11 <!-- 讓內文裡的超連結開新視窗 JavaScript END-->

▪ Blogger 後台 →「範本」→「編輯HTML」
▪ 找到 </body>,在<body>和</body>間加入程式碼範本

※在網誌內顯示程式碼:
網頁使用程式碼高亮的最佳作法及推薦外掛
HighLight:程式碼顯示的美化工具
HighLight官網





✜ 引用內文CSS ✜


在Blogger主題中加入以下HTML:
<style>
blockquote{
padding: 15px;
background-color: #f5f5f5;
border-left: 3px solid #cccccc;
margin: 5px;
padding-left: 20px;
border-radius: 6px;
}
</style>

網誌中引用資料的HTML語法:
<blockquote>引用資料</blockquote>




  1. 在Blogger主題中編輯HTML,原本的code建議先複製下來做個備份
  2. 找尋字串  <data:post.body/> ,取代為下列的程式碼:
    • <!-- Auto Read More Body Start -->
      <b:if cond='data:blog.url == data:blog.homepageUrl'>
      <b:if cond='data:blog.pageType == "index"'>
      <div expr:id='"summary" + data:post.id'><data:post.body/></div>
      <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>","<data:post.url/>","<data:post.title/>");</script>
      <span class='jump-link' style='float:right;'><a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a></span>
      </b:if></b:if>
      <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
      <b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>
      <div style='clear: both;'/> <!-- clear for photos floats -->
      <!-- Auto Read More in Body End -->
  3. 找尋字串 </head> ,在  </head>  之前加上下列程式碼:
    • <!-- Auto Read More Body Script Start -->
      <script type='text/javascript'>
      post_no_pic_sum = 250;
      post_pic_sum = 200;
      pic_h = 100;
      pic_w = 100;
      </script>
      <script type='text/javascript'>
      //<![CDATA[
      function removeHtmlTag(t,e){if(-1!=t.indexOf("<")){for(var n=t.split("<"),i=0;i<n.length;i++)-1!=n[i].indexOf(">")&&(n[i]=n[i].substring(n[i].indexOf(">")+1,n[i].length));t=n.join("")}for(e=e<t.length-1?e:t.length-2;" "!=t.charAt(e-1)&&-1!=t.indexOf(" ",e);)e++;return t=t.substring(0,e-1),t+" ...(ゝ∀・)▄︻┻┳═一 -- -"}function createSummaryAndThumb(t,e,n){var i=document.getElementById(t),m="",r=i.getElementsByTagName("img"),s=post_no_pic_sum;r.length>=1&&(m='<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+e+'" title="'+n+'"><img src="'+r[0].src+'" width="'+pic_w+'px" height="'+pic_h+'px" style="object-fit: cover;object-position: 0% 0%;" /></a></span>',s=post_pic_sum);var g=m+"<div>"+removeHtmlTag(i.innerHTML,s)+"</div>";i.innerHTML=g}
      //]]>
      </script>
      <b:if cond='data:blog.pageType != "static_page"'>
      <b:if cond='data:blog.pageType != "item"'>
      <style type='text/css'>
      .post-footer {display: none;}
      .jump-link {float: right; }
      .jump-link a {text-decoration: none; }
      </style>
      </b:if>
      </b:if>
      <!-- Auto Read More Body Script End -->

    一些參數資訊:
    ▪ post_no_pic_sum :文章沒有圖片時顯示的字數
    ▪ post_pic_sum :文章有圖片時顯示的字數
    ▪ pic_h :圖片的高度
    ▪ pic_w:圖片的寬度
  • ✜ 金魚腦 © 2017-2023.
  • ✜ 主題來源:blue_baron.
  • ✜ 技術提供:Blogger.