그럴 땐 아래 "링크 URL"란에 링크 웹 주소를 카피하신 후에 코드 생성을 클릭한 후 "코드 복사"를 클릭해서 웹 주소를 HTML 편집기 상태에서 붙여 넣으면, 위와 같이 썸네일이 보여지니 필요하신 분들은 잘 활용하시기 바랍니당.^^ (HTML 편집기가 아닌 그냥 "새 글 작성 보기" 모드에 붙여 넣으면 작동 안합니다ㅠ)
LINK Maker - 블로그스팟 미리보기 생성기
블로그스팟 본문에 사용할 링크 미리보기 HTML 코드를 생성하세요.
단, 저처럼 igniel 테마를 쓰시는 사람은 아래 CSS 만 추가하시면 되는데, igniel 테마를 안 쓰시는 분들은 위에 출처와 같이 블로소득님 블로그를 참고하셔서 테마 쪽 HTML 코드도 일부 바꿔 주셔야 한다고 하네요.
CSS 추가 방법은 아래와 같은 화면에서 우측에 있는 주황색 "맞춤설정"을 클릭 ---> 좌측에서 "고급"을 클릭 ---> "CSS 추가" 클릭 ---> 나오는 빈 칸에 맨 아래에 적어드린 HTML 코드 전체를 카피해서 넣으시면 됩니당. (빈칸이 한줄이라 다 들어갈까 걱정스러운데, 붙여 넣으면 다 들어갑니당ㅎ)
.post-body a.generated-link-card {
display: flex !important;
align-items: center;
gap: 12px;
max-width: 640px;
width: 100%;
padding: 12px 14px;
border: 1px solid #e5e7eb;
border-radius: 12px;
background:#fff;
text-decoration: none !important;
color: #111827;
transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.post-body a.generated-link-card:hover {
box-shadow: 0 6px 18px rgba(0,0,0,.08);
border-color:#d1d5db;
transform: translateY(-1px);
}
.post-body a.generated-link-card .thumbnail {
width:96px; height:96px;
border-radius:10px;
object-fit:cover;
flex-shrink:0;
background:#f3f4f6;
}
.post-body a.generated-link-card .content { min-width:0; }
.post-body a.generated-link-card .title {
margin:0 0 4px 0;
font-size:15px; font-weight:700;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.post-body a.generated-link-card .description {
margin:0 0 6px 0;
font-size:13px; color:#6b7280;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.post-body a.generated-link-card .domain { font-size:12px; color:#6b7280; }
.post-body a.generated-link-card .thumbnail[src=""],
.post-body a.generated-link-card .thumbnail:not([src]) { display:none !important; }
@media (max-width:480px){
.post-body a.generated-link-card{ padding:10px 12px; gap:10px; }
.post-body a.generated-link-card .thumbnail{ width:80px; height:80px; border-radius:8px; }
}
댓글 쓰기