[티스토리]네이버 공유 버튼 만들기(블로그,카페,포스트,폴라)

안녕하세요. 오늘은 네이버 공유 버튼을 만들어 보는 시간을 가져 보겠습니다. 바로 이버튼이죠!! 클릭하면 공유가 됩니다. 몇 일전에 카카오톡 공유버튼을 만들었는데 이번에는 네이버의 공유 버튼도 만들어 보겠습니다. 최근에 네이버 공유 API 제공으로 블로그 공유뿐 아니라, 카페, 포스트, 그리고 폴라 서비스까지 손쉽게 공유 가능 하도록 개발 코드를 제공 해주었는데요. 오늘은 네이버에서 제공하는 공유 API를 응용해서 공유버튼을 하나씩 천천히 만들어보겠습니다. 누구나 손쉽게 만들 수 있으니 찬찬히 따라오세요!! ㅎㅎ 카카오톡 버튼이 궁금하시다면 아래 링크를 참고하세요. http://cocosoft.kr/350 - [티스토리]카카오톡 공유 버튼 만들기(제목+썸네일+링크) 본격적으로 시작해보자 우선 네이버 De..

Tistory Blog/Html,Css 편집 2016. 2. 18. 00:59

티스토리 실시간 새글 알림 및 네이버me 열린이웃 RSS 구독에 대한 고찰

오늘은 제목이 거창한 만큼 티스토리 블로그의 새글 알림을 할 수 있을까? 에 대해서 깊이 생각하고 연구해보는 시간을 가져보겠습니다. 우선 새글 알림의 필요성을 느끼게 된 계기는 다음과 같습니다. 티스토리는 기존에는 다음view 라는 서비스를 통해이웃 관리 없이도 블로그의 양질의 콘텐츠를 확인할 수 있었습니다. 하지만▼다음뷰가 종료되고 새로생긴 공감 서비스 2014년 다음view가 서비스 종료되고 새로 생긴 ♡공감이라는 서비스는다음의 모든 콘텐츠의 통합되고 블로그 발행글 주제 분류는 지원하지 않으며;; 거의 대부분 시사 뉴스가베스트 공감에 올라가게 되어 버렸습니다. 티스토리 자체홈에서 블로그 발행글 주제별로 콘텐츠를 제공하고 있지만일간 베스트만 제공하고 있지 하루가 지나버린 콘텐츠에 대해서는 확인이 불가능..

IT Review/Site,Social,Tech 2016. 2. 17. 00:52

[티스토리]블로그 로고 만들기 사이트 및 마우스오버 효과(pure css)

블로그를 시작하고 드디어 3번째 이사(?) 블로그 스킨 작업이 마무리가 되어가네요. 스킨을 변경 할 때마다 새로운 마음으로 시작 하는 것 같아서 뭔가 뿌듯하고 기분이 좋습니다. 블로그 스킨의 가장 마무리를 장식할 부분이라고 한다면 저는 로고 작업이라고 생각하네요. 한 눈에 자신만의 블로그 개성을 표현할 수 있고 방문객들에게 오랫동안 블로그의 기억 할 수 있게? 기억하기 쉽고 아름다운 블로그의 이름과 로고는 매우 중요 한 것 같습니다! 블로그의 화룡점정!! (코코소프트는.. 제가 어릴 때 코코폰인가? 그거 갖고 싶어서 그냥 만들었던 기억이.. 너무 어릴 때라서..ㅋㅋ 암튼 네이버 다음 네이트 등등 웬만한 포털과 사이트들 게임 아이디나 전부 cocosoft 였네요. 최근 몇 년 전에는 게임앱 개발 회사 중에..

Tistory Blog/Html,Css 편집 2016. 2. 16. 01:33

블로그 웹페이지 속도 측정 분석 사이트 및 속도 향상 방법

최근 반응형 웹페이지 및 쾌적한 웹환경 구축을 위해서 웹페이지 속도를 측정하고 분석해서 최적화된 웹페이지 블로그를 만드는 것이 중요해 졌습니다. 티스토리는 서비스가입형 블로그 이지만, html 및 css의 편집을 할 수 있게 제공하여서워드프레스같은 설치형 블로그의 요소도 갖고 있습니다.그래서 완벽하게 속도 향상을 위해 사이트를 수정 하는 것은 제약이 있을 수 있지만최대한 속도 향상을 위해 최적화 하는 방법을 알아 보겠습니다! 제가 가장 자주 사용하고 추천하는 블로그 웹페이지 속도 분석 사이트를 알아보겠습니다. GTmetrix 구글의 PageSpeed 와 야후의 YSlow 두 분석 도구를 사용해서 점수화 해서 보여줍니다.테스트 서버는 캐나다 벤쿠버에 위치해 있으며 파이어폭스 브라우저를 사용해서 분석을 합니..

IT Review/Site,Social,Tech 2016. 2. 14. 02:16

[CSS]티스토리 하단 출처 이미지 넣기 및 위젯 순서 변경 정리!

안녕하세요. 오늘은 티스토리 하단 부분에 출처 이미지를 넣어 보겠습니다!! 요런식으로요!이게 간단해 보이지만 자그마치 3개의 코드 기술이 합쳐진 컴비네이션. 아니고.. 누구나 손쉽게 따라 할 수 있게 해보겠습니다! 크게 하단 부분에 이미지를 넣는 방식은 2개가 있습니다. 1). 직접 태그를 사용해서 넣는 방식2). 태그를 사용해서 박스를 만들고 backgroud CSS 속성으로 넣는 방식(jQuery를 사용하는 방식도 있긴한데 나중에 갤러리효과를 소개할 때 따로 설명하고) 두개의 방식이 비슷 하긴 하지만 아래와 같은 차이가 있습니다.하는 이미지로 인식을 하고 다른 하나는 그냥 페이지로 인식을 하고 하나는 이미지파일이 직접 노출되며 하나는 배경으로 들어가서 숨겨지게 되죠. 간혹 서식을 저장해놓고 글 작성할..

Tistory Blog/Html,Css 편집 2016. 2. 11. 00:07

[jQuery]티스토리 맨위로 버튼(스르륵 부드러운 스크롤 이동 만들기)

오늘은 일정 위치 까지 스크롤이 내려가면 스스륵 생기고부드럽게 스크롤 이동 되어 올라가는 맨위로 가기 버튼을 만들어 보겠습니다. jQuery를 사용해서 만들텐데요.jQuery는 다양하고 유용한 자바스크립들의 라이브러리라고 보시면 됩니다. 우선 jquery를 사용하기 위해서 실행(?) 선언(?)을 해줍니다.다양하게 소스를 추가 하는 방식이 있는데간편하게 외부서버 CDN을 이용해서 추가를 할 것입니다. 티스토리 블로그 대부분의 반응형 스킨을 사용하면 설정이 되어 있을 거에요.※혹시나 본인의 티스토리 블로그 스킨 HTML편집에서 jQuery가 추가 되어 있다면이작업은 건너 뛰어도 좋습니다. 만약 없다면 소스를 추가 해줘야 합니다. jQuery 소스 - [HTML]에 추가 스크립트 파일은 또는 부분에 붙혀 넣기..

Tistory Blog/Html,Css 편집 2016. 2. 10. 02:35

[티스토리]CCZ-CROSS 스킨 로딩 이미지 CSS로 변경 #2편

안녕하세요. 오늘은 제가 사용하는 블로그 스킨 흉내내기 님이 제작하신 CCZ-CROSS 스킨의 preloader 기능의 로딩 이미지를 GIF 파일이 아닌 .CSS 로 변경하는 작업 2편을 해보겠습니다! 자세한 개념이나 내용 설명은 1편을 참고 해주시구요. 이번 편은 손쉽게 따라 할 수 있게 제작을 해보겠습니다. INFO [티스토리]CCZ-CROSS 스킨 preloader 로딩 이미지 CSS로 변경 1편 download CCZ-CROSS 스킨 배포 및 소개 사용 할 예제 See the Pen xbwVXJ by brunjo (@brunjo) on CodePen. 사용할 소스입니다. 구글의 로딩 바의 형식의 코드입니다. 준비물 download Notepad++(문서편집기) - Naver software 자료실..

Tistory Blog/Html,Css 편집 2016. 2. 9. 18:35

[롤]하이눈 진 스킨 한정판매 고화질 일러스트 및 인게임 영상 소개

[롤]하이 눈 진 스킨 한정판매 고화질 일러스트 및 인게임 영상 소개 안녕하세요. 새롭게 추가된 잔혹극의 거장, 진[Jhin, the Virtuoso]의 신 스킨인 하이 눈 진 스킨 에 대해서 알아보겠습니다. [ 한정판매, 인게임, 영상 소개 ] 하이 눈 진(High Noon Jhin)1350 RP 출시와 함께 된 첫 번째 준 레전더리 스킨입니다. 하이 눈 진 한정 판매 현재 한정 판매 라고 게임내 상점에서 표시가 되고 있는데 출시기념 한정 번들 판매팩으로 뜨는 오류로 보여지며 하이 눈 진 스킨은 레거시(Legacy) 한정판 스킨이 아닙니다. 모든 스킬과 귀환 모션이 바뀌며 음성도 새롭게 추가된 준 레전더리 스킨입니다. 하이 눈 진 인게임 ..

IT Review/Game 2016. 2. 8. 22:54

[티스토리]카카오톡 공유 버튼 만들기(제목+썸네일+링크)

안녕하세요. 카톡 카카오톡 공유 버튼 만들기를 해보겠습니다. 지금 대부분의 블로그에서 카카오톡 공유 버튼이 오류일 것입니다. 바로 아래 처럼 새롭게 바뀐 카카오톡 공유 버튼을 만들어 보겠습니다. 짜잔!! 최신 버전 카카오톡 공유 버튼 만들기 2022 버전 소스코드 내용이 많이 바뀌었습니다. 아래코드만 참고하면 됩니다. 나머지부분은 다 안됩니다. //버튼 이미지를 삽입 하는 곳입니다. 본인의 이미지를 삽입하네요. 아래 코드는 옛날 코드이며 동작을 하지 않습니다. 위 코드로 손쉽게, 공유버튼을 만들 수 있으며, PC버전에서도 작동합니다. 2022-04-14 수정 ----------------------------------------------------------------------------------..

Tistory Blog/Html,Css 편집 2016. 2. 7. 17:55

[티스토리]이미지 썸네일 스킨치환자 소개(썸네일 사이즈 조절 가능)

안녕하세요. 오늘은 티스토리 블로그에 새롭게 추가된 썸네일 스킨 치환자에 대해서 알아보겠습니다. 기존에 티스토리는 썸네일 API를 공개하지 않았기 때문에포스팅 본문의 썸네일을 추출하기가 쉽지 않았습니다. 그래서 기존의 스킨 개발자 분들은 Ajax를 이용한 이미지 추출을 하였습니다.다만 이방식을 했을때는 바로 썸네일이 나타나지 않고 시간이 소요되며RSS를 전체공개 설정을 해야하는 단점이 있습니다. 그러던 중 티스토리에서 썸네일 이미지 주소의 스킨 치환자를 추가 합니다. 티스토리_스킨가이드_스킨치환자 기존의 썸네일 스킨 치환자 하지만 이 방식 또한 치명적인 단점이 있었습니다. 바로 썸네일의 크기를 조절하지 못하고썸네일의 이미지 사이즈 크기가 가로값이 750px인 썸네일로 제공된다는 점입니다. 제가 사용하는 ..

Tistory Blog/Html,Css 편집 2016. 2. 6. 05:17