CECELIA C.

新更新 UPDATES : STILL IN PROCESS

HOW TO CREATE A BLOGSKINS

February 16, 2014

16 February 2014

WRITTEN BY CECELIA

给 : 面包酱的教程

如乱，请见谅，有任何事在此贴留言，在cbox留言的一律不复.

还有记得把代码都换完才行，要不然preview出来的，不懂是什么东西.

亲谨记：如果要使用Blogskin，到 Template 去把 BT 换去 BS.

SAMPLE SKIN OF BLOGSKIN

<html>
<head>
<title>BLOG TITLE</title>
<style type="text/css">
-CSS CODES HERE-
</style><body>
-CONTENT HTML CODES-
</body></html></head>

-------------------我是可爱的分割线-------------------

开始教学 :))

1. 首先，在电脑里开个Microsoft Text File，如果你自以为很panai的话，就用 notepad 啦 -.-
把以下的代码拷贝，贴进去，更换掉颜色字眼去你所要的. （多余的我不解释 xDD 亲们也懂英语的吧）

<html>
<head>
<title>BLOG TITLE</title>
<style type="text/css">
-CSS CODES HERE-</style><body>
-CONTENT HTML CODES-</body></html></head>

2. 拷贝，贴进 -CSS CODES HERE- 一个一个来，免得弄混，没有颜色的字，千万千万别跑去碰~~

BODY 整体

#navbar-iframe {
display: none;
}
body {
background: #ffffff;font-size: 12px;
font-family: 'Fresca', sans-serif;}

亮粉字眼 :

background: 背景

font-size: 字体大小（建议11px）

font-family: 字体（如 arial // verdana 等）

POST 帖子

#post {
background: #fff;
border:5px solid #84C1FF;
width:450px;
height:650px;
left:0px;
top: 50px;
position: absolute;
padding: 30px;
overflow: auto;
}
.post-title {
color: #66B3FF;
border-bottom: dotted 1px #84C1FF;
text-shadow: 1px 1px 2px #ECFFFF;
padding:2px;
font-size: 35px;
font-family: 'Inder', cursive;
text-align:center;
}

.date {
font-family: trebuchet ms;
letter-spacing: 2px;
font-size:10px;
margin-bottom:2em;
}

黄色字眼 :

background: 背景

border: 框框种类（参考可到此按我:33 ）

width: 帖子宽度

height: 帖子高度

凡是看见 top / bottom / left / right : 方向与位置

绿色字眼 :

可参考此按我:33

MORE 更多美化（请自行改变～因为你们懂很多美化方法 xDD）一样贴进 CSS 那里

LINK 链接

a:link, a:visited {
text-decoration: none;
-webkit-background-clip:text;
-webkit-text-fill-color: transparent;
background-image:url(http://i1259.photobucket.com/albums/ii546/Cecelia2620/IMG12.jpg) ;
background-position:60% 20%;
-webkit-transition-duration: .7s;
}
a:hover {
text-decoration: none;
-webkit-background-clip:text;
-webkit-text-fill-color: transparent;
background-image:url(http://i1259.photobucket.com/albums/ii546/Cecelia2620/IMG12.jpg) ;
background-position:20% 70%;
-webkit-transition-duration: .7s;
cursor: hand;
}

BLOCKQUOTE

blockquote{
padding: 10px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJdSfnqNzdZTNejzK1f2g9e0Lwbcd62fGjN9kBMFqgIeeAtWppJaJrymEkHOF4FRhigN2k1ZK3ditqTcW7Knz2kyZJMjvjLwKvIUiCia8-UuKlAPaNNwg1BEeqT9u2B_Mm8WG6oXpicT4/s1600/smallpattern-7.png);
padding:10px;
color: #666666;
font-size: 12px;
font-family: 'Pontano Sans';
letter-spacing:1px;
margin-left:30px;
margin-right:30px;
border:3px solid #DCDCDC;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

BOLD 粗体字眼

b {
font-size: 15px;
-webkit-background-clip:text;
-webkit-text-fill-color: transparent;
background-image:url(http://i1259.photobucket.com/albums/ii546/Cecelia2620/f3dd104c510fd9f9245d5853272dd42a2834a463.jpg) ;
background-position:50% 70%;
-webkit-transition-duration: .7s;
}

UNDERLINE 画线字眼

u {
-webkit-background-clip:text;
-webkit-text-fill-color: transparent;
background-image:url(http://i1259.photobucket.com/albums/ii546/Cecelia2620/f3dd104c510fd9f9245d5853272dd42a2834a463.jpg) ;
background-position:80% 70%;
text-decoration: none;
border-bottom: 2px solid #E1ECEE;
}

OK！CSS篇完毕～～
现在来到 CONTENTS 那里，跟得上教程吗？

3. 拷贝，贴进 -CONTENT HTML CODES-

<blogger><div id="post"><div class="post-title"><BlogItemTitle><$BlogItemTitlegt;</BlogItemTitle></div> <div class="date"><BlogDateHeader><$BlogDateHeaderDategt;</BlogDateHeader> | <$BlogItemDateTimegt; | <a href="<$BlogItemCommentCreategt;"<$BlogItemCommentFormOnClickgt;><$BlogItemCommentCountgt;comments</a></BlogItemCommentsEnabled></div> <$blogitembodygt;</blogger><br> <center><OlderPosts><a href=<$OlderPostsgt;>Older Post</a> </OlderPosts> <NewerPosts> | <a href=<$NewerPostsgt;>Newer Post</a></NewerPosts></center></div>
</div></div>

然后～～是Microsoft的，就贴近 Notepad去～～
把file save as ： blogskin.html
过后preview，看看有没有问题～～

Labels: 东西, 教程

NEU

ALT

HOW TO CREATE A BLOGSKINS

February 16, 2014

16 February 2014

WRITTEN BY CECELIA

给 : 面包酱的教程

如乱，请见谅，有任何事在此贴留言，在cbox留言的一律不复.

还有记得把代码都换完才行，要不然preview出来的，不懂是什么东西.

亲谨记：如果要使用Blogskin，到 Template 去把 BT 换去 BS.

SAMPLE SKIN OF BLOGSKIN

<html>
<head>
<title>BLOG TITLE</title>
<style type="text/css">
-CSS CODES HERE-
</style><body>
-CONTENT HTML CODES-
</body></html></head>

-------------------我是可爱的分割线-------------------

开始教学 :))

<html>
<head>
<title>BLOG TITLE</title>
<style type="text/css">
-CSS CODES HERE-</style><body>
-CONTENT HTML CODES-</body></html></head>

2. 拷贝，贴进 -CSS CODES HERE- 一个一个来，免得弄混，没有颜色的字，千万千万别跑去碰~~

BODY 整体

#navbar-iframe {
display: none;
}
body {
background: #ffffff;font-size: 12px;
font-family: 'Fresca', sans-serif;}

亮粉字眼 :

background: 背景

font-size: 字体大小（建议11px）

font-family: 字体（如 arial // verdana 等）

POST 帖子

#post {
background: #fff;
border:5px solid #84C1FF;
width:450px;
height:650px;
left:0px;
top: 50px;
position: absolute;
padding: 30px;
overflow: auto;
}
.post-title {
color: #66B3FF;
border-bottom: dotted 1px #84C1FF;
text-shadow: 1px 1px 2px #ECFFFF;
padding:2px;
font-size: 35px;
font-family: 'Inder', cursive;
text-align:center;
}

.date {
font-family: trebuchet ms;
letter-spacing: 2px;
font-size:10px;
margin-bottom:2em;
}

黄色字眼 :

background: 背景

border: 框框种类（参考可到此按我:33 ）

width: 帖子宽度

height: 帖子高度

凡是看见 top / bottom / left / right : 方向与位置

绿色字眼 :

可参考此按我:33

MORE 更多美化（请自行改变～因为你们懂很多美化方法 xDD）一样贴进 CSS 那里

LINK 链接

a:link, a:visited {
text-decoration: none;
-webkit-background-clip:text;
-webkit-text-fill-color: transparent;
background-image:url(http://i1259.photobucket.com/albums/ii546/Cecelia2620/IMG12.jpg) ;
background-position:60% 20%;
-webkit-transition-duration: .7s;
}
a:hover {
text-decoration: none;
-webkit-background-clip:text;
-webkit-text-fill-color: transparent;
background-image:url(http://i1259.photobucket.com/albums/ii546/Cecelia2620/IMG12.jpg) ;
background-position:20% 70%;
-webkit-transition-duration: .7s;
cursor: hand;
}

BLOCKQUOTE

blockquote{
padding: 10px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJdSfnqNzdZTNejzK1f2g9e0Lwbcd62fGjN9kBMFqgIeeAtWppJaJrymEkHOF4FRhigN2k1ZK3ditqTcW7Knz2kyZJMjvjLwKvIUiCia8-UuKlAPaNNwg1BEeqT9u2B_Mm8WG6oXpicT4/s1600/smallpattern-7.png);
padding:10px;
color: #666666;
font-size: 12px;
font-family: 'Pontano Sans';
letter-spacing:1px;
margin-left:30px;
margin-right:30px;
border:3px solid #DCDCDC;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

BOLD 粗体字眼

b {
font-size: 15px;
-webkit-background-clip:text;
-webkit-text-fill-color: transparent;
background-image:url(http://i1259.photobucket.com/albums/ii546/Cecelia2620/f3dd104c510fd9f9245d5853272dd42a2834a463.jpg) ;
background-position:50% 70%;
-webkit-transition-duration: .7s;
}

UNDERLINE 画线字眼

u {
-webkit-background-clip:text;
-webkit-text-fill-color: transparent;
background-image:url(http://i1259.photobucket.com/albums/ii546/Cecelia2620/f3dd104c510fd9f9245d5853272dd42a2834a463.jpg) ;
background-position:80% 70%;
text-decoration: none;
border-bottom: 2px solid #E1ECEE;
}

OK！CSS篇完毕～～
现在来到 CONTENTS 那里，跟得上教程吗？

3. 拷贝，贴进 -CONTENT HTML CODES-

<blogger><div id="post"><div class="post-title"><BlogItemTitle><$BlogItemTitlegt;</BlogItemTitle></div> <div class="date"><BlogDateHeader><$BlogDateHeaderDategt;</BlogDateHeader> | <$BlogItemDateTimegt; | <a href="<$BlogItemCommentCreategt;"<$BlogItemCommentFormOnClickgt;><$BlogItemCommentCountgt;comments</a></BlogItemCommentsEnabled></div> <$blogitembodygt;</blogger><br> <center><OlderPosts><a href=<$OlderPostsgt;>Older Post</a> </OlderPosts> <NewerPosts> | <a href=<$NewerPostsgt;>Newer Post</a></NewerPosts></center></div>
</div></div>