[사이드바 커스텀 이미지 배너 모듈 만들기]
여러분들은 티스토리에서 플러그인으로 제공하는 이미지 배너를 사용해보셨나요? 저는 이번에 제가 만든 안드로이드 앱을 홍보하기 위해 이미지 배너를 사용해보았습니다. 뭔가 제목도 없이 그림만 갑자기 띡하고 걸려있는 거 같아서 Flatinum 스킨에서 제공하는 모듈처럼 이미지 배너를 만들 수 없나하고 방법을 열심히 찾아보고 적용을 해보았습니다.
커스텀 이미지 배너 모듈 모습부터 살펴보기
▲ 커스텀 이미지 배너 모듈 모습
결과부터 보여드리겠습니다. 위의 그림과 같이 사이드바의 다른 모듈과 유사한 모양을 같도록 만들어보았습니다. 현재(2018년 5월 5일 기준) 사이드바의 맨 위에 제가 만들어놓은 커스텀 이미지 배너 모듈입니다. 적용모습도 살펴보실 겸 한번씩 보시고 앱도 다운로드 해주시면 감사하겠습니다. ([제가만든] 안드로이드 앱 '일상 거래 관리' 소개 ◀ 자작 앱 소개 포스팅 링크)
HTML 편집에서 커스텀 이미지 배너 모듈 생성
▲ HTML 편집화면에서 입력해준 코드
'HTML 편집'에서 s_sidebar 로 검색을 하여 사이드바 모듈 코드들이 있는 곳으로 이동합니다. 거기서 위의 그림에서 표시한 것처럼 s_sidebar_element를 만들어줍니다. 여기서 이 모듈의 id로 사용할 id를 'id= ' 부분에 입력해주고 'fa fa-external-link' 부분에 원하는 아이콘을 넣어줍니다. 저는 여기서 다른 아이콘이 뭐가 더 있는 지는 잘 몰라서 링크의 아이콘을 가져와서 사용했습니다. 실제로 하는 동작이 같으니까요. 그 후 '자작 안드로이드 앱' 이라고 표시된 부분에 모듈의 이름을 적어줍니다. 이 부분은 블로그에 실제로 보이는 부분입니다. 위에 주석으로 '<!-- 내가 만든 어플리케이션 -->' 부분은 사이드바 모듈 설정하는 화면에서 보이는 문구 입니다. 'href' 부분에는 이미지 배너를 눌렀을 때 이동할 사이트 주소를 입력하여 주고 'src' 부분에는 이 배너에 노출할 이미지의 url 주소를 입력합니다. 저는 여기서 이미지를 'html 편집' 화면의 '파일 업로드'에 올려두고 사용하여 주소가 './images' 로 시작하게 되었습니다. 이렇게 HTML로 만들어둔 모듈을 사이드바의 모듈 설정에 들어가보면 뿌듯하게 자리잡고 있는 것을 보실 수 있습니다.
관련 포스팅
[애드센스] 티스토리 블로그 사이드 메뉴에 애드센스 광고 넣기
유익한 시간되셨다면 하단에 공감 버튼을 눌러주세요.
여러분의 공감은 저에게 큰 힘이 됩니다.
'인터넷 정보 > 티스토리' 카테고리의 다른 글
| [티스토리] 페이스북 페이지 사이드바 모듈 만들기 (0) | 2018.05.10 |
|---|---|
| [티스토리] 블로그 네이버, 구글 검색 등록 방법 (1) | 2018.05.09 |
| [티스토리] Flatinum 스킨 '글 제목' 영역 수정 (0) | 2018.05.04 |
| [티스토리] Flatinum 스킨 '프로필 모듈' 수정 (3) | 2018.05.04 |
| [티스토리] 블로그 서식 관리 (0) | 2018.05.02 |
