티스토리 블로그에 소셜프로필 만들기

티스토리 블로그에 소셜프로필 만들기

새해를 맞이하여 블로그를 새롭게 개편중에 있습니다. 작업의 일환으로 블로그에 노출중인 프로필아이콘을 새로 만드는 작업을 진행하였기에 오늘은 간단하게 프로필 아이콘 생성법을 알아보겠습니다.

먼저 프로필로 사용할 여러가지 아이콘 이미지들을 네이버 또는 구글 이미지 검색을 통해 다운로드 받습니다. 최대한 사이즈 및 디자인이 유사한 것으로 맞춰서 받아주시되 적절한 것이 없다면 최대한 괜찮은 이미지를 다운로드 받으신 후 잘라내기, 크기조절 등을 통해 직접 수정하시면 됩니다. 일단 빨간꿈을꾸다 블로그에 노출할 프로필아이콘들은 총 12가지로 선정하였습니다. 

<빨간꿈을 꾸다 블로그에 적용된 12가지 프로필 기능> 

카카오스토리 채널, 네이버 오픈캐스트, 페이스북 페이지, 트위터

플리커, 인스타그램, 구글플러스, 유튜브, 네이버 이웃추가

티스토리 링크 추가, 이메일 구독버튼(피드버너), RSS 구독버튼

최대한 깔끔한 이미지들로 모았지만 뭔가 각자 다른 이미지라서 이를 똑같은 규격으로 맞출 필요가 있어 보입니다.  포토샵을 열 필요도 없습니다. 포토스케이프만 있다면 사이즈, 규격, 테두리, 여백, 확장자 등에 대한 일괄 작업이 가능합니다. 

포토스케이프를 이용해서 아래와 같이 공통된 디자인의 아이콘들을 만들었습니다. 뭔가 통일되보여서 만족스럽네요. 

이제는 노가다의 시간입니다. 적용할 이미지들을 html 소스업로드를 이용해서 url을 생성한 후 프로필 아이콘 클릭시 연결될 링크를 전부 스크립트로 작성합니다. 페이스북,트위터,인스타그램 등 대부분은 단순 url연결이라 어렵지 않지만 티스토리 링크추가, 네이버이웃추가, 이메일 구독하기 본인의 아이디와 코드에 맞춰서 정확히 입력해줍니다.

(소스 전체공개시 그대로 퍼가시는 분들이 있어서 이미지 주소는 비노출하였습니다. 필요하신 분들이 있다면 이메일로 신청해주시면 이미지 아이콘을 제공 또는 제작해드리도록 하겠습니다.)

스크립트를 전부 생성했으면 이제 티스토리 사이드바 html출력기능을 이용해서 그대로 붙여넣습니다. 

프로필 아이콘들이 적용된 모습입니다. 마우스 오버시 텍스트안내까지 넣었으며 클릭시 새창열기로 이동되도록 처리하였습니다. 

블로그가 한결 산뜻해졌습니다. 

티스토리에 프로필을 넣고 꾸미실 분들은 많은 참고해주시기 바랍니다^^ 

<관련글>

2013/11/29 - [2nd Story/프로그램리뷰] - 포토스케이프(Photoscape) 사진 편집, 꾸미기, 보정을 위한 최고의 무료 소프트웨어