이번 테마의 이름은 Derelogy 인데요! Dere(데레)+Logy(연구) 조합이 아닐까
싶은데요..(물어보진 않았지만) 제 생각으로는 테마명 "귀여운 것들에 대한
연구"가 아닐까 싶습니다.
무료테마를 다운로드 받기 전에 우선 Derelogy 테마의 특징부터 알아보도록
하겠습니다.
블로그스팟 무료테마 Derelogy 특징
블로그스팟, 티스토리의 공통점은 대기업이지만, 공용 서버를 사용한다는 점에서
느리다는 인식이 있습니다. 그래서 인기있는 테마, 스킨을 살펴보면 대부분
텍스트 기반으로 속도가 빠른 장점이 있는데요!
Derelogy 테마 또한 불필요한 이미지보다는 텍스트로 만들어져서 상당히 빠른
속도를 보이고 있습니다. 제작자이신 Igniel님께서 아마도 가장 신경쓰는 부분이
아닐까 싶은데요
Derelogy 테마의 특징은 북마크 기능, 상단 링크메뉴, 디스크립션 본문표시
등이라 할 수 있을것 같습니다.
1. 북마크 기능
먼저 북마크 기능을 살펴보면 썸네일 오른쪽이나 본문에서 [+]마크를 확인할 수
있는데요!
이걸 누르게 되면 우측 상단에서 한꺼번에 모아서 볼수 있기 때문에 시리즈
물이나 고정 방문자가 있는 블로그의 경우 상당히 유용한 기능이 될거라 생각이
됩니다.
쿠키값이 남아있으면 새로고침이나 다시 접속해도 여전히 북마크 기능이 유지되기
때문에 괜찮은것 같습니다. 이런 기능이 블로그스팟에도 구현된다는게 상당히
신기하면서도 재미있는 기능 같습니다.
2. 상단 링크메뉴
상단에 보시면 링크를 넣을 수 있는 부분이 총 3가지로 다양합니다.
- 페이지 링크
- 일반 링크
- 메뉴 링크
이렇게 나뉘는데 페이지 링크의 경우 가장 상단에 위치하고, PC/모바일이
동일하게 보입니다. 일반 링크는 로고 아래에 나오는데 CPC/RPM이 높은 글을
입력해둘수 있는 부분입니다.
메뉴 링크는 페이지 링크와 달리 PC에서는 전체로
보이고, 모바일에서 접혀서 보입니다.
3. 디스크립션 본문표시
블로그스팟 글을 작성하다보면 오른쪽에 검색 설명이라는 부분이 있습니다. 이
부분이 검색엔진에서 내 글을 판단할 때 일종의 줄거리로 인식하는 부분인데요~
기존에는 검색 설명 란에 작성한 후에 거의 볼일이 없지만, Derelogy에서는 검색
설명 란에 어렵게 작성한 디스크립션이 본문 상단(정확히 제목 아래)에 나오게
됩니다.
뉴스 기사들 중에서 요약문을 먼저 보여주는 형태가 있는데 그런 것과 비슷하다고
보시면 될것 같습니다. 개인적으로는 디스크립션을 통해서 검색자에게 본문의 신뢰성을 준다고
생각하기에 좋은 기능이라 생각합니다.
이렇게해서 제가 일주일 정도 테스트하면서 느낀 Derelogy 테마의 특징에 대해
알아봤습니다. 여기서부터는 마음에 드신 분들만 남아주시고 나머지는 계속
글쓰러 가시면 됩니다 😁
블로그스팟 Derelogy 테마 다운로드
테마의 특징이 마음에 드신 분들은 서둘러 적용하고 싶으실텐데요! 기존에
Fiksioner 테마의 경우 제작자 홈페이지에서 다운로드 받도록 안내를
해드렸는데.. 이렇게하니 초보자분들이 힘들어하시더라구요!
그래서 이번에 제가 테마 코드에 그대로 복사해서 붙여넣기만 하셔도 될 정도로
만들었습니다. 거기다가 주석을 한글로 달아서 수정하실 부분이 어떤 건지도 쉽게
알수 있게 해놨습니다.
파일이 안 열리시는 분은 "메모장"으로 열어주세요!
위 링크는 제 구글 드라이브 계정에 업로드해두었고, 다운로드 후
메모장으로 열어주세요!
테마 > HTML 편집 > 테마 코드 붙여넣기
Derelogy HTML 코드를 저장하신 후 제일 먼저 해야할 일은 페이지로 이동해서
북마크 페이지를 하나 만들어야 합니다. 이 페이지가 있어야 북마크 기능이
활성화 됩니다.
1. Derelogy 테마 초기설정
테마를 복사해서 붙여넣기 했다면 몇가지 코드를 수정해야 합니다. 최초 한번만 수정하면 됩니다.
크게 어렵지않으니 천천히 저를 따라서 코드를 찾아서 수정하시면 되겠습니다.
(1) 언어 설정
html lang='id-ID' ⏩ html lang='kr-KR'
3번째 줄에 위치한 언어 설정에 대한 부분을 수정하도록 하겠습니다.
현재 블로그 페이지의 언어에 대해 작성하는 부분인데 한국어(Korean)은 'kr-KR'입니다.
(2) 블로그 이미지 = 공유 이미지
<meta content='https://이미지 주소.png' property='og:image'/>
<meta content='https://이미지 주소 .png' name='twitter:image'/>
<meta content='https://이미지 주소 .png' name='twitter:image'/>
13번째 줄에 위치한 블로그 이미지를 수정하는 방법은 파란색 부분에 이미지 주소를 넣으면 됩니다.
SNS로 블로그를 공유했을때 나오는 이미지인데 우선 이미지를 결정하고, 페이지로 이동합니다.
새 페이지를 눌러서 이미지를 업로드하고 게시합니다. 해당 페이지로 들어가서 이미지 주소를 복사합니다. 그 주소를 위 파란색 이미지 주소에 붙여넣기 하면 됩니다.
(3) 블로그 작성자 정보 수정
<meta content='Your Name' name='author'/>
<meta content='Your Name' property='article:author'/>
<link href='https://www.blogger.com/profile/BLOGGER PROFILE' rel='me'/>
<link href='https://www.blogger.com/profile/BLOGGER PROFILE' rel='author'/>
<link href='https://www.blogger.com/profileBLOGGER PROFILE' rel='publisher'/>
<meta content='https://www.facebook.com/ID FACEBOOK' property='article:author'/>
<meta content='https://www.facebook.com/ID FACEBOOK' property='article:publisher'/>
<meta content='@USERNAME TWITTER' name='twitter:site'/>
<meta content=@USERNAME TWITTER' name='twitter:creator'/>
<meta content='Your Name' property='article:author'/>
<link href='https://www.blogger.com/profile/BLOGGER PROFILE' rel='author'/>
<link href='https://www.blogger.com/profileBLOGGER PROFILE' rel='publisher'/>
<meta content='https://www.facebook.com/ID FACEBOOK' property='article:author'/>
<meta content='https://www.facebook.com/ID FACEBOOK' property='article:publisher'/>
<meta content='@USERNAME TWITTER' name='twitter:site'/>
<meta content=@USERNAME TWITTER' name='twitter:creator'/>
18번째 줄에 블로그 작성자 정보를 수정하는 부분이 있는데요!
첫번째와 두번째 줄을 제외하고 삭제해도 됩니다. 수익형 블로그에서 사용하지 않는 부분입니다.
그래서 첫번째, 두번째 Your Name 란에 블로그에서 사용하는 이름을 입력하면 됩니다.
(4) 추적코드
<!-- Tracking Code -->
<meta content='xxxxxxxxx' name='google-site-verification'/>
<meta content='xxxxxxxxx' name='msvalidate.01'/>
<meta content='xxxxxxxxx' name='google-site-verification'/>
<meta content='xxxxxxxxx' name='msvalidate.01'/>
29번째 줄에 보시면 추적코드를 넣는 부분이 있는데요!
서치콘솔, 빙 웹마스터, 네이버 서치어드바이저 등 검색엔진에서 사이트 소유여부를 확인하는 코드를 이쪽에 모아서 넣어주시면 됩니다.
2. 북마크 페이지 생성하기
먼저 페이지로 이동해서 새 페이지를 하나 만들도록 하겠습니다.
제목에 bookmark 라고 입력하고,
본문에 아래 코드를 입력합니다. 이 코드를 입력할때는 HTML 보기를 눌러 코드
입력이 가능한 상태에서 입력하도록 합니다.
<div class='ignielBookmarks'></div>
북마크 세팅(레이아웃)
북마크를 생성했다면 북마크에 대한 세부 설정을 해보도록 하겠습니다. 레이아웃 메뉴를 클릭합니다.
레이아웃
> 테마 세팅으로 들어가면 알수없는(?) 코드가 보이는데 이 코드에 대한 세부
설명은 아래와 같습니다.
- maxWidget: 헤더의 북마크 메뉴에 있는 링크의 최대 개수
- maxAll: 정적 북마크 페이지의 최대 링크 수
- emptyText: 북마크된 글 목록이 없을 때의 보여줄 문자
- currentText: 정적 페이지가 열려 있을 때 북마크 메뉴에 표시되는 문자
currentText 같은 옵션들이 몇개 있지만, 생략한 이유는 수정할 부분이 아니기
때문입니다. 위 4개만 적절하게 수정해주셔도 되고, 기본값 그대로 사용하셔도 큰
문제는 없어요!
3. 내부링크 세팅
검색자가 내 블로그에 들어와서 여러 글을 읽어주면 너무나 좋을것 같은데요!
그렇게 하기 위해서는 내 글을 홍보해야하는데 매번 본문에 글을 넣자니 너무
귀찮습니다.
이런 분들을 위해서 Derelogy 내부에는 다양한 내부링크를 곳곳에 삽입할 수
있습니다.
본문 하단에 관련 글 넣기
relatedBottom 부분을 수정하면 본문 끝나는 부분에 관련 게시글을 자동을 넣을
수 있습니다.
- num: 관련 게시글의 수(미사용: 0 입력)
- image: 이미지 표시 여부 (true:사용, false:미사용)
본문 하단에 관련 글 자체를 삭제하고자 한다면 아래 코드를 삭제하세요!
<b:include cond='data:view.isPost AND data:post.labels' name='related'/>
본문 하단의 관련 글은 글이 안보이는 분들은 해당 글의 라벨이 미지정되어
있거나, 동일한 라벨의 글이 없기 때문에 라벨을 신경써서 글을 작성해보시기
바랍니다.
본문 내부(중간)에 글 넣기
relatedMiddle 부분을 수정하면 본문 중간중간에 반복적으로 게시글 링크를 넣을
수 있습니다. 개인적으로는 기본값보다 -1 정도면 적당하다고 생각하는데요! 아래
수치를 수정하면 됩니다.
- num: 관련 기사의 수(미사용: 0 입력)
- image: 이미지 표시 여부 (true:사용, false:미사용)
- text: 관련 기사의 마커 제목으로 사용되는 텍스트
text 란에 글자를 넣게 되면 제 블로그처럼 '함께 보면 좋은 글'이라는 형태로
나타납니다.
슬라이드(게시글 가로 2개) 사용법
특정 라벨의 글을 메인에 돋보이게 보여주고자 한다면 슬라이드(slide) 기능을
추천합니다.
슬라이드 설정은 앞선 테마세팅 본문 내부(중간) 글 넣기 아래에
있는데요!
설치하면서 세팅만 해두고, 실제로 사용할때는 레이아웃에서 슬라이드 메뉴만
활성화해주면 됩니다. 단점으로는 무작위(랜덤) 노출은 불가하고, 앞서
말씀드린대로 지정된 라벨만 표시됩니다.
- num: 기사의 수.
- content: 라벨 이름(대문자, 소문자, 기호 구분)
4. 링크메뉴 설정
메뉴는 크게 상/중/하 3가지로 구분할 수 있습니다. 헷갈리지 않도록 위에서부터
차례대로 설명드립니다.
페이지 메뉴(Page Links)
페이지 메뉴는 최상단의 메뉴로 모바일과 PC에서 동일하게 보여집니다.
펼침 메뉴로 나타나며 사이트 링크를 넣어도 좋으나 블로그 소개, 연락처, 사이트
맵 등의 내부페이지 링크를 넣는 것이 좋을듯한 위치입니다.
링크 리스트(Link List)
링크 리스트는 특정 게시글을 보여주고자 할때 사용하기 좋은데요! 블로그 로고를
이미지로 했을 때 로고 아래에 바로 링크 리스트가 나타나기 때문에 클릭하기
상당히 좋은 곳에 위치하고 있습니다.
블로그 내에서 고단가 게시글이 있다면 적절하게 배치해보는 것도 좋을것
같습니다.
메뉴(Menu)
해당 블로그의 메뉴를 입력하는데 PC에서는 펼침 메뉴로 보이지만, 모바일에서
접혀서 보입니다. PC 방문자가 많은 블로그라면 신경을 쓸 필요는 있겠지만,
모바일 위주 방문자가 많다면 적당히 인기 라벨 위주로 배치해도 좋을것
같습니다.
블로소득 블로그의 메뉴 코드는 아래와 같습니다. 제 블로그 메뉴 구조와
동일하게 사용하고자 한다면 이 코드를 복붙하셔서 주소와 이름만 수정하시면
됩니다.
<ul>
<li><a href='https://www.youtube.com/@블로그' title='멤버십 가입'>멤버십 가입</a></li>
<li class='dropdown'>
<span>테마 다운로드</span>
<ul>
<li><a href='https://vietrick.com/' title=' VTrick Template'>VTrick 테마</a></li>
<li><a href='https://blogsodk.blogspot.com/' title=' Fiksioner'>Fiksioner 테마</a></li>
</ul>
</li>
<li><a href='https://blogsodk.blogspot.com/search/label/코드' title='코드'>블로소득 코드</a></li>
<li><a href='https://blogsodk.blogspot.com/search/label/애드센스' title='애드센스'>애드센스</a></li>
<li><a href='https://blogsodk.blogspot.com/search/label/1억만들기' title='1억만들기'>1억 만들기</a></li>
</ul>
드롭다운(마우스 갖다대면 내려오는 메뉴) 코드만 보면 아래와 같습니다.
<li class='dropdown'>
<span>Dropdown</span>
<ul>
<li><a href='https://www.alamat.com' title='Sub 1'>Sub 1</a></li>
<li><a href='https://www.alamat.com' title='Sub 2'>Sub 2</a></li>
</ul>
</li>
드롭다운 코드만 따로 보시면 제가 어떻게 메뉴를 만들어서 사용하고 있는지
한눈에 들어오실겁니다.
5. 애드센스 광고 넣기
레이아웃 곳곳에 'Ad'로 시작하는 위젯들이 보이실겁니다. 저도 처음에는 이걸
활성화만 시키면 자동으로 애드센스 광고가 나오는줄 알았습니다.
하지만 그렇게 사용하게 아니라 콘텐츠 란에 애드센스 광고 코드를 넣고 저장을
해야 광고가 나오는 방식입니다. 쉽게 말해서 광고 넣고 싶은 공간을 미리
만들어둔거라 보시면 됩니다.
간혹 빈 깡통의 광고 위젯만 활성화하시고 이상한 코드(Responsive
Advertisement)만 보이다는 분들이 계시는데 광고 코드를 안넣어서 그렇습니다..
😅
6. 버튼 CSS 사용하기
마지막으로 다양한 기능만큼이나 버튼, 상자, 표 등등 다양한 요소들이 추가되어
있는 Derelogy인데요! 너무 많기 때문에 필요하신 분들은 아래 링크로 이동하셔서
번역 기능을 활성화해서 보시면 되겠습니다.
버튼 서식
Fiksioner와 비슷한 테마이기 때문에 버튼도 비슷한데 네모, 둥근 스타일 2개로
구분됩니다. 그리고 자주색이 바탕색이거나 자주색 글자로 만들어진 버튼으로
구분할 수 있습니다.
사용방법은 해당 버튼 아래에 있는 코드로 사용하시면 되고, 방법은 2가지로
알려드릴테니 편할걸로 쓰세요!
<a class="btn" href="https://페이지 주소" title="TITLE">Button</a>
<button><a href="https://페이지 주소" title="TITLE">Button</a></button>
<a class="btn round-l" href="https://페이지 주소" title="TITLE">Button</a>
<button class="round-l"><a href="https://페이지 주소" title="TITLE">Button</a></button>
<a class="btn-outline" href="https://페이지 주소"" title="TITLE">Button</a>
<button class="btn-outline"><a href="https://페이지 주소" title="TITLE">Button</a></button>
<a class="btn-outline round-l" href="https://페이지 주소" title="TITLE">Button</a>
<button class="btn-outline-l"><a href="https://페이지 주소" title="TITLE">Button</a></button>
버튼 서식 아이콘
버튼만 넣으면 뭔가 아쉽죠? 워드프레스처럼 아이콘을 넣을수 있으면 얼마나 좋을.... 넣어봅시다!
SVG 아이콘을 통해서 버튼 안에 아이콘을 넣을 수 있습니다. 아래 코드만
추가해주면 됩니다.
<a class="btn-outline round-l" href="https://페이지 주소" title="TITLE"><svg코드> 지원금 신청양식</a>
위 코드를 복사해서 붙여넣어보시면 SVG아이콘 넣는 자리가 어디인지 쉽게
이해하실겁니다. 쓸만한 SVG 리스트는 아래와 같습니다.| Icon | Code |
|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
박스 디자인
박스 디자인은 <div> 태그 내에 class 옵션을 사용해서 만드는데
인용문과는 다릅니다. 주요 내용 및 강조하고 싶은 내용을 박스 서식으로 만들면
좋습니다.
박스 아래에 있는 코드를 그대로 복사해서 붙여넣어 사용하시면 됩니다.
사용하다보면 자주쓰는 박스의 경우 거의 외워서 사용하시게 될겁니다.
Box 기본값
<div class="box">Box 기본값</div>
Box info 파란색
<div class="box info">Box info 파란색</div>
Box success 체크
<div class="box success">Box success 체크</div>
Box warning 경고
<div class="box warning">Box warning 경고</div>
Box danger 금지
<div class="box danger">Box danger 금지</div>
이렇게해서 Derelogy 테마 설치부터 사용방법까지 모두 알아봤습니다. 이 글
작성에만 3시간 정도 걸린것 같은데 누군가에게는 도움되는 글이었기를 바라면서
마무리하겠습니다.