티스토리에서 도메인 주소로 바로 연결을 위한 노력

애드센스 공부하기 

 

오늘은 티스토리 블로그로 연결될때 도메인으로 연결을 도와주는 배너를 제작해보았습니다. 위에 배너를 꼭 클릭을 해야 도메인 주소로 이동이 되고,  강제성이 없어서 리다이렉션 코드는 사용하지 않고 배너를 사용하기로 생각했습니다. 


홈페이지 메인으로 연결해주는 배너이며 더 많은 글을 볼수있도록 메인하면에 노출되는 글은 9개로 수정해봤습니다. 


아래에서 공유해볼게요^^


⬇️이전글 먼저 보고 이해하시는게 좋을거에요⬇️

 

 

 

---

 

➡️블로그에서 도메인 주소로 노출 잘되게 하는 방법

블로그에서 도메인 주소로 노출 잘되게 하는 방법

 

---

 

현재 제 블로그 상단에 배너가 보이시나요? 도메인으로 연결을 이끌기 위해 조금이라도 노력해본 배너입니다. 꾸준히 사용해보고 다음글에 후기 남겨볼게요! 

 

오늘의 배너설정 요약 

 

<공통코드>


<!-- ✅ 블로그 공지 배너 --> <div style="padding: 15px; border: 2px solid [테두리 색상]; background: linear-gradient(135deg, [그라데이션 색상1], [그라데이션 색상2]); color: white; text-align: center; border-radius: 10px; font-weight: bold; margin: 20px 0; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);"> 📢 <strong style="color: #FFD700;">이 블로그의 새로운 주소!</strong><br><br> 👉 <a id="dynamic-link-content" href="[도메인 주소]" style="color: #FFD700; text-decoration: none; font-size: 20px; font-weight: bold; background: rgba(0, 0, 0, 0.2); padding: 12px 24px; border-radius: 5px; display: inline-block; transition: 0.3s;">💖 여기로 방문하세요! 🚀</a> </div> <!-- ✅ 따라다니는 배너 --> <div id="sticky-banner" style="position: fixed; top: 0; left: 0; width: 100%; background: linear-gradient(135deg, [그라데이션 색상1], [그라데이션 색상2]); color: white; text-align: center; padding: 14px 12px; font-size: 16px; font-weight: bold; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); z-index: 9999; display: none;"> 📢 <strong style="color: #FFD700;">이 블로그의 새로운 주소!</strong> 👉 <a id="dynamic-link" href="[도메인 주소]" style="color: #FFD700; text-decoration: underline; font-weight: bold;">💖 여기로 방문하세요! 🚀</a> </div> <!-- ✅ 본문 배너 가림 방지 --> <div style="height: 50px;"></div> <!-- ✅ JavaScript 코드 (현재 글의 도메인만 변경하여 유지) --> <script> document.addEventListener("DOMContentLoaded", function() { var oldDomain = "https://our2024.tistory.com"; // 기존 도메인 var newDomain = "[도메인 주소]"; // 새 도메인 (변경) // 현재 페이지 URL 가져오기 var currentUrl = window.location.href; // 기존 도메인을 새 도메인으로 변경 (글의 경로 유지) if (currentUrl.includes(oldDomain)) { var newUrl = currentUrl.replace(oldDomain, newDomain); // 배너 링크 변경 var linkElementContent = document.getElementById("dynamic-link-content"); if (linkElementContent) { linkElementContent.setAttribute("href", newUrl); } var linkElementBanner = document.getElementById("dynamic-link"); if (linkElementBanner) { linkElementBanner.setAttribute("href", newUrl); } // ✅ 모바일 & PC 모두 따라다니는 배너 표시 document.getElementById("sticky-banner").style.display = "block"; } }); </script>

 

아래 컬러 코드는
✅테두리 색상
✅그라데이션 색상 1
✅그라데이션 색상 2
순으로 적었습니다. 




💙 민트 (하늘빛)
#81D4FA #B3E5FC #81D4FA

💛 연한 노랑 (파스텔 옐로우)
#FFE082#FFF9C4#FFE082

💖 핑크 (로즈핑크 × 라벤더)
#A55EEA#FF85A2#A55EEA

💜 퍼플 (감성적인 무드)
#8A2BE2#D8BFD8#8A2BE2

💚 초록 (산뜻한 민트그린)
#50C878#98FB98#50C878




⬇️색상 적용 예시⬇️

✅위에처럼 도메인 배너적용시 공통 코드에서 [도메인 주소], [테두리 색상], [그라데이션 색상] 부분에 적용



✅ 티스토리 스킨편집으로 가서 </header> 뒤에 첨부하자! 

 

---

다음글에서도 애드센스 및 블로그 수익 관련 정보 공유해볼게요! 


다같이 화이팅 합시다 :)