테마 소개
vtrick 테마는 반응형 디자인으로 제작되어 다양한 기기에서 완벽하게 호환되며, 사용자 친화적인 인터페이스로 편리한 사용 경험을 제공합니다.
또한, 다양한 레이아웃 가젯 옵션과 커스터마이징 기능을 통해 블로그를 개성 있게 꾸밀 수 있습니다.
vtrick 테마는 최적화되어 있어 빠른 로딩 속도를 자랑하며, 검색 엔진 최적화(SEO)에도 유리합니다.
seo 최적화 성능 테스트 점수
해당 테마 테스트 메인 페이지가 아닌 테스트 용 블로그에서 이미지 20개와 약 5000자의 텍스트로 이루어진 블로그 글과 애드센스 자동 광고가 적용된 테스트 용 블로그에서 모바일 버전으로 테스트 하였습니다.
데스크탑은 왠만 하면 90점 이상이므로 모바일 버전만 테스트 하였습니다.
테마 구성
레이아웃 가젯(위젯)
상단 메뉴
HEADER LOGO : 상단 왼쪽에 로고 이미지 또는 블로그 이름 표시 하며 '페이지 헤더 가젯' 을 이용 하였습니다.
HEADER MENU : 3단의 메뉴 구성이 가능 하고 메가 메뉴 기능이 있어 데스트탑에서 드롭다운되어 최신의 글을 이미지와 제목을 표시 하며 링크 목록 가젯을 이용 하였습니다.
테마 On and off : White 모드, Dark모드 및 단일 모드로 사용 가능 합니다.
Featured Post
상단 메뉴 아래에 배치된 Featured Post은 최근 업로드 된 글 중 첫 번째 글 1개를 추천 글 가젯에 스타일(스킨)을 적용하여 보여줍니다.
TICKER NEWS
조회수가 가장 높은 글의 제목만 표시하며, 지정한 개수 만큼의 인기 글을 일정한 간격으로 순서대로 표시하며 가장 많이 본 글 가젯에 스타일을 적용한 것입니다.
TRENDING THIS MONTH
이 달 조회수가 가장 높은 글을 지정한 값 만큼 메모 스타일로 약간 겹쳐서 보여주는 기능이며 가장 많이 본 글 가젯에 스타일(스킨)을 적용한 것입니다.
리스트 스타일(스킨)
Novel
최신 글을 3가지 스타일(스킨)을 조합하여 표시하는 리스트 스타일 기능을 제공하며 HTML/자바스크립트 가젯에 스타일(스킨)을 적용한 것입니다.
Videos, Gadgets
이미지, 제목, 날짜가 1열로 표시되며 3개의 글을 보여줍니다.
두 가지 스타일(스킨)이 있으며, Videos는 이미지에 재생 아이콘이 있고 Gadgets는 이미지에 재생 아이콘이 없으며 HTML/자바스크립트 가젯에 스타일(스킨)을 적용한 것입니다.
Android
웹진 스타일(스킨)로 지정한 값의 개수만큼 글을 표시하며 HTML/자바스크립트 가젯을 사용하였습니다.
Resource
이미지와 제목, 날짜가 1열로 보여지며 3개의 글이 표시되고, 설정한 값에 따라 글 개수를 조절할 수 있습니다.
MAIN POSTS
작성자, 이미지, 제목, 일부 내용을 1열로 구성하여 보여주는 스타일(스킨)입니다.
데스크탑에서는 3열, 태블릿에서는 2열, 모바일에서는 1열로 표시되어 다양한 기기에 최적화된 화면을 제공합니다.
블로그에 업로드 된 글(게시물)을 최근 순으로 정렬하여 지정된 개수만큼 표시하고 블로그 목록 가젯에 해당 스타일(스킨)을 적용한 것입니다.
RELATED POSTS
Gadgets, Resource 스타일(스킨)과 동일하며, 블로그 본문 글에서 관련된 블로그 글(게시물)을 추천하여 본문 글 아래에 리스트 스타일(스킨)로 표시 되고 HTML/자바스크립트 가젯에 스타일(스킨)을 적용한 것입니다.
사이드바
{ads}
외부 광고를 추가할 수 있으며 HTML/자바스크립트 가젯에 스타일(스킨)을 적용한 것입니다.
Popular Posts
이번 주 조회수가 가장 높은 글의 지정한 값 만큼 인기 글을 표시하며 가장 많이 본 글 가젯에 스타일(스킨)을 적용한 것입니다.
Follow Us
블로그 관리자의 SNS(소셜 네트워크 서비스)와 연결해주는 기능이며, 링크 목록 가젯에 스타일(스킨)을 적용한 것입니다.
Latest Android
최신 글(게시물)을 지정한 개수 만큼 순서대로 표시하며 HTML/자바스크립트 가젯에 스타일(스킨)을 적용한 것입니다.
Comments
블로그에 달린 댓글을 최신 순으로 표시하며 HTML/자바스크립트 가젯에 스타일(스킨)을 적용한 것입니다.
Main Tags
블로그에 등록된 모든 라벨을 표시하며 라벨 가젯에 스타일(스킨)을 적용한 것입니다.
Contact Us
블로그 관리자에게 E-mail을 보낼 수 있는 있으며 문의 하기 양식 가젯에 스타일(스킨)을 적용한 것입니다.
하단
Comments
본문에 댓글 작성 및 작성된 댓글 스타일(스킨) 입니다.
ABOUT SECTION
About Us : 블로그의 로고와 블로그에 대한 간략한 설명을 보여주는 영역입니다.
Follow Us : 블로그 관리자의 소셜 네트워크 서비스(SNS) 계정으로 연결되는 링크를 제공하는 영역입니다.
FOOTER COL2
기부 가능한 QR코드 이미지와 링크 이동 버튼을 넣을 수 있습니다.
기부 외에도 이미지와 링크를 변경하여 다른 용도로 활용할 수 있으며 HTML/자바스크립트 가젯에 스타일(스킨)을 적용한 것입니다.
FOOTER COL3
Family : 세로 정렬로 된 텍스트 링크 이동 목록이며 링크 목록 가젯에 스타일(스킨) 적용한 것입니다.
Pages : 세로 정렬로 된 텍스트 링크 이동하며 페이지 가젯에 스타일(스킨)을 적용한 것입니다.
Cookie Consent
블로그 방문자에게 쿠키 사용에 대한 동의를 얻기 위한 기능이며 텍스트 가젯에 스타일(스킨)을 적용한 것입니다.
Left CTA button | Right CTA button
연락처와 메신저를 연결하는 스타일(스킨) 입니다.
부가 기능
리치 스니펫(Rich Snippet)
리치 스니펫(Rich Snippet)기능은 글을 작성하면 자동으로 블로그 글(게시물) 오른쪽 하단에 4.5~5점의 점수 및 투표 개수가 랜덤으로 표시되고 검색 결과에 리치 스니펫이 표시 되는 기능입니다.
자동 목차 생성
제목, 부제목, 소제목을 작성하면 자동으로 목차를 만들어주는 기능 입니다.
자동 목차 기능은 생성은 되지만 해당 제목에 이동 안되는 버그가 있습니다.
이 문제는 블로소득님의 이 수정 방법을 올려주신걸 참고 하시면 됩니다.
블로소득님 블로그 - 목차 이동 버그 수정
단축 코드
기본 버튼
Lorem Ipsum...
Lorem Ipsum...
Lorem Ipsum...
Lorem Ipsum...
Lorem Ipsum...받은메일
받은메일테이블 스타일
기본 <pre> 코드
매개변수를 포함한 코드 상자 문법: lang=""
매개변수를 포함한 코드 상자 문법: lang="js"
매개변수를 포함한 코드 상자 문법: lang="css"
단축 코드 - 페이지 이동
다운로드
첫 번째 방법
Download 버튼 클릭
두 번째 방법
코드 창 오른쪽 상단에 복사 아이콘 버튼 클릭
