친효애드온 : 티스토리 + 구글 블로그 본문 링크 배너 수동형 적용 방법

티스토리는 링크를 본문에 삽입 후 엔터를 누르면 해당 링크의 내용들이 자동으로 배너 스타일로 만들어집니다. 이거 하나는 참... 티스토리가 잘 해 놨어요. 사용자 편의성 부분은 오픈형 블로그 중에서는 아직까지는 티스토리가 탑이긴 합니다. 한국에서 만들었으니 뭐 당연하겠지만요. 다만 이런 티스토리도 완벽하지는 않습니다. 이따금씩 자동으로 링크 배너가 안 만들어지기도 합니다. 이유는 알 수 없지만 주로 URL 주소가 길거나 특정 사이트들이 안 되는 것 같습니다. 아마도 각 플랫폼과의 서버 통신이 원활하지 않은게 원인인 듯 해요.


아무튼! 이런 사소한 문제가 예전부터 신경이 쓰였고 어차피 구글 블로그에서도 안 되니까 그냥 둘 다 적용시킬 수 있는 수동형 링크 배너를 만들었습니다. 사용 방법도 그리 안 어렵습니다. 누구나 쉽게 따라할 수 있습니다. 스크립트 필요 없습니다. 그럼 일단 어떤 스타일인지 살펴보겠습니다.


미리보기

저의 티스토리 주소 바로가기 링크 배너를 바로 아래에 적용시켜 보았습니다.


친절한효자손 취미생활

친절한효자손이 운영하는 티스토리로 놀러오세요!

rgy0409.tistory.com


이렇게 적용됩니다. 티스토리 오리지널 크기의 절반 수준이죠. 썸네일은 4분의 1로 줄었습니다. 너무 크면 부담스럽거든요. 광고 같기도 하고요. 그럼 어떻게 적용시키는지 안내해 드리겠습니다.


코드 다운로드

먼저 아래의 HTML과 CSS 코드가 들어있는 텍스트 파일을 다운로드 받습니다.


첨부파일 (구글 드라이브)


다운로드 받은 파일을 열어보시면 HTML과 CSS 코드가 있을겁니다. 먼저 CSS 코드를 전체 선택 후 복사합니다.


CSS 세팅

복사한 CSS 코드를 스킨에 붙여넣기 합니다.


구글 블로그의 경우에는 관리자 > 테마 > 맞춤설정 오른쪽 버튼을 눌러줍니다.


HTML 편집으로 들어갑니다.


친효스킨 for 구글블로거를 기준으로 설명드립니다. 아무 곳이나 클릭 후 Ctrl+F를 눌러서 검색창을 활성화 합니다. 한글로 "커스텀" 이라고 입력하면 CSS 코드가 모인 곳을 바로 찾으실 수 있을겁니다. 적당히 공간을 확보 후 방금 복사한 CSS 코드를 그대로 붙여넣기 합니다. 그리고 오른쪽 상단의 저장 버튼을 눌러 스킨에 적용시켜줍니다. 여기까지 세팅은 완료된 것입니다. 간단하죠?


HTML 사용법

이제 사용 방법입니다. 이것도 어렵지 않습니다. 일단 첨부파일의 HTML 코드를 살펴봅시다.


1
2
3
4
5
6
7
8
9
10
<figure class="rgyArticleLink">
    <a href="클릭URL" target="_blank" rel="noopener">
        <div class="rgy-image" style="background-image: url('이미지URL');"></div>
        <div class="rgy-text">
            <p class="rgy-title">타이틀</p>
            <p class="rgy-desc">대략적인 내용</p>
            <p class="rgy-host">도메인.tistory.com</p>
        </div>
    </a>
</figure>
 cs


이런 구조일 것입니다. 일단 한글로 작성된 부분만 수정하는건 아시겠죠? 하나 하나 풀어서 설명드리겠습니다.


클릭URL : 링크 클릭 시 이동하는 URL 주소를 입력

이미지URL : 썸네일로 지정할 이미지의 URL 주소를 입력

타이틀 : 링크 제목

대략적인 내용 : 말그대로 링크의 대략적인 코멘트를 작성

도메인.tistory.com : 굳이 티스토리 아니어도 해당 링크의 대표 URL 주소를 입력


도메인URL의 경우에는 구글 블로거(Blogger)에 적용하는 경우라면 https://rgy0409.blogspot.com/ 이 될 겁니다. 제 경우라면 말이죠. 아무튼 기호에 맞게 사용하시면 됩니다.


참고로 썸네일 주소가 정상적으로 적용되어야 위의 스샷처럼 이미지가 정상적으로 출력됩니다. 만약 썸네일 주소가 올바르지 않거나 그냥 안 넣으시면 썸네일 공간이 옅은 회색으로 처리됩니다.


이렇게 수정한 HTML 코드를 모두 재복사합니다. 그리고 티스토리나 구글 블로거의 글쓰기 모드를 HTML로 변경 후 원하는 위치에 그대로 붙여넣기 하시면 됩니다. 완전 쉽죠? 본문에 대략적으로 텍스트를 입력해서 코드 삽입 위치를 표시해두면 쉽습니다.


구글 블로거의 경우 왼쪽 상단에 있는 펜 모양의 아이콘을 누릅니다.


HTML 보기 메뉴로 들어가서 이제 본문 코드 수정을 하시면 되겠습니다. 지금 이 글의 윗 부분에 미리보기에 있는 링크가 바로 이 과정을 통해 완성된 모습인 것입니다. 그럼 모두들 잘 적용해 보시기 바랍니다. 오늘 내용 끝!

댓글

댓글 쓰기

비밀글은 삭제합니다. 공개글로 남겨주시기 바랍니다.

가장 많이 본 글

PC 부팅시 삐삐삐 소리 (경고음) 및 화면 안 켜지는 문제 해결 방법

이미지
이 증상은 보통 오래된 컴퓨터에서 발생할 확률이 높지만 놀랍게도 오늘 산 컴퓨터에서도 발생할 확률이 있습니다. 원인은 상당히 사소합니다. 일단 이 증상은 이렇습니다. PC전원 버튼을 누르면 "삑~ 삑삑삑! 삑~삑삑삑!" 하는 비프음 소리만 들리는 현상입니다. 화면은 아무것도 표시되지 않고요. 이 증상의 원인은 다음과 같습니다. 1. 습기나 먼지로 인한 POST 진입 불가 2. 그야말로 기기 결함 1번 경우 1번의 POST란 Power On Self Test의 약자로 컴퓨터에 전원이 들어가면 메인보드는 CPU, GPU, RAM을 테스트하는 짧은 과정을 거칩니다. 이 세 개의 장치가 모두 이상이 없으면 그제서야 화면이 뜨게 됩니다. 만약 이 셋 중에서 어느 하나라도 정상 범주에서 벗어났다 싶을 때 메인보드는 연결된 쪼그만 스피커를 통해 비프음을 출력하는 것입니다. 대체로 POST 과정에서 비프음이 들리면 가장 의심되는건 메모리(RAM)입니다. 과거 삼성전자 서비스에서 한창 일을 했을 때에서 POST 불량으로 접수되는건이 꽤 많았거든요. 특히 1년 사계절 중 여름때 접수가 많이 되었습니다. 한국의 여름 특징은 여러분들도 너무 잘 아실겁니다. 습하고 덥습니다. 비도 많이 오죠. 그렇습니다. 바로 습기에 의한 쇼트입니다. 그래서 오늘 구매한 컴퓨터에서도 문제가 발생할 수 있다고 말씀드린 것입니다. 실제로 어제 구매했는데 POST 에러로 접수하신 분도 계셨습니다. 딱 한 번요. 우리집 그래픽카드(왼쪽), 메모리(오른쪽 : 출처는 구글 이미지) 이런 경우에는 기본적으로 두 개를 메인보드에서 분리 후 테스트를 시도할 수 있습니다. 그래픽카드와 RAM입니다. 만약 그래픽카드가 없는 컴퓨터라면 그냥 메모리만 슬롯에서 빼낸 후 단자를 지우개 따위로 깨끗하게 청소 후 다시 꽂아보시기 바랍니다. 물론
더 보기 »

친효스킨 For 구글블로거(Blogger) 반응형 스킨 다운로드 및 사용 방법

이미지
안녕하세요. 친절한효자손입니다. 구글 블로거 전용 친효스킨을 드디어 완성시켰습니다. 완전히 무에서 창조된 스킨은 아닙니다. 공식 1세대 반응형 스킨을 개조하여 제작한 스킨입니다. 따라서 기본 스타일은 어느정도 완성이 된 상태에서 약간의 HTML 편집과 CSS를 조작하여 완성시킨 스킨입니다. 개인적으로는 상당히 깔끔해서 마음에 듭니다. 티스토리의 친효스킨 경우에는 약간 오밀조밀한 느낌이었다면 구글 블로거에서의 친효스킨은 뭔가 큼직큼직한것이 시원 시원한 느낌이 강합니다. 그러면 어떻게 적용시키고 사용하는지 알아보겠습니다. 현재 본 블로거에도 친효스킨 For 구글블로거 스킨이 적용되어 있습니다. 사용하기전에 먼저 스킨을 적용하기 전에 백업을 하시고 진행해주시기 바랍니다. 혹시 모를 문제에 대비해서 말이죠. 백업은 필수입니다. 백업 방법은 스킨 적용하는 과정에서 한번 다시 언급해 드리겠습니다. 신청서 작성하기 먼저 아래의 신청서를 작성해 주시기 바랍니다. 친효스킨 For 구글블로거 신청서 작성하기 (아직까지는) 무료로 배포 중 티스토리 친효스킨은 무료로 배포하다가 불미스러운 사건으로 인해 유료화를 했습니다. 후원으로 변경했지요. 이번 구글 블로거 전용 친효스킨도 무료로 배포를 시작합니다. 따라서 이 스킨의 유료화는 사용자 여러분들에게 달렸습니다. 부디 신청서에 작성하신 내용만 잘 지켜주신다면 앞으로도 유료화로 바뀔일은 없을 것입니다. 업데이트 기록 지금까지의 업데이트 내용입니다. Ver 1.1 -본문 상단 애드센스 2개로 분할 -애드센스 적용 시 모바일 해상도에서 가로 스크롤 발생하는 문제 수정 -본문 단락(p) 태그 상/하 10px margin 적용 Ver 1.2 -TOP 버튼 추가 스킨 적용하기 이메일로 받으신 스킨 파일을 잘 아는 폴더에 담아둡니다. 이제 관리자 화면으로 들어와서 테마 카테고리로 들어간 후 오른쪽에 보이는 맞춤설정 버튼의 바로 오른쪽 아래 표시 아이콘을 누릅니다. 복원 메뉴를 누릅니다. 하지만! 이 전에 바로 위에
더 보기 »

키보드 폴링레이트 테스트 프로그램 Keyboard Inspector (인스펙터) 다운로드 및 사용법

이미지
폴링레이트란? 키보드 폴링레이트라는것을 아십니까? 모니터의 주사율같은 개념이라고 이해하시면 됩니다. 보통 게이밍 모니터는 120~144Hz 짜리가 대표적인데 이 말은 1초에 120장~144장의 프레임을 연속해서 촤라라락~ 보여줄 수 있는 능력을 보유한 개념인 것입니다. 키보드도 그러합니다. 폴링레이트는 PC와의 데이터 송수신을 1초에 얼마나 할 수 있느냐라는 의미입니다. 보통 1K 제품들이 많으며 최근에는 8K까지 되는 게이밍 키보드도 출시가 되고 있습니다. 당연히 숫자가 클수록 초당 데이터 전송속도가 빠른 것입니다. 그럼 프레임레이트에 따라서 인간이 체감할 수 있느냐?! 라는 의문이 들 겁니다. 답은 '아니오'라고 이야기 할 수 있을 것 같습니다. 타이밍이 정말 중요한 리듬 게임의 경우를 제외한 나머지 상황이라면 사실 현재 출시된 일반적인 기계식 게이밍 키보드를 사용해도 충~분하거든요. 모니터의 경우도 그렇습니다. 144Hz 짜리 게이밍 모니터와 240Hz짜리 모니터를 비교해보면 차이를 모르거든요. 그럼에도 불구하고 고사양 하드웨어를 구매하는 이유는 별거 없죠? 정확한 사용 목적의 구매라면 당연히 마땅한 이유가 되지만 그렇지 않아도 구매하는 이유는 최대치의 능력 향상에 의한 회로 설계 때문입니다. 그만큼 세밀하고 꼼꼼한 설계로 이루어져 있을테니 내구성 부분에서도 꼼꼼한 설계를 했을것이라는 믿음이 생기는 것입니다. 물론! 이것도 제조사마다, 가격마다 천차만별입니다. 믿을만한 브랜드에 그만한 가격이라면 납득이 되지만 8K 키보드인데 듣보잡 브랜드에, 가격이 너무 저렴하다면 뻥스팩(스팩을 속이는 용어)이거나 뭔가 제조 과정에서 분명 부실한 과정이 있을거라는 생각을 할 수 밖에 없을겁니다. 세상 만물 모든 제품은 다 그만한 가격이 책정된 이유가 있는 것이죠. 키보드 인스펙터 (Keyboard Inspector) 다운로드 외국의 어떤 개발자께서 아주 고맙게도 키보드의 폴링레이트를 측정할 수 있는 유틸리티를 무료로 배포해 주고 계시는군요.
더 보기 »