티스토리를 더욱 홈페이지처럼 사용하는 커버 자동 슬라이드 방법

티스토리 커버 자동슬라이드하는 방법

 

 

안녕하세요. kakaostar입니다 :)

 

티스토리를 홈페이지 처럼 꾸며서 사용하시는 분들이 많으신데요.

티스토리의 커버 기능을 사용하면 더욱 홈페이지 처럼 보입니다.

 

티스토리가 제공하는 공식 스킨 중 커버 기능을 제공하는 스킨은 Portfolio, Whatever, Poster, Magazine이 있습니다.

이들 스킨은 홈페이지 처럼 보일 수 있는커버 기능을 제공해주는 고마운 아이들입니다 ^^

 

하지만 아쉽게 커버가 자동으로 넘어가는 기능은 제공되고 있지 않습니다.

그래서 티스토리 스킨 커버를 자동으로 넘겨주는 방법을 알려드립니다.

 

 

홈페이지처럼 사용하는 티스토리 예

https://www.thegreenmap.net/

조감도·관광지도·제작 | 더그린맵

 

---

 

커버 자동 슬라이드하는 소스 넣는 곳 설명

 

1) 티스토리에 로그인

티스토리에 로그인

2) 설정-꾸미기-스킨 편집

설정-꾸미기-스킨 편집

 

3) '스킨 편집'에서 홈 설정에 '커버'가 활성화된 상태에서 'html편집' 클릭

'스킨 편집'에서 홈 설정에 '커버'가 활성화된 상태에서 'html편집' 클릭

 

4) 'HTML'항목에서 </head>위에 '커버 자동 슬라이드 소스' 붙여놓고 '적용' 클릭

'html'항목에서 /head위에 '커버 자동 슬라이드 소스' 붙여놓고 '적용' 클릭

 

---

 

티스토리 스킨 커버(슬라이드) 자동넘김 html 소스

'HTML'항목에서 </head>위에 '커버 자동 슬라이드 소스' 붙여놓고 '적용' 클릭

[티스토리] Portfolio, Whatever, Poster, Magazine 커버 자동 슬라이드 2022-02-22.txt

0.00MB

 

Portfolio Skin Cover (포트폴리오 스킨)

<!-- Portfolio skin cover 슬라이드 자동넘김 -->

<script>
setInterval(function(){
$(".type_featured .btn_next").trigger("click");
},5000)
</script>

 

Whatever Skin Cover (왓에버 스킨 커버)

<!-- Whatever skin cover 슬라이드 자동넘김 -->

<script>
setInterval(function(){
$(".cover-slider .next").trigger("click");
},4000)
</script>

 

Poster skin cover (포스터 스킨 커버)

<!-- Poster skin cover 슬라이드 자동넘김 -->

<script>
setInterval(function(){
$(".cover-slider .next").trigger("click");
},4000)
</script>

 

Magazine skin cover (매거진 스킨 커버)

<!-- Magazine skin cover 슬라이드 자동넘김 -->

<script>
setInterval(function(){
$(".slide_area .btn_next").trigger("click");
},5000)
</script>

 

---

 

 

티스토리 스킨 커버(슬라이드) 자동넘김 + 마우스 화면에 두면 화면 정지 방법

 

*참고 : 혹시나 마우스 커서를 커버 위에 뒀는데 슬라이드가 멈추지 않으면
커버(슬라이드) 화면 아무곳이나 마우스 커서를 두고 좌클릭하면 화면이 멈춥니다.

 

 

Portfolio Skin Cover 자동넘김 + 마우스 화면에 두면 화면 정지

<!-- 포트폴리오 스킨 커버(슬라이드) 자동넘김 + 마우스 화면에 두면 화면 정지 --> 

<script> 
var theInterval; 

function slideSwitch(){ 
$(".type_featured .btn_next").trigger("click"); 
} 

function startSlide() { 
	theInterval = setInterval(slideSwitch, 4000); 
} 

function stopSlide() { 
	clearInterval(theInterval); 
} 

$(function () { 
	startSlide(); 
	$('.type_featured').hover(function () { 
		stopSlide(); 
	}, function () { 
		startSlide(); 
	}) 
}); 
</script>

 

 

Poster skin cover 슬라이드 자동넘김 + 마우스 화면에 두면 화면 정지

<!-- Poster skin cover 슬라이드 자동넘김 + 마우스 화면에 두면 화면 정지 --> 

<script> 
var theInterval; 

function slideSwitch(){ 
$(".cover-slider .next").trigger("click"); 
} 

function startSlide() { 
	theInterval = setInterval(slideSwitch, 4000); 
} 

function stopSlide() { 
	clearInterval(theInterval); 
} 

$(function () { 
	startSlide(); 
	$('.cover-slider ul li').hover(function () { 
		stopSlide(); 
	}, function () { 
		startSlide(); 
	}) 
}); 
</script>

 

Magazine skin cover 슬라이드 자동넘김 + 마우스 화면에 두면 화면 정지

<!-- Magazine skin cover 슬라이드 자동넘김 + 마우스 화면에 두면 화면 정지 --> 

<script> 
var theInterval; 

function slideSwitch(){ 
$(".slide_area .btn_next").trigger("click"); 
} 

function startSlide() { 
	theInterval = setInterval(slideSwitch, 4000); 
} 

function stopSlide() { 
	clearInterval(theInterval); 
} 

$(function () { 
	startSlide(); 
	$('.slide_area').hover(function () { 
		stopSlide(); 
	}, function () { 
		startSlide(); 
	}) 
}); 
</script>

 

---

 

😊💕티스토리 상단에 투명 고정 메뉴바 만드는 방법

https://kakaostar.tistory.com/entry/%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC-%ED%88%AC%EB%AA%85-%EA%B3%A0%EC%A0%95-%EB%A9%94%EB%89%B4%EB%B0%94

 

티스토리를 홈페이지 처럼 사용하기 위해 투명 고정 메뉴바 만들기