Blogger 的 頁籤小工具

   適合 RWD 回應式設計的博客 Blogger 頁籤小工具

純 CSS 打造的 頁籤小工具能適合 RWD 的回應式設計，以百分比的方式、以及彈性的畫面，可以在不同解析度下正常顯示。



進入 >> 後台管理 >> 版面配置 >> 新增一個「HTML/JavaScript」小工具

複製以下的樣式碼，填入內容裡 >> 最後按下儲存 ~ OK

在下面的文字框內點一下，複製 CSS 樣式碼：
<style type="text/css"> #i-card { padding: 5px; font-size:16px; position:relative; } #i-card input{display:none} #cards{ display:flex; flex-flow: row wrap;} #cards .ca-title { /*-- 標題 --*/ color:#999; flex:0 auto; margin-left:6px; border:1px solid #ccc; background:#eee; height:25px; cursor:pointer; border-radius: 8px 8px 0 0; padding:5px 10px 0; transition: .5s; transform: skew(-15deg); border-bottom:0; border-top:2px solid #ccc; } #cards .ca-title:hover { color:#f6e; background:#fff; } #cards .ca-title:active { color:#f38; background:rgba(0,0,0,.15); } #cards #ti-1:checked ~ label[for='ti-1'], #cards #ti-2:checked ~ label[for='ti-2'], #cards #ti-3:checked ~ label[for='ti-3'], #cards #ti-4:checked ~ label[for='ti-4'], #cards #ti-5:checked ~ label[for='ti-5'], #cards #ti-6:checked ~ label[for='ti-6'] {color:#333; transform: skew(0deg); background:#fff; border-top:2px solid #cce; } #cards #ti-1:checked ~ .tab_container #page-01, #cards #ti-2:checked ~ .tab_container #page-02, #cards #ti-3:checked ~ .tab_container #page-03, #cards #ti-4:checked ~ .tab_container #page-04, #cards #ti-5:checked ~ .tab_container #page-05, #cards #ti-6:checked ~ .tab_container #page-06 {color:red;opacity:1;transition: 1s; z-index:10} #cards .tab_container { margin-top:-2px; background:#fff; overflow:hidden; border:1px solid #ccc; width:100%; } #cards .tab_container ul { position:relative; height:250px; /* -- 頁籤 高度 -- */ padding:0 15px; list-style:none; } #cards .tab_content li { opacity:0; transition: .5s; position:absolute; width: 99.3%; padding:5px; background:#fff; float:left } </style> <div id="i-card"><div id="cards"> <input checked="" id="ti-1" name="tabs" type="radio" /> <input id="ti-2" name="tabs" type="radio" /> <input id="ti-3" name="tabs" type="radio" /> <input id="ti-4" name="tabs" type="radio" /> <input id="ti-5" name="tabs" type="radio" /> <input id="ti-6" name="tabs" type="radio" /> <label for="ti-1" class='ca-title'>Blogger</label> <label for="ti-2" class='ca-title'>來 撩 我</label> <label for="ti-3" class='ca-title'>等一個雨季</label> <label for="ti-4" class='ca-title'>欠 溫 柔</label> <label for="ti-5" class='ca-title'>蒙娜麗莎</label> <label for="ti-6" class='ca-title'>看你怎麼說</label> <div class="tab_container"> <ul class="tab_content"> <li id="page-01">第 1 頁<center><img src="https://pic.pimg.tw/e717/1612354524-1442513507-g_q.png" /></center></li> <li id="page-02">第 2 頁<img src="https://pic.pimg.tw/e717/1560153493-484689634_q.jpg" /></li> <li id="page-03">第 3 頁<img src="https://pic.pimg.tw/e717/1601726629-3549117518-g_q.jpg" /></li> <li id="page-04">第 4 頁<img src="https://pic.pimg.tw/e717/1560153490-2240774389_q.jpg" /></li> <li id="page-05">第 5 頁<img src="https://pic.pimg.tw/e717/1540603868-160002329_m.jpg" /></li> <li id="page-06"><center>第 6 頁 <img src="https://pic.pimg.tw/e717/1521690146-356104462.gif" /></center></li> </ul> </div></div></div> 不懂語法的格友請按  >>  

頁數多寡 ~ 請自行增減 ... 想適合你的佈景主題，也是要自己打扮唷

DEMO ~ 觀看範例 1  、   觀看範例 2