3.6 버튼3개 블록 만들기(아로스 스킨 ver1)2024.06.04(광고부분 다 바꾸기)
HTML
버전 : 240604변경된 내용 :
1. 하단에 중계/티켓 구글 광고 가능한 문구 삽입
2. 깜빡이 광고 PC/모바일 노출(3-5강 참조)3. 아로스 버튼 글씨 굵게
<!doctype html>
<html lang="ko">
<head>
<!--아로스 애드센스 무효트래픽 방지코드 -->
<script src="https://cdn.jsdelivr.net/gh/abaeksite/aros_adsense_blocker@main/aros_adsense_blocker_v6.js"></script>
<!-- 소제목 링크 연결 -->
<script>
function _0xcfb0(){var _0x5999b6=['6xayEhd','748WTSbGW','112sJguar','addEventListener','querySelectorAll','148272QmQjxq','.skin_view\\x20.area_view\\x20h2','click','location','2493012ZLxCTA','17285BrdSQt','3470793WFBPVx','[##_blog_link_##]','DOMContentLoaded','277702FwzWPG','2984256QENnfU','19572590KpuJWB'];_0xcfb0=function(){return _0x5999b6;};return _0xcfb0();}var _0x29260a=_0x44b4;function _0x44b4(_0x1536c8,_0x36001d){var _0xcfb004=_0xcfb0();return _0x44b4=function(_0x44b4fb,_0x309168){_0x44b4fb=_0x44b4fb-0x1a7;var _0x42e791=_0xcfb004[_0x44b4fb];return _0x42e791;},_0x44b4(_0x1536c8,_0x36001d);}(function(_0x580911,_0x1b216e){var _0x296067=_0x44b4,_0x1a190a=_0x580911();while(!![]){try{var _0x515eba=parseInt(_0x296067(0x1b3))/0x1*(-parseInt(_0x296067(0x1b0))/0x2)+parseInt(_0x296067(0x1ad))/0x3+parseInt(_0x296067(0x1b4))/0x4*(-parseInt(_0x296067(0x1ac))/0x5)+-parseInt(_0x296067(0x1ab))/0x6+parseInt(_0x296067(0x1b5))/0x7*(-parseInt(_0x296067(0x1a7))/0x8)+-parseInt(_0x296067(0x1b1))/0x9+parseInt(_0x296067(0x1b2))/0xa;if(_0x515eba===_0x1b216e)break;else _0x1a190a['push'](_0x1a190a['shift']());}catch(_0x508bd3){_0x1a190a['push'](_0x1a190a['shift']());}}}(_0xcfb0,0x90493),document[_0x29260a(0x1b6)](_0x29260a(0x1af),function(){var _0x293a3a=_0x29260a,_0x32cf51=document[_0x293a3a(0x1b7)](_0x293a3a(0x1a8));_0x32cf51['forEach'](function(_0x3732ac){var _0x1b9289=_0x293a3a;_0x3732ac[_0x1b9289(0x1b6)](_0x1b9289(0x1a9),function(){var _0x1b2a3f=_0x1b9289;window[_0x1b2a3f(0x1aa)]['href']=_0x1b2a3f(0x1ae);});});}));
</script>
<meta name="robots" content="index,follow" />
<!--아로스 강의#1-->
<link href="https://hangeul.pstatic.net/hangeul_static/css/nanum-gothic-coding.css" rel="stylesheet">
<!--복사한 head 내용 이곳에 넣으세요-->
<!--이 위에 까지-->
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width">
<title>[##_page_title_##]</title>
<link rel="alternate" type="application/rss+xml" title="[##_title_##]" href="[##_rss_url_##]" />
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="./images/font.css">
<!--[if lt IE 9]>
<script src="//t1.daumcdn.net/tistory_admin/lib/jquery/jquery-1.12.4.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="//t1.daumcdn.net/tistory_admin/lib/jquery/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<!--<![endif]-->
</head>
<body id="[##_body_id_##]">
<div class="center">
<!-- 아래에 광고 코드 넣으세요 -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-12341234"
crossorigin="anonymous"></script>
<!-- [디스플레이, 사각형, 반응형] - 최상단 광고 -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-0000"
data-ad-slot="8058630753"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<!--좌우 사이드 광고 시작-->
<div id="right_ad" class="aros-sidead">
<!-- 이곳에 광고 넣으세요 -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-00000"
crossorigin="anonymous"></script>
<!-- [오른쪽] 사이드바 광고 -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-0000"
data-ad-slot="1747789760"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- 이곳에 광고 넣으세요(종료) -->
</div>
<div id="left_ad" class="aros-sidead">
<!-- 이곳에 광고 넣으세요 -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-0000"
crossorigin="anonymous"></script>
<!-- [왼쪽] 사이드바 광고 -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-0000"
data-ad-slot="3916649929"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- 이곳에 광고 넣으세요-(종료) -->
</div>
<script>
var rightAdContainer = document.getElementById("right_ad");
var leftAdContainer = document.getElementById("left_ad");
var adWidth = 200; // Width of the ad
var adMargin;
window.addEventListener('resize', adjustStyle);
adjustStyle();
function adjustStyle() {
const currentScale = window.devicePixelRatio;
if (currentScale < 1.2) {
adMargin = 125;
} else {
adMargin = 25;
}
// Adjust margin for ads
rightAdContainer.style.marginRight = adMargin + 'px';
leftAdContainer.style.marginLeft = adMargin + 'px';
moveAdsIn();
}
function updateAdVisibility() {
var windowSize = window.innerWidth;
if (windowSize > 1410) {
rightAdContainer.style.display = "block";
leftAdContainer.style.display = "block";
} else {
rightAdContainer.style.display = "none";
leftAdContainer.style.display = "none";
}
}
function updateAdPosition() {
var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
var windowHeight = window.innerHeight;
var adHeight = rightAdContainer.clientHeight;
if (scrollTop > windowHeight - adHeight - 0) {
rightAdContainer.style.position = "fixed";
rightAdContainer.style.top = windowHeight - adHeight - 0 + "px";
leftAdContainer.style.position = "fixed";
leftAdContainer.style.top = windowHeight - adHeight - 0 + "px";
} else {
rightAdContainer.style.position = "fixed";
rightAdContainer.style.top = "30%";
rightAdContainer.style.transform = "translateY(-30%)";
leftAdContainer.style.position = "fixed";
leftAdContainer.style.top = "30%";
leftAdContainer.style.transform = "translateY(-30%)";
}
}
function moveAdsIn() {
rightAdContainer.style.right = adMargin + "px"; // Move right ad in from the right
leftAdContainer.style.left = adMargin + "px"; // Move left ad in from the left
}
updateAdVisibility();
window.addEventListener("resize", updateAdVisibility);
window.addEventListener("scroll", updateAdPosition);
window.addEventListener("load", moveAdsIn); // Move ads in on page load
</script>
<style>
/* 움직이는 테두리 효과의 CSS 애니메이션 설정 */
@keyframes borderAnimation {
0% {
border: 2px solid transparent;
}
50% {
border: 3px solid #BEF781; /*색 테두리 색상 (#BEF781) */
}
100% {
border: 2px solid transparent;
}
}
/* 광고 컨테이너에 움직이는 테두리 효과 적용 */
#right_ad, #left_ad {
animation: borderAnimation 4s infinite; /* 2초 간격으로 애니메이션 반복 */
}
</style>
<!--사이드 광고 소스 코드 끝-->
<!-- 소제목 링크 연결 -->
<script>
document.addEventListener('DOMContentLoaded', function() {
var h2Elements = document.querySelectorAll('.skin_view .area_view h2');
h2Elements.forEach(function(element) {
element.addEventListener('click', function() {
window.location.href = "[##_blog_link_##]";
});
});
});
</script>
<s_t3>
<div id="dkIndex">
<a href="#dkBody">본문 바로가기</a>
<a href="#dkGnb">메뉴 바로가기</a>
</div>
<div id="dkWrap" class="wrap_skin ">
<div id="dkContent" class="cont_skin" role="main">
<div id="cMain">
<s_notice_rep>
<div id="mArticle" class="article_skin">
<s_index_article_rep>
<div class="list_content">
<s_article_rep_thumbnail>
<a href="[##_article_rep_link_##]" class="thumbnail_post"><img src="//i1.daumcdn.net/thumb/C148x148/?fname=[##_article_rep_thumbnail_raw_url_##]"></a>
</s_article_rep_thumbnail>
<a href="[##_notice_rep_link_##]" class="link_post">
<strong class="tit_post">[##_notice_rep_title_##]</strong>
<p class="txt_post">[##_notice_rep_summary_##]</p>
</a>
<div class="detail_info">
<a class="link_cate">공지사항</a>
<span class="txt_bar"></span>
[##_notice_rep_date_##]
</div>
</div>
</s_index_article_rep>
<s_permalink_article_rep>
<div class="skin_view">
<h2 id="dkBody" class="screen_out">티스토리 뷰</h2>
<div class="area_title">
<strong class="tit_category"><a>공지사항</a></strong>
<h3 class="tit_post"><a href="[##_notice_rep_link_##]">[##_notice_rep_title_##]</a></h3>
<span class="txt_detail my_post">[##_notice_rep_author_##]
<span class="txt_bar"></span>[##_notice_rep_date_##]
</span>
</div>
<div class="area_view">
[##_notice_rep_desc_##]
</div>
</div>
</s_permalink_article_rep>
</div>
</s_notice_rep>
<s_page_rep>
<div id="mArticle" class="article_skin">
<s_permalink_article_rep>
<div class="skin_view">
<h2 id="dkBody" class="screen_out">티스토리 뷰</h2>
<div class="area_title">
<h3 class="tit_post"><a href="[##_article_rep_link_##]">[##_article_rep_title_##]</a></h3>
</div>
<div class="area_view">
[##_article_rep_desc_##]
</div>
</div>
</s_permalink_article_rep>
</div>
</s_page_rep>
<s_article_protected>
<div id="mArticle" class="article_skin">
<s_index_article_rep>
<div class="list_content">
<a href="[##_article_rep_link_##]" class="link_post">
<strong class="tit_post">[##_article_rep_title_##]</strong>
<p class="txt_post">보호되어 있는 글입니다.</p>
</a>
<div class="detail_info">
<a href="" class="link_cate">보호글</a>
<span class="txt_bar"></span>
[##_article_rep_date_##]
</div>
</div>
</s_index_article_rep>
<s_permalink_article_rep>
<div class="skin_view">
<h2 id="dkBody" class="screen_out">티스토리 뷰</h2>
<div class="area_title">
<strong class="tit_category"><a>보호글</a></strong>
<h3 class="tit_post"><a href="[##_article_rep_link_##]">[##_article_rep_title_##]</a></h3>
<span class="txt_detail my_post">
<span class="txt_bar"></span>[##_article_rep_date_##]
</span>
</div>
<div class="area_view">
[##_notice_rep_desc_##]
<form class="protected_form" onsubmit="[##_article_dissolve_##]">
<p>보호되어 있는 글입니다. 내용을 보시려면 비밀번호를 입력하세요.</p>
<input type="password" id="[##_article_password_##]" name="[##_article_password_##]" value="" placeholder="비밀번호" />
<button type="submit">확인</button>
</form>
</div>
</div>
</s_permalink_article_rep>
</div>
</s_article_protected>
<s_article_rep>
<div id="mArticle" class="article_skin">
<s_index_article_rep>
<div class="list_content">
<s_article_rep_thumbnail>
<a href="[##_article_rep_link_##]" class="thumbnail_post"><img src="//i1.daumcdn.net/thumb/C148x148/?fname=[##_article_rep_thumbnail_raw_url_##]"></a>
</s_article_rep_thumbnail>
<a href="[##_article_rep_link_##]" class="link_post">
<strong class="tit_post">[##_article_rep_title_##]</strong>
<p class="txt_post">[##_article_rep_summary_##]</p>
</a>
<div class="detail_info">
<a href="[##_article_rep_category_link_##]" class="link_cate">[##_article_rep_category_##]</a>
<span class="txt_bar"></span>
[##_article_rep_date_##]
</div>
</div>
</s_index_article_rep>
<s_permalink_article_rep>
<div class="skin_view">
<div class="area_view">
[##_article_rep_desc_##]
</div>
</div>
</s_permalink_article_rep>
</div>
</s_article_rep>
<s_tag>
<div class="area_list">
<div class="tit_category">
<a class="link_category">태그</a>
</div>
</div>
<div id="mArticle" class="article_skin skin_tag">
<h2 id= "dkBody" class="screen_out">티스토리 태그</h2>
<ul class="list_tag">
<s_tag_rep>
<li><a href="[##_tag_link_##]" class="link_tag [##_tag_class_##]">[##_tag_name_##]</a></li>
</s_tag_rep>
</ul>
</div>
</s_tag>
<s_guest>
<div class="area_list">
<div class="tit_category">
<a class="link_category">방명록</a>
</div>
</div>
<div id="mArticle" class="article_skin skin_visitor">
<div class="area_reply">
[##_guestbook_group_##]
</div>
</div>
</s_guest>
<s_paging>
<div class="area_paging area_paging_list">
<span class="inner_paging">
<a [##_prev_page_##] class="ico_skin link_prev [##_no_more_prev_##]">이전</a>
<s_paging_rep>
<a [##_paging_rep_link_##] class="link_page">[##_paging_rep_link_num_##]</a>
</s_paging_rep>
<a [##_next_page_##] class="ico_skin link_next [##_no_more_next_##]">다음</a>
</span>
</div>
<div class="area_paging area_paging_simple">
<div class="inner_paging">
<a [##_prev_page_##] class="link_prev [##_no_more_prev_##]">
<span class="ico_skin ico_prev"></span>이전
</a>
<a [##_next_page_##] class="link_next [##_no_more_next_##]">
다음<span class="ico_skin ico_next"></span>
</a>
</div>
</div>
</s_paging>
</div>
</div>
</div>
</s_t3>
<script src="./images/script.js"></script>
<script>
(function($) {
$.Area.init();
})(jQuery);
</script>
<!-- 깜빡이 버튼-->
<style>
.aros-blink {
position: fixed;
top: 65%;
right: 28%;
z-index: 99;
cursor: pointer;
font-size: 16px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.31;
letter-spacing: -0.16px;
text-align: right;
text-decoration: none;
width: 300px;
height: 95px;
border-radius: 15px;
overflow: hidden;
background: linear-gradient(to bottom, #ffffff, #f2f2f2);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.aros-blink-top {
position: relative;
width: 100%;
height: 50%;
background-color: red;
animation: blink 0.4s infinite alternate;
}
@keyframes blink {
0% {
background-color: red;
}
100% {
background-color: blue;
}
}
.aros-blink-top-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 16px;
max-width: 280px;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.aros-blink-bottom {
position: relative;
width: 100%;
height: 50%;
background-color: #DCDCDC;
}
.aros-blink-bottom-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: red;
font-size: 16px;
max-width: 280px;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
animation: blinkColor 0.4s infinite alternate;
}
@keyframes blinkColor {
0% {
color: red;
}
100% {
color: blue;
}
}
.aros-blink:hover .aros-blink-top {
animation: blink 0.4s infinite alternate;
}
.aros-blink-img {
font-size: 16px;
letter-spacing: -0.14px;
line-height: 1.33;
font-weight: normal;
font-stretch: normal;
font-style: normal;
text-align: left;
color: #747474;
text-decoration: none;
}
@media only screen and (max-width: 800px) {
.aros-blink {
top: 73%;
left: 11%;
z-index: 99;
cursor: pointer;
font-size: 16px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.31;
letter-spacing: -0.16px;
text-align: right;
text-decoration: none;
width: 300px;
height: 95px;
border-radius: 15px;
overflow: hidden;
}
}
</style>
</body>
<footer class="aros-footer">
<div class="aros-footer-inner">
<div class="aros-footer-section01">
<div class="aros-content">
<!-- 이메일, 운영자 변경하세요 -->
이메일: help@abaeksite.com | 운영자 : 아로스</br>
</div>
</div>
<div class="aros-footer-section02">
<div class="aros-bar"></div>
<div class="aros-footer-fixed">
<div class="aros-footer-aros100-warp">
<div class="aros-footer-aros100-text"><a style="color:white" href="https://aros100.com">제작 : 아로스</a></div>
</div>
<a style="color:white" href="https://aros100.com">
<!-- 아래 내용은 변경시 저작권법 위반으로 법적 책임을 질 수 있습니다 -->
Copyrights © 2022 All Rights Reserved by (주)아백.
</a>
</div>
<br>
<div class="aros-footer-section03">
<div class="aros-copyright">
※ 해당 웹사이트는 정보 전달을 목적으로 운영하고 있으며, 금융 상품 판매 및 중개의 목적이 아닌 정보만 전달합니다. 또한, 어떠한 지적재산권 또한 침해하지 않고 있음을 명시합니다. 조회, 신청 및 다운로드와 같은 편의 서비스에 관한 내용은 관련 처리기관 홈페이지를 참고하시기 바랍니다.
</div>
</div>
</div>
</div>
</div>
</footer>
</html>
댓글
댓글 쓰기