3월 14, 2023 5월 03, 2021

위젯 적용 DEMO

스마트폰 정렬

<style>
.bsrp-gallery .bs-item a {
  display:grid;
  position: relative;
  float:left;
  margin: 0 15px 15px 0 !important;
  text-decoration:none;
}
.bsrp-gallery .bs-item .ptitle {
  background: rgba(0, 0, 0, 0.5); 
  background: #7f7f7f\9; 
  display:contents; 
  </style>

단계

아래의 스크립트를 자신의 블로그 템플릿의 </head> 바로 직전에 붙여넣기 한다.

<script>
// Blogger Recent Posts Gallery by Bloggersentral.com
// Tutorial at http://www.bloggersentral.com/2013/05/recent-posts-image-gallery-for-blogger.html
// Free to use or share, but please keep this notice intact.
//<![CDATA[
function bsrpGallery(root) {
var entries = root.feed.entry || [];
var html = ['<div class="bsrp-gallery nopin" title="Get this from BloggerSentral.com">'];
for (var i = 0; i < entries.length; ++i) {
var post = entries[i];
var postTitle = post.title.$t;
var orgImgUrl = post.media$thumbnail ? post.media$thumbnail.url : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyTC07EuHlOKB9kNSQVD2QLMLvEeFT8FsfsAlgKw7H0XQeqIUBFGa9aNGFcCLG2rBTeGRGiCpGiv9mi4iVZzqLN2SfoN5ACK5D8qcy-Rl_uq1E5-CFtpH-w2apiR7epJ93-dG1tiwgfUHf/s72-c/default+image.png';
var newImgUrl = orgImgUrl.replace('s72-c', 's' + bsrpg_thumbSize + '-c');
var links = post.link || [];
for (var j = 0; j < links.length; ++j) {
if (links[j].rel == 'alternate') break;
}
var postUrl = links[j].href;
var imgTag = '<img src="' + newImgUrl + '" width="' + bsrpg_thumbSize + '" height="' + bsrpg_thumbSize + '"/>';
var pTitle = bsrpg_showTitle ? '<span class="ptitle">' + postTitle + '</span>' : '';
var item = '<a href="' + postUrl + '" target="_blank" title="' + postTitle + '">' + imgTag + pTitle + '</a>';
html.push('<li class="bs-item">', item, '</li>');
}
html.push('</div>');
document.write(html.join(""));
}
//]]>
</script>

단계

아래에 있는 스크립트를 복사해서 갤러리가 노출될 위치에 붙여넣으면 된다. 한 페이지에 여러 개의 스크립트를 복사해 넣을 수 있으며, 라벨 이름을 각각 다르게 수정하면 된다.

<script>
var bsrpg_thumbSize = 150;
var bsrpg_showTitle = true;
</script>
<script src="/feeds/posts/summary/-/라벨?max-results=8&alt=json-in-script&callback=bsrpGallery">
</script>

스크립트 시작
관련글 섬네일 크기
관련글 제목 표시 여부(true or false)
스크립트 끝
라벨 이름(라벨)과 목록 개수(8)

단계

css 소스는 섬네일 이미지의 배경색과 클릭 시 반전 색상 효과 및 이미지 배열 스타일을 조절한다. 취향에 따른 독자적인 수정이 가능하다. html 레이아우트와 템플릿 html 및 게시글 페이지 내에 스타일로 지정하면 된다.

<style>
.bsrp-gallery {padding:10px; clear:both;}
.bsrp-gallery:after {content: "";display: table;clear: both;}
.bsrp-gallery .bs-item a {position: relative;float:left;margin: 0 15px 15px 0 !important;text-decoration:none;}
.bsrp-gallery .bs-item .ptitle {background: rgba(0, 0, 0, 0.5); background: #7f7f7f\9; display: block; clear: left; font-size: 11px; line-height:1.3em; height: 2.6em; position: absolute; text-align: left; bottom: 10%; color:#fff; padding:2px 5px; word-wrap: break-word; overflow:hidden;}
.bsrp-gallery a img {background: #eee; float: left; padding: 5px; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); transition: background-color 0.4s; -webkit-transition: background-color 0.4s; -moz-transition: background-color 0.4s;}
.bsrp-gallery a:hover img {background: #ee7e22;}
</style>

단계(선택)

이미지가 많아 오히려 가독성이 떨어질 때 아래처럼 텍스트로만 목록을 출력하고자 한다면 앞선 <2단계> 2번의 섬네일 크기를 <0>으로 처리하고, <3단계>스타일 지정을 생략하면 아래처럼 표시된다. 스크립트에 있는 리스트의 클래스(ptitle, bs-item)로 스타일을 지정하면 글자의 크기 등 여러 가지 속성을 지정할 수 있다.

.bs-item {
  color: #bf8b38; 
  font-size:19px;
  background:#fff;
}

겸재 정선과 순심 | 비단 화첩에 아롱지는 한국의 미와 감정가
서양미술 연대기| 미술 유파/화가/ 경매 작품 소개
미술대백과 |사군자(四君子) 그림의 종류와 표현기법
미술대백과 | 미술 표현의 기초 | 양감/재질감/원근감의 원리와 표현
미술 종류와 그림명칭 | 그림 표현기법과 방식 |최고 값비싼 그림 가격 |구도의 3요소와 소실점

문제 진단 및 해결

만일 위의 3단계를 수행하여도 실행이 안 되는 이유는 소스 파일의 불량과 실행하고자 하는 블로그와의 호환성을 들 수 있다.

따라서 무조건 파일의 불량으로만 치부하지 말고 반드시 호환성 여부를 체크 하는 것은 수고를 절감하는 길이다. 구글의 경우, 같은 스킨(테마) 임에도 불구하고 이유 불명으로 블로그 계정에 따라 실행 가부가 결정되는 것이 확인되었다.

<https://www.lifeandlinda.com/2016/03/blogger-perfect-photo-thumbnail-gallery.html>

Dream Chaser

관련글 스크립트 | 페이지 별로 관련글 갤러리 만들기

위젯 적용 DEMO

스마트폰 정렬

단계

단계

단계

단계(선택)

문제 진단 및 해결

태그