티스토리를 익숙하게 사용하다가 구글 블로거를 사용하려다 보면 티스토리와 차이가 나는 것들이 있어 헤매이기 마련이다. 또한, 티스토리 글쓰기에서 당연하게 사용하던 기능도 구글 블로거에서는 사용하지 못하는 경우가 있다. 대표적인 기능 중 하나가 이전 게시물 삽입이다. 구글 블로거에서 이전 게시물들을 삽입하는 html코드를 살펴보자.


구글 블로거 글쓰기 - 다른 게시물 링크 삽입하기


블로거 글쓰기 팁 외부게시물 링크 삽입하기

구글 블로거에서는 티스토리와 같은 이전 게시물 삽입 기능을 제공하지 않는다. 다만, 텍스트 또는 이미지에 링크를 걸 수 있는 기능만 제공한다. 블로그 글을 작성하다보면 이전 글이나 다른 글에 대한 링크를 주면서 미리 내용을 참고할 수 있도록 하는데, 구글 블로거에서는 이런 기능이 없으니 조금 불편하다.


하지만, html 코드를 이용해 직접 삽입할 수 있는 방법이 있다. 조금 귀찮은 방법이지만, 티스토리에서 작성하던 블로그 글쓰기 스타일을 유지하고 싶다면 유용한 방법이다.





아래는 html로 작성한 다른 게시물 삽입 결과이다.

html 코드는 다음과 같다.


<!-- 텍스트 박스 시작 -->

<div style="border: 2px solid #FFA500; padding: 20px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); background-color: #f0f0f0; width: auto; max-width: 100%;">

<!-- 외부 링크로 연결하는 <a> 태그 -->

<a href=" https://jejuminnesotan.tistory.com/entry/%EB%94%94%EC%95%84%EB%B8%94%EB%A1%9C4-%ED%94%BC%EC%9D%98-%EC%8B%9C%EC%A6%8C-%EB%BC%88%EC%B0%BD-%EA%B0%95%EB%A0%B9%EC%88%A0%EC%82%AC-%ED%9D%A1%ED%98%88%EA%B7%80%EC%9D%98-%ED%9E%98-%EC%84%B8%ED%8C%85 ">

<!-- 왼쪽에 이미지를 표시하는 <div> 태그 -->

<div style="background-image: url(' https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fr6Epb%2Fbtsy8ufkUM6%2FW6J7d3z0LKHuntDkJBOTZ0%2Fimg.jpg '); background-size: cover; width: 100px; height: 100px; border-radius: 10px; float: left; margin-right: 20px;"></div>

<!-- 텍스트 정보를 표시하는 <div> 태그 -->

<div>

<!-- 글 제목 -->

<p style="font-weight: bold; font-size: 22px; font-family: 'Hahmlet', sans-serif; color: #FFA500; margin: 0; padding: 0; line-height: 1.2;">

디아블로4 피의 시즌 - 뼈창 강령술사 흡혈귀의 힘 세팅

</p>

<!-- 본문 내용 -->

<p style="font-size: 16px; font-family: 'Hahmlet', sans-serif; color: #000; margin: 0; padding: 0; line-height: 1.2;">

강령술사는 창백하고 핏기 없는 얼굴에 하얀 머리로 대표되는 외모로 이번 시즌2 피의 시즌 스토리에 외모적으로 가장 잘 어울리는 캐릭터가 아닐까 싶다. 디아블로 4의 엔드게임 탑티어 빌드들

</p>

<!-- 웹사이트 주소 -->

<p style="font-size: 16px; font-family: 'Hahmlet', sans-serif; color: #000; margin: 0; padding: 0; line-height: 1.2;"> jejuminnesotan.tistory.com

</p>

</div>

</a>

</div>

<!-- 텍스트 박스 끝 -->






오렌지색으로 표시된 부분을 삽입하고자 하는 페이지의 링크 주소, 페이지에 포함된 이미지 주소, 제목, 내용으로 변경한다.

이미지 주소는 삽입하고자 하는 이미지 위에서 우클릭 후 '이미지 주소 복사하기'를 선택하면 가져올 수 있다.



필요한 정보 수정이 끝난 후에는html 연습장을 이용해서출력물을 미리 확인하고, 마음에 들면 해당 코드를 복사해와서 글쓰기 창을 html모드로 변환하고 원하는 위치에 삽입하면 된다.




각 코드에 대한 설명과 스타일 지정은 아래를 참고하자.


<div> 태그: 외부 컨테이너로, 박스의 스타일 지정

<a> 태그: 외부 링크로 연결하며, 클릭 시 해당 링크로 이동

첫 번째 <div> 태그: 왼쪽에 이미지를 표시하는 컨테이너로, 이미지 스타일을 설정

두 번째 <div> 태그: 텍스트 정보를 포함하는 컨테이너로, 글 제목과 본문 내용을 스타일링

<p> 태그: 글 제목, 본문 내용, 웹사이트 주소를 표시하며, 각각의 스타일 및 폰트를 설정




스타일 지정하기


텍스트 박스 스타일:


border: 텍스트 박스 주위에 2px 두께의 오렌지색(#FFA500) 테두리를 설정.

padding: 텍스트 박스 내부 여백을 20px로 설정.

border-radius: 테두리 모서리를 10px로 둥글게 설정.

box-shadow: 텍스트 박스 주위에 그림자 효과를 0 4px 8px의 설정으로 추가.

background-color: 텍스트 박스의 배경색을 연한 회색(#f0f0f0)으로 지정.

width: 텍스트 박스의 너비를 자동으로 조절.

max-width: 텍스트 박스의 최대 너비를 화면 크기에 맞게 100%로 설정.



이미지 스타일:


background-image: 이미지를 박스의 배경 이미지로 설정.

background-size: 이미지를 커버로 확대하여 배경에 맞게 표시.

width 및 height: 이미지의 너비와 높이를 100px로 설정.

border-radius: 이미지의 모서리를 10px로 둥글게 설정.

float: 이미지를 왼쪽으로 배치.

margin-right: 오른쪽 여백을 20px로 설정하여 이미지와 텍스트 사이 간격을 조절.



텍스트 스타일:


각각의 <p> 태그로 텍스트 스타일을 지정.

글 제목에는 굵게(font-weight: bold), 제목 폰트 크기(font-size: 22px), 오렌지색 글자(color: #FFA500), 본문 내용 폰트 크기(font-size: 16px)등의 스타일이 적용.

본문 내용과 웹사이트 주소에는 일반 폰트 크기, 검은색 글자(color: #000) 등의 스타일이 적용.




이상 구글 블로거 글쓰기에서 다른 게시물 링크를 삽입하는 방법에 대해서 알아봤다. 조금 불편한 방법이긴 하지만, 원하는 스타일대로 지정할 수 있다는 점은 장점이기도 하다.