'티스토리'에 해당되는 글 38건
CSS 텍스트 첫글, 첫줄 강조하기
블로그나 사이트를 운영하면서 제목이나 본문의 첫 글자 또는 첫 줄에 별도의 속성을 부여하여 강조나 디자인적인 효과를 낼 수 있는데요. 웹문서를 작성하면서 해당 문서의 글 색상, 크기 등의 설정을 변경하여 문서 특성을 살릴 수도 있지만 CSS 적용하여 일괄적으로 효과 적용이 가능합니다. :first-line { 속성값 } 글 중에서 첫 글에 별도로 속성을 부여할 수 있습니다. 티스토리의 경우 본문 첫 글자를 강조한 싶으면 스킨마다 다르지만 본문 내용 치환자를 감싸는 태그 클래스가 article일 경우 CSS에 .article:first-line { 속성값 }을 적용하여 첫 글을 강조할 수 있습니다. 첫글 강조하기 첫글 강조하기 보통 제목이나 본문 첫 글에 강조를 위한 폰트 크기와 색상을 변경하는 방식으로 ..
블로그&인터넷/CSS
2018.12.31 22:20
티스토리 공유 버튼 만들기
티스토리에서 제공하는 포트폴리오 스킨에 SNS 글 보내기 코드를 이용하여 사용 중인 스킨에 적용해 봤습니다. 이미지 처럼 페이스북, 트위터, 카카오 스토리, 카카오톡 공유버튼 만들기가 가능합니다. 공유 버튼 기능에 필수적으로 들어가는 코드들인듯한 것만 추려 봤는데, 적용하는 방법으로는 두 가지가 있는데 기본적으로 스킨의 각 위치에 삽입하는 방법과 티스토리 플러그인을 이용하는 방법입니다. 스킨을 수정하여 적용하는 방법 외부 문서를 불러오는 링크 태그는 HTML 사이에 넣어줍니다. icomoon.css의 역할은 각각의 아이콘을 만들어 주는데 신기하게 아이콘 이미지가 아닌 코드를 이용하여 만들어 표현합니다. 페이스북 트위터 카카오스토리 카카오톡 본문을 공유 버튼을 노출할 코드로 HTML 문서 내에 치환자를 찾..
블로그&인터넷/티스토리
2018.12.30 02:49
티스토리 Portfolio 스킨 SNS 공유버튼 만들기
티스토리가 제공하는 방응형 포트폴리오 스킨 본문 하단에 SNS 공유 버튼을 타 사이트나 블로그의 등에서 소스코드를 받아 복사할 필요 없이 HTML 편집만 조금 해주면 생성할 수 있습니다. 관리 > 꾸미기 > 스킨 편집 모드에서 상단 오른쪽 프리뷰 이미지 아래 'HTML 편집'을 눌러 코드를 수정할 수 있습니다. HTML 편집 모드에서 'Ctrl + F' 기능으로 'list_share' 문구를 이용하여 찾을 수 있으며 449 라인부터 454 라인까지 공유 코드로 주석 처리되어 있어 기본적으로는 노출이 되지 않습니다. 페이스북 트위터 카카오스토리 카카오톡 처리가 되면 코드가 노출이 되지 않기 때문에 웹상에 노출을 위해서는 제거를 해줘야 합니다. 붙은 것도 지워 주면 코드가 활성화되면서 속성 고유의 색으로 바..
블로그&인터넷/티스토리
2018.12.28 22:17
티스토리 사이드바 인기글 목록 추가하기
티스토리 블로그 사이드바에 조회 수 높은 순으로 글 목록을 적용할 수 있는 치환자가 추가되었습니다. 적용 방식은 최신 글 목록과 동일한 방식으로 전용 치환자를 사용하여 줍니다. : 인기글을 반복 출력합니다 : 글 주소 : 글 제목 : 글 댓글 갯수 : 작성자 이름 (*팀블로그용 치환자) : 글 발행시간 : 대표 이미지가 있는 경우 치환 : 대표 이미지 : 카테고리 이름 : 카테고리 리스트 url 인기글에 사용할 수 있는 치환자 목록입니다. 썸네일 치환자가 추가되면서 인기글에서도 썸네일 노출이 가능합니다. 이 블로그 인기글 기본 제공되는 샘플 코드로 ... 태그 사이에 추가하여 주면 사이드바에 인기글 목록이 추가 되게 됩니다. 스타일 코드 샘플은 제공을 하지 않기 때문에 직접 짜야 하는데 사용중인 최신 글..
블로그&인터넷/티스토리
2018.12.21 06:10
티스토리 블로그 사이드바 썸네일 치환자 적용
티스토리가 개편을 하면서 다양한 스킨과 추가적으로 사용가는 한 치환자들이 많이 추가되었는데요. 요즘은 사이드바를 사용하지 않는 1단 형 모바일 최적화된 신규 스킨들이 많이 사용하는데 개인적으로 PC 환경에서는 사이드바를 추구하는 편이라 고수하고 있는데 치환자를 지원하지 않을 때에도 스크립트를 추가하는 방법 등으로 적용은 가능하였지만 자체적으로 최근 글 목록에 섬네일을 사용할 수 있는 치환자가 추가되어 간편하게 적용을 할 수 있게 되었네요. 최근에 올라온 글 [＃＃_rctps_rep_title_＃＃] [＃＃_rctps_rep_rp_cnt_＃＃] [＃＃_rctps_rep_category_＃＃] 매뉴얼에 있는 기본 적용 HTML 코드로 사이드바에서 최근 등록된 글 목록을 보여주는 기능을 하는 기존 코드에 10..
블로그&인터넷/티스토리
2018.12.14 03:45
티스토리 애드센스 광고 언어 설정
구글 애드센스를 적용 중인 블로그를 운영하면서 영어로 된 광고가 간간이 나오는데 추가 코드를 삽입하여 한글로 된 광고가 노출되도록 설정해줄 수 있습니다. 두 개의 광고가 모두 영어로 나오고 있는데 방문자로 하여금 관심을 끌기 힘들어 보이고 영어를 잘 아는 한국인이라고 하여 저 광고가 관심이 생길까라는 의문이 듭니다. 기본적인 애드센스 코드에 다른 내용은 손댈 필요 없이'data-language=”ko” '만 추가해 주면 언어 설정을 한국어로 지정할 수 있는데 코드를 적용 후에도 한글 우선 적용 방식으로 영어 광고가 비중이 줄어들 뿐?? 차단되어 전혀 나오지 않는 것은 아니었습니다. 포스팅 주제와도 많은 관련이 있겠지만 체험상 인지도 낮은 블로그에서 영어된 광고가 많이 나오는듯하고 양질의 콘텐츠가 많은 블..
블로그&인터넷/티스토리
2018.08.06 16:39
티스토리 블로그 애드센스 플러그인 사용할 때 주의할 점
티스토리는 애드센스 광고 코드를 삽입하기 편하게 플러그인을 제공하고 있습니다. 이는 스킨에 직접 적용하지 않기 때문에 스킨을 잘못 건드리는 일이 없을뿐더러 스킨을 변경하여도 자동적으로 적용이 되는 등의 적용법을 잘 모르더라도 어려움 없이 사용할 수 있는 편리함을 주는데요. 반응형 코드를 적용할 때 지동으로 적용하지 않고 사이즈별로 크기를 지정하는 스타일 코드를 같이 삽입 하였을 때 코드가 RSS 피드에 그대로 노출이 되는 문제 발생합니다. RSS 받아보면 내용보다는 상단 플러그인에 적용된 미디어 쿼리가 노출되어 본문은 전혀 보여주지 못하고 오른쪽 앱의 경우에는 일부 애드센스 코드까지 포함되어 보이고 있네요. 왼쪽 이미지를 보면 반응형 코드를 모두 제거하고 광고 코드만을 적용하였는데도 일부 코드가 노출되고..
블로그&인터넷/티스토리
2018.07.31 22:08
티스토리 블로그 이름 변경
티스토리에서 블로그를 개설해서 하다 말다 운영을 반복하면서 6년 정도 지난듯합니다. 처음에 이름도 대충 만들었고 분위기도 바꿀 겸 블로그 이름을 변경하려니 여러 검색, 포털 사이트에 노출에 영향이 있지 않을까 하여 검색을 해봤는데 관련 내용을 찾기 힘들더군요. 어렵게 검색한 몇 안 되는 내용에는 웬만하면 손대지 마라가 대부분이 더라고요. 스킨만 바뀌어도 노출에 영향을 줄 수 있다는 말을 많이 들어 블로그 이름도 스킨에서 정보를 주는듯한데 그나마 오던 방문자 유입도 안될까 겁이 나서 살짝 망설였는데 뭐 일 방문자가 많은 것도 아니고 변경해보기로 했습니다. 티스토리는 PC든 모바일 앱이든 간단하게 이미지, 이름, 정보 변경이 가능하도록 되어 있습니다. 블로그 제목을 변경을 한 후 내용이 적용이 되는 데는 하..
블로그&인터넷/티스토리
2018.07.19 03:26
티스토리 반응형 스킨 이미지 가로로 나열하기
티스토리 반응형 스킨을 사용하는 블로그에서 이미지 2장 또는 3장을 나란히 배열하는 방법입니다. 잘 만들어진 스킨에서는 자동으로 조절이 될 수도 있으나 스킨에서는 사이즈를 자동 조절해 주지 못하는 경우에 나름 유용할 것 같네요. HTML 모드에서 수정이 필요하기 때문에 이방법을 사용하기 위해서는 약간의 HTML을 사용할 줄 알아야만 적용이 가능합니다. 티스토리에 이미지를 등록하고 HTML 모드로 확인 해보면 [＃＃_1N|cfile7.uf@992E1C425A843D3C3DEB4q.jpg|width="226" height="127" filename="DSCF2490.jpg" filemime="image/jpeg"|_＃＃] 이런 치환자가 생성 되는데 이를 수정하거나 부모 태그 등을 수정하여야 합니다. 티스토리..
블로그&인터넷/티스토리
2018.02.15 02:03
티스토리 블로그 사이드바에 추천글 목록 추가하기
티스토리 블로그에서 특정 글을 사이드바에 최신 글 목록이 아닌 공지사항처럼 별도로 뽑아서 따로 분리하여 넣는 간단한 방법입니다. 사이드 바 최신 글 목록은 시간이 지나고 글 수가 많아지면서 자연스레 묻히게 되는데 인기글이나 추천하고 싶은 글을 간단하게 따로 모아서 사이드바에 목록을 만드는 방법으로 스킨 수정이 가능하다며 직접 스킨에다가 삽입을 해도 되는데 스킨수정없이 좀 더 간단하게 사이드바 모듈을 이용해서 만드는 방법입니다. 사이드 바 구글 검색 창 아래에 추천글 바로 가기를 만들어 넣으려고 합니다. 글쓰기로 들어와서 적당한 글 박스를 고르고 박스 안에다가 글 제목을 입력합니다. 새 탭을 띄워 추천할 글의 주소를 복사합니다. 글 주소를 알고 있으며 직접 작성이 가능하다면 이과정은 패스합니다. 제목을 드..
블로그&인터넷/티스토리
2018.02.08 01:32
티스트로 블로그 멀웨어 또는 악성코드로 인한 유해한 사이트
언제부터인가 크롬에서 첨부한 파일을 다운로드하려면 멀웨어 또는 악성코드 어쩌고 하면서 시뻘건 배경이 나오면서 위험한 사이트라더군요.. 티스토리 몇몇 블로그 및 제 블로그가 크롬에서 접속도 못하는 상태가 잠깐 있기도 하였기에 작은 오해 이거니 하며 자연스레 해결될 줄 알고 그간 방치했는데 파이어 폭스에서도 같은 현상이길래 심각성을 깨닫고 불야불야 문제 해결에 나섰네요... 검색해보면 '올블릿'이나 '플러그인' 또는 기타 광고로 인한문제로 저는 해당사항이 없습니다. 몇몇 프로그램 빼고는 레인미터 스킨 및 대부분의 파일을 위와 같은 경고를 하며 다운로드하지 말라고 합니다. 구글 웹마스터(https://www.google.com/webmasters/tools/home?hl=ko) 도구도 오래전부터 사용 중이고 ..
블로그&인터넷/티스토리
2017.01.06 01:06
티스토리 Callback 플러그인 오류
얼마 전 다른 분의 스킨이 폭은 문제가 없는데 가로 스크롤이 자꾸 생겨 고생 끝에 콜백 플러그인을 해제하고 해결됐다는 말을 듣고 스킨과의 충돌 때문인 줄 알았는데 그게 아이었던 모양입니다. 파이어 폭스로 스킨에 문제가 없는지 확인 중 모든 글에 일정한 길이의 세로줄이 생겨 한참 해 멨는데 콜백 플러그인과 Flash Player 간의 문제였나 봅니다. 위처럼 본문 우측에 시커먼 세로줄이 생깁니다. 박스 문제인 줄 알았는데 일정한 위치도 아니고 모든 페이지에 위와 같은 줄이 생기는데 자주 사용하는 크롬에서는 안 보이니 낯선 파이어폭스로 요소 검사 일일이 찍어가며 border 때문일 거라는 확신을 가지고 아무리 찾아봐도 없어 엄청 고생했네요. 본문에 'overflow: hidden' 속성을 제거 하는순간 넓적..
블로그&인터넷/티스토리
2016.12.28 12:46
티스토리 블로그 꾸미기 (사이드바 모듈 접기,펼치기 제이쿼리)
블로그를 하면서 글 작성 시 내용을 그리 길게 적기 않기에 본문에 비해 사이드바가 상당히 길어 사이드 바를 깔끔하게 보고자 오랜 시행착오 끝에 제이쿼리를 이용해 제목을 클릭 해면 열리고 그 외 다른 모듈들은 닫히는 방식으로 완성한 소스를 공유합니다. 정식으로 배운 적이 없기에 여러 메뉴를 만들어 주는 사이트나 지식을 공유하는 블로그 등지를 돌아 봤지만 티스토리 사이드바와 비슷한 환경의 소스가 없어 매우 고생하며 만들었네요.. Category Recent Post . 제가 사용하는 스킨의 사이드바 환경입니다. 위와 같은 방식에 클래스명이 다를 경우 제이쿼리에서 그에 맞게 클래스명을 부여해주면 되지만 구성이 다를 경우 HTML을 수정하던지 적용이 어려울 수 있겠습니다. H3를 클릭하면 'ul' 태크를 펼치거..
블로그&인터넷/티스토리
2016.12.26 01:20
CSS 마우스 오버 효과 (이미지 확대)
CSS 속성으로 이미지에 마우스를 올렸을 때 이미지가 확대되는 효과로 여러 사이트나 블로그 등지에서 링크 걸린 썸네일 이미지에 많이 사용되고 있는 방법입니다. transform:scale 값을 hover 와 다른 값을 적용하여 마우스를 올렸을대 크기를 변경하고 transition으로 변경되는 속도를 조절하여 효과를 극대화합니다. 아래 이미지에 마우스를 올리면 효과를 확인할 수 있습니다. .sample_image img { -webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1); transform:scale(1); -webkit-transition:.3s; -moz-transition:..
블로그&인터넷/기타
2016.12.25 01:23
제이쿼리 탑버튼
여기 저기서 이런 저런 방법들을 모아 짜집기해서 만들어 본 탑 버튼 소스입니다. css편집이나 HTML에 태그 추가등의 작업 없이 사이나 위에 스크립트 소스만 추가하면 되는 방법입니다. 많은 스킨에 적용해보진 않았지만 대부분의 스킨에서 잘 작동할것 같습니다. 123456789101112131415161718192021222324252627282930 $(document).ready(function() { $("body").append("▲ TOP"); var top = $(".return_top"); $(window).scroll(function () { if ($(this).scrollTop() > 120) { top.slideDown(); }else { top.slideUp(); } }); top.c..
블로그&인터넷/기타
2016.12.24 05:44
티스토리 첫 페이지 꾸미기 - 인덱스 페이지
티스토리에 소흘한 동안 새로운 치환자가 생겨 티에디션이나 제이쿼리등의 도구없이 첫페이지를 썸네일과 함께 목록을 만들 수 있는 인덱스 페이지를 꾸밀수가 있게 되어 한 보름정도 정신없이 주물러 봤습니다. 2-8-7. 퍼머링크 페이지 / 인덱스 페이지 링크를 따라 가시면 가이드를 확인할수 있습니다. 미력하나마 제가 꾸며본 속성이 도움이 되어볼까 하고 공유합니다. 사이이드바, 헤더, 풋터를 제외한 본문을 구성하는 내부 최상단에 ... 인덱스 영역을 지정합니다. 바로 붙여서 그 외 나머지 부분을 전부를 ... 퍼머링크로 지정하여 본문 고유영역을 만들면 http://speedinkland.com/327 와 같이 글 주소가 붙지 않은 http://speedinkland.com 같은 카테고리, 검색 등의 주소에서는 본..
블로그&인터넷/티스토리
2016.12.22 23:30
Color Scripter 소스코드 강조하기
HTML, CSS, Java Script, Php 등의 소스 등을 블로그 등에 게시할 때 여러 편집기들처럼 코드에 컬러를 부여해 가독성을 높여주는 아주 유용한 도구입니다. 소스 등을 보여줄 때 기존에는 SyntaxHighlighter 라는 도구를 설치하여 사용하였지만 Color Scripter를 이용하면 설치 등의 불편함이 없이 HTML 수정이 가능한 게시물이라면 어디에서나 사용 가능해 보입니다. 인터넷 브라우저에서 바로 사용 가능한 웹 버전과 PC에 프로그램을 다운로드하여 사용하는 PC 버전 두 가지고 사용 제한 없는 무료이며 기부를 받고 있습니다. 컬러 스크립터로 코드를 작성한 뒤 우측 하단의 복사 버튼을 클릭 후 작성 중인 문서에 붙여 넣기만 하면 깔끔하게 적용되고 3가지 스타일과 간단한 설정 기능..
블로그&인터넷/기타
2016.12.19 22:08
반응형 블로그 동영상 자동 크기 조절 방법
반응형 블로그에서 유튜브 등의 사이트에서 링크가 아닌 바로 시청이 가능한 소스를 가져올 때 동영상 크기가 맞지 안아 본문 범위를 벗어나 잘리거나 다른 영역을 침법 하는 경우가 있는데 유동적인 넓이에 따라 동영상의 사이즈도 같이 가로, 세로 조절되게 하는 제가 아는 두가지 방법입니다. 1. CSS 속성 예전에 외국 어느 사이트에서 퍼온 방식으로 작성중인 글에 동영상을 삽일 할때 동영상 소스를 동영상 코드 태그로 감싸줍니다. .video { position: relative; padding-bottom: 56.25%; height:0; overflow:hidden; } .video iframe, .video object, .video embed { position: absolute; top: 0; left:..
블로그&인터넷/기타
2016.12.19 00:03
티스토리 섬네일 카테고리 글 더보기
기존 카테고리 더 보기 기능은 플러그인으로 이미지 없이 단순 목록으로만 지원하여 섬네일 기능을 지원 사이트등을 돌며 제공하는 코드를 적용해봤지만 로딩 속도도 느리고 광고도 나오고 관계없는 이미지들이 링크되어 포기하고 있었는데 여러 블로그를 돌면서 썸네일 방식의 카테고리 글 더 보기를 사용하는 걸 보고 티스토리에서 기본 제공하는 반응형 스킨 #2 새로운 치환자를 사용하는 부분을 가져와 약간을 수정을 거처 섬네일을 지원하는 카테고리 글 더 보기를 적용해봤습니다. '' 카테고리의 다른 글 : more .tit_related { font-size: 12px; color: #222; margin-left: 3px; } .link_more { float: right; font-size: 13px; color: #a..
블로그&인터넷/티스토리
2016.12.02 23:28
티스토리 블로그 네이버 검색 RSS 피드 등록
티스토리 블로그는 다음에는 RSS 자동 등록되어 노출이 되지만 네이버의 경우 글을 10개 정도 작성하고 운영 중이면 짧게는 1주일 길게는 한 달 정도 기다리면 자동으로 검색 피드 등록되어 유입이 발생하더군요. 하지만 자동 등록되지 않는 경우도 많고 자동 등록되기 만을 마냥 기다릴 수도 없기에 수동으로 검색 등록하여 노출되게 하는 방법입니다. 신청을 하여도 블로그 내용이 불건전하거나 하는 등의 이유로 검색 노출이 되지 않거나 등록 거부 당할 수도 있습니다. 네이버 메인 페이지 하단에 "고객센터" 또는 검색 중 블로그 더 보기를 선택하면 "외부블로그 RSS 등록"이 나오는 등록을 클릭하여 고객센터로 접근합니다. https://help.naver.com 고객센터에서 "검색 등록" 항목이 아닌 "블로그"를 선택..
블로그&인터넷/티스토리
2014.11.10 20:51
티스토리 블로그 2차 주소(독립 도메인) 연결
티스토리 2차 주소를 연결하면 블로그의 브랜드 화 등의 장점과 기존 검색에 노출되던 1차 주소 와 중복 처리되어 유사 문서, 검색 누락 등의 네이버 노출 문제로 인한 방문객 감소라는 큰 불안감으로 인해 오랜 시간 독립 도메인을 같고 싶어 갈등하였는데 저품질 블로그 걸려 검색하면 글들이 최소 3페이지 레인 미터 관련 글은 7폐지로 밀려 방문자가 어마 무시하게 줄어 이번 기회에 도메인을 구입하였습니다. 방문객 감소라는 불안감은 없으니까요....; 1차 주소 speedink.tistory.com을 줄여 speedink.com로 하고 싶었지만 이미 사용 중이라 speedinkland.com를 구매하고 연결하였는데 티스토리 연결을 지원하지 않아 "2차 블로그 주소가 티스토리를 가르치고 있지 않습니다." 메시지로 ..
블로그&인터넷/티스토리
2014.11.03 21:25
블로그 영어 한글 폰트 따로 지정하기
블로그를 운영하다 보면 영어를 종종 사용하는데 한글 폰트를 사용하면 영어 표현이 조금 아쉽고 영어 폰트를 사용하면 한글이 아쉽고 영어 폰트를 사용하면 한글은 굴림으로 표현되는 것 같은데 굴림 폰트가 마음에 든다면 문제가 없지만 나눔 고딕을 좋아하는 저로선 나눔 고딕의 영어체가 영 마음에 들지 않아 검색을 해봐도 영어와 한글 폰트를 별도로 지정하는 방법은 없다는 결론이더군요. 낙심하고 있던 중 블로그 스킨을 보면 여러 폰트를 지정하고 사용하는 것을 보고 힌트를 얻어 적용해 보았습니다. font:12px/1.5 '돋움', 'dotum', 'Tahoma', 'AppleGothic', Sans-serif; 티스토리 기본 스킨중 하나의 스킨에 적용된 폰트 속성입니다. 폰트가 순서대로 나열되어 있는데 방문객이 "돋..
블로그&인터넷/기타
2014.10.22 19:22
티스토리 블로그 갤러리형 목록/썸네일 목록/사이드바 썸네일
티스토리 블로그는 티에디션 이외에는 공식적으로 썸네일 이미지를 지원하지 않기에 첫 페이지를 제외하고 검색이나 카테고리 목록 등에는 글 제목만으로 표현할 수 밖에 없습니다. 하지만 요즘은 티스토리용 반응형 스킨도 잘 만들어져 티에디션을 사용하지 않고도 블록으로 된 이미지 목록도 표현하고 사이드 바에도 썸네일과 함께 글 목록이 나오고 하여 방법을 찾다가 yongzz 사이트를 발견하고 공개된 jQuery 소스 사용하여 블로그 디자인에 맞게 이리저리 수정 적용한 결과 매우 만족하게 사용 중입니다. 현재 블로그에 검색 또는 카테고리 선택시 보여지는 목록입니다. 글 작성시 지정한 대표 이미지가 보여지고 이미지가 없을 때 카테고리의 블로그 이미지가 노출되는 등 약간의 문제가 있으나 뭐 매우 만족하고 사용 중입니다. ..
블로그&인터넷/티스토리
2014.10.16 02:26
티스토리 SyntaxHighlighter 오류 <span>
블로그에서 소스코드를 깔끔하게 표현해주는 SyntaxHighlighter 사용하다 보면 스킨의 문제인지 가끔 위 이미지처럼 span 태그가 생겨 의도치 않은 코드를 보여 주더군요. 문서 편집기 HTML 모드에서 SyntaxHighlighter 소스코드에서 태그로 줄 바꿈 하는 것을 태그 지우고 엔터키로 직접 줄 바꿈을 해주니 span 태그가 생기는 문제가 사라 지더군요 위 이미지 처럼 태그를 빼고 직접 줄 바꿈 합니다. 속썩이던 span 태그가 사라졌습니다.
블로그&인터넷/티스토리
2014.09.30 18:43
티스토리 다운로드 버튼 만들기
티스토리에 파일을 업로드 하여 공유할 때 위처럼 자동으로 다운로드 버튼을 만들어 주는데 티스토리에서 지원하는 다운로드 버튼이 밋밋하여 마음에 들지 않을 때 링크를 만들어 자신의 디자인을 적용 하는 방법 입니다. 글 작성 시 미리 보기를 이용하여 업로드된 파일의 주소를 알아냅니다. 미리 보기창이 뜨면 자동 생성된 다운로드 버튼을 우 클릭하여 링크 주소를 복사하고 자동 생성된 다운로드 버튼을 문서에서 삭제합니다. 문서에서 지우더라도 파일 보관함에는 파일이 남아 있어야만 링크가 가능합니다. 버튼을 이미지나 텍스트로 만들어 놓고 링크를 현재창으로 걸어줍니다. 편집기의 링크 기능을 사용하지 않고 HTML 편집으로 직접 작업 해도 됩니다. 다운로드 편집기 링크 기능을 사용하여 링크를 생성하였다면 class="tx-..
블로그&인터넷/티스토리
2014.09.28 20:38
SyntaxHighlighter - 티스토리 소스코드 꾸미기
SyntaxHighlighter는 HTML, CSS, javascript, php 등의 소스코드를 일반 텍스트로 보여줄 때 보다 색을 넣어 가독성을 올려 주고 여러가지 디자인과 설정을 할 수 있으며, 마우스 우 클릭 잠긴 설정된 블로그나 사이트에서 더블 클릭으로 코드 복사가 가능 해집니다. SyntaxHighlighter 사이트에서 Click here to download 클릭하여 압축 파일을 다운 받습니다. 압축을 풀면 여러 폴더가 있는데 그중 scripts 폴더와 styles 폴더의 파일을 업로드 합니다. 전 부 올릴 필요는 없고 styles 폴더의 shThemeDefault.css, shCoreDefault.css 두 파일과 scripts 폴더의 shCore.js 파일은 필수로 필요하고 나머지는 추..
블로그&인터넷/티스토리
2014.09.25 16:25
다국어 지원 블로그 - 구글 번역기 달기
자신의 티스토리 블로그나 사이트에 구글 번역기를 이용해 다국어를 지원 할 수 있습니다. https://translate.google.co.kr/ 구글 번역 사이트에 웹사이트 번역기를 선택하면 번역기 코드 생성 단계를 시작하는 번역 코드를 얻기 위해서는 구글 아이디가 필요 합니다. 구글 번역 도구에 대해서 간단한 설명이 있고 "추가" 버튼을 이용하여 다음 단계로 진행 합니다. 블로그 주소와 블로그에 작성된 언어를 선택하고 다음 단계로 진행 합니다. 간단한 몇 가지 설정을 하는데 디자인이나 크기 등은 변경할 수 없고 로고 위치 정도만 지정 가능하고 구글 웹로그 분석을 이용하시면 아이디 코드를 등록 합니다. 메타 코드는 넣고 나머지 코드는 번역기를 표시할 곳에 넣습니다. 제 블로그에 사이드바 최 상위에 적용하..
블로그&인터넷/기타
2014.09.14 02:05
블로그 글꼴 꾸미기 (구글 무료 웹폰트)
구글에서 제공하는 한글 웹폰트 입니다. 폰트파일을 다운 받을 필요도 없고 업로드 할 필요도 없이 스타일 시트에 임포트와 속성만으로 폰트를 적용 하여 블로그를 꾸밀 수 있도록 해주며, 한글체는 6개이며 무료로 사용할 수 있습니다. @charset "utf-8"; @import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css); body { font:12px/1.5 Nanum Gothic, Verdana, AppleGothic, Sans-serif; color:#666; } HTML/CSS 편집에서 style.css 열어서 글꼴을 주소를 붙여넣고 속성 지정만 해주면 됩니다. http://www.google.com/fonts/earlyaccess Ha..
블로그&인터넷/기타
2014.02.07 02:00
티스토리 페이징 마우스 효과 없애기
티스토리 블로그 페이지를 선택하는 페이징 부분에 현재 페이지나 더 이상 넘길 페이지가 없는데도 "이전" "다음" 버튼 :Hover 반응을 없애주는 방법 입니다. ◀ PREV [＃＃_paging_rep_link_num_＃＃] NEXT ▶ .paging { padding:20px 0; text-align:center; } .paging a { display:inline-block; padding:0 5px; color:#fff; } .paging a:hover { background:#353535; color:#006ca6; text-decoration:none; } .paging .numbox { display:inline-block; margin:0 -2px; padding:0 5px; backgroun..
블로그&인터넷/티스토리
2014.02.06 20:12
