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

ค่าเริ่มต้น

  • เลื่อนอัตโนมัติ
    limited.Blogskins ID Dream

    ลำดับตอนที่ #4 : ✈ Colourful

    • อัปเดตล่าสุด 9 มี.ค. 57


    Skin screenshot
     *  ยังไม่ได้ใส่โค้ดล้างไอดีนะคะ  * 
     

    <style type="text/css">body {cursor: url(http://cur.cursors-4u.net/others/oth-7/oth708.cur), progress !important;}</style>
    <body class="lang_en"><!DOCTYPE html>
    <html lang="en">
     <head>

      <title> gracie</title>

      <link rel="stylesheet" type="text/css" href="http://tympanus.net/Tutorials/YouTubeLeftSideMenu/css/default.css" />
      <link rel="stylesheet" type="text/css" href="http://tympanus.net/Tutorials/YouTubeLeftSideMenu/css/component.css" />
      <script src="http://tympanus.net/Tutorials/YouTubeLeftSideMenu/js/modernizr.custom.js"></script>
      
    <link href='http://fonts.googleapis.com/css?family=Sniglet|Sintony|Geo' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="http://static.tumblr.com/cpgw3dl/liImwcj3i/gracie.css" />
    <link rel="stylesheet" type="text/css" href="http://static.tumblr.com/cpgw3dl/kO6mu98bs/style.css" />
    <script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
    <script>
    $(document).ready(function() {
    //
    $('a.poplight[href^=#]').click(function() {
    var popID = $(this).attr('rel'); //Get Popup Name
    var popURL = $(this).attr('href'); //Get Popup href to define size
    var query= popURL.split('?');
    var dim= query[1].split('&');
    var popWidth = dim[0].split('=')[1]; //Gets the first query string value
    $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="http://cdn2.iconfinder.com/data/icons/bwpx/icons/symbol_multiplication.gif" class="btn_close" title="Close" alt="Close" /></a>');
    var popMargTop = ($('#' + popID).height() + 80) / 2;
    var popMargLeft = ($('#' + popID).width() + 80) / 2;
    //Apply Margin to Popup
    $('#' + popID).css({
    'margin-top' : -popMargTop,
    'margin-left' : -popMargLeft
    });
    $('body').append('<div id="fade"></div>');
    $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
    return false;
    });
    $('a.close, #fade').live('click', function() {
    $('#fade , .popup_block').fadeOut(function() {
    $('#fade, a.close') (); //fade them both out
    });
    return false;
    });
    });
    </script>
     <style type="text/css">
    .wrapper-dropdown-3 .dropdown {
      /* Size & position */
        position: absolute;
        top: 140%;
        left: 0;
        right: 0;
        /* Styles */
        background: rgb(201,147,147);
      
        border: 3px solid white;
        border-radius: inherit;
          color:#fff;
        box-shadow: 0 0 5px rgba(0,0,0,0.1);
        font-weight: normal;
        -webkit-transition: all 0.2s ease-in;
        -moz-transition: all 0.2s ease-in;
        -ms-transition: all 0.2s ease-in;
        -o-transition: all 0.2s ease-in;
        transition: all 0.2s ease-in;
        list-style: none;
        /* Hiding */
        opacity: 0;
        pointer-events: none;
    }
    .wrapper-dropdown-3:after {
        content: "";
        width: 0;
        height: 0;
        position: absolute;
        right: 25px;
        top: 50%;
        margin-top: -3px;
      border-width: 6px 6px 0 6px;
        border-style: solid;
        border-color: white transparent;
    }
    .wrapper-dropdown-3.active:after {
       border-width: 0 6px 6px 6px;}
    </style>
    </head>
     <body>
    <div class="container">
       <div id="musicplayer">
    <div id="music"> <center>
      <form id="tfnewsearch"name="cse" id="searchbox_demo" action="http://www.google.com/cse" method="get" action="http://evangelista-grace.blogspot.com">
     <input type="hidden" name="cref" value="" />
      <input type="hidden" name="ie" value="utf-8" />
      <input type="hidden" name="hl" value="" />
              <input type="text" class="tftextinput" name="q" size="15" maxlength="120"><input type="submit" value="search" class="tfbutton">
          </form></center>
     <div class="tfclear"></div> </div> <script type="text/javascript" src="https://www.google.com/cse/tools/onthefly?form=searchbox_demo&lang="></script>
        <div id="musictab"><span class="icon-search"></span></div>

    </div>
       <header class="clearfix"><div style="margin-top:-30px;">
    <center><a href="/"><img src="http://i.imgur.com/7PnoI7t.gif" style="width:80px;border:7px solid white;border-radius: 50%;"></a></center><div style="padding:5px;"></div>
        <div class="name">Your blog title</div><span style="font-family:'sintony';font-size:17px;">your subtitle</span></div>
        </header>
       <div class="main">
         <center><div class="entry" style="margin-right:-60px;width:74%"><blogger><div style="padding:4px;"></div><div class="h2"><$BlogItemTitle$></div><div class="date"><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> | <a  href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>></BlogItemCommentsEnabled>Leave a comment </a></div><br><$BlogItemBody$></blogger><center><div style="border:5px solid #D96459;width: 100%;"></div><span style="float:left;"> <a class="pager" title="Newer Posts" href=<$NewerPosts$>><p class="  icon-circle-arrow-left" data-icon="&#xf0a8;"></p></a></span><span style="float:right;"> <a class="pager" title="Older Posts" href=<$OlderPosts$>><p class="icon-circle-arrow-right" data-icon="&#xf0a9;"></p></a></span></center><span style="font-family: 'geo'; font-size:17px;color:#fff ;text-align:center;">Copyright ©.Layout by:<a href="http://evangelista-grace.blogspot.com/" target="_blank">Evangelista</a>. Custom drop-dowm menu by Codrops. Colour palette used: <a href="https://kuler.adobe.com/Autumn-berries-color-theme-2585780/">Autumn Berries</a>. Best viewed on Google Chrome.All right reserved.</span><br>
    </div></center>
       <div class="side" >
         <div style="position:absolute;background-color:#F2E394;float: right;left:0px;height:420px;border: 3px #fafafa solid;border-top:none;
     width: 30%;margin-top:-34px;
     padding-right: 20px;
     min-width: 320px;"><br><br><br><div id="dd" class="wrapper-dropdown-3" tabindex="1">
          <span>Le Collapsible</span>
          <ul class="dropdown">
           <li><a href="#?w=300" rel="02" class="poplight"><span class="icon-user"></span>&nbsp; About</a></li>
           <li><a href="#?w=400" rel="05" class="poplight"><span class="icon-list"></span>&nbsp; Tutorials</a></li>
           <li><a href="#?w=400" rel="04" class="poplight"><span class="icon-heart"></span>&nbsp; Freebies</a></li>
                              <li><a href="#?w=400" rel="06" class="poplight"><span class="icon-bubble"></span>&nbsp; Chat</a></li>
          </ul>
         </div>

       <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
      <script type="text/javascript">
      
       function DropDown(el) {
        this.dd = el;
        this.placeholder = this.dd.children('span');
        this.opts = this.dd.find('ul.dropdown > li');
        this.val = '';
        this.index = -1;
        this.initEvents();
       }
       DropDown.prototype = {
        initEvents : function() {
         var obj = this;
         obj.dd.on('click', function(event){
          $(this).toggleClass('active');
          return false;
         });
         obj.opts.on('click',function(){
          var opt = $(this);
          obj.val = opt.text();
          obj.index = opt.index();
          obj.placeholder.text(obj.val);
         });
        },
        getValue : function() {
         return this.val;
        },
        getIndex : function() {
         return this.index;
        }
       }
       $(function() {
        var dd = new DropDown( $('#dd') );
        $(document).click(function() {
         // all dropdowns
         $('.wrapper-dropdown-3') Class('active');
        });
       });
              </script></div>
        </div>
       </div>
      </div><!-- /container -->


     <script type="text/javascript" src="//www.blogger.com/static/v1/common/js/2216424884-csitail.js"></script>
    <script type="text/javascript">BLOG_initCsi('classic_blogspot');</script></body>



    </html>
    <script src="http://static.tumblr.com/3ikgvxs/K16l80ow6/cufon-yui.js" type="text/javascript"></script>
    <script src="http://static.tumblr.com/3driglx/PH8l1y75m/lorie_400.font.js" type="text/javascript"></script>
    <script type="text/javascript">Cufon.replace('');</script>
    <script src="http://static.tumblr.com/3ikgvxs/K16l80ow6/cufon-yui.js" type="text/javascript"></script>
    <script src="http://static.tumblr.com/3driglx/PH8l1y75m/lorie_400.font.js" type="text/javascript"></script>
    <script type="text/javascript">Cufon.replace('.name');</script>
    <script src="http://static.tumblr.com/3ikgvxs/K16l80ow6/cufon-yui.js" type="text/javascript"></script>
    <script src="http://static.tumblr.com/3driglx/PH8l1y75m/lorie_400.font.js" type="text/javascript"></script>
    <script type="text/javascript">Cufon.replace("'');</script>
    </body></html>
    <div id="02" class="popup_block">
        <Center><div class="title">Hello there!</div><center><img src="http://i.imgur.com/2NatPe1.jpg" style="width:100px; opacity:.80;border:5px solid #e4aa93;
     -moz-border-radius:0px 100px 100px 100px;
    border-radius:100px 100px 100px 100px;
    width:100px;
    height:100px;"><br><br><div class="ar"></div>
    <div class="sd">YOUR PROFILE HERE..
    </div></center></div>
    </div></div></div></div></div></div></div></div></div></div>


    <div id="05" class="popup_block">
         <div style="width:auto;height:150px;overflow:auto; "><Center><div class="title">Tutorials for you</div></center>
    <br>
    <ul><a class="thingi" href='/' >LINK</a></ul>
    <ul><a class="thingi" href='/' >LINK</a></ul>
    <ul><a class="thingi" href='/' >LINK</a></ul>
    <ul><a class="thingi" href='/' >LINK</a></ul>
    <ul><a class="thingi" href='/' >LINK</a></ul>
    <ul><a class="thingi" href='/' >LINK</a></ul>
    <ul><a class="thingi" href='/' >LINK</a></ul>
    <ul><a class="thingi" href='/' >LINK</a></ul>
    <ul><a class="thingi" href='/' >LINK</a></ul>
    <ul><a class="thingi" href='/' >LINK</a></ul>
    </div>
    </div></div></div></div></div></div></div></div></div></div>
    <div id="04" class="popup_block"><div style="width:auto;height:150px;overflow:auto; ">
        <Center><div class="title">Freebies for you</div></center>
    <br>
    <ul><a class="thingi" href='/' >LINK</a></ul>
    <ul><a class="thingi" href='/' >LINK</a></ul>
    <ul><a class="thingi" href='/' >LINK</a></ul>
    <ul><a class="thingi" href='/' >LINK</a></ul>
    <ul><a class="thingi" href='/' >LINK</a></ul>
    <ul><a class="thingi" href='/' >LINK</a></ul>
    <ul><a class="thingi" href='/' >LINK</a></ul>
    <ul><a class="thingi" href='/' >LINK</a></ul>
    <ul><a class="thingi" href='/' >LINK</a></ul>
    <ul><a class="thingi" href='/' >LINK</a></ul>
    </div></div>
    </div></div></div></div></div></div></div></div></div></div>
    <div id="06" class="popup_block"><div style="width:auto;height:150px;overflow:auto; ">
        <Center><div class="title">Leave your footprints</div></center><center>
    <br>
    <div><div><iframe frameborder="0" width="200" height="75" src="http://www6.cbox.ws/box/?boxid=739736&amp;boxtag=w59n4q&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform6-739736" style="border: 0px solid;border-top:0px" id="cboxform6-739736"></iframe></div></div></center>
    </div></div></div></div></div></div></div></div></div></div>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <script src="http://static.tumblr.com/5ojoydj/p9wmmzopi/jquery.style-my-tooltips.js"></script>
    <script src="http://static.tumblr.com/5ojoydj/En2mmzorm/style-my-tooltips.css"></script>
    <script>
         (function($){
             $(document).ready(function(){
                 $("[title]").style_my_tooltips({
        tip_follows_cursor:true,
        tip_delay_time:100,
        tip_fade_speed:100,
        attribute:"title"
    });
             });
         })(jQuery);
     </script>
    <div style="position:fixed; left:20px; bottom:10px; display:inline;"><a href="http://evangelistagrace.tumblr.com/" target="_blank" title="Tumblr"><p class="  icon-tumblr" data-icon="&#xe002;"></p></a><a href="https://www.google.com/+EvangelistaGrace" target="_blank" title="GooglePlus"><p class="  icon-google-plus" data-icon="&#xe000;"></p></a><a href="http://www.blogger.com/follow-blog.g?blogID= YOURBLOGID" target="_blank" title="Follow"><p class="  icon-google-plus-2" data-icon="&#xe000;"></p></a></div>

    &QUAINT 07.
    ติดตามเรื่องนี้
    เก็บเข้าคอลเล็กชัน

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

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

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

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

    ความคิดเห็น

    ×