GirlwithBigHead

Tutorial : Live Preview in Blog

20/12/2013 | 2 comments

Ni contoh code affies saya { preview } :

<html><head><base target='_blank'/>
<link href='http://i.imgur.com/ppUR3.gif' rel='icon' type='image/x-icon'/>
<title>Affies</title>
<style>
#navbar-iframe {
display: none !important;}

::-webkit-scrollbar-thumb:vertical {
background-color:#aaa;
border-radius:55px;}

::-webkit-scrollbar {
height:0px;
width:5px;
background-color:#fff;
border-radius:55px;}

a:link,a:active,a:visited {
text-decoration:none;}

body {
font:11px trebuchet ms;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8zTVUm74aiKSYmsTwPHMsMGp2XOjpPmx__I_ACnTya2yE_7mSQ6oTH1eOwuUjIRJBSRiKjcE8qJWjVz1SI83XJoKFzhyFQ9vSwSA6e5j9rqqmPK2KJ_aQAmwV2SZKX6L7fG7U6kKONuY/s320/ee.png) fixed;
color:#444; }

#ttl {
color: #000;
text-align: center;
margin-top:20px;
margin-bottom:-20px;
margin-left:180px;
font: normal 80px "lemoncanfly";}

a.ttl2 {
text-decoration:none;
color: #999;
text-align: center;
margin-top:5px;
margin-left:-280px;
font: normal 19px consolas;}

#back {
border:1px solid #eee;
background:#fff;
width:500px;
padding: 15px;
border-radius:0px 45px 0px 45px;}

@font-face{font-family:lemoncanfly;src:url('http://static.tumblr.com/eq1rpir/A8nm517nt/lemons_can_fly.ttf')}

a.navvv{
box-shadow: inset 0px 0 0px 0 #fff;
-webkit-transition: 1.5s;
-moz-transition: 1.5s;
margin:5px;
text-decoration:none;
color:#555;
background:#FFEBC2;
display:inline-block;
width:100px;
padding:2px;
text-align:center;
border:1px solid #FFEBC2;}

a.navvv:hover{
box-shadow: inset 850px 0 0px 0 #fff;}

.word{
background:#FFF;
position: fixed;
width:100px;
font-size:14px;
bottom: -80px;
right: 10px;
padding:2px;
border-radius:10px;
font-family:consolas;
letter-spacing:2px;
text-transform:uppercase;
color:#888;margin-top:5px;
text-align:center;
height:100px;}

</style>
<center>
<div class="word">
<a style="color:#000;" href="http://www.blogskins.com/me/tralala-afiqah">THEME</a> <a style="color:#000;" href="http://chocollyheart.blogspot.com/">BY</a></div>
<div id="ttl">
 Affiliates</div>
<div id="back">
<div style="height: 320px;overflow: scroll;">
<a class="navvv" href="http://chocollyheart.blogspot.com/">Afiqah</a>
<a class="navvv" href="LINK">NAME</a>
<a class="navvv" href="LINK">NAME</a>
<a class="navvv" href="LINK">NAME</a>
<a class="navvv" href="LINK">NAME</a>
<a class="navvv" href="LINK">NAME</a>
<a class="navvv" href="LINK">NAME</a>
<a class="navvv" href="LINK">NAME</a>
<a class="navvv" href="LINK">NAME</a>
<a class="navvv" href="LINK">NAME</a>
<a class="navvv" href="LINK">NAME</a>
<a class="navvv" href="LINK">NAME</a>
<a class="navvv" href="LINK">NAME</a>
<a class="navvv" href="LINK">NAME</a>
<a class="navvv" href="LINK">NAME</a>
<a class="navvv" href="LINK">NAME</a>
<a class="navvv" href="LINK">NAME</a>
<a class="navvv" href="LINK">NAME</a>
<a class="navvv" href="LINK">NAME</a>
<a class="navvv" href="LINK">NAME</a>
<a class="navvv" href="LINK">NAME</a>
<a class="navvv" href="LINK">NAME</a>
<a class="navvv" href="LINK">NAME</a>
<a class="navvv" href="LINK">NAME</a>
<a class="navvv" href="LINK">NAME</a>
<a class="navvv" href="LINK">NAME</a>
<a class="navvv" href="LINK">NAME</a>
<a class="navvv" href="LINK">NAME</a>
<a class="navvv" href="LINK">NAME</a>
<a class="navvv" href="LINK">NAME</a>
<a class="navvv" href="LINK">NAME</a>
<a class="navvv" href="LINK">NAME</a>
<a class="navvv" href="LINK">NAME</a>
<a class="navvv" href="LINK">NAME</a>
<a class="navvv" href="LINK">NAME</a>
<a class="navvv" href="LINK">NAME</a>
<a class="navvv" href="LINK">NAME</a>
<a class="navvv" href="LINK">NAME</a>
<a class="navvv" href="LINK">NAME</a>
<a class="navvv" href="LINK">NAME</a></div>
</div>
<a class="ttl2" href="LINK">← main blog</a>
</html>

Follow Gambar step by step :-

Korang boleh cuba dahulu untuk example, korang copy code affies saya yang kat atas tuh, paste dan publish. Jadi tak ?

OLDER NEWER