f 터진수박 (Burst Watermelon) :: '티스토리' 태그의 글 목록
반응형

2017 최고의 블로그 사이트 (2017 Best Free Blogging Sites & Platforms)

 

 

2017년 각 블로그 사이트별 특징들.

  • 각 블로그 사이트별 특징들은 아래와 같으며, 각각의 특징들을 추가적으로 업데이트될 예정입니다.

 

 

 

 

블로그 사이트들 (Blog sites)

 

 

최고의 블로그 사이트는? (Best Blog Site?)

필자가 생각하는 최고의 블로그 사이트는 개인 서버 또는 호스팅 업체를 이용한 워드프레스입니다. 워드프레스는 시각적으로 알아보기 쉽게 되어있어 초보자도 드래그 앤 드롭 방식으로 사이트를 꾸밀 수 있으며, 소스코드를 마음대로 수정할 수 있도록 되어있기때문에 전문가들도 아주 편리하게 이용할 수 있습니다. 또한, 수 많은 테마와 플러그인들이 있어 부족한 기능을 찾기 어려울 정도입니다.

 

업데이트 글 보기 (For more information, visit main hompage) : http://gturl.iptime.org

반응형
블로그 이미지

Burst Watermelon

교육의 모든 정보,투자,부동산,유용한 정보들

,
반응형

티스토리 공감 버튼에 문구 추가 Tistory empathy button

 

 

 

티스토리를 운영하다보면 가끔 사람들이 보고가는지 아니면 글의 내용이 부족해서 관심이 없는것인지 알고 싶은 경우가 있습니다. 이런 경우 티스토리에서는 "공감"이라는 버튼을 추가해놓아서 방문자들이 해당글이 좋은지 표현하고 갈 수 있게되어있습니다. 단순히 공감버튼만으로 만족이 안되는경우, 추가 문구를 넣어서 방문자들에게 공감버튼을 잘 보이게끔 할 수 있습니다.

 

공감 버튼이 추가된 글의 구조 파악

  • 공감 버튼이 생성된 글의 소스코드를 보면 아래와 같은 구문이 추가되어있습니다.
  • 각각 Class와 ID가 주어져있는것을 볼 수 있습니다.

<div class="daum_like_wrapper"><iframe class="daum_like_button" id="daum_like_button_659" frameborder="0" scrolling="no" allowTransparency="true" </iframe></div>

 

공감문구를 삽입하기 위한 제이쿼리 스크립트 추가

 

  • 공감버튼 부분에 문구를 추가하기 위해선 JQuery(제이쿼리)를 사용해야합니다.
  • 관리자 메뉴에서 꾸미기 - HTML/CSS 메뉴를 클릭해서 HTML 편집기로 갑니다.
  • <head> 와 </head> 사이에 아래 스크립트를 삽입합니다.

<script src="http://code.jquery.com/jquery-git.js"></script>

 

문구를 삽입하기 위한 위치 지정 및 문구 삽입

 

  • </body> 바로 윗부분에 아래 스크립트를 삽입합니다.
  • 여기서 ".insertAfter"는 공감버튼 바로 아랫부분에 문구가 추가되며, ".insertBefore"로 변경하면 공감버튼 바로 윗부분에 문구가 추가됩니다.

<script type='text/javascript'>
$('<p><center><font color="#b30000"><strong>"공감"</font>은 로그인 없이 클릭만으로 큰 힘이 됩니다.</strong></center></p>').insertAfter($('.daum_like_button'));
</script>

 

  • 이 스크립트는 모바일 버전에서는 적용되지 않습니다. (데스크탑 버전에서만 적용됩니다.)

 

업데이트 글 보기 (For more information, visit main hompage) : http://gturl.iptime.org

반응형
블로그 이미지

Burst Watermelon

교육의 모든 정보,투자,부동산,유용한 정보들

,
반응형

사이트맵 생성 프로그램 Sitemap generator

사이트맵이란? (What is Sitemap?)

사이트맵은 홈페이지나 블로그의 지도를 XML 형식의 파일로 나타내주는 파일입니다. 구글, 네이버, 다음, 야후와 같은 검색 사이트가 방문자가 특정 단어를 검색하면 이 파일을 가지고 가장 빠르게 검색 결과에 본인의 홈페이지나 블로그를 보여줄 수 있도록 해주는 일종의 지도입니다. Sitemap의 가장 간단한 형식은 검색 엔진에서 사이트를 보다 지능적으로 크롤링할 수 있도록 각 URL에 대한 추가 메타데이터(마지막 업데이트된 날짜, 변경 빈도, 사이트의 다른 URL에 상대적인 중요도)와 함께 사이트에 대한 URL을 나열하는 XML 파일입니다. (Sitemaps are an easy way for webmasters to inform search engines about pages on their sites that are available for crawling. In its simplest form, a Sitemap is an XML file that lists URLs for a site along with additional metadata about each URL (when it was last updated, how often it usually changes, and how important it is, relative to other URLs in the site) so that search engines can more intelligently crawl the site.)

 

사이트맵 형식 (Sitemaps XML format)

Sitemap 프로토콜 형식은 XML 태그로 구성됩니다. Sitemap의 모든 데이터 값은 엔티티 이스케이프되어야 하며 파일 자체는 UTF-8로 인코딩되어 있어야 합니다. Sitemap은 다음 사항을 만족해야 합니다.

  • 여는 <urlset> 태그로 시작해 닫는 </urlset> 태그로 끝납니다.
  • <urlset> 태그 안에 네임스페이스(프로토콜 표준)를 지정합니다.
  • 각 URL의 <url> 항목을 상위 XML 태그로 포함시켜야 합니다.
  • 각 <url> 상위 태그에 <loc> 하위 항목을 포함시켜야 합니다.

 

사이트맵 업데이트는 언제 해야 되나요? (How often should I update my sitemap?)

Sitemap은 해당 사이트의 컨텐츠 구성을 나타내주는 일종의 지도이므로 새로운 컨텐츠를 생성할때마다 업데이트를 해줘야 합니다. 즉, 매일 매일 새로운 글을 블로그에 업데이트를 하면, 그 때마다 새로 사이트맵을 생성해서 검색 사이트에 다시 등록해야합니다. 워드프레스와 구글 블로거와 같은 경우 사이트맵을 자동적으로 매일 업데이트되므로 이러한 번거로움이 없지만, 티스토리 같은경우 매일매일 업데이트를 수동으로 해주고 검색 사이트에도 등록해줘야 합니다.


온라인 사이트맵 생성기 (Online web-based sitemap generator)

 

컴퓨터 설치방식 사이트맵 생성기 (Offline free sitemap generator - Need to install)

  • Visual SEO Studio (Download at here!!!)
    • Crawl and see on-site issues with ease
    • Comprehensive SEO suggestions to guide you
    • Full control of your XML Sitemaps
    • Community Edition is Free
    • 30-day Trial of the Professional Edition

 

  • G-Mapper (Download at here!!!) : G-Mapper is a free, unlimited, HTML, RSS and Google XML Sitemap generator compatible with all major search engines including Google, Bing, Baidu, Yandex and more. Sitemaps tell search engines when and how often pages are updated, and their relative importance to improve your website coverage and ranking.
    • Automatically spider your website
    • Full support for the sitemap.org 0.9 protocol
    • HTMLXMLRSS, and text sitemap formats
    • Compatible with Google, Yahoo, Microsoft Bing and more
    • Support for Google sitemap images 1.1
    • Easy manual editing of files individually or in batch
    • Fully configurable with simple sitemap configuration wizard
    • Unlimited sitemaps each with their own configuration
    • Unlimited number of files and folders in a sitemap
    • Automatic spidering of pages and their meta data
    • GZIP compression for faster upload
    • Upload your sitemaps to your server using FTP
    • Ping Google, Yahoo, Microsoft Bing and Ask
    • For more information see the quick tour or detailed help

 

  • GWebCrawler & Google Sitemap Creator (Download at here!!!)
    • Include only if URL contains field
    • Exclude URLs containing field
    • URL variables to parse out - only one variable is supported as of now
    • Save / Load Form's settings
    • Save / Load Queue file
    • Create Google Sitemap XML file
    • See the Queue list while processing
    • Thread Priority can be set while script is running
    • Show details of processing as how many unique urls were parse out, which one is being processed...
    • Shows current version in real time

 

 

업데이트 글 보기 (For more information, visit main hompage) : http://gturl.iptime.org

반응형
블로그 이미지

Burst Watermelon

교육의 모든 정보,투자,부동산,유용한 정보들

,
반응형
  • 다음에서 제공하는 블로그 플랫폼인 티스토리의 경우 다음 애드핏이라는 모바일 전용 광고를 설치할 수도 있지만, 외부 광고도 부착할 수 있게 허용되어 있습니다. 블로그의 수익성을 확보하기 위해서는 다음에서 제공하는 애드핏으로는 수익이 많지 않으므로, 구글에서 제공하는 애드센스가 필수적입니다.

 

대표적인 광고로 구글의 애드센스를 설치하는 방법입니다.

  • 먼저, 본인의 구글 애드센스 사이트에 접속합니다. (https://www.google.com/adsense)
  • 왼쪽 메뉴에서 "내 광고 - 광고 단위"를 클릭합니다.
  • 티스토리에 설치할  "새 광고 단위"를 만듭니다. (일반적으로 반응형으로 만듭니다.)

 

  • 새로운 광고가 만들어졌으면, 해당 광고의 소스코드를 복사하여 메모장에 붙여놓습니다.

 

  • 티스토리 관리 - 플러그인 - 플러그인 설정 - 수익 (오른편 화면 중간 윗부분) 을 차례대로 클릭합니다.

 

  • 구글 애드센스 항목의 오른편 톱니바퀴 모양을 클릭합니다.

 

  • 각각의 광고 배치에 따라서 아까 메모장에 복사해놓은 광고 소스코드를 붙여넣기하고 밑의 저장 버튼을 클릭합니다.

 

  • 완성 후 약 30~ 1시간안에 광고가 나타나기 시작합니다.

 

여기서부터는 티스토리 중간 광고 삽입 방법입니다.

  • 티스토리에서는 자동으로 중간광고 삽입해주는 기능이 없으므로, 새로운 글을 포스팅할때마다 일일이 광고를 넣어줘야하는 번거로움이 있습니다.
  • 새 글을 완성하기전, 오른편 상단의 "HTML" 부분의 체크표시를 합니다.

 

  • 그러면, 새로운 글의 소스코드가 보이는데, 광고를 보이게하고 싶은 위치를 정해서 앞에서 복사해두었던 구글 애드센스의 새 광고 소스코드를 붙여넣습니다.

 

업데이트 글 보기 (For more information, visit main hompage) : http://gturl.iptime.org

반응형
블로그 이미지

Burst Watermelon

교육의 모든 정보,투자,부동산,유용한 정보들

,
반응형
  • 홈페이지나 블로그를 운영할 경우, 방문자들이 좋은글이나 유용한글을 본인 소셜미디어 계정으로 복사해가거나, 프린트하기, 전달하기 등을 이용할 수 있도록 만들어주는 플러그인입니다.
  • 요즘같이 다양한 소셜미디어가 사용되는 시대에, 각국마다 인기있는 여러가지 소셜미디어들이 사용되는데 일일이 찾아다니는 번거로움을 줄여주고 한번에 다양한 소셜미디어 공유하기 버튼을 만들어 줍니다.
  • 먼저 애드디스 사이트에 가입해서 계정을 만듭니다. (https://www.addthis.com/)
  • 그리고 Add Profile 버튼을 클릭하여 사이트에 부착할 새로운 공유버튼 플러그인을 만듭니다.

 

  • Profile 이름을 입력합니다.

 

  • 방문자에게 보여줄 소셜미디어 공유버튼을 만듭니다.

  • 여러가지 방식 중 제일 많이 사용하는 공유하기 버튼 부착형인 첫번째 아이콘을 클릭합니다.

 

  • 사이드바 방식, 글 중간 삽입방식, 확장형 등 여러가지 방식들 중 원하는 타입을 선택합니다.

 

  • 워드프레스의 경우 따로 워드프레스 플러그인을 메뉴에서 설치하시면 됩니다. 그 외에 사이트에는 아래와 같이 </body>가 끝나는 부분에 직접 HTML 소스코드에 Addthis 스크립트를 삽입하는 방식으로 설치합니다.

 

  • 구글 블로거 (GoogleBlogger)의 경우 아래 소스코드처럼 본문밑이나 라벨윗부분 또는 기존 공유버튼을 삭제하고 그 자리에 삽입할 수 있습니다.


  • 다음 티스토리의(Tistory)의 경우 아래와 같이 본문이 삽입되는 소스코드 바로 밑에 삽입하기도 합니다. (티스토리 태터데스크를 사용할 경우 Addthis 플러그인이 작동하지 않습니다. 따라서 태터티스크를 사용하지 않아야 이 플러그인이 정상적으로 보입니다.)

 

  • 정상적으로 설치하였으면, 아래와 같이 각각 설치한 플러그인이 보입니다.

 

업데이트 된 글 보기 (For more information, visit main hompage) : http://gturl.iptime.org

 

접속 안될 때 (When you can't access to main homepage) : http://burst-watermelon.blogspot.com

반응형
블로그 이미지

Burst Watermelon

교육의 모든 정보,투자,부동산,유용한 정보들

,
반응형
  • 다음 티스토리를 운영하면서 마우스 우클릭 또는 드래그를 방지하는 기능이 필요한 경우가 생깁니다. 이 경우 코드를 삽입하여 두 기능을 활성화 시킬 수 있습니다.
  • 먼저 "티스토리 관리 - 꾸미기 - HTML/CSS 편집"을 차례대로 클릭합니다.


  • 오른편 소스코드에서 <Body>를 찾기로 검색합니다. (CTRL + F 키를 눌러서 검색)


  • 해당 코드를 아래와 같이 변경합니다.
<body id="" oncontextmenu="return false" onselectstart="return false" ondragstart="return false">


업데이트 된 글 보기 (For more information, visit main hompage) : http://gturl.iptime.org

 

접속 안될 때 (When you can't access to main homepage) : http://burst-watermelon.blogspot.com

반응형
블로그 이미지

Burst Watermelon

교육의 모든 정보,투자,부동산,유용한 정보들

,
반응형
  • 티스토리를 운영하면서 광고를 넣을 경우, 구글의 애드센스 광고를 삽입하거나 또는 다음에서 운영하는 다음 애드핏 광고를 삽입할 수 있습니다. 이번글은 다음에서 운영하는 다음 애드핏 광고를 신청하는 방법에 대해 알려드리겠습니다.
  • 애드핏 광고는 모바일에서만 작동합니다. 일반 데스크탑에서는 보이지 않습니다.



  • 위쪽 탭중에 광고관리탭에서 "새 매체" 버튼을 클릭합니다.


  • 매체명을 입력하고 매체유형은 "Web" 을 선택합니다. 매체 고유값은 원하는 이름으로 입력 후 파랑색 등록하기 버튼을 클릭합니다.


  • 광고 단위 이름을 입력하고 모바일에서 광고가 보일 위치를 선택한 후 밑의 파랑색 버튼을 클릭합니다.


  • 광고의 스크립트가 발행되면 복사를 해놓습니다.


  • 티스토리의 관리메뉴에서 플러그인 메뉴로 들어가면 수익분야에서 다음 애드핏을 선택한 후, 복사해놓았던 스크립트를 붙여넣기하면 완성됩니다.
  • 위와 같이 완료 후, 모바일로 들어가면 광고가 보이는데 실제 승인된것이 아니기때문에, 다음에서 심사 후 승인될때까지 기다려야 합니다. (보통 2~3일 정도 걸립니다.)


업데이트 된 글 보기 (For more information, visit main hompage) : http://gturl.iptime.org

 

접속 안될 때 (When you can't access to main homepage) : http://burst-watermelon.blogspot.com

반응형
블로그 이미지

Burst Watermelon

교육의 모든 정보,투자,부동산,유용한 정보들

,
반응형
  • 티스토리(Tistory) 플랫폼의 경우 자체적으로 사이트맵을 생성하는 기능이 없습니다. 또한 따로 플러그인을 통해서 사이트맵을 지원하지 않습니다. 따라서, 따로 사이트맵 파일을 생성한 다음, 직접 링크를 걸어서 등록하는 방법밖엔 없습니다. 사이트맵 파일을 생성하는 방법은 다른 글에서 소개하고 있으니 참고하시면 됩니다.
    • 네이버 웹마스터에 티스토리 사이트맵 (Sitemap) 등록 방법 : 바로가기!
    • 빙(Bing) 검색 등록 방법 (Bing search engine registration) : 바로가기!
    • 다음(Daum) 검색 등록 방법 (Daum search engine registration) : 바로가기!



  • 먼저 본인의 티스토리 관리사이트에서 왼편 위의 "글 쓰기" 메뉴를 클릭합니다. 제목은 알아보기 쉽게 정합니다.


  • 아이콘 메뉴중 "파일"을 클릭하여 Sitemap.xml 파일을 업로드하여 발행합니다.


  • 해당 글보기를 하여, 첨부 파일에서 오른쪽 마우스 버튼을 눌러서 "속성" 메뉴를 클릭합니다.


  • 해당 Sitemap.xml 파일의 주소가 나오면, 복사를 하여 각각의 검색엔진 사이트에서 요구하는 사이트맵 주소에 입력합니다.


업데이트 된 글 보기 (For more information, visit main hompage) : http://gturl.iptime.org

 

접속 안될 때 (When you can't access to main homepage) : http://burst-watermelon.blogspot.com

반응형
블로그 이미지

Burst Watermelon

교육의 모든 정보,투자,부동산,유용한 정보들

,
반응형
  • 일반적으로 검색엔진 사이트에 등록을 하기 위해선, 등록할 사이트의 구조가 적혀있는 파일을 요구합니다. 이때 필요한 파일이 Sitemap.xml 파일입니다. 보통 이 파일은 사이트 제작 플랫폼에서 자체적으로 지원하거나 또는 플러그인으로 지원되기도 합니다만, 티스토리와 같인 형태의 블로그는 자체적이거나 플러그인으로도 지원되지 않습니다. 따라서 사이트맵을 생성해주는 사이트에서 직접 만들어서 업로드해야합니다.




  • 파일을 생성할 사이트의 주소를 입력하고, 보안 문자를 입력합니다. 그 이외의 다른 옵션은 그대로 놔두고 맨 아랫부분의 "Create free XML Sitemap" 버튼을 클릭하면 파일이 만들어집니다.


  • 파일이 다 만들어졌으면 아랫부분의 "download your Sitemap" 링크를 클릭합니다.


  • 오른편의 Download 링크를 클릭하여 저장하면 사이트맵 파일이 완성됩니다.


업데이트 된 글 보기 (For more information, visit main hompage) : http://gturl.iptime.org

 

접속 안될 때 (When you can't access to main homepage) : http://burst-watermelon.blogspot.com

반응형
블로그 이미지

Burst Watermelon

교육의 모든 정보,투자,부동산,유용한 정보들

,
반응형


  • 사이트맵을(Sitemap) 등록할 사이트를 클릭합니다. 아직 등록이 안되어있으면 아랫부분의 초록색 "추가" 버튼을 눌러 사이트 등록을 합니다.



  • 왼편 메뉴 중 "요청" 메뉴를 클릭한 후, "사이트맵 제출"을 클릭합니다.



  • 사이트맵 제출 주소란에 본인의 티스토리 뒷편에 등록된 사이트맵 파일 주소를 끝에 붙여서 입력합니다. 만약 없다면, 사이트맵 파일 만들기 글을 참고하세요.



  • 위와 같이 등록된 화면이 나옵니다.



  • 왼편 메뉴의 "현황" - "사이트 최적화"를 클릭하면, 아래 부분에 사이트맵이 제대로 등록되었는지 확인 가능합니다.


업데이트 된 글 보기 (For more information, visit main hompage) : http://gturl.iptime.org

 

접속 안될 때 (When you can't access to main homepage) : http://burst-watermelon.blogspot.com

반응형
블로그 이미지

Burst Watermelon

교육의 모든 정보,투자,부동산,유용한 정보들

,
반응형


  • RSS 등록할 사이트를 클릭합니다. 아직 등록이 안되어있으면 아랫부분의 초록색 "추가" 버튼을 눌러 사이트 등록을 합니다.


  • 왼편 메뉴 중 "요청" 메뉴를 클릭한 후, "RSS 제출"을 클릭합니다.



  • RSS 제출 주소란에 본인의 티스토리 뒷편에 "/RSS" 를 끝에 붙여서 입력합니다. (예 : http://등록된주소이름.tistory.com/rss)


  • 위와 같이 등록된 화면이 나옵니다.


  • 왼편 메뉴의 "현황" - "사이트 최적화"를 클릭하면, 아래 부분에 RSS 가 제대로 등록되었는지 확인 가능합니다.


업데이트 된 글 보기 (For more information, visit main hompage) : http://gturl.iptime.org

 

접속 안될 때 (When you can't access to main homepage) : http://burst-watermelon.blogspot.com

반응형
블로그 이미지

Burst Watermelon

교육의 모든 정보,투자,부동산,유용한 정보들

,
반응형
  • 티스토리 블로그를 운영하면서 공개되어 있는 스킨을 적용시 배경화면을 변경하는 방법입니다.
  • 티스토리 관리 - HTML/CSS 편집 메뉴로 들어가면 아래와 같이 Body 구분으로 시작하는곳이 있거나 아니면 없으면 추가합니다.
body {

background-color: #fff;

background-image: url('./배경화면파일명.jpg');

background-attachment: fixed;

background-repeat: no-repeat;

background-position: center center;

background-size: cover;

}


  • 위와 같이 변경하시면 됩니다.


  • CSS 배경관련 명령어
    1. background-image: url(이미지주소);
    2. background-size:
      1. auto; 원본 크기
      2. 100px; 픽셀크기 지정
      3. 50%; 비율 지정
      4. contain; 가로 세로 비율 유지, 이미지 중심으로 늘려준다 (화면 크기에 따라서 배경화면이 잘리거나 빈 공간이 생길 수 있습니다.)
      5. cover; 가로 세로 비율 유지, 요소 중심으로 커진다
    3. background-repeat:
      1. repeat; 반복 채움
      2. no-repeat; 반복 없이 하나만
      3. repeat-x; 가로만 반복
      4. repeat-y; 세로만 반복
    4. background-attachment:
      1. scroll; 스크롤을 움직임에 맞춰서 배경이 위로올라가거나 아래로 내려간다
      2. fixed; 배경이 고정됨 (스크롤을 움직여도 배경만 그대로)
    5. background-position : center / left / right / top / bottom; 기준위치
      1. 0% 0%; 좌측상단
      2. 100% 100%; 우측하단


업데이트 된 글 보기 (For more information, visit main hompage) : http://gturl.iptime.org

 

접속 안될 때 (When you can't access to main homepage) : http://burst-watermelon.blogspot.com


반응형
블로그 이미지

Burst Watermelon

교육의 모든 정보,투자,부동산,유용한 정보들

,