紀錄到底我都對網誌做了什麼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 技巧 _ 讓外部連結在新視窗開啟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>
- 在Blogger主題中編輯HTML,原本的code建議先複製下來做個備份
- 找尋字串 <data:post.body/> ,取代為下列的程式碼:
- 找尋字串 </head> ,在 </head> 之前加上下列程式碼:
<!-- 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 -->
<!-- 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:圖片的寬度