블로거(blogger) 포스트 하단의 '최근 게시물', '홈', '이전 게시물' 을 이미지로 대체하기

그림1

블로거 포스트 하단에는 독자가 블로그의 글들을 둘러보는데 도움을 주는, '최근 게시물', '홈', '이전 게시물' 이란 네비게이션 링크가 존재합니다.

그림2

크롬에서 해당 요소를 우클릭하여 요소 검사를 해보면, 이 링크들은 페이저(pager)라는 요소임을 알 수 있는데요.

'최근 게시물', '홈', '이전 게시물' 링크를 각각

의 이미지로 대체해보겠습니다.

1. '최근 게시물'을 이미지로 대체

먼저, [대시보드 → 템플릿 → HTML 편집] 으로 들어간 후 아래의 코드를 찾아서

 <data:newerPageTitle/>  

다음의 코드로 '대체' 해 줍니다.

 <img src='이미지 주소' style='border: 0 none;vertical-align: middle;'/>  

그림3

코드 찾기는 코드 수정 창에서 'Ctrl+F' 로 찾을 수 있습니다. 코드를 찾으면 <그림3>의 모습처럼 보일텐데요.

그림4

<그림4>처럼, 코드를 '대체' 해 줍니다. 코드를 삽입할 때 자신이 삽입할 이미지의 주소를 입력해주어야겠죠. 제가 삽입할 이미지의 주소는

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzoUPgtSZ2vInp7A7ghe-6h6FjHdmYVTaZD-vdzYZjWY6w4RaCfW1xIwFMW7fEJtSAMxXIZHyELwQmfMkZON6jNjoTOVt09YhZzUtzDCAtn5NvYjV11CYf0PW3I-LFxhJyCyEioBaQdqg/s1600/arrow-92-36.png  

이므로, 저는

 <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzoUPgtSZ2vInp7A7ghe-6h6FjHdmYVTaZD-vdzYZjWY6w4RaCfW1xIwFMW7fEJtSAMxXIZHyELwQmfMkZON6jNjoTOVt09YhZzUtzDCAtn5NvYjV11CYf0PW3I-LFxhJyCyEioBaQdqg/s1600/arrow-92-36.png' style='border: 0 none;vertical-align: middle;'/>  

이렇게 입력을 해주었습니다.

2. '이전 게시물'을 이미지로 대체

그림5

'이전 게시물' 역시 마찬가지 방식입니다.

 <data:olderPageTitle/>  

위의 코드를 찾아서, 아래의 코드로 대체 해줍니다.

 <img src='이미지 주소' style='border: 0 none;vertical-align: middle;'/>  

3. '홈'을 이미지로 대체

그림6

'홈' 역시 같습니다.

 <data:homeMsg/>  

위의 코드를 찾아서, 아래의 코드로 대체 해줍니다.

 <img src='이미지 주소' style='border: 0 none;vertical-align: middle;'/>  

다만, '홈'을 대체할 때 한가지 주의하셔야할 점은

 <data:homeMsg/>  

이 코드를 검색하면, 두개의 결과물이 검색됩니다. 하나는 모바일 템플릿의 홈 버튼이므로, 주의하시기 바랍니다.

그림7

수정을 모두 마치면 '템플릿 저장'을 눌러줍니다.

그림8

짠. 결과물이 나왔네요.


※ 코드 수정전에는 항시 템플릿을 백업 해두시고, 또 코드 수정에 자신이 없다면 테스트용 블로그를 하나 만드셔서 테스트를 해본 후 적용하시기 바랍니다.