아카이브된 블로그 글

나만의 블로그 위젯만들기

아미가의원 · 팍샘's Life !!!~ · 2013년 11월 5일

블로그 위젯 만들기 도전.....    먼저 블로그 첫화면에서 포스트쓰기 클릭하여     블로그 포스트 작성하는 페이지 나오면.. 여기서 사진올리기 선택한후...  (단 사진은  포토샵등에서 미리 편집해놓아야 합니다. 위젯의 크기가 최대 176X600 임) &...

블로그 위젯 만들기 도전..... 

 

먼저 블로그 첫화면에서 포스트쓰기 클릭하여

 

나만의 블로그 위젯만들기 관련 이미지 1  

블로그 포스트 작성하는 페이지 나오면..

여기서 사진올리기 선택한후... 

(단 사진은  포토샵등에서 미리 편집해놓아야 합니다. 위젯의 크기가 최대 176X600 임)

나만의 블로그 위젯만들기 관련 이미지 2  

사진추가 클릭하여 업로드할

 사진파일을 선택....

나만의 블로그 위젯만들기 관련 이미지 3  

 

사진선택후 사진사이즈 조정하고 올리기 클릭....

(가로가 최대 176까지...)

나만의 블로그 위젯만들기 관련 이미지 4  

 

자...사진이 포스트쓰기 영역으로 올라가 있네요...

여기서 사진을 클릭하면....  아래와 같이 사이즈 조정할수 있는 테두리 나오고 가로 세로의 크기가 표시됩니다..

가로 176 맞죠..만약 가로 176 보다 크면 위젯형성이 안되니 명심할것임..

이상태에서 url 클릭....

나만의 블로그 위젯만들기 관련 이미지 5  

 

url 클릭하면 아래와 같이링크 주소 적는 칸이 나옵니다...

여기에 적는 링크주소는 이 위젯을 클릭하였을시

이동되는 블로그 포스트의 주소를 복사해서 써 넣으심 됩니다..

나만의 블로그 위젯만들기 관련 이미지 6  

 

url 주소를 적은다음 적용을 누르면

아래와 같이 링크가 정상적으로 적용 되었다는 표시로

 사진에 검정테두리가 생깁니다.

그다음 입력창 아래의  HTML 부분을 클릭하면...

나만의 블로그 위젯만들기 관련 이미지 7  

만들어놓은 위젯의 HTML 코드가 보입니다...

이것을 복사합니다...

 

나만의 블로그 위젯만들기 관련 이미지 8  

 

코드 복사 한다음 상단의 내블로그 아이콘을 클릭하여....

아래와 같이 저장하지 않고 이 페이지 나가기 를 합니다..

나만의 블로그 위젯만들기 관련 이미지 9  

그럼 다시 블로그 첫화면이 나옵니다...

여기서 블로그 관리를 클릭.....

 

나만의 블로그 위젯만들기 관련 이미지 10  

 

블로그 관리화면에서

레이아웃 위젯 설정 클릭...

 

나만의 블로그 위젯만들기 관련 이미지 11  

 

그럼 레이아웃 위젯 설정화면이 보여지는데..

우측하단에 위젯직접등록을 클릭합니다..

 

 

나만의 블로그 위젯만들기 관련 이미지 12  

 

아래와 같이 복사한 위젯코드를 붙여넣기를 하고

위젯명을 만들어 쓰고....

나만의 블로그 위젯만들기 관련 이미지 13  

 

위젯이  잘만들어졌는지 미리보기도 한다음..

등록을 클릭....

나만의 블로그 위젯만들기 관련 이미지 14  

 

아래와 같이 만들어진 위젯이 레이아욱화면에 보여집니다...

위젯의 위치를 원하는곳으로 옮길수 있습니다..

나만의 블로그 위젯만들기 관련 이미지 15  

 

레이아웃 적용전 미리보기를 하여

실제 블로그에서의 위치를 확인할수도 있습니다..그다음....꼭...

 

나만의 블로그 위젯만들기 관련 이미지 16  

 

적용을 클릭하여 실재 블로그에 반영하는거 잊지마세요..

걍 닫아버리면 지금까지한거 도루묵...ㅋㅋㅋ

 

나만의 블로그 위젯만들기 관련 이미지 17  

 

 

지금가지 위젯만들기....였습니다....ㅎㅎㅎㅎ