Blogger 模板製作 ~ 3部曲

Blogger 範本製作， 自己的模板自己做 📌

承上一篇，在 v-block - DIV內加上 UL Menu 和超連結

<div id='D-01' class="v-block">
  <ul>分類名稱<br /><br />

<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>

  </ul>
</div>

完成後的首頁如下 ~

首頁

<div id='Homepage'>
一頁式首頁 ... <br />
<div id='D-01' class="v-block">
<ul>歐洲旅遊<br /><br />
<li><a href="#">捷克</a></li>
<li><a href="#">立陶宛</a></li>
<li><a href="#">斯洛伐克</a></li>
</ul>
</div>
<div id='D-02' class="v-block">
<ul> 素食餐館<br /><br />
<li><a href="#">台北蔬食坊</a></li>
<li><a href="#">台中素食館</a></li>
<li><a href="#">高雄蔬食坊</a></li>
</ul>
</div>
<div id='D-03' class="v-block">
<ul>有機水果<br /><br />
<li><a href="#">鳳梨</a></li>
<li><a href="#">西瓜</a></li>
<li><a href="#">芭樂</a></li>
</ul>
</div>
</div>

首頁的排版大致已完成

可以開始寫樣式碼 CSS 嘍，先把首頁的樣式寫好，讓首頁可以正常地顯示

只有首頁才會下載的 CSS 樣式碼

<b:if cond='data:view.isHomepage'>
<style type="text/css">

#Homepage { margin:25vh 5px 30vh;}
.v-block{
color:#000;
margin: 3px 0;
height: 78vh;
font: 24px 'Arial';
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
background-size: cover;
line-height:28px;
overflow:hidden;
text-shadow:2px 2px 3px #999;
font-weight: bold;
}
.v-block ul{ list-style: none; width:28vw; background:rgba(10,10,10,0.3); height:70vh; padding:15vh 12px 0;}
.v-block li{line-height:50px;}
.v-block li + li{border-top:1px solid #faa;}
.v-block a{color:white}

#D-01{
background-image: url(https://rainieis.tw/wp-content/uploads/da26eda1cbb93bfecb3508ca2e17a805.jpeg);
}

#D-02{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivfMbjtuxW6M7DIeN1yUphZ681WzjwRtYevNPdsSz1i8by9GY-R7j90NQ9chn0OmzEJduAAv6guvNROMB5J-RM0wdtLN05OFpbslHzlUBaTSrCh-irRzgwucKhFoDWdrKP86rA381pf0g/s0/veggie+01.JPG);
text-align:center;
}
#D-02 ul{margin: auto;}

#D-03 {
background-image: url(https://pgw.udn.com.tw/gw/photo.php?u=https://uc.udn.com.tw/photo/2019/03/23/98/6084654.jpg);
}
#D-03 ul{float:right;}

</style>
</b:if >

以上的圖片Google 網路找的，僅用來 Demo 展示，若失連，自己換一下

Demo 預覽效果


在版面配置CSS樣式區 [ b:template-skin ] : 添加 CSS碼，讓首頁區塊不要在版面配置窗格顯現

其實、整個 CSS 碼並不多，可以寫在一處就好，幹嘛要那麼龜毛 呢?! 還是養成好習慣，珍惜網路資源。

最後要在[< b:skin>] 加進兩組變數，做為教學示範，一組是首頁的底色和文字顏色，另一組是頁腳的底色和文字顏色。

注意 ⭐宣告變數一定要夾在 /* 註解之內 */

<b:skin version='1.3.3'><![CDATA[ /*-- 定義變數
<Group description="首頁" selector="#Homepage">
  <Variable name="homepage.bgcolor" description="Background color" type="color" default="#fff"  value="#f4d6d3"/>
  <Variable name="homepage.text.color" description="Text color" type="color" default="#000"  value="#2c1d14"/>
  </Group>

<Group description="Footer" selector="#foot">
  <Variable name="foot.bgcolor" description="Footer Background" type="color" default="#fff"  value="#a0a0a0"/>
    <Variable name="foot.color" description="Footer Text Color" type="color" default="#000"  value="#2c1d14"/>
</Group>
 --*/
]]></b:skin>

   定義的變數 會關聯到「主題設計工具」裡的項目， 注意在使用主題設計工具時，首頁不要有 JavaScript，否則即見即所得有可能會(相衝到)無法運作，要儲存後才能看見改變後的設定 ~ 使用時以 $(變數名) 引用，似曾相識 是否和 JS 的 ${} 粉像，不過用法不同。
還可以運算哦，$(變數1.寬度 + 變數2.寬度 )

 在 <b:if cond='!data:view.isHomepage'> <style type="text/css"> ........</style> </b:if>
之間的 CSS 樣式碼    

看到這裡，你是不是有覺得，撰寫 Blogger 範本，製作版型其實粉EZ，只要會一點點 HTML 和懂少許的 CSS 就可以嘍 ...

整個教程到此結束。