นิยาย โค้ดสำหรับใส่ My.iD > ลำดับตอนที่ #11 : Code :: กรอบแบบต่างๆ : Dek-D.com

<• • Code 4 You • •> โค้ดสำหรับใส่ My.iD

ลำดับตอนที่ #11 : Code :: กรอบแบบต่างๆ

เนื้อหาตอนนี้เปิดให้อ่าน
411

0

5 ต.ค. 50

copy code นำไปตกแต่ง blog ได้เลยคะ
ตัวอย่าง1

ใส่ข้อความ

ตัวอย่าง2

ใส่ข้อความ

ตัวอย่าง3

ใส่ข้อความ

ตัวอย่าง4

ใส่ข้อความ

ตัวอย่าง5

ใส่ข้อความ

<fieldset style="border:5px solid โค้ดสี; padding:10;">
<center>ข้อความหรือรูปที่ต้องการ</center>
</fieldset>

<fieldset style="border:5px inset โค้ดสี; padding:10;">
<center>ข้อความหรือรูปที่ต้องการ</center>
</fieldset>

<fieldset style="border:5px outset โค้ดสี; padding:10;">
<center>ข้อความหรือรูปที่ต้องการ</center>
</fieldset>

<fieldset style="border:5px double โค้ดสี; padding:10;">
<center>ข้อความหรือรูปที่ต้องการ</center>
</fieldset>

<fieldset style="border:5px groove โค้ดสี; padding:10;">
<center>ข้อความหรือรูปที่ต้องการ</center>
</fieldset>

<fieldset style="border:5px ridge โค้ดสี; padding:10;">
<center>ข้อความหรือรูปที่ต้องการ</center>
</fieldset>

<fieldset style="border:5px dashed โค้ดสี; padding:10;">
<center>ข้อความหรือรูปที่ต้องการ</center>
</fieldset>

<fieldset style="border:5px dotted โค้ดสี; padding:10;">
<center>ข้อความหรือรูปที่ต้องการ</center>
</fieldset>

<fieldset>
<center>ข้อความหรือรูปที่ต้องการ</center>
</fieldset>

border:5px = ขนาดของกรอบ ตัวเลขมาก กรอบจะใหญ่ขึ้น
padding:10 = ความห่างระหว่างกรอบกับตัวหนังสือภายในบล็อค

<table width="400" style="border: 1px solid #564359;background:none url(http://i178.photobucket.com/albums/w241/bloggang-oranje/01.jpg);";cellpadding="0" cellspacing="2" align="center"><tr><td><table width="100%" style="border: 1px solid #b396b8;background:none url(http://i178.photobucket.com/albums/w241/bloggang-oranje/02.jpg);";cellpadding="0" cellspacing="2" align="center"><tr><td>%                    <script type="text/javascript">
                        playSound();
                        showPoll();
                    </script>
                </div>

<div id="novel_action_wrapper">
    <input type="hidden" value="11" name="chapter" id="vote-chapter">
    <input type="hidden" value="336573" name="id" id="vote-id">
    <input id="vote-score" type="hidden" name="score" value="5">
    
    <div id="btn-novel-favorite" class="action-btn">
        <div class="icon">
            <svg width="16" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-bell" id="icon-bell">
                <path d="M7.50298 15.4816C8.54421 15.4816 9.37719 14.6714 9.37719 13.6297H5.59903C5.59903 14.6714 6.43201 15.4816 7.50298 15.4816ZM13.8991 11.1702C13.3338 10.5626 12.2331 9.66559 12.2331 6.68527C12.2331 4.45726 10.6267 2.66328 8.42521 2.20031V1.59267C8.42521 1.10078 8.00872 0.666748 7.50298 0.666748C6.96749 0.666748 6.551 1.10078 6.551 1.59267V2.20031C4.34955 2.66328 2.74309 4.45726 2.74309 6.68527C2.74309 9.66559 1.64237 10.5626 1.07713 11.1702C0.898632 11.3438 0.809384 11.5753 0.839134 11.7779C0.839134 12.2698 1.19613 12.7038 1.79111 12.7038H13.1851C13.7801 12.7038 14.1371 12.2698 14.1668 11.7779C14.1668 11.5753 14.0776 11.3438 13.8991 11.1702Z" fill="#f37a01" />
            </svg>
            <svg width="16" height="16" viewBox="0 0 21 23" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-bell-check" id="icon-bell-check">
                <path d="M13.3155 19.4444C13.3155 21.0069 12.0661 22.2222 10.5042 22.2222C8.89777 22.2222 7.64829 21.0069 7.64829 19.4444H13.3155Z" fill="#f37a01" />
                <path fill-rule="evenodd" clip-rule="evenodd" d="M19.891 15.5375C19.9641 15.6134 20.0336 15.6856 20.0984 15.7552C20.3661 16.0156 20.5 16.3628 20.5 16.6667C20.4554 17.4045 19.9199 18.0556 19.0274 18.0556H1.93642C1.04394 18.0556 0.508456 17.4045 0.508456 16.6667C0.463832 16.3628 0.597704 16.0156 0.865448 15.7552C0.930236 15.6856 0.999713 15.6134 1.07279 15.5375C1.95599 14.6199 3.36439 13.1567 3.36439 9.02778C3.36439 5.68576 5.77409 2.99479 9.07626 2.30035V1.38889C9.07626 0.651042 9.701 0 10.5042 0C11.2628 0 11.8876 0.651042 11.8876 1.38889V2.30035C15.1897 2.99479 17.5994 5.68576 17.5994 9.02778C17.5994 13.1567 19.0078 14.6199 19.891 15.5375ZM15.1316 9.11962C15.2432 9.23123 15.3053 9.38624 15.3053 9.54125C15.3053 9.69626 15.2432 9.85127 15.1316 9.96288L9.7993 15.2952C9.68769 15.4068 9.53268 15.4688 9.37767 15.4688C9.22266 15.4688 9.06765 15.4068 8.95604 15.2952L5.86825 12.2074C5.75664 12.0958 5.69463 11.9408 5.69463 11.7858C5.69463 11.6308 5.75664 11.4758 5.86825 11.3642L6.7115 10.5209C6.82311 10.4093 6.97812 10.3473 7.13313 10.3473C7.28814 10.3473 7.44315 10.4093 7.55475 10.5209L9.37767 12.35L13.4451 8.27637C13.5567 8.16476 13.7117 8.10276 13.8668 8.10276C14.0218 8.10276 14.1768 8.16476 14.2884 8.27637L15.1316 9.11962Z" fill="#f37a01" />
            </svg>
        </div>
        <span class="text">ติดตามเรื่องนี้</span>
    </div>
        <div id="btn-novel-collection" class="action-btn">
        <div class="icon">
            <svg width="16" height="16" viewBox="0 0 13 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-collection" id="icon-collection">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M3.43333 0.666748C1.8133 0.666748 0.5 1.98005 0.5 3.60008V12.4001C0.5 14.0201 1.8133 15.3334 3.43333 15.3334H9.09048C10.7105 15.3334 12.0238 14.0201 12.0238 12.4001V3.60008C12.0238 1.98005 10.7105 0.666748 9.09048 0.666748H3.43333ZM2.42063 2.51645V7.73818L4.22123 6.47776L6.02183 7.73818V2.51645C6.02183 2.21811 5.82029 1.97627 5.57168 1.97627H2.87078C2.62217 1.97627 2.42063 2.21811 2.42063 2.51645Z" fill="#f37a01" />
            </svg>
        </div>
        <span class="text">เก็บเข้าคอลเล็กชัน</span>
    </div>
    </div>
<div id="novel_action_footer">
    <div class="action__wrapper">
        <button id="btn-novel-voted" class="footer__action favorite " data-novel-id="336573" data-main-cat="2" data-sub-cat="6">
                            <i class="fa fa-heart-o icon-fav-outline" style="font-size:20px;margin-top:-4px;"></i>
             <span class="fav-count">0</span></button>
        <button class="footer__action comment" ><i class="fa fa fa-comment-o" style="font-size:22px;margin-top:-6px;"></i> <span class="js-total-comment">0</span></button>
    </div>
    <div class="chapter__navigation">
                    <a href="viewlongc.php?id=336573&chapter=10" title="ตอนก่อนหน้า" target="_self" class="chapter__navigation__btn -prev"><i class="fa fa-angle-left" style="font-size:24px;margin-top:-4px;"></i> <span>ตอนก่อนหน้า</span></a>
                <a href="viewlongc.php?id=336573&chapter=12" title="ตอนถัดไป" target="_self" id="next-chapter-button" class="chapter__navigation__btn -next "><span class="btn-text">ตอนถัดไป</span> <span>#12</span> <i class="fa fa-angle-right" style="font-size:24px;margin-top:-4px;"></i></a>
    </div>
</div>
<script>
    (function() {
        const CONTENT_SCROLLING = {
            startAnimation: false,
            lastScrollTop: 0,
            checkScrollingDirection() {
                let direction = ''
                const st = $(window).scrollTop();
                if (st > this.lastScrollTop) {
                    direction = 'down'
                } else {
                    direction = 'up'
                }
                this.lastScrollTop = st;
                return direction
            },
        }

$(window).on("load", function() {
            heightCommentElement()
        }).on("scroll", function() {
            const scrollDirection = CONTENT_SCROLLING.checkScrollingDirection()
            heightCommentElement(scrollDirection)
                    });

$(document).on('click', '#comment-textarea-input-js, .expand-button', function() {
            heightCommentElement()
        })
                    .on('mouseenter', '.comment-post-wrapper.-sticky', function() {
                heightCommentElement()
            }).on('mouseleave', '.comment-post-wrapper.-sticky', function() {
                heightCommentElement()
            });

function heightCommentElement(scrollDirection) {
                            setTimeout(() => {
                    let spacingTop = $('.comment-post-wrapper.-sticky').height() > 0 ? $('.comment-post-wrapper.-sticky').height() : 0
                    $('#novel_action_footer').css("bottom", `${spacingTop}px`);
                }, 50)
                    }
    })()
</script>

</div>

<div id="donation-app"></div>

<div id="js-anchor-suggest-list"></div>
<div id="suggest-list" class="-hide">
    <h2 class="suggest-item-head">
        <p class="_txt-ellipsis">นิยายที่ผู้อ่านนิยมอ่านต่อ 
		<a
			class="seemore"
			href="https://novel.dek-d.com/novel/336573/similar/"
			target="_blank"
		>
		ดูทั้งหมด <i class="fa fa-chevron-right" aria-hidden="true"></i>
		</a>
		</p>
    </h2>
    <div id="alsoview-swiper" class="suggest-item-wrapper js-suggest-item-wrapper swiper-container -hide">
        <div class="swiper-wrapper"></div>
        <div id="alsoview-prev" class="swiper-button-prev"></div>
        <div id="alsoview-next" class="swiper-button-next"></div>
    </div>
    <div class="-loading js-suggest-loading -hide">
        <div class="loading-box">
            <div class="loading-inner">
                <div class="loadingicon _animated -wobble -infinite">
                    <img src="https://www0.dek-d.com/assets/ebook/images/icon_bombom.png"  alt="loading" width="80" height="80" />
                </div>
                <div class="label">กำลังโหลด...</div>
            </div>
        </div>
    </div>
</div>
<script>
    (function() {
    	let scrollEventOneTime = true

function isScrolledIntoView($elem) {
		    let docViewTop = $(window).scrollTop()
		    let docViewBottom = docViewTop + $(window).height()
		    let elemTop = $elem.offset().top
		    let elemBottom = elemTop + $elem.height()
		    return ( ( elemBottom <= docViewBottom ) && ( elemTop >= docViewTop ) )
	    }

function appendSuggestionList({analytics, id, title, category, owners, thumbnail}) {
			const typeCard = analytics?.parameters?.typeCard ?? 'none'
			const algoType = analytics?.parameters?.algo ?? 'none'
			const ownerAliasname = owners?.[0]?.alias ?? ''
			const subCategoryTitle = category.subTitle
		    $('#suggest-list .swiper-wrapper').append(`
               <div class="writer-swiper-wrapper swiper-slide js-suggest-item" type-card="${typeCard}" ${algoType ? `data-algo="${algoType}"` : ''} data-id="${id}" data-mc="${category.main}" data-sc="${category.sub}">
                    <a href="view.php?id=${id}" target="_blank"
                    title="${title}">
                    <img class="cover" src="${thumbnail.normal}" alt="${title}" loading="lazy"/>
                        <div class="detail-wrapper">
                            <div class="category">
                                ${subCategoryTitle}
                            </div>
                            <div class="title"
                                 title="${title}">
                                ${title}
                            </div>
                            <div class="author">
                                ${ownerAliasname}
                            </div>
                        </div>
                    </a>
                </div>`)
	    }

function ajaxSetScoreAlsoView() {
    		$.ajax({
                url: `https://www.dek-d.com/api/rest/novel/suggest/save`,
                type: 'POST',
			    xhrFields: {
				    withCredentials: true
			    },
			    data: {
				    novel_id: '336573',
				    last_novel_id: '1495211'
			    },
            })
        }

var pathname = window.location.pathname
        var coverPageTest = new RegExp('view.php')
        var isCoverPage = coverPageTest.test(pathname) ? 1 : 0

function ajaxSuggestLists() {
            $.ajax({
                url: `https://www.dek-d.com/api/rest/novel/recommend/list`,
                type: 'GET',
                xhrFields: {
                    withCredentials: true
                },
                data: {
                    novelId: '336573',
                    page: 1,
			    },
                beforeSend: function() {
	                $('#suggest-list').removeClass('-hide')
			        $('.js-suggest-loading').removeClass('-hide')
                },
			    success: function (res) {
				    // const alsoViewCounter = res.count.alsoview > 0 ? res.count.alsoview : 0
				    // trackAlsoView(alsoViewCounter)
				    if (!$.isEmptyObject(res.list) || res.list.length > 0) {
					    $('.js-suggest-loading').addClass('-hide')
				    	$('.js-suggest-item-wrapper').removeClass('-hide')
					    if (typeof res.list === 'object') {
						    Object.values(res.list).map(function (data) {
							    appendSuggestionList(data)
						    })
					    } else {
						    res.list.map(function (data) {
							    appendSuggestionList(data)
						    })
					    }

var alsoviewSwiper = new Swiper('#alsoview-swiper', {
						    slidesPerView: 'auto',
						    spaceBetween: 10,
						    slidesOffsetBefore: 0,
						    slidesOffsetAfter: 0,
						    slidesPerGroup: 1,
						    navigation: {
							    nextEl: '#alsoview-next',
							    prevEl: '#alsoview-prev'
						    },
					    })
				    } else {
					    $('#suggest-list').remove()
				    }
			    },
			    error: function () {
				    $('#suggest-list').remove()
			    }
		    })
	    }

$(document).ready(function() {
		    ajaxSetScoreAlsoView()
        })

$(window).scroll(function() {
	    	if (isScrolledIntoView($('#js-anchor-suggest-list')) && scrollEventOneTime ) {
	    		ajaxSuggestLists()
			    scrollEventOneTime = false
            }
        })

})()
</script>         
            <div id="stop-autoscroll-anchor" class="clear"></div>
                <div id="js-anchor-ebook-rand-list"></div>
<div id="ebook-rand-list">
    <h2 class="suggest-item-head">
        <p class="_txt-ellipsis"><span id="ebook-rand-section-title">อีบุ๊ก</span>
            <a id="ebook-rand-list-see-all" class="seemore" href="https://novel.dek-d.com/store/ebook/" target="_blank">
                ดูทั้งหมด <i class="fa fa-chevron-right" aria-hidden="true"></i>
            </a>
        </p>
    </h2>
    <div id="ebook-rand-list-swiper" class="suggest-item-wrapper js-ebook-item-wrapper swiper-container -hide">
        <div class="swiper-wrapper"></div>
        <div id="ebook-rand-list-prev" class="swiper-button-prev"></div>
        <div id="ebook-rand-list-next" class="swiper-button-next"></div>
    </div>
    <div class="-loading js-ebook-rand-list-loading -hide">
        <div class="loading-box">
            <div class="loading-inner">
                <div class="loadingicon _animated -wobble -infinite">
                    <img src="https://www0.dek-d.com/assets/ebook/images/icon_bombom.png" alt="loading" width="80" height="80" />
                </div>
                <div class="label">กำลังโหลด...</div>
            </div>
        </div>
    </div>
</div>
<script>
    (function() {
        let scrollEventOneTime = true

function isScrolledIntoView($elem) {
            let docViewTop = $(window).scrollTop()
            let docViewBottom = docViewTop + $(window).height()
            let elemTop = $elem.offset().top
            let elemBottom = elemTop + $elem.height()
            return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop))
        }

function appendEbookList(ebook, extension) {

const {
                name,
                novelTitle,
                thumbnail,
                id,
                category,
                owners
            } = ebook
            const {
                order,
                discount,
                discountRate,
                sellingPrice,
                originalPrice,
                isTop,
                isDiscount,
            } = extension
            const {
                main,
                sub,
                mainTitle,
                subTitle,
            } = category

$('#ebook-rand-list-swiper .swiper-wrapper').append(`
               <div class="writer-swiper-wrapper swiper-slide js-ebook-item" data-id="${id}" data-mc="${main}" data-sc="${sub}">
                    ${ isTop ?  `<div title="อันดับที่ ${order}" class="-top-flag">
                            <span class="-top-flag__value">${order}</span>
                        </div>
                      ` : '' }
                    <a href="https://novel.dek-d.com/ebook/${id}" target="_blank"
                    title="${title}">
                    <img class="cover" src="${thumbnail}" alt="${name}" loading="lazy"/>
                        <div class="detail-wrapper"  style="${isDiscount ? "min-height: 137px;" : ""}">
                            <div class="category">
                                ${subTitle}
                            </div>
                            <div class="title"
                                 title="${name}">
                                ${name}
                            </div>
                            <div class="author">
                                ${owners[0]?.alias}
                            </div>
                            ${ isDiscount ?  `<div class="-price-wrapper">
                                    <svg class="-price-wrapper__coin-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <circle cx="12" cy="12" r="11" fill="white"></circle>
                                        <path d="M12 1C5.92485 1 1 5.92485 1 12C1 18.0751 5.92485 23 12 23C18.0751 23 23 18.0751 23 12C23 5.92485 18.0751 1 12 1ZM17.1955 16.3802C17.1248 16.463 15.4312 18.4086 12.323 18.4086C8.56654 18.4086 5.91447 15.6027 5.91447 11.952C5.91447 8.34578 8.66465 5.59144 12.291 5.59144C15.2609 5.59144 16.8137 7.24654 16.8783 7.31702C16.9579 7.40381 17.0065 7.51457 17.0164 7.63194C17.0264 7.74932 16.9971 7.86667 16.9332 7.96562L15.9405 9.50273C15.7609 9.78071 15.3739 9.82879 15.1318 9.60453C15.1214 9.59504 13.9551 8.54533 12.3871 8.54533C10.3416 8.54533 9.10855 10.0345 9.10855 11.9199C9.10855 13.6765 10.2402 15.4547 12.4031 15.4547C14.1195 15.4547 15.2986 14.1977 15.3103 14.185C15.5379 13.9382 15.9339 13.9618 16.1312 14.2317L17.22 15.7208C17.2907 15.8174 17.3267 15.9351 17.3222 16.0547C17.3178 16.1744 17.2731 16.289 17.1955 16.3802Z" fill="#FBBC05"></path>
                                    </svg>
                                    <span class="-price-wrapper__selling-price">${intFormat(sellingPrice)}</span>
                                    <span class="-price-wrapper__original-price">${intFormat(originalPrice)}</span>
                                </div>` : '' }
                        </div>
                    </a>
                </div>`)
        }

var pathname = window.location.pathname
        var coverPageTest = new RegExp('view.php')
        var isCoverPage = coverPageTest.test(pathname) ? 1 : 0
        const sectionId = 'bestseller'
        const isFairPeriod = ''

function intFormat(number) {
            const formatter = new Intl.NumberFormat('th-Th')
            return formatter.format(number)
        }

function ajaxEbookLists() {
            $.ajax({
                url: `https://www.dek-d.com/api/rest/ebook/list/promote?page=1&type=${sectionId}`,
                type: 'GET',
                xhrFields: {
                    withCredentials: true
                },
                data: {
                    novel_id: '336573',
                    owner_id: '1034198',
                    is_selling: isCoverPage
                },
                beforeSend: function() {
                    $('#ebook-rand-list').removeClass('-hide')
                    $('.js-ebook-rand-list-loading').removeClass('-hide')
                },
                success: function(res) {
                    const isDiscount = sectionId == 'discount'
                    const isTop = sectionId == 'bestseller'
                    const isFree = false //sectionId == 'free'
                    const resolvedSeeAllLink = isDiscount ? isFairPeriod ? 'https://novel.dek-d.com/fair/ebook/?utm_source=dek-dbanner&utm_medium=niyay-fair-read&utm_campaign=ebook-expo-23&utm_id=dek-dbanner-niyay-fair-read-231002' : 'https://novel.dek-d.com/store/ebook/list/0_-1/?orderBy=DESC&saleType=DISCOUNT&viewType=LIST&ratingType=ALL&page=1' :
                        isFree ? 'https://novel.dek-d.com/store/ebook/list/0_-1/?orderBy=DESC&saleType=FREE&viewType=LIST&ratingType=ALL&page=1' :
                        isTop ? 'https://novel.dek-d.com/store/ebook/' : 'https://novel.dek-d.com/store/ebook/'
                    $('#ebook-rand-list-see-all').attr('href', resolvedSeeAllLink)

if (!$.isEmptyObject(res.list) || res.list.length > 0) {
                        $('.js-ebook-rand-list-loading').addClass('-hide')
                        $('.js-ebook-item-wrapper').removeClass('-hide')
                        $('#ebook-rand-list #ebook-rand-section-title').text(isDiscount ? isFairPeriod ? 'E-Book Expo' : 'อีบุ๊กลดราคา' : isTop ? 'อีบุ๊กขายดี' : isFree ? 'อีบุ๊กฟรี' : 'อีบุ๊ก')
                        res.list.map(function(data, index) {
                            const sellingPrice = data?.price?.coin ?? 0
                            const originalPrice = data?.price?.campaign?.priceOriginal ?? 0
                            appendEbookList(data, {
                                order: index + 1,
                                isTop,
                                isDiscount,
                                sellingPrice,
                                originalPrice,
                                discountRate: Math.round(((originalPrice - sellingPrice) / originalPrice) * 100),
                                discount: sellingPrice - originalPrice,
                            })
                        })
                        var ebookListSwiper = new Swiper('#ebook-rand-list-swiper', {
                            slidesPerView: 'auto',
                            spaceBetween: 10,
                            slidesOffsetBefore: 16,
                            slidesOffsetAfter: 16,
                            slidesPerGroup: 1,
                            navigation: {
                                nextEl: '#ebook-rand-list-next',
                                prevEl: '#ebook-rand-list-prev'
                            },
                        })
                    } else {
                        $('#ebook-rand-list').remove()
                    }
                },
                error: function() {
                    $('#ebook-rand-list').remove()
                }
            })
        }

$(window).scroll(function() {
            if (isScrolledIntoView($('#js-anchor-ebook-rand-list')) && scrollEventOneTime) {
                ajaxEbookLists()
                scrollEventOneTime = false
            }
        })

})()
</script>

#ebook-rand-list .js-ebook-item .-top-flag {
        position: absolute;
        top: 0;
        left: 0;
        width: 10px;
        height: 28px;
        box-sizing: border-box;
        border-bottom: 0 solid #499a13;
        border-color: #499a13 #499a13 transparent;
        border-style: solid;
        border-width: 0 10px 8px;
        border-top-left-radius: 3px;
        z-index: 1;
    }

#ebook-rand-list .js-ebook-item .-top-flag .-top-flag__value {
        display: inline-block;
        width: 20px;
        line-height: 20px;
        margin-left: -10px;
        font-size: 12px;
        text-align: center;
        background-color: #499a13;
        border-top-left-radius: 3px;
        font-family: Tahoma, Arial, sans-serif;
        font-weight: 700;
        color: #fff;
    }

#ebook-rand-list .js-ebook-item .-price-wrapper {
        -webkit-text-size-adjust: none;
        list-style: none;
        list-style-type: none;
        -webkit-box-direction: normal;
        user-select: none;
        margin: 0;
        padding: 0;
        border: 0;
        font: inherit;
        vertical-align: baseline;
        font-family: 'Kalatexa', sans-serif;
        display: flex;
        align-items: center;
        margin-top: 8px;
    }

#ebook-rand-list .js-ebook-item .-price-wrapper .-price-wrapper__selling-price {
        -webkit-text-size-adjust: none;
        list-style: none;
        list-style-type: none;
        -webkit-box-direction: normal;
        user-select: none;
        padding: 0;
        border: 0;
        font: inherit;
        vertical-align: baseline;
        margin: 0 8px 0 4px;
        padding-top: 4px;
        font-size: 18px;
        font-weight: 700;
        color: red;
        overflow: hidden;
        text-overflow: ellipsis;
    }

#ebook-rand-list .js-ebook-item .-price-wrapper .-price-wrapper__original-price {
        -webkit-text-size-adjust: none;
        list-style: none;
        list-style-type: none;
        -webkit-box-direction: normal;
        user-select: none;
        margin: 0;
        padding: 0;
        border: 0;
        font: inherit;
        vertical-align: baseline;
        font-size: 14px;
        color: gray;
        text-decoration: line-through;
        text-decoration-color: red;
        align-self: end;
        padding-bottom: 2px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

#ebook-rand-list .js-ebook-item .-price-wrapper .-price-wrapper__coin-icon {
        min-width: 24px;
        min-height: 24px;
    }
</style>        
        <div id="save-collection-modal" class="modal-wrapper">
    <div class="modal-box">
        <button class="modalclosebtn">
            <span>เสร็จสิ้น</span>
        </button>
        <div class="modal-header">เก็บเข้าคอลเล็กชัน</div>
        <div class="modal-body">
            <div class="collection-wrapper-skeleton">
                <div class="image-skeleton"></div>
                <div class="description-skeleton">
                    <div class="text-skeleton"></div>
                    <div class="text-skeleton -hidden"></div>
                </div>
            </div>
            <div class="collection-wrapper-skeleton">
                <div class="image-skeleton"></div>
                <div class="description-skeleton">
                    <div class="text-skeleton"></div>
                    <div class="text-skeleton -hidden"></div>
                </div>
            </div>
            <div class="collection-wrapper-skeleton">
                <div class="image-skeleton"></div>
                <div class="description-skeleton">
                    <div class="text-skeleton"></div>
                    <div class="text-skeleton -hidden"></div>
                </div>
            </div>
            <div class="collection-wrapper-skeleton">
                <div class="image-skeleton"></div>
                <div class="description-skeleton">
                    <div class="text-skeleton"></div>
                    <div class="text-skeleton -hidden"></div>
                </div>
            </div>
            <div class="collection-wrapper-skeleton">
                <div class="image-skeleton"></div>
                <div class="description-skeleton">
                    <div class="text-skeleton"></div>
                    <div class="text-skeleton -hidden"></div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <span class="collection-create" id="js-create-collection"><i class="fa fa-plus"></i> สร้างคอลเล็กชันใหม่</span>
        </div>
    </div>
</div>        
        <div id="affiliate-naiin-banner-app"></div>
        
        <div id="comment-section-ref-js"></div>
        
        <div id="novel-report-problem"></div>
        
        
        <div id="novel-share-app"></div>
        
        
        <div id="novel-list-of-contents"></div>
        
                <div id="show-mini-comment-app" style="margin-top: 40px;"></div>

<div class="overlay-comment">
            
            <div class="overlay-comment-content comment-setwidth cm-chapter js-commentbox-container " id="comment-all" data-contentid="336573" data-chapter="11" data-page="1">
                <div class="comment-section-title__wrapper">
	<h3 class="comment-section-title"><span class="js-total-comment"></span>ความคิดเห็น</h3>
	<button class="js-close-overlay-comment close-btn" type="button" onclick="window.writerCommentHelper && window.writerCommentHelper.hideOverlay()"><i class="fa fa-times" aria-hidden="true"></i></button>
</div>
	<section class="section-box comment-post">
		<div id="comment-root" class="__positonFix comment-root">
		</div>
	</section>
<script>
	if (window.jQuery) {
		(function($) {
			// on keydown Escape
			$(document).on('keydown', function(e) {
				if (e.keyCode === 27) {
					window.writerCommentHelper && window.writerCommentHelper.hideOverlay();
				}
			});
			$('#comment-member-login').click(function() {
				if (+window.userId <= 0) {
					window.location.href = `https://${window.hostWWW}.dek-d.com/member/login?refer=${window.location.href}`;
					return false;
				}
			});
		})(jQuery);
	}
</script><div id="show-comment-app"></div>

</div>

<div id="footer" class="app-footer">

<p><a href="https://www.dek-d.com/" target="_blank">www.Dek-D.com</a> © 1999 - 2024 All rights reserved by Dek-D Interactive Co.,Ltd. </p>
</div>

<script language='JavaScript' type='text/javascript' data-test="test" src='https://myc.dek-d.com/a/script/subcomment.js?v=3.94'></script>
<script type="text/javascript">
	$(document).ready( function(){
		subcomment._lastcommentid = ( jQuery(subcomment._cmall).data('chapter') > 0 ) ? 0 : 42;
		subcomment.init();
	});
</script>

    
    
    </div>
    <script type="text/javascript" src="https://myc.dek-d.com/a/resource/js/jquery-migrate-1.2.1.min.js"></script>
    <script type="text/javascript" src="https://myc.dek-d.com/a/resource/js/ddinread.js?vv=196"></script>
    <script type="text/javascript" src="https://myc.dek-d.com/a/js/jquery.lightbox_me.js?v=196"></script>
    <script type="text/javascript" src="https://myc.dek-d.com/a/js/jquery.placeholder.js?v=196"></script>
    <script src="https://www0.dek-d.com/assets/vendor/jquery-cookie/jquery.cookie.js"></script>

function closeAlert() {
        clearTimeout(setTimer);
        subCommentAlertBox.removeClass('-show');
        subCommentAlertBox.addClass('-hide');
        location.reload(true);
    }

function onSubmitSubComment(user_mode) {

$.ajaxSetup({
            crossDomain: true,
            xhrFields: {
                withCredentials: true
            },
        });
        if(refer_id && chapter){
            $.post(`https://${window.hostWWW}.dek-d.com/api/rest/novel/${refer_id}/chapter/${chapter}/subcomment`, postData)
                .done(function(data) {
                    const objData = data;
                    const is_success = objData.acknowledged && objData.errors.length <= 0;
                    const timer = (is_success) ? 2000 : 5000;

setTimer = setTimeout(function() {
                        subCommentAlertBox.removeClass('-show');
                        subCommentAlertBox.addClass('-hide');
                        location.reload(true);
                    }, timer);
                    subCommentAlertBox.removeClass('-hide');
                    subCommentAlertBox.removeClass((is_success) ? '-error' : '-success');
                    subCommentAlertBox.addClass((is_success) ? '-success' : '-error');
                    subCommentAlertBox.addClass('-show');
                    $('.alert-content').text(is_success ? 'แสดงความคิดเห็นตอบกลับสำเร็จแล้ว' : objData.errors[0].message);
                    $('.comment-box-reply').remove();
                    $('.commentbox-ta').val('');
                });
        }else{
            console.error('> ', new Error('refer_id or chapter not found'));
        }
    }
</script>

<script  src="https://www0.dek-d.com/assets/writer/js/analytics/writer-view-chapter.js?v=196"></script>

if (userId > 0) {
            firebase.analytics().setUserId(userId)
        }

$(document).ready(function() {
            (function(login, countdown) {
                login.init()
                $('.modal').on('click', '.close', function() {
                    $(this).closest('.modal').slideUp()
                    $.cookie('writer-mini-modal', 1, {
                        expires: 1,
                        path: '/',
                        domain: 'dek-d.com'
                    })
                });
                $countdownElem = $('.js-camaign-countdown');
                if ($countdownElem.length > 0) {
                    countdown.init($countdownElem.data('start-date'), $countdownElem.data('end-date'));
                }
            })(_LOGIN, _writerCountdown)

})
                }, 500)
            })()
        })
    </script>
</body>

</html>


<script>
(function(g,d,o){
  g._ltq=g._ltq||[];g._lt=g._lt||function(){g._ltq.push(arguments)};
  var h=location.protocol==='https:'?'https://d.line-scdn.net':'http://d.line-cdn.net';
  var s=d.createElement('script');s.async=1;
  s.src=o||h+'/n/line_tag/public/release/v1/lt.js';
  var t=d.getElementsByTagName('script')[0];t.parentNode.insertBefore(s,t);
    })(window, document);
_lt('init', {
  customerType: 'account',
  tagId: '1aa2dca9-8f7a-4ec8-80c7-868d92c7d275'
});
_lt('send', 'pv', ['1aa2dca9-8f7a-4ec8-80c7-868d92c7d275']);
</script>
<noscript>
  <img height="1" width="1" style="display:none"
       src="https://tr.line.me/tag.gif?c_t=lap&t_id=1aa2dca9-8f7a-4ec8-80c7-868d92c7d275&e=pv&noscript=1" />
</noscript>

<script>
    if (!window.fbq) {
    !function(f,b,e,v,n,t,s)
    {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
        n.callMethod.apply(n,arguments):n.queue.push(arguments)};
        if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
        n.queue=[];t=b.createElement(e);t.async=!0;
        t.src=v;s=b.getElementsByTagName(e)[0];
        s.parentNode.insertBefore(t,s)}(window, document,'script',
        'https://connect.facebook.net/en_US/fbevents.js');
    }
    window.fbq('init', '1234202760613325');
    window.fbq('track', 'PageView');
</script>
<noscript>
    <img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1196977856998347&ev=PageView&noscript=1" />
</noscript>
<style>
    .bottom-page-dialog-wrapper{
        bottom: 0;
        right:0;
        z-index: 11;
        width: 100%;
        position: fixed;
        display: flex;
        flex-direction: column;
    }
</style>

function scrollToTop(event) {
                    event.preventDefault();
                    scrollToTopBtn.blur();
                    if (window) window.scrollTo({
                        top: 0,
                        behavior: 'smooth'
                    });
                }

function isScrollToTopBtnVisible() {
                    if (window.pageYOffset >= 1500) {
                        const autoScrollTrigger = document.querySelector('#autoscroll-trigger')
                        const opacity = autoScrollTrigger && autoScrollTrigger.querySelector('i').classList.contains('fa-pause') ? '0.3' : '1.0'
                        scrollToTopBtn.style.opacity = opacity
                        scrollToTopBtn.style.cursor = 'pointer'
                        scrollToTopBtn.disabled = false
                    } else {
                        scrollToTopBtn.style.opacity = '0.0'
                        scrollToTopBtn.style.cursor = 'auto'
                        scrollToTopBtn.disabled = true
                    }
                }
            }
        )
    })()
</script></div>

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

ลำดับตอนที่ #11 : Code :: กรอบแบบต่างๆ