寂寞的光年

請記得一定要先備份範本！！ Facebook的具有計數器功能的分享按鈕語法如下： <!-- 臉書計數分享按鈕 --> <div style='float:right;'> <a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' name='fb_share' type='button_count'>分享</a> <script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/> </div> <!-- 臉書計數分享按鈕 --> 上述 <!-- 臉書計數分享按鈕 --> 是為備註此為何種語法 我所添加的位置是在 「文章標題右方」 因此請找到： <b:if cond='data:post.title'> 添加其後面 添加Facebook的讚(Like)按鈕語法如下： <!-- 添加Facebook的讚 --> <script> document.write(&#39;&lt;iframe src=&quot;http://www.facebook.com/plugins/like.php?href=<data:post.url/>&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;font=verdana&amp;colorscheme=light&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; allowTrans...

想於文章中其每段文字其首字放大嗎？請跟著下列文字說明這麼做： 請先至 【版面配置】 找到 【修改HTML】 並請記得勾選 【展開小裝置範本】 ，然後搜尋 .post-title {語法略過xxx} 將下列語法置放： /*字首放大*/ .firstletter:first-letter { font-size:400%; /*字尺寸大小*/ float:left; line-height:.8em; color:#D4D4C7; /*字的顏色*/ } 文章要使用時，再添加其下列語法： <p class="firstletter"> 文字內容 </p> 當然你也亦可以將上述語法添加至 【設定】 選單內 【格式】 裡的 【文章範本】 ，這麼一來，於每次撰寫文章時，Blogger皆會自動為您添加其上述語法。 此類型語法尚有不同方式呈現，請參考下列連結； 延申閱讀： Easy Magazine Style CSS Drop Cap Tutorial - 英文 Kaie's Blog: [CSS] Magazine Style Drop Cap - 繁中

於Blogger撰寫文章時，添加表格總是會空出很多空格出來對吧？要改善此狀況，就得於表格其語法當中上下添加此下列語法。 <style type="text/css">.nobrtable br {display:none}<br /></style><div class="nobrtable"> 表格語法 </div>

想跟圖中一樣於文章中添加各式底線嗎？請跟著下列文字說明這麼做： 請先至 【版面配置】 找到 【修改HTML】 並請記得勾選 【展開小裝置範本】 ，然後搜尋 body { 語法略過xxx} u u { text-decoration:none; background:url('圖片位置') repeat-x bottom; } em em { text-decoration: none; background: url(http://圖片位置) repeat-x bottom; line-height:22px; padding-bottom: 2px; font-style:normal; } 如將此語法添加於其 body { 語法略過xxx} 上述位置，IE顯示不出其效果來；故請將此段語法添加其具有 .post-title {語法略過xxxxx} 此段完整的後面 line .line { line-height:22px; padding:4px 2px 2px 0px; letter-spacing:2px; background:url('http://圖片位置') repeat-x bottom } UNDERLINE .UNDERLINE { text-decoration: none; background: url(http://圖片位置) repeat-x 100% 100%; padding-bottom: 0px; font-weight:bold; } myunderline .myunderline { line-height:22px; padding:4px 2px 2px 0; letter-spacing:6px; background:white url(http://圖片位置) repeat-x bottom } myunderlineHL .myunderlineHL{ line-height:22px; padding:4px 2px 2px 0px; letter-spacing:2px; background:url(http://圖片位置) repeat-x bottom } 使用方式： <u>需要特別標示的字句</u> - 如添江加圖片將取代原底線作用 <e...

想跟圖中一樣於回應時可針對其發表人回應名回應嗎？請跟著下列步驟做： 請先至 【版面配置】 找到 【修改HTML】 並請記得勾選 【展開小裝置範本】 如果你想把 「回覆此篇留言」 的連結放在每條評論的 「xx 說...」 之後，那麼請找到 <b:if cond='data:comment.authorUrl'> <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a> <b:else/> <data:comment.author/> </b:if> <data:commentPostedByMsg/> 在這段原始碼之後添加下列代碼： <span class='comment-reply'><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=你的BlogID&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody= Re： &quot; + data:comment.author + &quot;#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;'>回覆此篇留言</a></span> 代碼中的 你的BlogID 代表你所使用的 Blog 編號。 可以在進入Blogger後台端的網址欄位中看到，例如： http://www.blogger.com/post-c...

其每個Blogger版面當中所設定的 引用文字(blockquote) 其預設皆不同如想跟圖中一樣顯示效果，請跟著下列文字說明這麼做： 請先至 【版面配置】 找到 【修改HTML】 並請記得勾選 【展開小裝置範本】 ，然後搜尋 body { 將原有的 blockquote {到} 的語法覆蓋，會有其圖中 引用文字(blockquote) 一次效果 ； blockquote { margin: 15px 30px 0 20px; padding: 10px; border: 2px dashed #cde; display:block; overflow:auto; } 如果你想要引用文字是有圖片效果，請參考下列語法； 上述語法與此則一選擇使用，或是在 上述語法 } 前添加下列紅色語法 。 blockquote { margin: 15px 30px 0 10px; padding: 20px; background: #f0f0f0 url(http://圖片連結) no-repeat left top; } 您還可於此段原始碼後面再添加如效果圖中所顯示的 引用文字(blockquote) 二次效果 blockquote blockquote{ margin: 10px; padding: 0px; padding-left: 5px; border: 1px dashed #ccc; border-left: 5px groove #2222ff; display:block; overflow:auto; max-height:300px; } 本篇教學參考： Fun New Run High: 善用及改造 blogger 中的引用文字(blockquote)功能 Kaie's Blog

想跟圖中一樣於網頁中置放一些程式碼語法嗎？請跟著下列文字說明這麼做： 請先至 【版面配置】 找到 【修改HTML】 並請記得勾選 【展開小裝置範本】 ，然後搜尋 body { code { display: block; /* fixes a strange ie margin bug */ font-family: Courier New; font-size: 9pt; overflow:auto; background: #f0f0f0 url(http://圖片位置) left top repeat-y; border: 1px solid #ccc; padding: 5px 5px 5px 20px; max-height:200px; line-height: 1.2em; margin: 5px 5px 0 15px; } 若需另一種顯示的程式碼引用語法則於第一種code碼添加後再增加如下語法： code.ref { display: block; /* fixes a strange ie margin bug */ overflow:hidden; background: url(http://圖片位置) left top no-repeat; border: 1px dotted #a88; font-size: 13px; font: normal normal 100% 'Lucida Grande',Georgia,'Trebuchet MS'; line-height: 1.6em; } 記得<及>要轉換 將 < 以 &lt; 取代 將 > 以 &gt; 取代 將 & 以 &amp; 取代 要使用時，在於文章中選擇下列你要使用的 <code> 語法內容放置處 </code> <code class="ref"> 引用文字的部份 </code> 本篇參考教學： Kaie's Blog: [CSS] A Cool blockquote for "Code style" and some blogging tips 延伸閱讀： HTML實體參照コード變換機 ...