Blogger 版型製作


空白的 佈景主題範本 ❤️
這個 就是現在我主場館在用的樣式啦 ⭐
已切割好的無側欄基本版面 ~ 樣式如上圖

使用時、只要新增需要的小工具， 以及撰寫有用到的小工具，的CSS樣式碼，
其他沒用到的就不用管它了，這樣的範本，是不是很簡短簡潔。

點按下面的 Code 複製 XML碼：

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:defaultwidgetversion='3' b:layoutsVersion='3' b:responsive='true' b:templateVersion='1.3.3' expr:dir='data:blog.languageDirection' expr:lang='data:blog.locale' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<meta content='Blogger 版型分享 widget' name='Description'/>
<title><data:view.title.escaped/><b:if cond='!data:view.isHomepage'> 🤍 灰鴿&#11088;</b:if></title>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js'/>

<b:skin version='1.3.3'><![CDATA[ /*-- 定義變數 和 CSS --*/


#aside{
display:flex;
flex-wrap:wrap;
padding: 0 30px;
background: white;}
#side_left{ flex:3 0 65%}
#side_right{ flex:1 0 320px;}
]]></b:skin>

<b:template-skin>
body#layout{padding:20px 35px;}
body#layout #page_body{ background: linear-gradient(30deg, rgb(250, 200, 230), #fff, rgb(250, 190, 220));}
body#layout #side_left{ width: 60%}
body#layout #side_right{ width: 38%;}

</b:template-skin>

</head>
<body>
<b:class cond='data:view.isPreview' name='preview'/>
<b:class cond='data:view.isSingleItem' name='item-view'/>
<b:class cond='data:view.isMultipleItems' name='feed-view'/>
<b:class cond='data:view.isArchive' name='archive-view'/>
<b:class cond='data:view.isLabelSearch' name='label-view'/>
<b:class cond='data:view.isSearch and !data:view.isLabelSearch' name='search-view'/>
<nav id='menubar'>
<b:section class='top_menu' id='Top_menu' maxwidgets='10' name='(Menu) 版 頭'/>
<b:section class='top_menu' cond='data:view.isSingleItem or data:view.isLayoutMode' id='T_menu' name='(item only) 版 頭'/>
</nav>
<header>
<div class='blog-name'><b:section class='container' id='header' name='Header' showaddelement='false'/></div>
</header>
<div class='main-page'>
<b:section class='main' id='page_body' name='Page Body' showaddelement='yes'/>
<!-- page_body end-->
<b:if cond='data:view.isSingleItem or data:view.isLayoutMode'>
<aside id='aside'>
<b:section class='sideB' id='side_left' name='(Side-block) 左邊'/>
<b:section class='sideB' id='side_right' name='(Side-block) 右邊'/>
</aside>
</b:if>
<b:section class='single-item' cond='data:view.isSingleItem' id='single_item' name='(Single item) 文章' showaddelement='no'/>

<b:section class='footer' id='footer' name='Footer' showaddelement='false' tag='footer'>
<b:widget id='Text17' locked='false' title='自訂 CSS ㄟ嗖哉' type='Text' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='content'>body{background: linear-gradient(120deg, #fff0f5, #fff, #fff6e0,#e0fff5) no-repeat; min-height:70vh}</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<div class='widget-content'>
<style type='text/css'>
<data:content/>
</style>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
 </body></html>

附上一份，大概都會用到的 CSS 樣式碼

<b:template-skin>
body#layout{padding:20px 35px;}
body#layout #page_body{ background: linear-gradient(30deg, rgb(250, 200, 230), #fff, rgb(250, 190, 220));}
body#layout .sideB{display:inline-block}
body#layout #side_left{ width: 50%}
body#layout #side_right{ width: 35%;}
body#layout #menubar {
height: auto;
position: sticky;
display: block;
}
</b:template-skin>

* { margin:0;
padding:0;}
table { border-collapse:collapse;
border-spacing:0;}
img { border:0; max-width:100%}
ol,ul { list-style:none;}
H3, h3 a{color:#000; font-size:20px}
a{ text-decoration:none ;}
a:hover{text-decoration:none ; }

.svg-icon-24, .svg-icon-24-button { 
margin: 5px auto -5px;
cursor: pointer;
height: 24px;
width: 24px;
min-width: 24px;
fill:#60b0e070;
}
button, input, optgroup, select, textarea {
font-family: inherit;
font-size: 1.1em;
line-height: 1.2;
padding:0 6px;
}
.hidden{display:none}
.invisible{visibility:hidden}

/* --文章摘要-- */

.byline {
color: #000000;
display: inline-block;
line-height: 24px;
margin-top: 8px;
vertical-align: top;
}
.post-bottom {
align-items: center;
display: flex;
flex-wrap: wrap;
padding:0 20px;
clear:both
}
.post-footer {
flex: 1 1 auto;
order: 1;
}
.jump-link{order: 2;}

.post-outer-container{
margin: 10px 6px 20px;
padding: 2em;
border-radius: 10px;
box-shadow: 1px 1px 3px -1px rgba(20%,20%,40%,0.7), 0px 3px 8px 2px rgba(50,50,60,0.4);
color: black;
position: relative;
overflow: hidden;
}
.post-body .snippet-thumbnail {
float: left;
margin: 10px 2em 0 0;
max-height: 280px;
max-width: 46%;
width: 20vw;
overflow: hidden;
}
.post-body .snippet-thumbnail img{
transition: .6s; width:100%;
}
.blog-posts.hfeed article:hover .snippet-thumbnail img {transform:scale(1.1)}

.item-view .post-outer-container{
background: white linear-gradient(#bbb, #ccc 3%, transparent 60%) no-repeat;
background-size: 100% 70px;
}
/* -- 翻頁 -- */
.blog-pager{
margin:1.5em 0;
text-align:center;
}
.blog-pager a{
font-size:16px;
margin:0 30px;
}
/* ------ */
#aside{
display:flex;
flex-wrap:wrap;
padding: 6px;
background: white;}
#side_left{ flex:3 0 65%}
#side_right{ flex:1 0 320px;}

/* --精選文章-- */
.FeaturedPost .widget-content{
border-radius: 15% / 20px;
position:relative;
padding:2.5em;
box-shadow: 1px 1px 3px -1px rgba(20%,20%,40%,0.7), 0px 3px 8px 2px rgba(50,50,60,0.4);
}
.FeaturedPost img{
margin-top:1em
}
.FeaturedPost .snippet-container{
margin-top:2em
}
.FeaturedPost .snippet-container p{
margin:0
}
.FeaturedPost .snippet-thumbnail{
float:none;
height:auto;
margin:0 auto;
overflow:hidden;
max-height:580px;
max-width:100%;
text-align:center;
width:95%;
border-radius: 120px / 30px calc(150px + 10%);
}
.FeaturedPost .snippet-thumbnail img{
max-width:100%;
width:100%
}

/* -- 留言 --- */

#comments{
border-top:1px dashed rgba(0,0,0,.54);
margin-top:20px;
padding:20px
}
#comment-editor {
background: #d0db3a;
padding: 5px 13px;
border-radius: 30px/80%;
margin: 6px 0px 15px;
box-shadow: -1px -1px #aaa, 0px 2px 8px #777;
}
#comments .comment-thread .comment-replies,#comments .comment .comment-replybox-single{
margin-left:60px
}
#comments .comment{
list-style-type:none;
position:relative;
border: 1px solid #ab3;
padding: 10px 10px 30px;
margin: 10px 0 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 .avatar-image-container{
position:absolute
}
.comment .avatar-image-container img{
border-radius:50%
}
.comment .comment-block{
margin-top:10px;
margin-left:60px;
padding-bottom:0
}
#comments .comment-author-header-wrapper{
margin-left:40px
}
#comments .comment .thread-expanded .comment-block{
padding-bottom:42px
}
#comments .comment .comment-header .user,#comments .comment .comment-header .user a{
color:#555;
font-style:normal;
font-weight:700
}
#comments .comment .comment-actions{
bottom:0;
margin:15px;
position:absolute
}
#comments .comment .comment-actions a{
margin:0 12px
}
#comments .comment .comment-header .datetime{
bottom:0;
display:inline-block;
font-size:13px;
font-style:italic;
margin-left:8px
}

#comments .comment .comment-content,.comment .comment-body{
margin:10px 6px 18px;
word-break:break-word
}
.comment-body{
margin-bottom:12px
}
.comments .comments-content .loadmore.loaded{
max-height:0;
opacity:0;
overflow:hidden
}
#top-continue {
text-align: center;
background-color: #fbd4f1;
margin: -2px auto;
width: 12em;
line-height: 2;
}
#comments .comment-thread .thread-count, #comment-holder ol .continue{display:none}



留言

張貼留言

表情符號 :圖片網址已複製到剪貼簿

這個網誌中的熱門文章

Blogger、頁籤小工具

  • 第 1 頁
  • 第 2 頁
  • 第 3 頁
  • 第 4 頁
  • 第 5 頁
  • 第 6 頁