传说中的感觉。

#Theme : 03 Retro.

Wednesday 18 January 2017 @ 05:28

发布了自己第三个模版

这个模版也是属于比较复古的
想要什么素材或者是要求设计模版的话
还是有什么不明白的想问的
随时都可以留言在CBOX里要求哦
如果喜欢的话就尽情的用吧
可是用之前一定要留言在CBOX里通知一声哦
好让我有动力继续设计下一个模版哦
严禁取走Credit哦
因为做一个模版真的很花时间和精神哦

希望大家喜欢啦

<html>
<head>
<title>Retro. </title>
<link rel="shortcut icon" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2tQyQBlRzVnZTU8gNeUWgt7oixZnS0hoEImyNiFonEyEJiXrttssfhJHOOe2VaWxqSfyKHSwNGhy1C6IJCHZj2Lf5Q4pbVzJUZy0RzVfLcUsn1fQtK_PcN9AgoadAmHOwiuZtTxQ_4PMK/s1600/2ca3d4fb8389b67db92c181015ac4c.png" />

<!-------------------------------

*******THIS IS CREDIT******
Dreamer Theme 03 | Retro.
18.01.2017

---Don't Steal---
---Don't Claim As Your Own Code---
---Always Keep Credit Intact---

Any question?
www.emma-thegoldfish.blogspot.my

-------------------------------------->

::-webkit-scrollbar {
    width: 6px;height: 5px;
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
    height: 0px;
    display: block;
    background-color: white;
}
::-webkit-scrollbar-track-piece {
    background-color: white;
    
}
::-webkit-scrollbar-thumb:vertical {
    height: 3px;
    background-color: #D17FAA;
    
}
 
    
/* ---GENERAL--- */

@import url(http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic|Ubuntu+Condensed|Inconsolata:400,700|Montserrat:400,700);

body {
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXk93cU14zN9iE5XQ7upfLsEV2vq9-1M431p_7RQkqrwhclsxbCd4ESoxH6OtpYGzAGOoYLe8Akpqn4qW-mUPBGWoYd-0blsTs6a8ipDPLAzorXs_AK8_qcHYKZblSa33bWE-aUULIxSwl/s640/baby+pink+grid+background.png');
background-repeat:repeat;
background-color: #fff;
font-family:'Inconsolata';
font-size: 13px;
line-height: 100%;
margin: 0px;
cursor: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7_ApaA6AL8Y0AO_BwhE-DsWwX74uxRZuLO7V9OaQqjiATXYl2_yMiWVOOXnlcAllBy5GWKNjXEtPRcxmS20cAvKO1N1GYhMjeDzMHba-I-hTwozcsAjELFaMhUWElBPvNMnwVP89RUD0K/s1600/02.gif), progress;
}

a {
color:#b6bdc1;
text-decoration: none;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;    
transition: all .2s ease-in-out;
}
 
a:hover {
color:#3e3e3e;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;    
transition: all .2s ease-in-out;
}

h1 {
font-size:12px;
text-transform:uppercase;
font-weight:lighter;
letter-spacing:2px;
background:#f0f6f8;
padding:10px;
margin-top:0px;
text-align:center;
}
 
b, strong {
    color:;
    font-weight:bold;
}
 
i, em {
    color:#000000;
}

p {
    margin-top:0px;
    margin-bottom:8px;
}

/* ---SIDEBAR--- */
        
.title{
text-align:center;
font-family: 'Righteous', cursive;
font-size:75px;
color: #fff;
text-shadow: 6px 3px 0px #D17FAA, -6px 2px 0px #BC772E;
letter-spacing:10px;
padding-top: 0px;
-webkit-transition: all .9s;
-moz-transition: all .9s;
-o-transition: all .9s;
-ms-transition: all .9s;
transition: all .9s;
}

.title:hover {
font-size:70px;
color: #fff;
text-shadow: 6px 3px 0px #BC772E, -6px 2px 0px #D17FAA;
letter-spacing:10px;
-webkit-transition: all .9s;
-moz-transition: all .9s;
-o-transition: all .9s;
-ms-transition: all .9s;
transition: all .9s;}

#sidebar {
background-color: #fff;
font-family:'Inconsolata';
font-size:12px;
height: 550;
width: 300px;
margin-top: -52px;
margin-bottom: 0px;
margin-left: 50px;
margin-right: 0px;
position: fixed;
z-index: 18;
border: 2px solid #6A8180;
}
    
#imagebar {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihSSJNDnrxyN1ozvqRtdE36i8t5WdPnyIFUSV72h-jIa8iZ2fGNMoJmp10kGnOTHaAQWeeAVT5lPcGAhrBov-iisginyl_mB4e1ou4_ulMsjWMyu7uH0-Qp9njEJhr2Tc2aKVyvqIMtD_o/s400/0e70d5638841b77d43c5f390dcb4963d.jpg');
background-position: center;
height: 350px;
width: 250px;
margin-top: 25px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
border: 3px solid #BC772E;
background-clip: content-box;
}
    
#imagebar:before {
margin: 13px 11px;
height: 317px;
width: 226px;
border: 2px solid #fff;
content: "";
position: fixed;
z-index: 10;
}
    
#menu {
margin-top: 0px;
margin-bottom: auto;
margin-left: 350px;
margin-right: auto;
position: fixed;
z-index: 8;
}

a.link1 {
cursor: url(http://i.imgur.com/x9x1x.png), auto;
background-color: #fff;
color: #6A8180;
font-family:'Inconsolata';
font-size:8px;
font-weight: bold;
letter-spacing: 2px;
text-align: center;
height: 10px;
width: 15px;
margin-bottom: 10px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
border: 2px solid #6A8180;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}

a.link1:hover {
cursor: url(http://i.imgur.com/x9x1x.png), auto;
color: #284e8f;
padding-left: 20px;
padding-right: 20px;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}

a.link2 {
cursor: url(http://i.imgur.com/x9x1x.png), auto;
background-color: #fff;
color: #6A8180;
font-family:'Inconsolata';
font-size:8px;
font-weight: bold;
letter-spacing: 2px;
text-align: center;
height: 10px;
width: 15px;
margin-bottom: 10px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
border: 2px solid #BC772E;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}

a.link2:hover {
cursor: url(http://i.imgur.com/x9x1x.png), auto;
color: #284e8f;
padding-left: 20px;
padding-right: 20px;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}

.description{
border:2px solid #7e9594;
padding:10px;
text-transform:uppercase;
letter-spacing:1px;
font-size:10px;
margin-top:10px;
width:230px;
}

.descriptions{
line-height: 180%;
padding:3px;
text-transform:uppercase;
letter-spacing:1px;
font-size:10px;
margin-top:10px;
text-align:center;
border:2px solid #BC772E;
width:220px;
}
    
/* POSTS */
   
#entries {
color: #fff;
font-size: 11px;
word-wrap: normal;
word-break: normal;
width: 800px;
margin-top: -70px;
margin-left: 485px;
margin-right: auto;
padding-bottom:20px;
}

#post {
background-color: #fff;
color: #4b3a5b;
font-size: 12px;
word-wrap: normal;
word-break: normal;
width: 700px;
padding: 20px;
border-top: 2px solid #6A8180;
border-left: 2px solid #6A8180;
border-right: 2px solid #6A8180;
border-bottom: 2px solid #6A8180;
}
.main-title{
margin-top:1px;
text-align:left;
font-family:'Inconsolata';
font-weight: bold;
text-transform: uppercase;
font-size: 25px;
color: #4b3a5b; 
letter-spacing:2px;  
margin: 0px 0px 0px 0px;
border-bottom: #BC772E 3px solid;
padding:5px;
}

.sec-title{
text-align:right;
letter-spacing: 5px;
font-family:'Inconsolata';
text-transform: uppercase;
font-size: 10px;
text-transform: uppercase;
padding: 0px;
margin-bottom:-0px;
margin-top:3px;
color:#D17FAA;
}

.a2 {
letter-spacing: 3px;
font-family:'Inconsolata';
text-transform: uppercase;
font-size: 11px;
text-transform: uppercase;
text-align:right;
padding-top: 5px;
padding-right: 20px;
margin-bottom:5px;
margin-top:0px;
color:#D17FAA;
}

.mainbox{
background-color: #fcfcfc;
color: #4b3a5b;
font-size: 12px;
word-wrap: normal;
word-break: normal;
width: 840px;
padding: 20px;
border-top: 2px solid #6A8180;
border-left: 2px solid #6A8180;
border-right: 2px solid #6A8180;
border-bottom: 2px solid #6A8180;
}

#avatar img {
padding: 0px;
margin-top: 0px;
width: 300px;
}

.chan{
display:inline-block;
width: 100px;
padding:3px;
margin:5px;
font-family:'Inconsolata';
font-size:10px;
text-align:center;
Text-decoration:none;
text-transform:uppercase;
color:#ffffff;
background:#D17FAA;
-webkit-transition: all .4s;
-moz-transition: all .4s;
-o-transition: all .4s;
-ms-transition: all .4s;
transition: all .4s;
}

.chan:hover{
cursor: url(http://i.imgur.com/x9x1x.png), auto;
-webkit-transition: all .4s;
-moz-transition: all .4s;
-o-transition: all .4s;
-ms-transition: all .4s;
transition: all .4s;
color:#D17FAA;
background:#ffffff;
}

.chans{
border:1px solid #eee;
padding:2px;
color:#000000;
text-transform:uppercase;
letter-spacing:1px;
font-size:10px;
margin-top:10px;
position:relative;
-webkit-transition: all .4s;
-moz-transition: all .4s;
-o-transition: all .4s;
transition: all .4s;
}

.chans:hover{
cursor: url(http://i.imgur.com/x9x1x.png), auto;
color:#ffffff;
background:#D17FAA;
-webkit-transition: all .4s;
-moz-transition: all .4s;
-o-transition: all .4s;
-ms-transition: all .4s;
transition: all .4s;
}

/* ---BLOCKQUOTE--- */

blockquote {
padding-left:15px;
padding-top:5px;
padding-bottom:5px;
border-left:5px solid #dddddd;
margin:5px;
-WEBKIT-TRANSITION:ALL 0.9S ease-in;
-MOZ-TRANSITION:ALL 0.9S ease-in;
-O-TRANSITION:ALL 0.9S ease-in;
 }

blockquote:hover{
padding-left:15px;
padding-top:5px;
padding-bottom:5px;
border-left:5px solid #D17FAA;
margin:5px;
-WEBKIT-TRANSITION:ALL 0.9S ease-in;
-MOZ-TRANSITION:ALL 0.9S ease-in;
-O-TRANSITION:ALL 0.9S ease-in;
}

/* ---NUMBER LIST--- */

ul#label-list {
display:inline;
}

ul, li {
list-style-type: hiragana;
font-size: 13px;
color: #bddeea;
margin-top: -5px;
}

</style>
</head>

<div class="title">
Retro</div>
<div id="imagebar">
</div>
<center>
<div class="description">
Hi. This is my third theme, Retro. You can briefly write something about you in here.<br>

<div class="descriptions">
Theme : 03 Retro.<br>
Credit : <a class="chans" href="emma-thegoldfish.blogspot.com/">TheDreamer</a><br>
Material :  <a class="chans" href="http://dreamer-freebies.blogspot.com/">Dreamer Freebies</a>
</div>
</div>
</div>
<div id="menu">
<a class="link2" data-toggle="tooltip" title="My Diary" onClick="document.getElementById('entries').innerHTML=document.getElementById('diary').innerHTML">Diary</a><br><br><br>

<a class="link1" data-toggle="tooltip" title="The Owner" onClick="document.getElementById('entries').innerHTML=document.getElementById('profile').innerHTML">Profile</a><br><br><br>

<a class="link2" data-toggle="tooltip" title="Tuto&FreeB" onClick="document.getElementById('entries').innerHTML=document.getElementById('stuff').innerHTML">Stuff</a><br><br><br>

<a class="link1" data-toggle="tooltip" title="PengYou" onClick="document.getElementById('entries').innerHTML=document.getElementById('affie').innerHTML">Beloved</a><br><br><br>

<a class="link2" data-toggle="tooltip" title="Chat" onClick="document.getElementById('entries').innerHTML=document.getElementById('chat').innerHTML">ChatBox</a><br><br><br>

<a class="link1" style="font-weight: normal;" href="http://www.blogger.com">Home</a> <br><br><br>
<a class="link2" style="font-weight: normal;" href="http://www.blogger.com/follow-blog.g?blogID=8557571498491457566">+ Follow</a>
</div>
<div id="container" class="masonry" style="position: relative; height: 100px;">
<div id="entries">
<blogger>
<div id="post">
<div class="main-title">
 <$BlogItemTitle$> </div>
<div class="sec-title">
<blogdateheader><$BlogDateHeaderDate$></BlogDateHeader> @ <$BlogItemDateTime$></div>
<br><br>

<$BlogItemBody$>
</div>
</blogger></div>
<div id="entries">
<div class="post">
<div id="diary" style="display:none;">
<div id="post">
<blogger>
<div class="main-title">
 <$BlogItemTitle$> </div>
<div class="sec-title">
<blogdateheader><$BlogDateHeaderDate$></BlogDateHeader> @ <$BlogItemDateTime$></div>
<br><br>

<$BlogItemBody$>

</div>
</blogger>
</div>
</div>
</div>
</div>
<div id="entries">
<div class="post">
<div id="profile" style="display:none">
<div id="post">
<div class="main-title">
EMMA THE DREAMER</div>
<div class="a2">
who loves peony</div>
<br>
<center>
<div id="avatar">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihSSJNDnrxyN1ozvqRtdE36i8t5WdPnyIFUSV72h-jIa8iZ2fGNMoJmp10kGnOTHaAQWeeAVT5lPcGAhrBov-iisginyl_mB4e1ou4_ulMsjWMyu7uH0-Qp9njEJhr2Tc2aKVyvqIMtD_o/s1600/0e70d5638841b77d43c5f390dcb4963d.jpg">
</div>
</center>
<br>
WRITE SOMETHING ABOUT YOURSELF HERE

</div>
</div>
<div id="entries">
<div class="post">
<div id="stuff" style="display:none">
<div id="post">
<div class="main-title">
 Stuff </div>
<div class="a2">
Tutos&FreeBs</div>
<br>
<center>
<div id="avatar">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihSSJNDnrxyN1ozvqRtdE36i8t5WdPnyIFUSV72h-jIa8iZ2fGNMoJmp10kGnOTHaAQWeeAVT5lPcGAhrBov-iisginyl_mB4e1ou4_ulMsjWMyu7uH0-Qp9njEJhr2Tc2aKVyvqIMtD_o/s1600/0e70d5638841b77d43c5f390dcb4963d.jpg">
</div>
</center>
<p ALIGN=left>
WRITE SOMETHING HERE
</p>
<br><br>
<center>
AGREE? MOVE ON THEN
<br>
<a class="chan" href="http://dreamer-tutorial.blogspot.com/">TUTORIAL</a> / 
<a class="chan" href="http://dreamer-freebies.blogspot.com/">FREEB</a> 
</center>
</div>
</div>
<div id="entries">
<div class="post">
<div id="affie" style="display:none">
<div id="post">
<div class="main-title">
 My friend </div>
<div class="a2">
Don't Be Shy to Exchange Your Link With Me</div>
<br>
<center>
<div id="avatar">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihSSJNDnrxyN1ozvqRtdE36i8t5WdPnyIFUSV72h-jIa8iZ2fGNMoJmp10kGnOTHaAQWeeAVT5lPcGAhrBov-iisginyl_mB4e1ou4_ulMsjWMyu7uH0-Qp9njEJhr2Tc2aKVyvqIMtD_o/s1600/0e70d5638841b77d43c5f390dcb4963d.jpg">
</div>
</center>
<br>
<center>
<a class="chan" href="">Next</a>
<a class="chan" href="">Next</a>
<a class="chan" href="">Next</a>
<a class="chan" href="">Next</a>
<a class="chan" href="">Next</a>

</td>
</center>
</div>
</div>
<div id="entries">
<div class="post">
<div id="chat" style="display:none">
<div id="post">
<div class="main-title">
 ChatBox</div>
<div class="a2">
Leave a message</div>
<br>

<center>
<div style="background:url() repeat; border:2px double #D17FAA;padding:5px;width:550px;">
YOUR CHATBOX CODE HERE
</center>
</div>
</div>
</div>
</div>
</body>
</html>

代码在这里哦，直接Copy全部Paste在修改模版HTML的Textarea里面就大功告成了

Labels: theme