티스토리 사이드바에 인스타그램 배너를 달아보자


글,사진 | 미뇩사마


오랜만에 블로그 메인화면을 꾸며봤다.(데스크탑용 블로그 화면) 사실 요즘은 대부분 모바일을 통해 블로그 유입이 이뤄지기 때문에 데스크탑용(PC화면용) 페이지는 크게 신경을 안써도 되지만 이왕이면 깔끔하고, 이쁘면 좋으니...



이번에 추가한 부분은 인스타그램 배너다. 몇가지만 따라하면 티스토리 사이드바에 간단하게 배너를 달 수 있으니 원하시는 분들은 아래를 참고해주시기 바랍니다. 천천히 따라오세요.



1. 인스타그램 배너용 이미지를 제작한다.

 - 포토샵 또는 그림판을 이용한 배너용 이미지 자체 제작 or 인터넷상에서 배너용 이미지 다운



인터넷에서 배너용으로 사용할 이미지를 그냥 다운받아 사용해도 되고, 위(▲)와 같이 본인이 직접 포토샵이나 그림판을 통해 배너 이미지를 제작해도 된다. 블로그마다 사이드바 너비가 다르니 각자 자신의 사이드바 너비를 참고하여 배너용 이미지를 제작하시면 됩니다. (기존 이미지를 사용하시는 분은 이미지 크기조정 필요) 참고로 현재 저의 블로그 사이드바에 걸려있는 인스타그램 배너 이미지 크기는 257*99(가로*세로) 입니다.



2. 배너용 이미지 업로드 및 업로드한 이미지 주소를 복사한다.

 - 티스토리 글쓰기 모드에서 배너용 이미지 업로드

 - 미리보기 화면에서 업로드한 이미지 우클릭 후 "이미지 주소 복사"




일반적인 티스토리 글쓰기 화면에서 배너용 이미지를 업로드 한 뒤 미리보기 상태에서 해당 이미지를 우클릭하여 "이미지 주소"를 복사한다. 이미지를 업로드한 글은 정상적인 포스팅이 아니기 때문에 비공개로 발행하면 된다. 우린 업로드한 이미지의 인터넷 주소만 따면 된다.




3. 티스토리 사이드바에 인스타그램 배너를 출력한다.

 - 티스토리 관리 → 사이드바 → HTML 배너출력 기능을 이용



HTML 소스입력란에는 아래와 같은 양식으로 작성을 해주면 된다. ▼ 


[입력용]

<center>

<a href="본인의 인스타그램 주소를 넣음" target="_blank">

<img src="두번째 단계에서 땄던 업로드한 이미지 주소를 이곳에 넣음">

</a>

</center>


[참고용]

<center>

<a href="https://www.instagram.com/min7zz/" target="_blank">

<img src="https://t1.daumcdn.net/cfile/tistory/21128E4B591D684C27">

</a>

</center>



4. 본인의 블로그 사이드바에 걸린 인스타그램 배너를 흐뭇하게 바라본다.

 - 슬쩍 한 번 눌러보고, 제대로 본인의 인스타그램 주소와 연결되는지 확인한다.




댓글

Designed by JB FACTORY