🌼 Essential

發表文章

如何在 blogger 平台上創建一頁式版型

你可以從一系列簡單的範本中挑選喜歡的樣式，打造你的部落格寫日誌文章或建立網站，
Blogger 有一個主題設計工具，可以讓你輕鬆快速的設置版面顏色樣式，請看這一篇說明

想創建一個自己獨特風格的精美網誌，或者自行設計新的一頁式形象版面，並不難，本文將教你幾種，如何在 blogger 平台上創建一頁式版型，首先、要考慮的是，首頁要寫在哪裡?
第一種就是直接寫在 XML 範本裡，最簡潔、不過有點難度，請參考這篇文章

另一種作法、是將首頁寫在HTML/javascript 小工具，

現在你所看到的畫面，以及下面的教學、就是將首頁寫在一篇文章內

閒閒來修改一下 Essential 佈景主題

步驟 1.
先進入[主題設計工具]窗格

選擇寬度項目，把內容寬度，拉到滿版 1920px

如右圖 ~>
將側欄擠到收起來，若不想再使用側欄，可以用 CSS 把收合開關隱藏
.flat-icon-button{display:none}

側欄的寬度若超過 300，最好設定最大寬度 max-width:99%，以免在手機瀏覽模式下、紅杏出牆 ...

步驟 2.
安裝、經過改造的精選文章小工具，
可保留原來的 HTML 格式，以及全文展開檢視，作為選取首頁的工具

https://e-717.blogspot.com/2022/02/FeaturedPost-full-text.html

步驟 3.

新增一篇文章，作為首頁
撰寫完成這篇文章後
打開、精選文章小工具，設定這篇文章為首頁

另一種作法、用網頁編輯器撰寫首頁，再貼到 HTML 小工具裡
再以 HTML 小工具作為首頁範本下載、使用說明

步驟 4.

假如、你不想讓部落格文章摘要，出現在首頁
進入、XML範本編輯模式，找到 Blog 小工具
<b:widget id='Blog1' locked='true' title='網誌文章' type='Blog' visible='true'>
加上判斷條件，不要在首頁出現 ~> cond='!data:view.isHomepage'

假如、你想要再能回到，摘要索引首頁，可以嗎? 當然可以 📌
如何做? 首頁最好使用 [HTML 小工具] 顯示，這樣才不會又讀到首頁這篇文章。
接下來使用超連結 ~ 開啟摘要索引首頁
在首頁的網址 URL 後面加上 /search/max-results=每頁要顯示的篇數。
<a href="首頁的URL/search/max-results=3 ">部落格首頁</a>

步驟 5.

可以用。post 或 page 寫次頁了
有沒有覺得很簡單 ~
其實、有好幾個版型都可以這樣改造...

步驟 6.

最後、附上目前這個版型的自訂 CSS 樣式碼

<style type="text/css">
#main{padding:0}
.item-view article {margin: 0 3vw 12px}
#page_body .FeaturedPost{
padding:0;
box-shadow: none;
margin-bottom:0}
#page_body .FeaturedPost .post-bottom{display:none}
/*-- 留言回應 --*/
#comment-editor{
 border: 10px solid #f0f0f0;
    border-radius: 10px;
    padding: 8px;
    margin: 20px;
    box-shadow: 2px 2px 3px #aaa, -1px -1px 10px #999;
    width: 92%;
       height:290px;
    outline: 2px solid #e0e0e0;
    outline-offset: -13px;
    background-color: #fff;
}
#comments .comment {
    border: 1px solid #aaa;
    padding: 10px 10px 30px;
    margin-bottom: 20px;
}
#comments .comment .comment {
    margin-top: 10px;
    margin-left: 20px;
    padding: 6px;
    border-radius: 0 10px 10px 0;
    box-shadow: 1px 1px 3px -1px rgb(51 51 102 / 70%), 0px 3px 8px 2px rgb(50 50 60 / 40%);
    border-left: 8px solid #8affe8;
}
#comment-holder ol .continue{display:none}
#comment-holder .continue { display:block} 
  #top-continue a:before {content:'取消回覆💛 '}
</style>

安裝 CSS >>

試問 ~ 有哪一家主機能比 Google 更穩 😎