top버튼 그리고 카톡버튼
본문
취미삼아 공부해보고 있는 왕초보입니다
홈페이지에 top버튼 또는 그 위에 카톡버튼을 만들어서 넣어보고 싶은데
아무리 검색해봐도 "어떤 특정파일에 이러이러한 소스를 넣어라"
이런 설명은 없더라구요
그리 간단한 문제가 아닌 난이도가 좀 있는 건지요?
그런거라면 일찌감치 포기 좀 하고싶어서요 ㅎㅎ;;
답변 5
"어떤 특정파일에 이러이러한 소스를 넣어라" <---tail.php 하단에 보면 아래와 같은 코드가 있습니다
<button type="button" id="top_btn">
~~
$("#top_btn").on("click", function() {
이부분을 수정해서 다음처럼 하세요
<div id='top_btn_kakao'>
<div='kakao'>카카오링크</div>
<button type="button" id="top_btn2">
~~~
~~~
</div>
<script>
$(function() {
$("#top_btn2").on("click", function() {
~~~
<style>
#top_btn_kakao {position: fixed;bottom: 100px;right: 20px;width:50px;height: 100px; border: 2px solid blue; z-index: 999;}
</style>
카카오링크와 top버튼 디자인
친절한 답변 너무 감사합니다
모바일 tail에는 말씀하신 문구가 있기는 한데 저 부분을 아래 말씀하신대로 어떻게 수정을 해야할지 감이 안오네요 ^^;;;;
염치불구하고 시간 남아도실때 한번만 더 상세한 설명해주시면 정말 감사하겠습니다
덕분에 PC버전의 TOP아이콘은 만들어서 해결했습니다. 감사합니다
그 위에 카톡상담 아이콘만 현재 sir 홈피 우측 하단에 다크모드처럼 떠있도록 하면 좋을 것 같은데 쉬운 방법이 없을까요?
우선 단독 파일 하나만 예제 형식으로 만들어본 후
기능이 동작하면 원하는 위치에 필요한 부분만 가져다 붙힐수 있습니다.
그누보드 기준.
/theme/basic/tail.php 파일에 탑버튼 소스 있어요.
<button type="button" id="top_btn">
<i class="fa fa-arrow-up" aria-hidden="true"></i><span class="sound_only">상단으로</span>
</button>
<script>
$(function() {
$("#top_btn").on("click", function() {
$("html, body").animate({scrollTop:0}, '500');
return false;
});
});
</script>
테마 안 파일들부터 하나씩 살펴보시면 공부에 도움됩니다.
야래 코드 복사헤서 사용하세요
<div id='top_btn_kakao'>
<div><br>카카오</br></div>
<button type="button" id="top_btn">
<i class="fa fa-arrow-up" aria-hidden="true"></i><span class="sound_only">상단으로</span>
</button>
</div>
<script>
$(function() {
$("#top_btn").on("click", function() {
$("html, body").animate({scrollTop:0}, '500');
return false;
});
});
</script>
<style>
#top_btn_kakao {position: fixed;bottom: 100px;right: 20px;width:50px;height: 100px; border: 2px solid blue; z-index: 999;}
</style>
