구글 블로그 html 북마크 위젯

북마크는 일반적으로 즐겨 찾는 웹 사이트를 표시하기 위해 사용합니다. 구글 크롬, 사파리, 엣지 및 기타 브라우저는 웹 사이트의 주소 또는 이름을 저장합니다. 다시 접속하기 위해 URL 주소를 기억할 필요가 없습니다.

이처럼 Blogger에서도 북마크처럼 게시글로 직접 연결되는 링크 목록을 만들 수 있습니다. 각 게시물에 북마크 아이콘을 추가하고, 실제 북마크 버튼이 될 수 있도록 구현하려면 아래 방법을 주의 깊게 따라주세요.

Blogger에 북마크 버튼 만들기

첫 번째 단계

Blogger를 열고 테마 > HTML 편집을 클릭한 다음 아래 단계를 따릅니다.

 

Ctrl + F 로 </head> 또는 </body> 를 검색하여 검색한 코드 위에 jQuery 코드가 있는지 확인합니다.

코드가 없다면 삽입해야 합니다.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>

버전이 다른 jQuery 코드가 페이지 내에 함께 존재하는 경우 충돌이 일어나 기능이 작동하지 않으므로 jQuery 코드는 한번만 작성해야 합니다. 템플릿에 이미 이와 같은 코드가 있는 경우 이 단계를 건너 뛰십시오.

 

두 번째 단계

다음 단계는 Ctrl + F 로 ]]></b:skin> 또는 </style>를 검색하여 검색한 코드 위에 다음 CSS 코드를 붙여넣기 후 배치 합니다.

 

세 번째 단계

아래로 스크롤하여 </body> 코드를 찾은 다음,

</body> 코드 위에 다음 JavaScript 코드를 붙여 넣으십시오.

 

네 번째 단계

다음으로, 아래의 HTML 코드를 어디서나 자유롭게 복사하여 붙여넣으십시오.

(블로그의 제목 또는 내용을 감싸는 부모 요소에 코드를 넣어야 합니다.)

아래 코드는 북마크에 추가 된 게시물 수를 표시하는 데 사용됩니다.

<div class="alert-warning">
  <span class="buka-tutup"><svg width="24" height="24" viewBox="0 0 24 24"><path d="M19 18l2 1V3c0-1.1-.9-2-2-2H8.99C7.89 1 7 1.9 7 3h10c1.1 0 2 .9 2 2v13zM15 5H5c-1.1 0-2 .9-2 2v16l7-3l7 3V7c0-1.1-.9-2-2-2z" fill="#333"/></svg><small><span class="show-bookmark"></span></small></span>
</div>

 

마지막 단계

이제 북마크 버튼을 배치합니다. 게시물 어디에나 자유롭게 배치 할 수 있습니다.

그러나 아래 HTML 코드는 <article>과 </article> 사이에 있어야합니다.

그래야 게시글 제목, 내용 및 이미지 데이터를 올바르게 읽을 수 있습니다.

<ul class="list"><button class="hartomy-bookmark-btn" expr:data-link="data:post.url" expr:data-id='data:post.id' expr:data-title='data:post.title' data-quantity="1" expr:data-borkimage='resizeImage(data:post.featuredImage, 400, &quot;16:9&quot;)'>boorkmark <svg width="24" height="24" viewBox="0 0 24 24"><path d="M17,18L12,15.82L7,18V5H17M17,3H7A2,2 0 0,0 5,5V21L12,18L19,21V5C19,3.89 18.1,3 17,3Z" fill="#fff"/></svg></button></ul>

 

북마크가 적용된 페이지는 다음과 같습니다.

 

 

Blogger에서 북마크 버튼 및 즐겨 찾기 목록을 만드는 방법에 대해 알아보았습니다. 블로그 테마에 따라 적용 방법이 다를 수 있습니다. 도움이 필요하시면 댓글을 통해 의견을 남겨주세요.