先機致勝 AI Advantage

發表文章

目前顯示的是有「Blogger」標籤的文章

Youtube iframe 影片自動縮放大小

星期三, 1月 25, 2023

步驟一點選影片的分享功能，選擇「嵌入」，會跳到以下畫面，請把右方的 iframe 原始碼複製起來，貼到需要放影片的地方。 iframe 原始碼 <iframe width="560" height="315" src="https://www.youtube.com/embed/SORD03t7nlo" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> 步驟二接著請在 iframe 的外面包一層 div（筆者命名為 videobox），利用 videobox 來控制大小縮放的比例，並清除掉多餘的 Code。 width 和 height 也一並清除，得到一個乾淨的 iframe。 <div class="videobox"> <iframe frameborder="0" src="https://www.youtube.com/embed/SORD03t7nlo" allowFullScreen="true"> </iframe> </div> 步驟三關鍵的來了！請在 CSS 的部分加入以下程式碼： CSS Code .videobox { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; } .videobox iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 用途在於將 iframe 的寬度與高度設定 100%，並絕對定位於外層 videobox，且自適應 videobox 的大小比例做伸縮。...

閱讀全文»

GoTop 按鈕讓網頁快速回到最上方

星期四, 10月 21, 2021

GoTop 按鈕讓網頁快速回到最上方大綱步驟 1 : 編輯 HTML 步驟 2 : 新增 CSS 步驟 3 : 新增文章時，新增程式碼步驟 4 : 驗收成功步驟 1 : 編輯 HTML 首先，登入你的Blogger 後台 => 選擇 "主題" => 下拉"自訂"選項點選 "編輯HTML" 來到HTML網頁編輯中，按 "Ctrl+F" => 出現 Search 的搜尋輸入欄位，輸入: "<head>" => 找到 <head> 標籤後，在下面貼上以下 2行程式碼: <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/> <link crossorigin='anonymous' href='https://use.fontawesome.com/releases/v5.0.13/css/all.css' integrity='sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp' rel='stylesheet'/> 再按 "Ctrl+F" => 出現 Search 的搜尋輸入欄位，輸入: "</body>" => 找到 </body> 標籤後，在上方貼上以下 JavaScript 程式碼: <script type='text/javascript'> $(function() { /* 按下GoTop按鈕時的事件 */ $('#gotop').click(function(){ $('html,body').animate({ scrollTop: 0 }, 'slo...

閱讀全文»

如何在BLOGGER 加入點擊後「複製內容到剪貼簿」的功能

星期五, 10月 01, 2021

如何在BLOGGER 加入點擊後「複製內容到剪貼簿」的功能程式碼: <div> <input id ="copyInput" value ="你想被複製的內容"> <button onclick='copyInput()'>複製按紐文字</button> </div> <script> function copyInput(){ document.getElementById('copyInput').select() document.execCommand('copy') } </script> 範例範例 1 : 複製按紐參考資料特色、摘要，Feature、Summary: 關鍵字、標籤，Keyword、Tag: Blogger,JavaScript,

閱讀全文»

1-4 Blogger 快捷鍵

星期二, 7月 13, 2021

好用的快捷鍵 Ctrl + C 複製 Ctrl + V 貼上 Ctrl+Shift+V 純文字貼上 Ctrl + A 全選 Ctrl + S 儲存 Ctrl + Z 前一步驟 Ctrl + Y 後一步驟 Ctrl + B 加粗 Ctrl + U 底線 Ctrl + I 斜線 Ctrl + K 加上連結 Tab 下一階層 Tab + Shift 上一階層 Ctrl + F 搜尋 Ctrl + Shift + M 轉換為手機模式 Ctrl + "+" (按 +) 放大 Ctrl + "-" (按 - ) 縮小 Ctrl + 0 預設顯示大小參考資料特色、摘要，Feature、Summary: 關鍵字、標籤，Keyword、Tag:

閱讀全文»

1-3 Blogger主題、顏色、字形、版面大小、文章格式

星期一, 7月 12, 2021

網誌的色調調色盤色碼與用途 --body-bg: white; //背景顏色 --text-color: #212529; //文字顏色 --border-color: #007bff; //區域外框 --primary: #0590c8; //主色調 --secondary: #00355a; //次色調 --success: #28a745; //成就、獲獎、感言、結論 --info: #00ffff; //訊息、備註 --warning: #ffa500; //警示、注意 --danger: #dc3545; //危險、極端 --light: #f0f1f2; //反白 --dark: #04020d; //黑色背景文字字形預設 : body { font-family: $font-tw;} : 全區使用字形 => 'Noto Serif TC', serif Text-title大標題 : 'Great Vibes', cursive; h1 大標題 : 'Great Vibes', cursive; 引言=> quoted : Georgia; 文字顏色大標題，標題、子標題，小標題，以主色調與次色調交替使用。引言使用灰階色調一般文字，使用 text-color，深藍黑色。字形大小大標題h1, text-title, 當在平板以上的大尺寸顯示，會明顯放大，所使除非是索引、摘要、書名...等，地方使用外，一般文章都會最大使用h2 或 text-head 標題。文章標題字型 : 22px 文章標題串字型 : 26px 文章文字字型 : 18px 引用文字字型 : 18px Blogger主題選擇預設版面以下幾個地方需要設定，其他維持預設值即可自訂背景顏色網頁文字網誌標題發表文章寬度新增CSS 檢視文章排版範本=> Blogger文章排版範本，看我們設定CSS之前與之後的變化。新增CSS檔案下載 =>再到CSS新增處，貼上此原...

閱讀全文»

1-2 Blogger 設定

星期日, 7月 11, 2021

Blogger網址管理網誌的設定，說明文件網址由於Blogger是一個讓使用者能非常彈性的客製化自己的風格，所以會有非常多的地方可以自己設定功能、外觀，這邊研究後挑了必須要知道、調整設定的地方，節省大家的時間。基本標題說明網誌語言網站小圖示隱私權讓搜索引擎檢索發布中網誌網址自訂網域，參考說明文件=> 設定自訂網域說明 HTTPS HTTPS 可用性 HTTPS 重新導向權限邀請更多作者讀者存取權文章主網頁上顯示的文章數上限文章範本 (選用): 我會將以下這串文字貼上，作為新文章的初始設定，當文章完成後會結論並將所看所得填入，並且簡單做搜尋引擎最佳化。 <h3>參考資料</h3><h4>特色、摘要，Feature、Summary:</h4><h4>關鍵字、標籤，Keyword、Tag:</h4> 圖片燈箱留言留言位置誰能留言？留言管理讀者留言人機驗證 (Captcha) 留言欄訊息電子郵件透過電子郵件張貼文章邀請更多人加入留言通知電子郵件邀請更多人加入文章通知格式時區日期標題格式，若發現更改無效，另外可以設定標題日期時間格式，在版面配置=>頁面主體=>網誌文章=>顯示發布時間=>發布時間前置字元時間戳記格式留言時間戳記格式中繼標記啟用搜尋說明搜尋說明管理網誌匯入內容備份內容記得要定期(通常3-6個月)要備份喔移除你的網誌不要隨便亂按喔，不然會全部刪除你的網誌!! 參考資料 1-3 Blogger主題、顏色、字形、版面大小、文章格式 1-1 Blogger基礎介紹特色、摘要，Feature、Summary: 關鍵字、標籤，Keyword、Tag:

閱讀全文»

Blogger文章排版範本

星期日, 7月 11, 2021

Text-title大標題會隨著桌機或手機螢幕調整 Text-head 大標題會隨著桌機或手機螢幕調整 h1 主題1 會隨著桌機或手機螢幕調整 h2 主題2 會隨著桌機或手機螢幕調整 h3 大標題會隨著桌機或手機螢幕調整 h4 小標題會隨著桌機或手機螢幕調整一般文字 - 一邊不需要能否困難出版社普通使得小學那時付出本文個人，將在這樣外資還在做什麼不限研究所印度，下面機。參考連結 :尖端的電子設備以及用於配備感知 success 成就、獲獎、感言、結論.....等，文字內容。 quoted m-2 波士頓動力是移動機器人的全球領導者，它應對了一些最棘手的機器人挑戰。我們將動態控制和平衡的原理與複雜的機械設計，尖端的電子設備以及用於配備感知，導航和智能功能的高性能機器人的下一代軟件結合在一起。 callout-info 本文檔包含Spot機器人的重要安全信息。負責任地使用Spot對防止操作員和附近其他人的危險情況至關重要。確保閱讀，理解並遵守本文檔，以減少受傷或損壞機器人或其他財產的風險。 Boston Dynamics Support Center callout-warning 本文檔包含Spot機器人的重要安全信息。負責任地使用Spot對防止操作員和附近其他人的危險情況至關重要。確保閱讀，理解並遵守本文檔，以減少受傷或損壞機器人或其他財產的風險。 Boston Dynamics Support Center callout-danger 本文檔包含Spot機器人的重要安全信息。負責任地使用Spot對防止操作員和附近其他人的危險情況至關重要。確保閱讀，理解並遵守本文檔，以減少受傷或損壞機器人或其他財產的風險。 Boston Dynamics Support Center m-1 border-primary 眼淚設置沒人每個人緩緩精美趕緊跟我賓館之家父母，本身即使物業他就正常策略成就超級反覆，充滿核心而來人口完全。 m-2 bo...

閱讀全文»

1-1 Blogger基礎介紹

星期日, 7月 11, 2021

為何選用Blogger Blogger是Google旗下提供的一項服務，已支援完整的中文介面，其免費提供強大的模版編輯功能，如果要架個有特色的Blogger部落格，或是要改裝打造成企業專屬的官方形象網站，首先當然就得了解Blogger後台的使用環境，進而學習與熟悉各項功能的操作。讓你經由本章的學習，紮根基礎，成就專業。 Blogger優點因為是Google的，所以使用時的速度、穩定、永久、無限空間、免費。阻擋垃圾留言。範本設計工具流量統計資料分頁功能匯出網誌部落格最新留言站內搜尋如果你現在想要申請一個部落格，對於認真想經營網站的朋友，當然還是建議使用WordPress自行架站的組合，才擁有最大運用空間。但若你和我一樣單純只是想擁有一個文章發表的園地，那麼同時兼顧自訂性與功能性的Blogger，就是一個我很推薦的選擇。 Blogger登入與新增網誌 Blogger網址 http://www.blogger.com/ Blogger後台介紹與相關功能設定說明 Blogger文章與網頁的區別與應用參考資料特色、摘要，Feature、Summary: 關鍵字、標籤，Keyword、Tag:

閱讀全文»

如何用 Blogger 建置你的部落格-索引

星期日, 7月 11, 2021

基礎使用與設定 01-Blogger基礎介紹 1-2 Blogger 設定參考資料特色、摘要，Feature、Summary: 關鍵字、標籤，Keyword、Tag:

閱讀全文»

在 Blogger 中顯示明顯的程式碼區塊 Code Block

星期日, 7月 11, 2021

文章內若有一些符號、程式碼，當你加入時會出現亂碼或版面跑位，就需要使用程式碼區塊。以下是設定的幾個步驟: 在「版面配置」頁中的「側欄（底部）」點擊「新增小工具」。點擊加入「HTML / JavaScript」。標題的部分可不填，內容的部分貼上 Google Code Prettify 的程式碼如下。 <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sunburst"></script> 儲存後，將「HTML / JavaScript」功能區塊拉到最底。在文章內容裡要輸入以下區塊: <pre class="prettyprint linenums"> <code> <--可有可無 xxxxxxxxx <-- 你的程式碼 </code> <--可有可無 </pre> 注意轉碼。"<"與">"當文字的時候在HTML裡要轉碼，分別是"<"與">"，網上也有轉碼程式在pre class可加入 linenums：指要顯示行號 lang-：使用的語言，例如："lang-js"是使用javascript，也可在 <code class="language-java">。以下是相關的語言參數: ang-***(***xxx的替代選項) The lang-* class specifies the language file extensions. File extensions supported by default include: "bsh", "c", "cc", "cpp", "cs", "csh", "cyc", "cv", "...

閱讀全文»