앞선 포스팅중 티스토리 사이드바에 원하는 배너를 넣는 방법은 "이미지 배너출력" 옵션을 사용하였는데요, 이미지 배너출력은 만들기 편리하다는 장점도 있지만, 하나의 문제점은 링크를 누를시 현재창이 없어진다는 것입니다, 티스토리 사이드바의 배너를 클릭시 새창으로 열리게 하려면 'HTML 배너출력' 옵션을 이용 해야 합니다.


이미지 배너출력에 관한 포스팅 바로가기 --> http://sfnarae.tistory.com/313



새창에서 열리는 티스토리 사이드바에 배너 넣기 (HTML 배너출력)


1. 원하는 이미지를 만든후 글쓰기 화면에서

"글쓰기 >> 글 >> 비공개" 또는  "글쓰기 >> 사진추가 >> 서식" 으로 저장합니다. (글이 공개되지만 않으면 되니, 둘중 아무 옵션으로나 저장하시면 됩니다.)


HTML img


2. 이미지 주소 복사 (Copy image address)는 작성중인 문서내에서 또는 작성후에 하여도 결과는 동일합니다.

이미지위에 마우스 커스를 두고 오른쪽 버튼을 누린후 "Copy image address"를 누르시면 됩니다.


HTML img

HTML img


3. HTML 배너출력 "사이드바 >> HTML 배너출력 >> 편집" 순으로 선택합니다.


HTML img


4. HTML 배너출력 화면에서 "이름 과 HTML 소스"를 입력후 확인 하시면 됩니다.


HTML img


HTML 소스 예제 (실수를 줄이기 위해서 복사해서 사용하세요)

<a href="https://www.joinhoney.com/ref/kozblw" target=_blank><img src="https://t1.daumcdn.net/cfile/tistory/26364235576C232B0D" border="0"></a>


HTML 설명 :

- href="target url" : 클릭시 이동하고자 하는 주소

- target=_blank : 새창으로 열고 싶을경우 사용, 지우면 현재창에서 열립니다.

- img src="image 주소(no2)" : No2에 설명된 배너 이미지가 있는 주소

-  border="0" : 기본적인 이미지 경계선이 1픽셀로 표시되는데 경계선을 없애고 싶을때, 번호 변경으로 경계선의 크기를 변경가능



공감과 댓글은 글쓴이에게 많은 힘이됩니다. ~~




블로그 이미지

naraegreen

San Francisco 및 Bay Area 지역 중심의 미국 생활 정보 블로그

,


블로그 운영의 목적은 노출입니다, 보다 많은 이들에게 내가 작성한 내용이 공개되기를 희망하기 때문입니다, 최소의 저의 경우는 그러합니다. 많은 노출이 경제적 이익으로 연결되기를 또한 희망합니다.



사이트 노출을 돕는 속성, Alt Tag


Alt 속성(Tag) : HTML의 image(그림)이 정상적으로 출력되지 못할때 문자열을 지정하기 위한 값으로 다음과 같은 이유로 사용됩니다.

- 그림의 링크가 죽었거나, 연결 속도나 품질이 낮을 경우 문자열만 보여주기 위하여

- 텍스트 전용 웹 브라우저에서

- 그림에 대한 정보를 검색엔진에 제공하기 위하여

- 시각장애인 등을 위해 문서의 내용을 목소리로 변환해 주는 스키린 리더 소프트웨어를 위하여


수 많은 검색엔진에서 Alt값을 정보를 찾고 있으면, 블로거에 포스팅시 그림입력은 기본이기에, 각각의 그림에 alt값을 지정해 놓으면 검색될(노출될) 확률은 그 많은 높아지게 됩니다.



티스토리에서 포스팅시 Alt값 넣는 방법


Alt 태그(Tag)


1. 포스팅시 그림 값을 HTML로 확인해 보면 alt 태그(Tag)에 관한 값은 어디에도 찾을 수 없습니다.

그림에 해당하는 HTML 코드를 찾은 후 alt=" " 로 작성이 가능하지만 너무 번거로운 작업이지요....



Alt 태그(Tag)


2. 티스토리에서는 그림을 선택 후 나타나는 '대체텍스트' 만으로 Alt 태그(Tag) 작업이 가능합니다.


Alt 태그(Tag)


3. 그림 선택후 '태체 텍스트'에 문자를 입력하는 것으로 Alt 태그(Tag) 작업이 완료 됩니다.


Alt 태그(Tag)


4. 결과를 HTML로 확인한 화면입니다, 어때요 쉽지요 ~~

지금 작성하는 이 포스팅에도 Alt 태그(Tag) 삽입하여야 겠네요.


공감과 댓글은 글쓴이에게 많은 힘이됩니다. ~~

블로그 이미지

naraegreen

San Francisco 및 Bay Area 지역 중심의 미국 생활 정보 블로그

,


티스토리 블로그를 운영 하다보면 이런저런 이유로 '사이드바'에 배너를 넣고 싶을때가 생깁니다. 저의 경우 아마존(Amazon)쇼핑시 Coupon Code를 자동으로 찾아주어 구입가격을 낯춰 주는 Honey서비스를 링크해 보려 합니다. 링크주소--> https://www.joinhoney.com/ref/kozblw



티스토리 사이드바에 배너 넣는 방법


1. 원하는 이미지를 만든후 "글쓰기 >> 사진추가 >> 서식" 순으로 작업합니다.


배너 넣기




2. 추가된 이미지를 마우스 오른쪽을 선택하여 이미지 주소를 복사해 놓습니다.


배너 넣기




3. 티스토리 '관리 >> 사이드바 >> 이미지 배너출력' 을 선택후 원하는 위치로 배너를 이동시켭니다.


배너 넣기




4. 편집을 누른후 '이름 >> 이미지 URL >> 연결할 URL' 을 입력후 '확인 >> 저장' 합니다.

- 이미지 URL : no2에서 이미지 주소를 복사해 놓은것을 붙여넣기 합니다.

- 연결할 URL : 해당 이미지를 클릭시 이동할 인터넷 주소를 입력합니다.


배너 넣기




5. 티스토리 화면에 배너가 출력된 것이 보이지죠, 클릭 해보세요 ! 원하는 페이지로 이동 되실겁니다.


배너 넣기


이상 티스토리 블로그 사이드바에 원하는 배너 넣는 방법이었습니다.



공감과 댓글은 글쓴이에게 많은 힘이됩니다. ~~

블로그 이미지

naraegreen

San Francisco 및 Bay Area 지역 중심의 미국 생활 정보 블로그

,


티스토리 내 블로그 배경화면(바탕화면) 바꾸기는 메인로그 변경하기와 진행 방법은 대동소이 합니다.

메인로그 변경하기 포스팅 바로가기 --> http://sfnarae.tistory.com/393




1. '관리자 >> HTML/CSS 편집' 에 들어가기전 기존 배경화면을 다운받아 두세요. 사이즈 확인이나 혹 잘못되었을 때를 대비해서 말이죠.





2. HTML 화면을 조금 아래로 내려보면 배경이미지를 컨드롤 하는 코드와 파일명이 보입니다.(참고만 하세요, 어떻게 되어있는지...)

이 화면에서 변경하는 것은 부담 스러우니 "파일업로드'로 들어 갑니다.




3. '파일업로드' 에서 바꾸고자 하는 파일을 선택후 '-삭제' 합니다.





4. 같은화면에서 '+추가' 를 선택하여 원하는 배경이미지 파일을 선택합니다.




5. 작업이 완료된 후 '저장' 을 눌러 화면에서 빠져나오면 ~ 끝~입니다.


* 배경이미지가 안바뀌었다고요? 키보드 'F5'를 눌러 리로드 시켜보세요 ^^;;



공감과 댓글은 글쓴이에게 많은 힘이됩니다. ~~

블로그 이미지

naraegreen

San Francisco 및 Bay Area 지역 중심의 미국 생활 정보 블로그

,


티스토리는 다양한 무료 스킨을 다운받아 내 블로그를 꾸밀 수 있도록 되어있습니다.

오늘은 티스토리에서 다운받은 기본 스킨에서 내 블로그에 나의 메인로고로 변경하는 방법을 설명합니다.


티스토리 메인로고 변경하기


1. '관리 >> 스킨' 에서 원하는 스킨을 다운받아 적용시킵니다.

전 요즘 유행하는 반응형을 적용시켰습니다.




티스토리 메인로고 변경하기


2. Flatinum에서 만든 스킨인데요 왼쪽 상단에 기본 메인로고가 들어가 있습니다. 내 블로그 용으로 바꿔야 겠습니다.

먼저 해당 메인로고를 마우스 우클릭하여 다운받습니다. 'Save image as...' (동일한 파일 크기를 적용시키기 위해서 입니다.)




티스토리 메인로고 변경하기


3. 포토샵을 이용해서 같은 크기의 메인 로고를 만들었습니다, 뒤 배경이 없는 것으로 만들고 이름도 동일한 'logo_shring.png'로 저장해 둡니다.

혹 포토샵에서 로고를 만드는데 어려움이 있으신 분은 댓글 주시면 설명해 드릴께요~~




티스토리 메인로고 변경하기


4. 티스토리 '관리자 >> 꾸미기 >> HTML/CSS 편집' 에서 '파일업로드'를 선택합니다.




티스토리 메인로고 변경하기


5. 보여지는 파일 리스트중 'images/logo_shring.png'를 선택한 후 '-삭제' 버튼을 누릅니다.


6. 같은 화면에서 '+추가' 버튼을 누른후 새롭게 만들어둔 내 블로그용 이미지를 선택한후 업로드 시키고 오른쪽 상단의 '저장' 을 누립니다.


7. 티스토리의 내 블로그에 메인로고가 변경되었습니다. ~ 끝~


*.동일한 방법으로 뒤배경 이미지 역시 변경가능합니다. 다음에 다시한번 다루도록 하겠습니다.


공감과 댓글은 글쓴이에게 많은 힘이됩니다. ~~

블로그 이미지

naraegreen

San Francisco 및 Bay Area 지역 중심의 미국 생활 정보 블로그

,


얼마전 구입한 Galaxy Tab A Tablet으로 여행시에도 티스토리 포스팅을 하겠다는 원대한 꿈을 꾸며 편한방법을 모색하다 결론 내린 방법입니다, 바로 Evernote를 이용했어 포스팅 하는것인데요...

(에버노트는 실리콘벨리의 대표 유니콘으로 불리는 기업중하나입니다, 요즘 많이 어렵다는 이야기가 들리는 회사인데... 잘하겠죠 뭐 ^^)



테블렛(Tablet)에서 Posting시 문제점

- Tablet에서 Chrome을 열어 티스토리의 글쓰기 에서는 사진추가 기능이 지원되지 않습니다.

- 티스토리 애플리케이션은 사진 추가는 되지만 편집기능이 너무 초보수준입니다. 또한 가로 화면이 지원되지 않아 Keyboard까지 구비한 저에겐 살짝 아쉬운 부분이기도 합니다.

- Blog API에서 지원하는 MS Word, On Note등은 Tablet에서는 지원하지 않습니다.

- 티스토리 애플리케이션의 글쓰기에서 사진추가 후 저장하고 크롬 브라우저에서 해당 파일을 열어 글을 작성하는 방법도 있겠지만 두번 일하는것 같아 번거롭지요 ^^...


Evernote의 여러 편리한 기능을 글 작성후 티스토리의 불러오기 기능으로 포스팅 할 수있습니다. 물론 컴퓨터에서 작업하는 만큼의 컬리티가 나올지는 아직 미지수 이지만 아래와 같이 따라 하시면 쉽게 이용가능합니다.

또하나의 장점은 구글포트에 바로 억세스 됩니다, 사진찍고(구글포트에 바로 들어가지요~) 사진찾아 다른곳 돌아다닐 필요없이 그냥 구글포트에 들어가면 다 있습니다, 생각보다 많이 편리합니다.


자 시작합니다.~~


1. 에버노트기능을 이용할테니 https://evernote.com/?var=2&returning 에 회원가입을 먼저 하여야겠지요


2. 티스토리 관리 --> 플러그인 설정 --> Evernote 를 선택한후 Evernote 계정 연결하기를 눌러 회원가입한 ID / Passward를 입력합니다.


테블렛에서 Evernote로 티스토리 포스팅


3. 연결이 성공적으로 완료되면 Evernote 와 Tistory에서 아래와 같은 화면이 출력됩니다. 화면에 맞게 제가(Authorize) 또는 확인을 클릭합니다.


테블렛에서 Evernote로 티스토리 포스팅


테블렛에서 Evernote로 티스토리 포스팅


4. 자 이제 Evernote에서 포스팅할 내용을 작성한후 TAG를 '티스토리'를 만들어야 합니다, 태그를 만들지 않으면 티스토리에서 에버노트의 내용을 가져 오지 못합니다.


테블렛에서 Evernote로 티스토리 포스팅


테블렛에서 Evernote로 티스토리 포스팅


5. Evernote에서 작성한 글에 태그 '티스토리'를 붙입니다.


테블렛에서 Evernote로 티스토리 포스팅


6. 글쓰기 메뉴의 오른쪽 상단에 새롭게 생긴 Evernote 를 선택하면 티스토리 태그가 붙은 모든 노트를 불러옵니다.


테블렛에서 Evernote로 티스토리 포스팅





테블렛에서 Evernote로 티스토리 포스팅


7. 원하는 노트를 불러온 후 저장또는 편집후 글쓰기를 완성하면 됩니다.


테블렛에서 Evernote로 티스토리 포스팅


8. 아래는 포스팅 된 내용과 원본 에버노트의 화면입니다. 그대로 아주 잘 들어왔네요


테블렛에서 Evernote로 티스토리 포스팅


테블렛에서 Evernote로 티스토리 포스팅



테블만(Tablet)의 장점은 틀림없이 있는것 같습니다, 노트북 보다 가벼운 운영체재와 무게등 말이죠, 노트북 만큼은 아니지만 이정도면 기본적인 포스팅에는 문제가 없지 않을까요?

여행시 이제 무거운 노트북은 내려놓고 태블렛만 가지고 한번 다녀와 봐야겠습니다. 

테블렛(Tablet)으로 포스팅하는 방법중 더 나은 방법을 아시면 저에게도 알려주세요. ^^



공감과 댓글은 글쓴이에게 많은 힘이됩니다. ~~

블로그 이미지

naraegreen

San Francisco 및 Bay Area 지역 중심의 미국 생활 정보 블로그

,


구글 크롬이 MS의 익스플로러를 넘어 선지는 벌서 예전이지요, 제가 생각하는 구글은 사용자 중심의 편리한 서비스를 참 많이 만들어 내는 회사입니다.

그중 구글의 편리한 메모 기능이 돋보이는 편리한 메모 기능의 Google Keep 또한 제가 자주 이용하는 서비스 인데요, 블로그에 올릴 아이디어를 그때 그때 메모할때 아주 유용하게 사용하고 있습니다.


https://play.google.com/store/apps/details?id=com.google.android.keep&hl=en


Google Keep



Google Keep의 소개 동영상을 보셨다면 기본 기능은 모두 아실테지만, 제가 주로 사용하는 기능은 아래와 같습니다.

컴퓨터와 스마트 기기에 Google Keep을 설치해 두고... 스마트 기기로 웹셔핑중 메모 또는 저장해야 할 일이 생겼을때...


Google Keep Google Keep

Google Keep Google Keep

Google Keep


제가 사용하는 Google Account 로 기기에 상관없이 어디에서든 보기, 수정등이 가능합니다.

 저는 이렇게 저장해 두고 시간이 날때, 블로그 작성시 이용하곤 하는데요, 메모기능이 아쉬워 몇몇 어플을 사용해 보았는데, Google Keep은 단연 최고입니다.



공감과 댓글은 글쓴이에게 많은 힘이됩니다. ~~

블로그 이미지

naraegreen

San Francisco 및 Bay Area 지역 중심의 미국 생활 정보 블로그

,


티스토리에 포스팅을 하다보니 조금씩 더 좋은 글 보기좋은 이미 작업등을 위한 욕심이 생깁니다. 티스토리에서 제공하는 기본 기능으로 포스팅할때 가장 경제적이라는 것을 아실텐데요. 오늘은 그중 본인의 사진에 이미지 서명을 넣는 방법에 대하여 포스팅 하겠습니다.


먼저 이미지로 만든 'sfnarae.tistory.com' 글씨 사이사이에 배경이미지가 보이는 나만의 서명 파일을 만들어야 합니다.



* 'sfnarae.tistory.com' 주변으로 뒷 배경이미지가 보이는 샘플이미지 입니다.



* 저의 경우 바탕 컬러가 다양한 배경사진을 생각하여 글씨주변에 흰색을 두르고 그림자효과로 검은색을 다시 둘렀습니다.

이렇게 해두면 어떻한 사진에 적용하여도 잘 보일테지요...


* 서명으로 쓸 파일을 만든후 배경을 투명으로 지정하고 배경 투명을 지원하는 확장자 "*.bmp" 로 저장 하였습니다.


* 원하는 사진을 불러온 후 '서명' 메뉴에서 텍스트 서명 또는 이미지 서명을 선택 합니다.

텍스트 서명의 경우 원하는 텍스트를 타입핑 하면 됩니다.

이미지 서명은 만들어 둔 이미지 파일을 불러와 사용하면 됩니다. 너무 쉽죠~~ ^^


* 이미지용 서명을 만드는데 어려움을 겪으시는 분은 말씀해 주세요... 포토샵으로 만드는 법을 추가 설명하겠습니다.



공감과 댓글은 글쓴이에게 많은 힘이됩니다. ~~

블로그 이미지

naraegreen

San Francisco 및 Bay Area 지역 중심의 미국 생활 정보 블로그

,


컴퓨터 화면상에 나오는 이미지를 그대로 그림 파일로 저장하고 싶을때 아주 유용한 Awesome Screenshot 입니다.

저의 경우 블로그 작성시 없으면 안되는 필수 프로그램인데요... 이렇게 사용합니다.


크롬 브라우저용으로 설명 할께요..

먼저 해당 파일을 크롬에 인스톨 해야합니다. 크롬의 Extension을 이용, Screen Capture로 검색하시면 쉽게 찾을 수있습니다. 

크롬의 Extension 관련 설명은 링크에서 확인하세요--> http://sfnarae.tistory.com/69


또는 아래링크에서 바로 설치하실 수 도 있습니다.

https://chrome.google.com/webstore/detail/awesome-screenshot-screen/nlipoenfbbikpbjkfpfillcgkoblgpmj?utm_source=chrome-app-launcher-info-dialog


Capture 하길 원하는 화면에서 해당 아이콘을 눌러 원하는 옵션으로 Capture후 저장하면 되는데요


Awesome Screenshot


Capture Option은 현재 페이지의 보이는 화면 (Capture visible of Page), Delayed Capture (카메라의 셀카 모드), 저정한 범위 (Capture Selected Area), 전체 페이지 모드(Capture entire page) 등이 있습니다.


저의 경우 주로 'Capture Selected Area' 모드를 사용하게 되더군요


Awesome Screenshot


범위를 지정후 'Capture'를 누르면 됩니다.


Awesome Screenshot


또한 저장 하기전 Crop등의 간단한 편집 기능도 있습니다.


저와 같이 블로그에 글을 작성하시는 분들에게 아주 유용한 기능입니다. 여러 프로그램들이 있지만, Awesome Screenshot을 알게된 후 이녀석만 사용하게 되더군요..

컴퓨터 화면에 보이는 이미지를 저장하고 싶을때 사용가능한 프로그램을 찾은신다면, Awesome Screenshot은 좋은 선택이 되실겁니다.



공감과 댓글은 글쓴이에게 많은 힘이됩니다. ~~

블로그 이미지

naraegreen

San Francisco 및 Bay Area 지역 중심의 미국 생활 정보 블로그

,


블로그에 글을 작성하면서 지금 적는 이글이 많은 사람들에게 읽혀졌으면 좋겠다는 생각을 합니다. 나만의 개인 일기가 아닌 만인에게 오픈하는것 이니까요, 하여 어떻게 하면 많은 사람들에게 오픈될까를 고민하게 되는데요.

제일 중요한 매일 한건이상씩 꾸준히 글을 작성한다 그리고 언제 글을 올리는 것이 다른사람들에게 오픈될 확률이 높을지를 고민하게 됩니다.


아래 사진은 네이버 '애널리틱스'에서 분석한 제 블로그의 시간대별 방문분표 인데요, 저의 경우 오후 4시경 가장 많은 방문자가 발행하고 있습니다.


티스토리 예약기능


시간이 허락할때 마다 하루 한건씩을 목표로 글을 작성한 후 티스토리의 예약기능으로 원하는 시간에 글이 올려지도록 만들어 두는것이 여러모로 유리합니다. 글이 올려지는 시간대를 변경해 가며 어느 시간때에 글을 올리는것이 실 방문자 유입에 가장 좋은지를 검토해 볼 수 있습니다.


티스토리 예약기능


티스토리의 예약기능을 이용하는 방법은 어이없을 만큼 간단합니다. 주제 선택해 놓고 날짜, 시간 을 지정한 후 저장 하시면 됩니다.


티스토리 예약기능



공감과 댓글은 글쓴이에게 많은 힘이됩니다. ~~

블로그 이미지

naraegreen

San Francisco 및 Bay Area 지역 중심의 미국 생활 정보 블로그

,