엊그제 캐릭월드를 소개하는 포스팅을 했었는데요. 안보셨다면 아래 링크를 클릭!!
[세상 돋보기/제주의 풍경] - [제주여행]다양한 캐릭터를 만나고 체험하는 캐릭월드(1)
다른 글과는 뭔가 다르다는 것을 발견하셨는지요?
모르시겠다면 오늘의 제목을 다시 한번 보실까요? 이젠 눈치채셨나요?
바로 오늘의 주제인 스크롤버튼, 혹은 배너의 응용편입니다.
이미 두번의 포스팅을 통해서 스크롤버튼과 스크롤배너에 대해 설명했었는데요.
아직 못보셨다면 아래의 링크를 클릭하세요!!
[IT.컴퓨터.인터넷.취미/블로그 팁 & 스킨배포] - 티스토리 블로그에 view추천/구독 스크롤 버튼 달기
[IT.컴퓨터.인터넷.취미/블로그 팁 & 스킨배포] - 티스토리 블로그에 스크롤되는 구글광고(이미지배너) 달아보기
그럼 엊그제의 포스트에 등장했던 녀석을 한번 살펴볼까요?
응? 뭐지?
바로 이녀석입니다... 응? 곰탱이? 설마 이러시는건 아니겠죠?
네모 보이시죠? 위의 블로그전체를 캡처한 그림도 다시한번 살펴보시면 요녀석이 보일겁니다.
요 녀석을 달아놓은 이유는 소개하고자 하는 사진에서 글씨를 읽으려면 클릭해서 크게 보시길 원했기 때문이었답니다. 다시말해 그 포스트에서만 필요한 메세지를 스크롤배너를 통해서 전달하고자 했던것이죠.
위에 사용된 문구는 이미지로 만들어서 업로드 했구요.
스크롤배너 소스를 활용해서 본문하단에 넣은거랍니다.
글쓰기 창에서 오른쪽 위에 있는 HTML을 체크하시면 위와같이 소스를 볼 수 있구요.
밑줄로 표시한 부분이 해당 소스입니다.
사용된 소스는 요거구요. 지난번 스크롤배너에 소개했던 것과 같은 소스입니다.
이미지만 스크롤 될까요?
아니요.. 텍스트만 쓰셔도 스크롤이 된답니다.
요건 테스트 스크롤
위의 소스를 적용시킨 모습입니다. 포스팅을 하면서 바로 테스트 샷까지...ㅋㅋㅋ
top, margin-left의 수치를 적절하게 조절하셔야 한다는건 아시겠죠?
어때요? 그다지 어렵지 않게 사용할 수 있겠죠?
이 방법은 의외로 필요할 때 요긴하게 써 먹을 수 있답니다.
제가 사용한 것처럼 사진을 올린 글에서만 사진을 클릭해서 확인하게끔 안내하고 싶다거나.
특별한 날짜에 포스팅한 글에 메세지를 넣고 싶다거나.
이런 방법으로 활용할 수 있지 않을까요?
한가지 주의하실 점은 본문을 가리며 스크롤되게 하는 경우는 특별한 용도로만(제가 사용한 것처럼) 응용하시길 권합니다. 본문을 가리는 광고에 사용을 하신다면 티스토리측에서 제재를 받을 수도 있으니까요.
