นิยาย Free ★ ID DREAM 4U > ลำดับตอนที่ #6 : Simple : Dek-D.com

ลำดับตอนที่ #6

Free ★ ID DREAM 4U

ลำดับตอนที่ #6 : Simple

อัปเดตล่าสุด 16 พ.ค. 55

PREVIEW

<head>

<title> Simple</title>

src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

$(document).ready(function() {

//

//When you click on a link with class of poplight and the href starts with a #

$('a.poplight[href^=#]').click(function() {

var popID = $(this).attr('rel'); //Get Popup Name

var popURL = $(this).attr('href'); //Get Popup href to define size

//Pull Query & Variables from href URL

var query= popURL.split('?');

var dim= query[1].split('&');

var popWidth = dim[0].split('=')[1]; //Gets the first query string value

//Fade in the Popup and add close button

$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('');

//Define margin for center alignment (vertical horizontal) - we add 80px to the height/width to accomodate for the padding and border width defined in the css

var popMargTop = ($('#' + popID).height() + 80) / 2;

var popMargLeft = ($('#' + popID).width() + 80) / 2;

//Apply Margin to Popup

$('#' + popID).css({

'margin-top' : -popMargTop,

'margin-left' : -popMargLeft

});

//Fade in Background

$('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.

$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies

return false;

});

//Close Popups and Fade Layer

$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...

$('#fade , .popup_block').fadeOut(function() {

$('#fade, a.close') (); //fade them both out

});

return false;

});

</script>

<style>

#navbar-iframe { display: none; }

a { font: Normal 10px Tahoma; color: #666; letter-spacing: 1px; text-transform: Lowercase; text-decoration: none; padding: 2px; border:none; }

a:hover { font: Normal 10px Tahoma; color: #fff; letter-spacing: 1px; text-transform: Uppercase; text-decoration: none; padding: 2px; }

.h1 { font: Bold 15px Tahoma; color: #aaa; letter-spacing: -1px; text-transform: lowercase; padding: 5px; }

.h2 { font: Normal 10px Tahoma; color: #908c88; padding: 5px; }

.date { font: Bold 20px Tahoma; color: #555; letter-spacing: -2px; text-transform: Uppercase; padding: 5px; }

.blogtext { font: Normal 11px Tahoma; color: #333; padding-left: 5px; }

.title { font: Normal 10px Tahoma; letter-spacing : 3px; color: #333; text-align: left; text-transform: Uppercase; padding-left: 5px; }

blockquote { font: Normal 11px Tahoma; background-color: #eee; color: #444; padding: 5px; }

.bg { position: absolute; bottom: 0px; left: 0px; opacity: 0.2; }

body { background: url('http://i220.photobucket.com/albums/dd148/YuRi5422/bg-2-1.jpg') fixed repeat bottom left #fff; }

ul.columns {

position: absolute;

list-style: none;

top: 16%; left: 50%; margin-left: -350px;

}

ul.columns li {

width: 160px;

float: left; display: inline;

margin: 10px; padding: 0;

position: relative;

}

ul.columns li:hover { ;}

ul.columns li img {

position: relative;

padding: 5px; border: 1px solid #ccc;

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

border-radius: 10px;

filter: alpha(opacity=80);

opacity: 0.8;

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";

}

ul.columns li:hover img{

;

filter: alpha(opacity=50);

opacity: 0.5;

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

}

ul.columns li .info {

position: absolute;

left: 0px;

top: -10px;

list-style: none;

padding: 150px 10px 5px;

width: 150px;

display: none;

background: #f4f2ed;

-webkit-box-shadow: 0px 0px 10px #888;

-moz-box-shadow: 0px 0px 10px #888;

box-shadow: 0px 0px 10px #888;

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

border-radius: 10px;

}

ul.columns li:hover .info {display: block;}

#fade {

display: none;

background: #eee;

position: fixed; left: 0; top: 0;

width: 100%; height: 100%;

opacity: .80;

;

}

.popup_block{

display: none;

background: #fff;

padding: 10px;

border: 10px solid #fff;

float: left;

position: fixed;

height: 300px;

top: 50%; left: 50%;

overflow: auto; overflow-x: hidden;

;

/*--CSS3 Box Shadows--*/

-webkit-box-shadow: 0px 0px 20px #888;

-moz-box-shadow: 0px 0px 20px #888;

box-shadow: 0px 0px 20px #888;

/*--CSS3 Rounded Corners--*/

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

border-radius: 10px;

}

img.btn_close {

float: right;

margin: -25px -25px 0 0;

}

/*--Making IE6 Understand Fixed Positioning--*/

*html #fade {

position: absolute;

}

*html .popup_block {

position: absolute;

}

</style>

</head>

<body>

<li>

</center>

The name's Jane<br>

Currently 18<br>

Studying Chemistry<br>

Optimistic & Ordinary<br>

Wishes for a sweet life<br>

</div>

</li>

<li>

</center>

<option value="/">&hearts Archives</option>

</BloggerArchives>

</select>

</div>

</li>

<li>

</center>

Tagboard code goes here<br>

Not too long, if not the whole bar will be very long<br>

Maybe fit in just to see one tag at a time.

</div>

</li>

<li>

</center>

Layout by : <a style="font: Normal 10px Tahoma; text-transform: Lowercase; letter-spacing: 1px; " href="http://flavors.me/ashly_t" target="_blank">notur</a><a style="font: Normal 10px Tahoma; text-transform: Lowercase; letter-spacing: 1px;" href="http://www.blogskins.com/me/noturcupoftea" target="_blank">cupoftea</a><br>

Background Image : <a style="font: Normal 10px Tahoma; text-transform: Lowercase; letter-spacing: 1px; " href="http://fivepointsapart.blogspot.com/search/label/patterns" target="_blank">Fivepointsapart</a><br>

Codes for : <a style="font: Normal 10px Tahoma; text-transform: Lowercase; letter-spacing: 1px; " href="http://www.sohtanaka.com/web-design/popout-details-on-hover-w-css/" target="_blank">Popout Details For Hover</a> &

<a style="font: Normal 10px Tahoma; text-transform: Lowercase; letter-spacing: 1px; " href="http://www.sohtanaka.com/web-design/inline-modal-window-w-css-and-jquery" target="_blank">Inline-Modal-Window</a><br>

Flower Brushes : <a style="font: Normal 10px Tahoma; text-transform: Lowercase; letter-spacing: 1px; " href="http://withwhipcream.deviantart.com/art/flowers-brushset-106462151" target="_blank">Withwhipcream</a><br>

Inspiration of window mode : <a style="font: Normal 10px Tahoma; text-transform: Lowercase; letter-spacing: 1px;" href="http://www.blogskins.com/me/aellyniq" target="_blank">aellyniq</a><br>

Pictures from : <a style="font: Normal 10px Tahoma; text-transform: Lowercase; letter-spacing: 1px;" href="http://weheartit.com/tag" target="_blank">Weheartit</a> tagged under bokeh, sky, girl & nature .</a><br><br>

Best Viewed 1024 x 768 Mozilla Firefox .

</div>

</li>

</ul>

<a href="#?w=500" rel="entries" style="background-color: #fff; color: #908c88; text-transform: Uppercase; -webkit-box-shadow: 0px 0px 10px #ddd; -moz-box-shadow: 0px 0px 20px #ddd; box-shadow: 0px 0px 20px #ddd;" title="Click For Blog Entries" class="poplight">» View Blog Entries</a>

</div>

- you can press anywhere on the blank space to <a href="#" style="border: none;" class="close"><span class="btn_close" title="Close Window" alt="Close">close</span></a> -

</div>

</center>

<$BlogItemBody$></div>

</Blogger>

</div>

</div>

</body>

</html>
<style type="text/css">.external, #module_right, .modulebg1, .left, .headtable, #header, #footer, #head_module_desc, #module_right .modulebg2, #module_left .modulebg2,#neck, .hr2, #head_module_name, .head2, .hr1 { display: none!important;}

ติดตามเรื่องนี้

เก็บเข้าคอลเล็กชัน

ลำดับตอนที่ #6 : Simple

` l e v a r t o r y

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

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

ความคิดเห็น

คืนค่าการตั้งค่าทั้งหมด

ลำดับตอนที่ #6 : Simple

` l e v a r t o r y

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

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

ความคิดเห็น