ตั้งค่าการอ่าน

ค่าเริ่มต้น

  • เลื่อนอัตโนมัติ
    VIVAPỢLØ✿ID.Dream!

    ลำดับตอนที่ #8 : (ฺB) ; Chasing the dreams

    • อัปเดตล่าสุด 7 ต.ค. 58


    CHASING THE DREAMS


    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
     © vivapolo id.dream by madampark
    plz don't copy and comment
    :)



    CODE

    <html>
    <head>
    <title>chasing the dreams</title>
     
    <script language="javascript" src="http://leezy2.webs.com/jquery_mini.js"></script> 
    <script language="javascript" src="http://leezy2.webs.com/jquery.dimensions.js"></script> 
    <script language="javascript"> 
     var name = "#petit";
     var menuYloc = null;
     
      $(document).ready(function(){
       menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
       $(window).scroll(function () { 
        offset = menuYloc+$(document).scrollTop()+"px";
        $(name).animate({top:offset},{duration:500,queue:false});
       });
      }); 
    </script> 
     
     
    <style type="text/css">
    #navbar-iframe {
    display: none;
    }
     
    body {
    background: #f9f9f9;
    }
     
    ::-moz-selection {
    background: #444444;
    color: #ffffff;
    }
     
    ::selection {
    background: #444444;
    color: #ffffff;
    }
     
    a {
    font-weight: normal;
    color: #727272;
    text-decoration:none;
    }
     
    a:hover {
    color: #424242;
    font-style:italic;
    }
     
    a img {
    border: none;
    }
     
    .text {
    font-family: arial;
    font-size: 8pt;
    font-weight: bold;
    text-align: justify;
    }
     
    #main {
    width:550px;
    background-color:#ffffff;
    margin-top:-10px;
    padding-top:25px;
    padding-bottom:15px;
    padding-left:35px;
    padding-right:35px;
    margin-bottom:-10px;
    height:100%;
    }
     
    .topnav{
    width:550px;
    height:240px;
    text-align:center;
    }
     
    .navigation {
    text-align: justify;
    text-transform:none;
    float:left;
    px solid #FFC6BC;
    color:transparent;
    width:300px;
    }
     
    #pink:hover {
    background-color:#FFC6BC;
    color:#ffffff;
    border-right:50px solid #fe7861;
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
    width:400px;
    text-align:right;
    }
     
    #pink:hover span {
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
    margin-right:10px;
    width:400px;
    color:#ffffff;
    font-style:italic;
    }
     
    #pink span, #orange span, #yellow span, #green span, #blue span, #purple span {
    font-weight:lighter;
    font-family:consolas;
    font-size:12px;
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
    margin-left:10%;
    width:300px;
    text-align:right;
    color:transparent;
    }
     
    #orange {
    display:block;
    background-color:transparent;
    margin-bottom:7px;
    padding:0px;
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
    border-right:165px solid #FEDEA2;
    color:transparent;
    width:300px;
    }
     
    #orange:hover {
    background-color:#FEDEA2;
    color:#ffffff;
    border-right:50px solid #ffb11f;
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
    width:415px;
    text-align:right;
    }
     
    #orange:hover span {
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
    margin-right:10px;
    width:415px;
    color:#ffffff;
    font-style:italic;
    }
     
    #yellow {
    display:block;
    background-color:transparent;
    margin-bottom:7px;
    padding:0px;
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
    border-right:180px solid #FFF9B8;
    color:transparent;
    width:300px;
    }
     
    #yellow:hover {
    background-color:#FFF9B8;
    color:#ffffff;
    border-right:50px solid #f4c404;
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
    width:430px;
    text-align:right;
    }
     
    #yellow:hover span {
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
    margin-right:10px;
    width:430px;
    color:#ffffff;
    font-style:italic;
    }
     
    #green {
    display:block;
    background-color:transparent;
    margin-bottom:7px;
    padding:0px;
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
    border-right:195px solid #D3DBB2;
    color:transparent;
    width:300px;
    }
     
    #green:hover {
    background-color:#D3DBB2;
    color:#ffffff;
    border-right:50px solid #88a805;
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
    width:445px;
    text-align:right;
    }
     
    #green:hover span {
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
    margin-right:10px;
    width:445px;
    color: #ffffff;
    font-style:italic;
    }
     
    #blue {
    display:block;
    background-color:transparent;
    margin-bottom:7px;
    padding:0px;
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
    border-right:210px solid #A7D3D2;
    color:transparent;
    width:300px;
    }
     
    #blue:hover {
    background-color:#A7D3D2;
    color:#ffffff;
    border-right:50px solid #13A09D;
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
    width:460px;
    text-align:right;
    }
     
    #blue:hover span {
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
    margin-right:10px;
    width:460px;
    color:#ffffff;
    font-style:italic;
    }
     
    #purple {
    display:block;
    background-color:transparent;
    margin-bottom:7px;
    padding:0px;
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
    border-right:225px solid #E2D2E6;
    color:transparent;
    width:300px;
    }
     
    #purple:hover {
    background-color:#E2D2E6;
    color:#ffffff;
    border-right:50px solid #c164d9;
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
    width:475px;
    text-align:right;
    }
     
    #purple:hover span {
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
    margin-right:10px;
    width:475px;
    color:#ffffff;
    font-style:italic;
    }
     
    .title {
    font-family: "Times New Roman";
    font-size:35px;
    font-style:italic;
    text-transform:capitalize;
    }
     
    .title:first-letter {
    font-size:40px;
    color:#fe7861;
    font-style:italic;
    }
     
    .btitle {
    font-family: "Times New Roman";
    font-size:35px;
    font-style:italic;
    text-transform:lowercase;
    text-align:left;
    border-bottom: #424242 solid 1px;
    margin-bottom:5px;
    }
     
    .btitle:first-letter {
    font-size:40px;
    color:#fe7861;
    font-style:italic;
    text-transform:capitalize;
    }
     
    .stitle {
    font-family: tinytots;
    font-size:8px;
    font-style:italic;
    text-transform:uppercase;
    text-align:right
    }
     
    @font-face {
    font-family: "tinytots";
    src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf');
    }
     
    .sidepic {
    float:left;
    width:auto;
    height:auto;
    padding:5px;
    }
     
    .sidepic img {
    background-color:#f9f9f9;
    padding:0px;
    border:2px solid #eaeaea;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    }
     
    #written {
    background-color:#ffffff;
    float:right;
    width:400px;
    height:auto;
    text-align:justify;
    border-left:1px dashed #eaeaea;
    padding-left: 15px;
    margin-bottom: 15px;
    }
     
    #floating {
    width:75px;
    padding:10px;
    background-color:#fff;
    padding: 10px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    font-family:tinytots;
    font-size:8px;
    text-transform:uppercase;
    }
     
    #petit {
    position:absolute;
    top:150px;
    left:825px;
    }
     
    img {
    opacity: 1;
    filter:alpha(opacity=100);
    transition: opacity 1s;
    -moz-transition: opacity 1s;
    -webkit-transition: opacity 1s;
    -o-transition: opacity 1s;
    moz-opacity: 1; 
    }
     
    img:hover {
    opacity:0.75;
    filter:alpha(opacity=75);
    transition: opacity 1s;
    -moz-transition: opacity 1s;
    -webkit-transition: opacity 1s;
    -o-transition: opacity 0.5s;
    }
     
    ::-webkit-scrollbar {
    width: 10px;
    background-color: #ffffff;
    border-right:5px solid white;
    }
     
    ::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment  {
    height: 10px;
    display: block;
    background: #ffffff;
    }
     
    ::-webkit-scrollbar-track-piece  {
    background-color: #ffffff;
    }
     
    ::-webkit-scrollbar-thumb{
    background-color: #ccc;
    -webkit-border-radius: 400px;
    border-radius: 400px;
    }
     
    ul#label-list li {
    display:inline;
    }
     
    ul, ol {
    list-style-type: hiragana;
    }
     
    .tbl {
    width:550px;
    background-color:#ffffff;
    margin-top:-10px;
    padding-top:25px;
    padding-bottom:15px;
    margin-bottom:-10px;
    height:100%;
    overflow:hidden;
    }
     
    </style>
     
    </head>
     
    <body>
     
    <div id="petit">
    <div id="floating">
    <center><a href="javascript:scroll(0,0)">กลับขึ้นไป</a></center>
    </div>
    </div>
     
    <center>
    <table width="550" class="tbl">
    <tbody><tr><td>
    <div id="main">
    <div class="topnav">
     
    <div class="acontainer" style="position:absolute; .tinypic.com/ezrcwx.jpg" width="300px"></a>
    </div>
    </div>
     
    <div class="title" style="position:absolute; float:right; text-align:right; width:550px;">
    chasing<br>
    the dreams</div>
    <br><br><br><br><br>
     
    <div class="navigation">
     
    <div id="pink" style="text-decoration:none;">
    <a><span onClick="document.getElementById('hall').innerHTML=document.getElementById('entries').innerHTML">+aboutme</span></a>
    </div>
     
    <div id="orange" style="text-decoration:none;">
    <a><span onClick="document.getElementById('hall').innerHTML=document.getElementById('owner').innerHTML">+ช่องทางติดต่อ</span></a>
    </div>
     
    <div id="yellow" style="text-decoration:none;">
    <a href="http://writer.dek-d.com/ชื่อไอดี/friend/request_friend.php"><span>+addme</span></a></a>
    </div>
     
    <div id="green" style="text-decoration:none;">
    <a href="http://my.dek-d.com/ชื่อไอดี/writer/"><span>+writer</span></a>
    </div>
     
    <div id="blue" style="text-decoration:none;">
    <a href="http://my.dek-d.com/ชื่อไอดี/qmsg/"><span>+smsg</span></a>
    </div>
     
    <div id="purple" style="text-decoration:none;">
    <a href="http://my.dek-d.com/ชื่อไอดี/sendsecret.php"><span>+smsg</span></a>
    </div>
     
    <br>
    </div> 
    </div>
    <br>
     
    <div id="hall" style="width:550px;">
     
    <div class="sidepic">
    <script type="text/javascript">
    var image=new Array()
     
    image[0]='<img src="http://i52.tinypic.com/2dtda8j.jpg">'
    image[1]='<img src="http://i55.tinypic.com/par01.jpg">'
    image[2]='<img src="http://i56.tinypic.com/vmt93r.jpg">'
    image[3]='<img src="http://i55.tinypic.com/11vsfgx.jpg">'
    image[4]='<img src="http://i51.tinypic.com/35k53b5.jpg">'
    image[5]='<img src="http://i52.tinypic.com/262tu1h.jpg">'
     
    var random=Math.floor(Math.random()*(image.length))
     
    </script>
    </div>
     
    <div id="written">
    <div class="text">
    <blogger>
    <div class="btitle">
    ข้อความ</a>
    </div>
    <div class="stitle">
    <BlogDateHeader></BlogDateHeader>EDIT BY VIVAPỢL&Oslash;✿ID.Dream!
    </div>
    <br>
    ข้อความ
    <br>
    <center>
      <p>-------------</p>
    </center>
    <br>
    </blogger>
    </div>
    </div>
    </div>
     
    <div id="entries" style="display:none;">
     
    <div class="sidepic">
    <script type="text/javascript">
    var image=new Array()
     
    image[0]='<img src="http://i52.tinypic.com/2dtda8j.jpg">'
    image[1]='<img src="http://i55.tinypic.com/par01.jpg">'
    image[2]='<img src="http://i56.tinypic.com/vmt93r.jpg">'
    image[3]='<img src="http://i55.tinypic.com/11vsfgx.jpg">'
    image[4]='<img src="http://i51.tinypic.com/35k53b5.jpg">'
    image[5]='<img src="http://i52.tinypic.com/262tu1h.jpg">'
     
    var random=Math.floor(Math.random()*(image.length))
     
    </script>
    </div>
     
    <div id="written">
    <div class="text">
    <blogger>
    <div class="btitle">
    About me</a>
    </div>
    <div class="stitle">
    <BlogDateHeader></BlogDateHeader>ข้อความ
    </div>
    <br>
    ข้อความ
    <br>
    <center>-------------</center>
    <br>
    </blogger>
    </div>
    </div>
    </div>
     
    <div id="owner" style="display:none;">
    <div class="sidepic">
    <img src="http://i55.tinypic.com/108ixw9.jpg">
    </div>
    <div id="written">
    <div class="btitle">
    ข้อความ
    </div>
    <div class="stitle">
    </div>
    <br>
    <div class="text">
    ข้อความ
    </div>
    </div>
    </div>
     
    <div id="archive" style="display:none;">
    <div class="sidepic">
    <img src="http://i55.tinypic.com/2ibdagz.jpg">
    </div>
    <div id="written">
    <div class="btitle">
    Old Books
    </div>
    <div class="stitle">
    press backward
    </div>
    <br>
    <div class="text">
    Recently posted :<br>
    <ul><BloggerPreviousItems>
    <li>
    <a href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></a>
    </li>
    </BloggerPreviousItems>
    </ul>
    <br>
     
    By month :<br>
    <ul>
    <BloggerArchives>
    <li>
    <a href='<$BlogArchiveURL$>'><$BlogArchiveName$></a><br>
    </li>
    </BloggerArchives></ul>
    </div>
    </div>
     
    <div id="chat" style="display:none;">
    <div class="sidepic">
    <img src="http://i56.tinypic.com/2nt0zt.jpg">
    </div>
    <div id="written">
    <div class="btitle">
    Scream it loud!
    </div>
    <div class="stitle">
    tell me, tell me, t-t-t-t-tell me~
    </div>
    <br>
    <div class="text">
    put your tagboard, max width 380px ;)
    </div>
    </div>
     
    <div id="credit" style="display:none;">
    <div class="sidepic">
    <img src="http://i55.tinypic.com/k4ukxh.jpg">
    </div>
    <div id="written">
    <div class="btitle">
    behind the scene
    </div>
    <div class="stitle">
    and the credit goes to...
    </div>
    <br>
    <div class="text">
    Chasing The Dreams<br><br>
     
    Designer : <a href="http://flavors.me/shakkun">your</a> <a href="http://blogskins.com/me/dancing_girl1">sweetest</a> <a href="http://butterfly-melody.blogspot.com">lullaby</a> &hearts;<br>
    Ressources : <a href="http://cheriedelacouture.tumblr.com/">1</a> | <a href="http://bluebraid.livejournal.com/">2</a> | <a href="http://peculiarpear.livejournal.com">3</a> | <a href="http://lemonparfait.com">4</a><br>
    Inspiration : <a href="http://charmings.tumblr.com">1</a> | <a href="http://cavealier.blogspot.com">2</a><br>
    </div>
    </div>
     
    </div>
    </td></tr></tbody></table>
    </center>
    </body>

    ©
    t
    h
    e
    m
    y
    b
    u
    t
    t
    e
    r

    ติดตามเรื่องนี้
    เก็บเข้าคอลเล็กชัน
    นิยายแฟร์ 2024

    ผู้อ่านนิยมอ่านต่อ ดูทั้งหมด

    loading
    กำลังโหลด...

    อีบุ๊ก ดูทั้งหมด

    loading
    กำลังโหลด...

    ความคิดเห็น

    ×