그것은 네이브 블로그에 달릴 수 있는 애드 포스트 대비 구글 애드 센스의 광고 수입이 월등히 많다는 점입니다.
제가 듣기로는 동일한 노출수(클릭수, 조회수)에서 최소 2~3배에서 많으면 4~5배까지도 많은 수입이 발생한다고 하더군요.
어..? 그럼 구글 블로거 말고 티스토리하면 되지 않나요? 하실 수 있는데, 티스토리는 광고 황금자리를 카카오에서 가져가기에 역시나 동일 노출수에서 구글 블로거 대비 더 낮다고 하더라고요.
그래서, 구글 블로거를 많이들 추천하시길래 저 역시 용감하게 구글 블로거에 포스팅 중입니다.
그런데, 네이버 블로그도 써보고, 티스토리도 며칠이긴 하지만 써 본 입장에서 구글 블로거를 써보니 불편한 점이 한 두가지가 아니더군요ㅠ.
그중에 하나가 바로 인용 문구입니다ㅠ.
네이버든, 티스토리든 모두 인용 문구가 기본 에디터에 내장되어 있기에 그냥 쓰면 됐었습니다.
그런데, 구글 블로거에는 아무리 눈씻고 찾아봐도 없더군요....ㅠ
그래서 결국은 본인이 테마 메뉴로 들어가서 HTML 코딩을 해줘야 사용이 가능해집니다.
단, 그것도 포스팅할 때마다 HTML 코딩이 필요해서 -물론 복잡하진 않습니다만- 편의성은 확실히 떨어지고요.
그런데, 이 HTML 코딩이 초보자에게는 정말 어렵더군요ㅜ.
저 같은 경우에 거의 기초적인 수준만 알고 있었던 상황이라 Chatgpt 한테 물어가면서 한 4~5시간만에 겨우겨우 끝낼 수 있었습니다.
Chat도 실수를 꽤나 하는데다 인용문의 따옴표를 굉장히 작은 것들만 보여주는데, 제가 만족할만큼 키우는 것이 정말 힘들더군요ㅠ.
어쨌든 그걸 소개해 드리오니, 초보 블로거님들은 저같은 시행착오를 하지 마시길 바랍니당.
1) 아래 블로그 관리자 메뉴에서 "테마"를 클릭합니다.
3) 그럼 아래와 같은 HTML 코드창이 뜨는데, 겁먹지 마시고 중앙 코드창에 아무데나 마우스 클릭 한번 해 주시고 "Ctrl+F" 키를 누른 후 "</head>"를 타이핑하고 엔터를 눌러 아래 창과 같이 </head> 위치를 찾습니다. (1개 밖에 없습니다)
사실 </head> 가 위에서처럼 따로 떨어진 것이 아니라 다른 글자와 함께 딱 붙어있을텐데 무시하시고 </head>앞에 커서를 위치시킨 다음 엔터키를 여러번 두들겨서 새로운 코드를 삽입하기 좋게 만들어 줍니다. (HTML 코드는 여백과 줄바꿈에 영향 없는 것으로 앎)
4) 그런 다음 아래 코드를 </head> 앞에 카피하여 넣어 줍니다.
(/* ~~ */ 내용은 주석이니 빼셔도 됩니당)
5) 잘 카피해서 붙여 넣으셨으면 아래 캡처사진에 우상단에 있는 디스크 모양 아이콘을 눌러 저장하신 후에, 좌상단에 있는 왼쪽 화살표를 눌러 돌아가주면 이제 테마에서 할 일은 끝났습니다.
<style type='text/css'>
.quote-box {
position: relative;
padding: 40px 20px 50px; /* 위쪽 padding을 더 키우고, 아래는 줄임 */
margin: 20px 0;
text-align: center;
border: none;
}
.quote-box::before {
content: "\201C"; /* 윗 따옴표 */
position: absolute;
top: 0;
left: 50%;
width: 100px;
height: 60px; /* 윗따옴표 높이 */
background: #f6f6fa !important;
color: #666;
font-family: Georgia, serif;
font-size: 60px;
line-height: 60px;
text-align: center;
transform: translateX(-50%);
box-shadow: none !important;
}
.quote-box::after {
content: "\201D"; /* 아래 따옴표 */
position: absolute;
bottom: 0;
left: 50%;
width: 100px;
height: 40px; /* 기존 100px → 60px 로 축소 */
background: #f6f6fa !important;
color: #666;
font-family: Georgia, serif;
font-size: 60px;
line-height: 60px;
text-align: center;
transform: translateX(-50%);
box-shadow: none !important;
}
.quote-box p {
position: relative;
z-index: 1;
margin: 0;
padding: 10px 20px;
font-size: 18px;
line-height: 1.6;
font-style: italic;
}
</style>
6) 이제 포스팅하실 때 인용문으로 강조할 일이 생기면, 좌측에 새 글 작성 보기가 아니라 "HTML 보기"를 클릭하셔서 HTML 코드 모드로 들어갑니다.
7) 그리고, 인용문 앞뒤에 아래와 같이 HTML 코드를 넣어 주시면 됩니다.
<div class="quote-box">
<P> 인용문 ~~~~ </P>
</div>
음... 저는 quote-box가 너무 길어서 앞으론 q-box로 고쳐서 쓸까 싶네요. 이경우에는 당연히 테마의 HTML 부분도 quote-box 대신 q-box로 고쳐 주셔야 하고요.
그럼, 아래와 같이 정말 아름다운 큰 따옴표가 앞뒤로 붙은 "인용문"으로 나타나게 됩니다.
정말이지 전 이거 만든다고 사흘 정도, 시간으로는 7~8시간 정도 사용한 것 같네요ㅠ.
그럼, 잘 사용하시기 바랍니당ㅎ.
ps.
아래 코드에서 before 가 윗따옴표, after가 아래 따옴표를 가르킵니다. 여기서 색상, 크기, 위치 등을 제어할 수 있으니, 혹시 필요하신 분들은 미세 튜닝 하시면 됩니다.
예를 들어 background 옆에 있는 #f6f6fa는 배경색의 종류를 의미하는데, 이 배경색과 따옴표 배경색이 일치해야 따옴표 주변의 사각 경계선이 보이지 않게 됩니다.
quote-box::before {
content: "\201C"; /* 윗 따옴표 */
position: absolute;
top: 0;
left: 50%;
width: 100px;
height: 60px; /* 윗따옴표 높이 */
background: #f6f6fa !important;
color: #666;
font-family: Georgia, serif;
font-size: 60px;
line-height: 60px;
text-align: center;
transform: translateX(-50%);
box-shadow: none !important;
.quote-box::after {
이하 생략
댓글 쓰기