로이랩

구글블로거

구글블로거(Blogger) 상단메뉴(menu) 변경

4월 22, 2017

[구글블로거만들기] 상단메뉴(menu) 변경

구글블로거 상단에 있는 메뉴를 변경해 보도록 하겠습니다.

이 부분도 테마에 따라 가젯에서 변경하는 부분도 있지만 제가 적용한 테마에서는 HTML 편집을 해야되네요.

아무래도 제가 적용한 테마는 왠만하면 HTML편집으로 가능한 거 같습니다.

여전히 삽질의 기운이 감도네요 ^^

그래서 간단한 HTML 소스를 이해하고 있어야될 거 같애요.

상단메뉴를 수정할 때는 ui, li 태크를 이해하고 있어야합니다.

목록과 관련된 태그입니다.

쉬운부분이니 따로 찾아보시면 간단히 이해되시리라 생각됩니다.

HTML편집으로 들어가서 보면 아래와 같은 이미지가 나옵니다.

저는 편집을 완료한 후 캡쳐한 것입니다.

밑줄부분이 메뉴와 메뉴링크를 추가한 부분입니다.

그리고 박스부분은 서브메뉴가 있을 때 적용하는 부분입니다.

지금은 서브메뉴가 필요없어서 주석으로 처리했습니다.

포스트을하고 해당 포스팅에 대한 태그를 작성하고 태그들의 묶음을 메뉴로 만들면 됩니다.

라벨,카테고리 등으로 불리기도 합니다.

링크주소는 이렇게 붙이면 됩니다.

블로그주소/search/label/라벨명

구글블로거

구글블로거(Blogger) 도메인 변경(domain) 변경

4월 22, 2017

[구글블로거만들기] 도메인 변경(com) 변경

구글블로거를 만들면 주소가 [사용자아이디.blogspot.kr] 되는데 뒷부분 kr은 국가도메인으로 자동접속이 됩니다.

이 부분을 흔히쓰는 .com으로 변경하고자 한다면 <head> 밑부분에 아래소스를 추가하면 됩니다.

var blog = document.location.hostname;

var slug = document.location.pathname;

var ctld = blog.substr(blog.lastIndexOf("."));

if (ctld != ".com") {

var ncr = "http://" + blog.substr(0, blog.indexOf("."));

ncr += ".blogspot.com/ncr" + slug;

window.location.replace(ncr);

}

</script>

추가하고 도메인부분을 확인하면 .com으로 변경되었습니다.

구글블로거

구글블로거(Blogger) 나눔폰트(font) 변경

4월 22, 2017

[구글블로거만들기] 나눔고딕 NanumGothic 폰트 적용

테마를 적용하고 난 후 구글블로거를 하나씩 수정하고 있습니다.

이번에는 폰트를 수정해 보겠습니다.

테마를 적용하면 제목 폰트가 진지한 궁서체였는데 나눔고딕폰트로 변경해 보겠습니다.

관리자페이지 > 맞춤설정 > 고급 > CSS추가에서 추가를 했는데 반영이 안되어서 직접 HTML을 수정해야 했습니다.

HTML편집에서 <head> 아래에 이 소스를 추가합니다.

google.load( "webfont", "1" );

google.setOnLoadCallback(function() {

WebFont.load({ custom: {

families: [ "NanumGothic" ],

urls: [ "http://fonts.googleapis.com/earlyaccess/nanumgothic.css" ]

}});

});

</script>

그리고 CSS추가부분에서 추가해야될 부분이 HTML에 들어가져 있어서 해당부분을 수정해줘야됩니다.

예를들면 해당부분에 다가 아래와 같이 나눔고딕을 추가해줘야 한다.

h2.post-title, h1.post-title {

transition: .5s;

-webkit-transition: .5s;

-moz-transition: .5s;

font-family: 'Roboto Slab', serif, NanumGothic;

font-size: 25px;

line-height: 1.52em;

color: #000;

font-weight: 400;

text-decoration: none;

margin-top: -8px;

}

저장하면 아래와 같이 반영된다.

궁서체가 나눔고딕으로 변경된것을 확인할 수 있습니다.

구글블로거가 좀 더 깔끔해보이네요^^

구글블로거

구글블로거(Blogger) 애드센스(Adsense) 연동

4월 21, 2017

[구글블로거만들기] 애드센스(Adsense)연동

애드센스는 구글에서 서비스하는 광고를 적용할 수 있는 플랫폼이라고 할 수 있다.

개인의 구글블로거 계정에 애드센스를 연결해서 광고 수익을 올릴 수 있는데 같은 구글 서비스라서 그런지 연결하기에는 다른 서비스보다는 편리한 장점이 있다.

저는 예전에 애드센스에 가입이 되어져 있지만 처음하시는 분은 구글 애드센스 사이트에 접속해서 가입을 하시기 바랍니다.

구글블러거 관리자 페이지에 가면 수익이라는 메뉴가 보입니다.

클릭하시면 Sign up for Adsense 라는 버튼이 보입니다.

버튼을 클릭하면 아래 화면이 나타납니다.

이제 부터 애드센스와 구글블로거하고 연결과정이 진행됩니다.

예를 클릭하면 아래화면이 나타납니다.

개인 블로거 기본 사이트가 나타나고 언어 설정 부분이 나온다. 확인한 후 연결 수락을 클릭한다.

언제 봐도 기분 좋은 축하한다는 메시지가 나온다. ^^

계속 버튼을 클릭하면 다시 블로거 관리자 수익 메뉴로 넘어옵니다.

블로거 광고할 위치를 지정하는 부분입니다.

광고를 원하는 위치를 지정하고 설정저장을 누르면 연동이 완료됩니다.

자신의 개인 블로거에서 확인하면 광고가 나올 것입니다.

광고가 몇시간 뒤에 될 수도 있으니 느긋한 맘으로 기다리세요^^

구글블로거

구글블로거(Blogger) 페이스북(Facebook) 연동

4월 21, 2017

[구글블로거만들기] Blogger, Facebook 연동

개인 페이스북 계정이 있는 사람은 자신의 구글블로거와 개인 페이스북 계정 연동이 가능하다. 페이스북 페이지가 있으면 연결하는 방법이 조금 다르긴 하지만 필자는 개인 페이스북 계정밖에 없어서 개인계정으로 연동해 볼려고 합니다.

1. 개인 페이스북 계정에 로그인 합니다.

2. https://www.facebook.com/badges 에 접속합니다.

접속하면 아래와 같은 페이지가 나오는데 이미지나 프로필 위젯을 클릭합니다.

3. 페이스북 계정과 연결할 장소를 클릭합니다.

여기서는 Blogger를 클릭합니다.

4. 페이스북 계정과 연동할 블로거를 선택하고, 제목을 적은 다음 도구 추가를 클릭합니다.

5. 그러면 자신의 블로거 관리자페이지의 레이아웃으로 바로 연결이 됩니다.

아래그림처럼 가젯으로 추가된 것을 볼 수 있는데 전 단계의 제목부분이 가젯의 제목이 되는 걸 확인 할 수 있다.

그리고 자신의 블로거에서 확인하면 해당 위치에 자신의 페이스북 계정이 나타나는 것을 확인할 수 있다.

구글블로거

구글블로거(Blogger) 저작권표시 변경

4월 21, 2017

[구글블로거만들기] 구글블로거(Blogger) 저작권표시 변경

프리 테마를 사용하면 블로그 푸터(제일 하단)부분에 테마를 제작한 회사나 개인의 저작권이 표시된다.

제가 적용한 테마는 ThemeXpose 에서 제작한 것인가 봅니다.

제일 하단 부분을 제가 맞게 수정할려고 합니다.

저작권 수정을 크게 2가지형태로 나눌 수 있다.

1. 가젯 적용

2. html 직접 수정

이번 테마 적용 전에 제가 적용했던 부분이다.

재사용 하실 분을 위해서 내용부분도 추가해 놓겠습니다.

여기 있는 스크립트는 현재년을 가지고 오는 스크립트 입니다. 년도마다 바꾸기 귀찮아서 자동으로 변경되는 스크립트를 추가했습니다.

하지만 레이아웃에서 추가해야될 레이아웃이 없으면 2번과 같이 직접 HTML 코드를 수정해야 합니다.

제가 추가한 테마는 2번의 경우에 해당됩니다.

(예상은 했지만 점점 삽질의 기운이 느껴진다)

2번의 경우는 관리자페이지 > 테마 에가면 HTML 편집이라는 버튼을 클릭해서 해당부분을 찾으면 된다. 버튼을 클릭하면 HTML 코드가 나오는데 Ctrl + F 를 눌러서 찾으면 편리하다.

'Template Created By'로 검색했다.

<변경전>

<변경후>

4797-4801 번째 줄을 수정해 주면 됩니다.

<data:blog.title/>

4803-4805 부분을 수정하니 테마 제작한 회사로 주소가 리다이렉트 되는 것을 보니 내부적으로 코딩이 되어있는 것 같아서 그냥 놔 둘려고 했으나 찾아보니 방법이 있네요.

4802-4807 부분을 아래처럼 변경하면 됩니다.

<style>.removelink{text-indent:-99999px;}</style>
<div class="removelink">

4802-4807 부분

</div>

최종적으로 수정된 결과는 다음과 같습니다.

나름 깔끔한 것 같다.

구글블로거

구글블로거(Blogger) 테마 변경

4월 21, 2017

[구글블로거 만들기] 테마 변경(Blogger Theme, Blogger Template)

구글블로거를 생성하면 기본적으로 제공하는 테마들이 있다.

처음에는 운영할 목적이라기보다 테스트나 다른 사이트에서 제공하는 블로그와 비교해 볼 목적으로 생성하고 몇개만 포스팅 해봤다.

그러다가 운영목적으로 다시 꾸며 보기로 했다.

다른 블로그에 비해서 손이 많이 가는게 사실이지만 삽질의 느낌이 확 다가오지만 기본적으로 운영하는데 무리가 없을정도만 수정해서 운영해 볼 생각이다.

처음에는 기본적으로만 수정하다가 필요에 따라서 디테일한 부분까지 수정해 볼 생각이다.

구글블로그는 아시다시피 구글에서 제공하는 블로그라서 해외블로거나 업체들이 제공하는 다양한 템플릿이 찾아보면 엄청나다.

그런 것들을 다 적용하기엔 무리지만 하나씩 적용하다보면 솔솔한 재미를 느낄 수 있다.

처음 구글블로거를 설치하면 밋밋하다.

그래서 제일 처음 손대는 부분이 테마일지도 모른다.

다른 블로그에는 스킨이라고하는 테마는 구글에서 기본적으로 제공하는 테마도 있지만 인터넷에서 찾아보면 이쁘고 기능이 좋은 테마들도 많다.

그 중 한가지를 적용해 볼려고 한다.

테마를 적용하는 방법은 거의 비슷해서 개인적인 취향에 맞게 찾아서 적용하는데는 무리는 없을 것이다.

테마 제공 사이트

https://gooyaabitemplates.com

여기에 접속해서 원하는 테마를 고르면 된다.

미리보기도 가능해서 확인 후 다운 받으면 된다.

테마를 제공하는 다른 사이트도 많지만 그 중 깔끔하게 정리된 사이트이다.

테마를 하나 골랐다.

개인적으로 테마를 고른 기준은

심플, 깔끔, SEO(검색엔진최적화)에 적합, Responsive(반응형) 등이었다.

고른 테마를 클릭하면 아래와 같은 테마에 관련된 설명이 나온다.

Live Preview 를 클릭해서 테마 미리보기도 가능하고 설치할려면 Download 버튼을 클릭하면된다.

처음 설치해 보시는 분들은 아래에 'How to Install a Blogger Template?' 를 클릭하면 설치하는 방법을 안내받을 수 있다. 영어 이해가 어려우신 분들도 이미지만 봐도 설치가 가능하게 자세히 설명해주고 있다. 여기서는 설치방법은 생략할려고 한다.

테마를 설치하고 나니 내 블로그가 이렇게 변했다.

변경전에 있었던 포스팅과 세팅들을 기준으로 변경이 된 것을 볼 수 있다.
만약 처음 블로그를 생성하고 적용하신 분들은 아무것도 없는 페이지가 나올 것이다.
좀 당황스러울 수도 있을거 같다. 하지만 테스트로 포스팅을 몇개해서 레이아웃들도 수정해보면 좀 더 나은 페이지를 보실 수 있을 것이다.

다음 포스팅부터 기본적인 것 부터 하나씩 변경해 볼 것이다.

Newer
Stories

Older
Stories

로이랩

구글블로거(Blogger) 상단메뉴(menu) 변경

[구글블로거만들기] 상단메뉴(menu) 변경

구글블로거(Blogger) 도메인 변경(domain) 변경

[구글블로거만들기] 도메인 변경(com) 변경

구글블로거(Blogger) 나눔폰트(font) 변경

[구글블로거만들기] 나눔고딕 NanumGothic 폰트 적용

구글블로거(Blogger) 애드센스(Adsense) 연동

[구글블로거만들기] 애드센스(Adsense)연동

구글블로거(Blogger) 페이스북(Facebook) 연동

[구글블로거만들기] Blogger, Facebook 연동

구글블로거(Blogger) 저작권표시 변경

[구글블로거만들기] 구글블로거(Blogger) 저작권표시 변경

구글블로거(Blogger) 테마 변경

[구글블로거 만들기] 테마 변경(Blogger Theme, Blogger Template)

이 블로그 검색

프로필

About me

Follow Us

Press

Labels

recent posts

Blog Archive

Labels

Pinterest

John Doe

Instagram

Popular Posts

Like us on Facebook

Flickr Images