레이블이 Blogger인 게시물을 표시합니다. 모든 게시물 표시
레이블이 Blogger인 게시물을 표시합니다. 모든 게시물 표시

locked blog

아침에 블로거가 google spam 정책 위반으로 삭제(locked blog)됐다는 메일을 받았다.
실제 접속하니 삭제 됐다는 안내와 블로거가 보이지 않았다.
누군가 신고를 한것 같은데 어처구니가 없어 메일에 포함된 링크로 검토 요청을 했다.

그리고 몇시간 지나서 다음과 같이 복구 됐다는 메일과 함께 블로그가 보였다.

blogger postQuickEdit widget

# blogger 포스트를 빠르게 수정할 수 있는 postQuickEdit 가 언제부터인가 보이지 않는다.
# 다음 코드로 포스트 하단에 'edit' 가 보여야 하는데 안보인다.
<b:includable id='postQuickEdit' var='post'>
    <b:if cond='data:post.editUrl'>
        <span expr:class='&quot;item-control &quot; + data:post.adminClass'>
            <a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>edit</a>
        </span>
    </b:if>
</b:includable>

# 게시물 설정에도 수정할 수 있는 항목이 사라졌다.(예전에 있었다.)

# 찾아보니 quickedit 버튼을 post widget 에서 더이상 지원하지 않는다고 한다.

# 이제 포스트 수정을 하려면 관리자 화면에서 포스트를 찾아 클릭해서 수정해야 한다.
# 로그인 상태에서 다음 페이지로 접속해서 수정해야 한다.
# 글 생성, 수정, 삭제시 --> https://www.blogger.com/
# 이미지 삭제시 --> https://www.blogger.com/mediamanager

# 수정 스텝이 더 많아졌다.
# 블로거 포스트 수정은 정말 기본으로 제공돼야 하는데 왜 제외했는지 이해가 안간다.
# 그리고 별도 공지도 없고... 구글이 블로거 서비스 운영을 못하는것 같다.

device-width deprecated

blogger 를 모바일 브라우져로 보면 width 폭이 작게 잡힌다.
유튜브와 같은 고정폭(width="560")의 iframe 경우 동영상 영역이 body 밖으넘어 가게 된다.
다음과 같이 device-width 로 모바일에서도 폭을 자동으로 계산하도록 되어 있었다.

<meta content='width=device-width, initial-scale=1' name='viewport'/>

그런데 device-width 는 deprecated 된 기능이다.
크롬의 경우 버전1 (Released 2008-12-11)
엣지의 경우 버전12 (Released 2015-07-28)
까지만 지원된다고 한다.

위 라인을 삭제하니 모바일에서도 데스크톱과 같은 화면으로 볼 수 있다.

그리고 이제는 다음과 같이 media 쿼리로 각 width 에 맞게 css 설정을 분기한다.

google 기본 계정 설정

[문제]
google blogger(블로거)에 로그인하면 관리 페이지는 로그인 됐지만 실제 블로그를 보면 로그아웃 된 상태다.

[해결방법]
구글 계정이 여러개 있는 경우 이중 1개를 기본 계정으로 설정할 수 있다.
블로거를 사용하는 계정을 기본 계정으로 설정해야 한다.
모든 계정들을 로그아웃하고 기본으로 할 계정을 맨처음으로 로그인하면 기본 계정이 된다.
구글 계정 사이트에서도 기본 계정을 설정하는 메뉴가 없어 아쉽다.

블로그 검색환경 설정

# 블로그 검색이 잘되기 위해 클롤러가 참고 하는 robots.txt 파일 추가
https://support.google.com/webmasters/answer/6062596?hl=ko
https://yoonbh2714.blogspot.com/robots.txt
# 다음 URL 에서 robots.txt 를 체크할 수 도 있다.
https://www.websiteplanet.com/ko/webtools/robots-txt/
# 모두 허용하는건(Allow: /) 관행상 명시하지 않는다고해서 뺐고
# full access 를 위해 Disallow: 후 아무것도 명시하지 않았다.
https://varvy.com/robottxt.html
User-agent: *
Disallow:

# 하지만 full access 를 위해 robots.txt 사용하지 않아도 된다.
# 사용하지 않으면 아래와 같이 자동 생성한다.
curl -L http://yoonbh2714.blogspot.com/robots.txt
User-agent: Mediapartners-Google
Disallow:

User-agent: *
Disallow: /search
Allow: /

Sitemap: https://yoonbh2714.blogspot.com/sitemap.xml

# adsense 가 적절한 광고 제공될 수 있도록 ads.txt 추가
# adsense 에서는 ads.txt 파일을 추가를 적극적으로 권하고 있고
# 없으면 수익에 심각한 문제을 줄 수 있다고 경고 알람이 뜬다.
https://support.google.com/adsense/answer/7532444?hl=ko&authuser=0
https://yoonbh2714.blogspot.com/ads.txt
# google.com : 광고 시스템 도메인 (필수)
# pub-9514982437850392 : 게시자 ID (필수)
# DIRECT : google 이 게시자를 직접 관리한다는 의미 (필수)
# f08c47fec0942fa0 : google.com 에 대한 인증서 권한 ID (옵션)
google.com, pub-9514982437850392, DIRECT, f08c47fec0942fa0

# blogger 에 ads.txt 파일을 생성했지만
# 몇달이 지나도 adsense 에서 아래 알람이 계속 뜨고 있다.
"[조치 필요] ads.txt를 사용하여 수입을 보호하세요."

# 이 이슈는 아직 원인도 해결도 되지 않았다.
https://support.google.com/blogger/thread/11375660?hl=en

blogger 원복 후기

wordpress(워드프레스) 테마 중 맘에 드는 “twenty fifteen” 가 있는데 블로거 템플릿과 호환이 된지 않는다. 클린,심플,가독성도 좋고 딱인데… 블로거에서 사용할 수가 없다.
https://wordpress.org/themes/twentyfifteen

블로거는 css javasscript 등이 xml 파일 하나로 구성되어 있다.wordpress theme -> blogger templete 으로 변경가능한지 구글링했지만 결국 찾지못함…ㅠ 비슷한 특징의 템플릿을 찾다가 “orbit” 을 발견, 깔금한 디자인이 twenty fifteen 과 많이 닮았다. 그런데 이것도 블로거에 적용 못함.ㅠ
https://github.com/xriley/Orbit-Theme

처음에는 테마를 변경하려고 했던것이 구글 블로거 관련해서 이것저것 찾아보게 되었고, 구글블로거도 블로거 전용 테마를 사용한다는 제한을 새삼스럽게 깨닫게 되었다. 예전 네이버 블로그의 폐쇄적인 점이 맘에 들지 않아 구글블로그로 힘겹게 마이그레이션 했었다.(포스트 백업이 안되 일일이 copy & paste 노가다 했던 힘든 기억이..ㅠㅠ)
구글이 블로그에 별로 관심이 없는지 꽤 오랜시간동안 업데이트가 되지 않고 있다. html 코드를 편집할 수 있지만 정해진 레이아웃과 템플릿을 벗어나기가 힘들다. 결국 워드프레스로 이사하기로 하였다. 워드프레스에서 구글 blogger 백업 파일을 불러올수 있어 다행히 마이그레이션에 큰 문제가 없었다.

ysoftman.wordpress.com 으로 이사를 하고 "twenty fifteen" 스킨을 적용해서 좋긴한데...

문제 발생!!!

1. 워드프레스로 마이그레이션 후 기존 ysoftman.blogspot.com 블로그를 완전 삭제하니 url 도 사용할 수 가없는 불상사가 발생했다. 원래는 워드프레스로 이사했다는 포스트를 남기려고 했는데… ㅠㅠ (삭제 전에 url 을 다시 사용할 수 없다는 주의 사항을 알아채지 못했다.ㅠ)

2. 워드프레스로에 테마, 다양한 플러그인이 많기 한데 유료가 많고, 가입형태인 wordpress.com 에서는 테마를 커스터마이징 하려면  돈은 내야한다.ㅠ 이건 blogspot 보다 않좋다. 설치형 wordpress.org 가 모든 기능이 제한 없이 사용할 수 있지만 호스팅 환경을 개인이 마련해야 된다.

3. 워드프레스에서 글쓰기시 개행을 위해선 Shift + Enter 를 사용해야 한다. Enter 는 문단 분리로 2줄이 개행된다. 이건 일반적인 편집방식이 아니라 익숙해지가 힘든 부분이다.

4. 블로거의 태그 부분이 워드프레스에서는 카테고리로 마이그레이션되었다. 글쓸때 구글블로거의 경우 태그 입력시 자동완성되어 쉽게 입력할 수 있는 반면 워드프레스에서는 체크박스 리스트에서 일일이 체크해야 한다. 카테고리 항목이 너무 길면 체크하는것 자체도 꽤 거슬린다.

뭐. 이래 저래 첨에 워드프레스 깔끔한 스킨이 맘에 들어 좋았는데 몇일 써보니 구글블로거가 내게는 맞는것 같다.

다시 구글 블로그로 복귀 했지만, ysoftman.blogspot.com 도메인을 사용 못하는 문제를 남기고 말았다..ㅠㅠ 구글링해봐도 완전 삭제한 블로그 주소는 그 누구도 다시 사용할 수 없다고 나온다. yoonbh2714.blogspot.com 을 임시 사용하려고 했는데 계속 쓰게 생겼다~ㅋ 혹시나 시간이 지나면 삭제 주소를 다시 사용할 수 있을까봐 100일이 지난 후에 다시 시도해봤지만 아래와 같이 여전히 "블로그가 삭제되었습니다." 라면서 사용할 수 없는 주소로 나오고 있다. yoonbh2714.blogspot.com 을 쓸 수밖에 없다. ㅠ

blogger post footer 변경하기.

blogger(블로거) 포스트 foot(아래부분)에 수정할때 반영이 잘되지 않는 문제가 있다.
"작성자" 를 빼고 "라벨" 을 위로 올려 한줄로 표현하려고 레이아웃의 포스트 부분 수정을 해봤지만 제대로 적용되지 않아 다음과 같이 보여진다.
변경 전


적용 결과 상태
작성자 제거 : 성공
라벨 1번째 라인으로 이동 : 실패
댓글 앞에 공백 제거 : 실패
변경 후 제대로 적용되지 않음


[해결방법]
템플릿 코드를 다음과 같이 수정하자.
<!--
ysoftman
post-footer-line post-footer-line-1 에서 사용하지 않는 코드는 삭제하여 여백 없애기
post-footer-line post-footer-line-2 post-labels 내용 이동
-->
<span class='post-labels'>
<b:if cond='data:top.showPostLabels and data:post.labels'>
    <data:postLabelsLabel/>
    <b:loop values='data:post.labels' var='label'>
    <a expr:href='data:label.url' rel='tag'>
        <data:label.name/>
    </a>
    <b:if cond='not data:label.isLast'>
        ,
    </b:if>
    </b:loop>
</b:if>
</span>

수정 결과

blogger 이미지 테두리 공백 및 그림자 제거하기

블로거에서 제공하는 기본 템플릿을 사용하다 보면 블로거상의 표시되는 이미지들(프로필 이미지, 포스트에 추가된 이미지등)의 테두리에 공백이 포함되어 있는걸 알 수 있다.

이를 공백을 제거하기 위해 블로거 템플릿 -> HTML 코드 편집 -> ".post-body img, .post-body .tr-caption-container, .Profile img," 로 검색하면 다음과 같은 코드를 찾을 수 있다.

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
  padding: 2px;
  background: #ffffff;
  border: 1px solid #eeeeee;
  -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
  -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}

이미지의 shadow(그림자)부분 관련해서 box-shadow 라는 그림자 색상을 rgba 값으로 조정할 수 있다.

padding  값을 0으로 수정하면 이미지 테두리 공백을 제거할 수 있다.
위 코드에서 볼 수 있듯이 post-body img(포스트에 포함된 이미지) , Profile img(프로필 이미지) 등에서 모두 적용이 된다.
만약 적용이 되지 않는다면 {} 안의 내용을 다음과 같이 수정해보자.
참고로 !important 라는 키워드는 가장 먼저 강제 적용시 사용된다.

padding: 0 !important;
border: none !important;
background: none !important;
-moz-box-shadow: 0px 0px 0px transparent !important;
-webkit-box-shadow: 0px 0px 0px transparent !important;
box-shadow: 0px 0px 0px transparent !important;

blogger 왼쪽 여백 제거하기

blogger 기본 템플릿을 브라우저 폭을 줄이면 아래 그림처럼 블로거 왼쪽 공간이 좁혀지지 않는다. 사실, 왼쪽,오른쪽,아래쪽에 여백이 생긴다.
(모니터에 브라우저의 폭을 줄여서 보면 쓸데없는 왼쪽 공간으로 블로그 내용이 그만큼 한눈에 들어오지 않는 문제가 있다.)




chrome debug(F12) 로 찾아본 결과 다음과 같이 body-fauxcolumn-outer 의 padding 값이 설정되어 있었다. padding 을 다음과 같이 0으로 수정하여 여백을 없앨 수 있다.

body, .body-fauxcolumn-outer {
  font: normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
  color: #222222;
  background: #eeaa00 none repeat scroll top left;
  /*
  ysoftman 왼쪽,오른쪽,아래 여백 없애기
  padding: 0 40px 40px 40px;
  */
  padding: 0 0 0 0;
}

Google 광고 AdSense 추가하기

구글의 광고 플랫폼 AdSense 를 Blogger 에 적용해 보자.
우선 blogger 설정 -> 수익 -> 애드센스에서 신청하고, 광고 위젯을 추가한다.
그러면 아래와 같이 adsense 검토를 시작한다는 메일을 받게 된다.
검토 기간 중에는 광고가 빈화면으로 표시된다.


약 2일 정도 지나서 검토에 문제가 없다면 아래와 같이 승인 메일을 받게 되고, 블로그에 광고가 기재 된다.
참고로 컨테츠 부족이나 기타 다른 이유로 거절되는 경우도 있다고 한다.


이제 내 블로그에 적절한 광고가 알아서 표시된다.
기본적으로
설정 -> 수익 -> 애드센스 에 메뉴와 글에 광고를 표시하는 할 수 있는데,
다른 위치에 광고를 표시하고 싶다면
블로그 설정 -> 레이아웃 -> 원하는 위치에 adsense 위젯을 추가할 수도 있다.
참고로 광고의 크기등 설정을 변경하여 적용하면 광고가 한동안 표시되지 않을 수 있다.
아마 adsene 가 해당 크기에 맞는 광고를 다시 선택하고 적용하는데 시간이 걸리는것 같다.

[지급 정보 설정]
광고를 통해 수입이 일정(10달러) 이상 쌓였다면 아래 사진과 같은 PIN 번호가 적힌 우편물을 통지 받는다.
PIN 번호를 입력하여 내 주소를 확인하도록 한다.


참고로 클릭하지 않으면 광고의 50%이상 화면에 노출되어야 하는것 같다.

Blogger 에 최근 댓글 위젯 추가하기

구글 블로거를 사용해보면 국내 대부분의 블로거 서비스에는 기본적으로 제공하고 있는 (최근 댓글 보기 같은...) 기능들을 제공해주지 않는 것을 알 수 있다.
이럴 때 유용하게 사용하는 것이 HTML/Javascript 로 위젯(Widget/Gadget)을 추가해주는 것이다.
http://helplogger.blogspot.kr/ 에서 다양한 기능들을 제공해주고 있다.

최근 댓글 위젯을 추가해보자
자세한 내용은 http://helplogger.blogspot.kr/2012/03/recent-comments-widget-for-blogger.html

블로그 설정 -> Layout -> Add a Gadget -> HTML/JavaScript -> 아래 코드를 추가해준다.
그리고 아래 your-blog-name 부분을 자신의 블로그 이름으로 수정한다.

<script style=text/javascript src="http://helplogger.googlecode.com/svn/trunk/recent comments widget.js"></script>

<script style=text/javascript>
var a_rc = 5;
var m_rc = false;
var n_rc = true;
var o_rc = 100;
</script>

<script src=http://your-blog-name.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments></script><div style="font-size: 10px; float: right;">Get this <a href="http://helplogger.blogspot.com/2012/03/recent-comments-widget-for-blogger.html" rel="nofollow" >Recent Comments Widget</a></div>

<style type="text/css">
.rcw-comments a {
  text-transform: capitalize;
}

.rcw-comments {
  border-bottom: 1px dotted;
  padding-top: 7px!important;
  padding-bottom: 7px!important;
}
</style>

Blogger 태그(라벨) 위젯 버그

C++ 과 같이 + 가 들어간 태그를 태그(라벨) 위젯으로 찾을려고 할때 다음과 같은 메시지가 나오면서 찾지 못한다.

"No posts with label C/C++."
"라벨(C/C++)과 일치하는 글이 없습니다."

분명 포스트 개수도 표시되는데 막상 태그를 클릭하면 포스트를 못 찾는다.
아마도 + 라는 문자를 해석하지 못하는 문제인것 같은데 아직 해결되지 않고 있다.
꽤 오래동안 알고 있는 문제라 고쳐지기를 기다렸지만 구글에선 관심도 없는것 같다.
당분간 아래와 같이 태그명을 바꿔야 겠다.ㅠㅠ

C/C++ -> C/CPP
Visual C++  -> Visual CPP

나름 괜찮은가? ㅋ

Blogger 에 SyntaxHighLighter 적용하기

블로그에 소스코드를 이쁘게 표시하기 위해서 사용하는 SyntaxHighlighter(http://alexgorbatchev.com/SyntaxHighlighter/) 를 Blogger 에 적용해 보자.
호스팅서버를 운영하거나 tistory 같은 경우 직접 css 와 자바스크립트 파일을 업로드해 적용하는데 구글 블로거의 경우는 SyntaxHighlighter 주소의 파일로 링크를 걸어 사용해야 한다.
블로거 -> 템플릿 -> HTML 편집 -> <head> </head> 사이에 다음을 추가한다.

<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js" type="text/javascript"></script>  
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js" type="text/javascript"></script>  
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js" type="text/javascript"></script>  
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js" type="text/javascript"></script>  
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js" type="text/javascript"></script>  
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js" type="text/javascript"></script>  
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js" type="text/javascript"></script>  
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js" type="text/javascript"></script>  
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js" type="text/javascript"></script>  
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js" type="text/javascript"></script>  
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js" type="text/javascript"></script>  
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js" type="text/javascript"></script>  
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js" type="text/javascript"></script>

이제 포스팅시 다음과 같이 코드를 <script> 태그로 java, c++, xml 등을 설정하여 감싸면 된다.

<script type="syntaxhighlighter" class="brush: c++">
<![CDATA[
#include <stdio.h>

int main()
{
    printf("Hello World.\n");
    return 0;
}
]]></script>

* 사족  : blogger 에서 syntaxhighlighter 를 사용했던 포스트 내용이 모두 삭제되는 경우를 경험해서 사용하지 않는다.ㅠㅠ

Blogger 동일 태그 포스트의 보기 개수 설정

blogger 에서 태그를 클릭 했을때 동일 태그의 모든 포스트가 로딩되어 느리고 보기도 힘든 경우가 있다.
이런 경우 max-results 값으로 한번에 보여줄 포스트 개수를 지정하면 된다.

blogger -> 템플릿 -> HTML 편집에서
expr:href='data:label.url'  을
expr:href='data:label.url + '?max-results=5''
또는(안되는 경우)
expr:href='data:label.url + '&quot;?max-results=5&quot;
로 저장한다.

[참고]
blogger 에서 동적 템플릿외의 경우 특수 기호가 포함된 태그의 포스트를 검색하지 못하는 문제가 있다.

블로그 이사

blog.naver.com/ysoftman 를 접고 구글 블로거로 이사...
네이버 블로그 백업도 안되고...(blogger 는 .xml 로 export 가능)
인터넷 검색해 보니까 백업되도록 한 프로그램있었는데...
네이버 블로그에서 막아놔 이젠 작동 안된다고 한다...
덴장... Copy&Paste 신공으로 블로그 이사 완료..ㅋㅋ

하면서 느낀점은...
1. 마우스 잡은 오른쪽 손목과 Ctrl+C 단축키 누른 새끼손락이 아프다 ㅠㅠ
2. 백업안되는 네이버 블로그 정말 싫다.
3. 다신 이런 노가다 하지 말자.