상단으로 이동 버튼
PC의 경우는 이 버튼을 활용할 수 없습니다.
블로그 스킨에서 해결하는 방법
레이아웃 가젯에서 해결하는 방법
구글 블로그의 관리자 페이지에서 간단한 코드 추가로 적용이 가능합니다.
아래 캡쳐 화면처럼 구현됩니다.
 |
| 적용 사례 : 상단으로 이동 버튼 |
이미지 말고 실제 블록그 상에서 적용된 예시를 보고 싶으시면,
제 다른 블로그를 참조해 주세요. : 적용 사례
제 현재 블로그는 테마에서 지원 중이서 중복 설치를 하지는 않았습니다.
가젯 설치하는 법
먼저, Blogger 관리자 페이지 > 레이아웃 메뉴로 이동합니다.
그 이후에, '블로그 게시물' 위 섹션에서 '가젯 추가'를 클릭합니다.
마지막으로 HTML/JavaScript 위젯 선택 후, 아래 코드를 그대로 붙여넣으면 됩니다.
순서대로 화면 캡쳐 입니다. 관리화면에서 아래 메뉴의 '레이아웃'을 누릅니다.
 |
| 레이아웃 메뉴 선택하기 |
가젯 추가 버튼을 누릅니다.
 |
| 가젯 추가 버튼 |
 |
| 가젯추가 버튼 누르기 |
레이아웃 배치상에서 페이지 본문 섹션에 배치해주세요..
 |
| 레이아웃 배치 위치 - 페이지 본문 섹션에 배치 |
스크립트 코드
이 부분을 클릭하면 코드를 확인할 수 있습니다
<!-- 상단 이동 버튼 -->
<style>
#topBtn {
display: none;
position: fixed;
bottom: 24px;
right: 16px;
z-index: 99999;
font-size: 18px;
border: none;
background-color: rgba(0, 0, 0, 0.5);
color: white;
cursor: pointer;
padding: 14px 16px;
border-radius: 50%;
opacity: 0.7;
box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
#topBtn:hover {
opacity: 1;
background-color: rgba(0, 0, 0, 0.7);
}
/* 모바일에서도 위치 고정 */
@media (max-width: 480px) {
#topBtn {
bottom: 20px;
right: 16px;
padding: 12px 14px;
font-size: 16px;
}
}
</style>
<button onclick="topFunction()" id="topBtn" title="맨 위로">▲</button>
<script>
window.onscroll = function() {
const btn = document.getElementById("topBtn");
if (window.scrollY > 100) {
btn.style.display = "block";
} else {
btn.style.display = "none";
}
};
function topFunction() {
window.scrollTo({ top: 0, behavior: 'smooth' });
}
</script>
댓글 쓰기