​

버튼 사이의 공백을 채우는 방법

이전에 완벽하게 처리하지 못한 부분이 버튼 사이에 있는 배경입니다. 이 부분은 최초 작업한 스킨 이미지 변경 작업이 필요합니다.

​

​

최종 스킨 이미지는 버튼을 추가하였습니다. 스킨 이미지를 저장하고 꾸미기 설정 -> 레이아웃·위젯 설정 -> 오른쪽 하단의 세부 디자인 설정에서 스킨 배경을 변경하시면 됩니다.

​

​

스킨 변경 -> 직접 등록 -> 파일 등록에서 최종 변경된 스킨 이미지를 등록하면 버튼이 추가된 스킨 이미지가 보입니다. 버튼이 있는 스킨 이미지를 확인하고 적용하면 변경이 됩니다. 블로그 메인으로 이동합니다.

​

​

블로그 메인의 스킨이 이제 완벽해졌습니다. 버튼을 클릭해도 배경 사라짐이 없으므로 완전한 형태의 홈페이지형 블로그가 완성되었습니다.

​

​

이미지형 목록으로 설정하는 방법

홈페이지형 블로그를 보시면 메인 스킨 아래에 목록이 이미지로 되어 있는 것을 많이 보셨을 겁니다. 변경하는 방법은 간단합니다. 같이 알아보겠습니다.

​

​

메뉴 -> 관리 -> 메뉴·글·동영상 관리에서 프롤로그 관리를 선택합니다.

​

​

보기 설정에서 글 강조 또는 이미지 강조형을 선택합니다. 메인 이미지 목록은 글목록 상위에 표시되는 부분입니다. 1줄 ~ 3줄까지 설정할 수 있습니다. 최신 글을 많이 보여주시려면 3줄 정도로 설정 합니다. 글목록은 2개까지 추가할 수 있으며 대표 카테고리를 설정 합니다.

​

​

글 강조 형으로 변경해 봤습니다. 이미지 강조형보다는 제목이나 주요 글이 먼저 보이는 형태입니다. 사용자에 따라 다양하게 적용하여 사용하면 되겠습니다.

​

​

위젯으로 바로 가기 버튼 만드는 방법

홈페이지형 블로그를 제작하면서 가장 많이 사용한 단어가 위젯입니다. 위젯은 다양한 방법으로 블로그를 꾸밀 수 있는데 위젯으로 인스타그램 바로 가기 버튼을 만들어 보겠습니다. 먼저 인스타그램 로고 이미지를 구합니다. 구글의 이미지에서 쉽게 구할 수 있으니 영상을 보시고 같이 해보세요.

​

​

위젯은 가로 최대 크기가 170입니다. 가로 170 * 세로 170 정사각형으로 이미지를 만들겠습니다. 이미지는 포토샵이나 그림판에서 수정하시면 됩니다. 필자는 포토샵에서 이미지 크기를 수정했습니다.

포토샵에서 이미지 수정

​

​

그림판에서 변경하는 방법입니다. 그림을 불러오고 크기 조정 버튼을 클릭하면 크기 조정 창이 실행됩니다. 픽셀로 변경, 170을 입력하고 확인합니다. 반드시 저장을 하셔야 합니다.

그림판에서 이미지 수정

​

​

인스타그램 로고를 위젯에 적용을 해야 합니다. 홈페이지형 블로그 제작 시 위젯을 바로 가기 버튼을 만들기 위해서는 이미지 주소, 링크 주소가 필요합니다. 이미지를 비공개로 발행했던 포스팅에 추가를 하고 발행합니다. 이미지 주소를 복사합니다.

​

​

인스타그램 링크 주소는 “http:// www.instagram/아이디/” 이렇게 해주시면 됩니다. 메모장에 이미지 주소와 인스타그램 주소를 미리 적어놓고 작업을 하면 편합니다.

​

​

위젯을 만들고 이미지 주소와 링크 주소를 연결해 주면 됩니다. 이제 조금 어려 울수 있으니 천천히 따라 해보세요.

​

홈페이지 주소 버튼 링크 시 작업한 방법과 유사합니다. 틀린 점은 “<a target=”_blank” “입니다. 의미는 클릭하면 웹브라우저의 새 창을 열어 인스타그램으로 접속 합니다. 표 안의 텍스트를 복사해서 사용하시면 됩니다.

​

​

내 메뉴 -> 관리 -> 꾸미기 설정 -> 레이아웃·위젯 설정에서 위젯 직접 등록을 합니다. 위젯명과 위젯 코드를 입력합니다. 위젯 코드는 앞서 메모장에 작성한 HTML 코드를 입력하시면 됩니다.

​

​

인스타그램 아이콘이 생긴다면 정상적으로 입력한 것입니다. 등록을 합니다.

​

​

작업 영역에 인스타그램 위젯이 등록되었습니다. 적용을 하면 블로그 메인 페이지로 이동을 합니다.

​

​

블로그 메인의 우측 하단에 인스타그램 로고가 생겼습니다. 링크를 누르면 웹브라우저 새 창이 실행되면서 인스타그램으로 이동합니다.

오늘은 블로그형 홈페이지 완성과 글목록 설정하는 방법에 대해 알아봤습니다. 위젯을 응용하여 인스타그램 바로 가기 버튼을 만들어 조금 더 전문적으로 보이는 블로그를 만들 수 있기를 바랍니다.