[ Tstory ] 글쓴 날자를 캘린더 형식으로 만들기 블로그 날짜를 캘린더 형식으로 표시하기 위한 소스입니다. HTML 부분 Monday 24 March 2014 CSS 부분 .calendar_item { color: #8d8d7e; width: 92.3076923077px; height: 120px; position: absolute; margin: 0 auto; left: 0; right: 0; top: 50%; margin-top: -60px; border-radius: 10px; text-align: center; text-transform: uppercase; box-shadow: 0px 3px 0 2px rgba(0, 0, 0, 0.05), 0 0 0 1px #8d8d7e, 0 0 0 2px #777; text-shadow: 0 1px 0 rgb.. 광고 [ Tstory ] 글쓴 날자를 캘린더 형식으로 만들기 블로그 날짜를 캘린더 형식으로 표시하기 위한 소스입니다. HTML 부분 월요일 25 1월 '18 는 티스토리 글쓴 날자 치환자 입니다. (지우면 오늘 날짜를 불러옵니다.) CSS 설정 부분 .date-tile{ display: inline-block; border-radius: 10px; font-family: sans-serif; color: #555; /* DAY 색깔 */ box-shadow: 0 2px 6px rgba(0,0,0,.4) } .due-label { border: 2px solid #D52B1E; padding: 5px 10px 4px; text-align: center; font-size: 16px; line-height: 18px; background: pink; /* 요일 배경색.. 광고 [애드센스] 광고 서식 지정 없이 본문 중간에 자동으로 삽입하기 (내용 추가 수정) 애드센스 광고를 본문 중간에 삽입하려는 방법입니다. 이 방법은 기존의 방법처럼 특정 위치에 서식을 이용하는 방법이 아니라 문단과 문단 사이를 찾아 자동으로 삽입하는 것입니다. 이 방법은 문단과 문단 사이를 태그를 이용하는 경우 효과가 있습니다. 우선 본문의 구조를 확인해 봐야 합니다. 저의 경우 본문의 구조는 다음과 같이 구성되어 있습니다. 본문 문단 본문 문단 본문 문단 본문 문단 자신의 블로그 구조를 확인하였다면 삽입할 광고를 준비합니다. 위의 w-100, my-4는 Bootstrap 4의 스타일 시트 클래스로 각각 "width: 100%;", "margin-top: 1.5rem;margin-bottom: 1.5rem"을 가리킵니다. Bootstrap 4를 쓰지 않는다면 w-100과 my-4를 지우고.. 광고 [애드센스] 광고 본문 중간에 자동으로 삽입하기 (서식 지정 없음) 애드센스 광고를 본문 중간에 삽입하려는 방법입니다. 이 방법은 기존의 방법처럼 특정 위치에 서식을 이용하는 방법이 아니라 문단과 문단 사이를 찾아 자동으로 삽입하는 것입니다. 이 방법은 문단과 문단 사이를 태그를 이용하는 경우 효과가 있습니다. 우선 본문의 구조를 확인해 봐야 합니다. 저의 경우 본문의 구조는 다음과 같이 구성되어 있습니다. 본문 문단 본문 문단 본문 문단 본문 문단 자신의 블로그 구조를 확인하였다면 삽입할 광고를 준비합니다. 위의 w-100, mt-4 는 Bootstrap 4의 스타일 시트 클래스로 각각 "width: 100%;", "margin-top: 1.5rem"을 가리킵니다. 이제 jQuery를 이용하여 준비된 광고를 적당한 위치에 삽입하겠습니다. 위 내용은 간단히 말하면 태그의.. 광고 [Tistory] 티스토리 블로그 공감 버튼 변경 티스토리 공감 버튼이 변경되면서 기존의 방법이 무용지물이 되었습니다. 이에 다시 변경된 공감 버튼에 클릭 유도 글귀와 크기 버튼 변경 및 중앙 정렬하는 방법을 살펴 보겠습니다. 준비 : jQuery 공감 버튼 소스의 형식은 아래와 같이 공감, SNS, 신고의 3개의 버튼으로 설정되어 있습니다. 공감 sns 신고 중앙 정렬및 문구 삽입을 위한 사전작업 (태그 추가) 위와 같은 구조에 태그를 추가하고 "공감 클릭" 유도 문구를 추가 하기. 위하여 다음과 같이 위에서 자바 스크립트를 실행합니다. 이제 공감 소스는 다음과 같이 변경되었습니다. 방문은 선택! 공감은 필수! 공감 sns 신고 이제 jQuery를 이용한 HTML 변경은 완료 하였습니다. 다음은 "스타일시트(CSS)"를 이용하여 신고 버튼을 제거 하고.. 광고 css만으로 list (li) 의 중앙 정렬 하는 방법 CSS를 이용하여 list를 중앙에 정렬하는 방법입니다. 다음과 같은 HTML 코드가 있다고 예를 들겠습니다. 123 Fake St. Toronto, Ontario, Y1Y 1Y1 416-555-5555 info@email.com 만약 UL이나 OL이 div로 감싸지지 않았다면 감싸길 바랍니다. 이 리스트를 중앙에 정렬하는 CSS는 다음과 같습니다. .footer { float: left; width: 100%; padding-right: 20px; padding-left: 25px; margin: 0 auto; text-align: center; } .footer ul { list-style: none; } .footer ul li { color: #808080; padding-bottom: 3px; .. 광고 « Previous 1 2 3 4 5 » Next
[ Tstory ] 글쓴 날자를 캘린더 형식으로 만들기 블로그 날짜를 캘린더 형식으로 표시하기 위한 소스입니다. HTML 부분 Monday 24 March 2014 CSS 부분 .calendar_item { color: #8d8d7e; width: 92.3076923077px; height: 120px; position: absolute; margin: 0 auto; left: 0; right: 0; top: 50%; margin-top: -60px; border-radius: 10px; text-align: center; text-transform: uppercase; box-shadow: 0px 3px 0 2px rgba(0, 0, 0, 0.05), 0 0 0 1px #8d8d7e, 0 0 0 2px #777; text-shadow: 0 1px 0 rgb..
[ Tstory ] 글쓴 날자를 캘린더 형식으로 만들기 블로그 날짜를 캘린더 형식으로 표시하기 위한 소스입니다. HTML 부분 월요일 25 1월 '18 는 티스토리 글쓴 날자 치환자 입니다. (지우면 오늘 날짜를 불러옵니다.) CSS 설정 부분 .date-tile{ display: inline-block; border-radius: 10px; font-family: sans-serif; color: #555; /* DAY 색깔 */ box-shadow: 0 2px 6px rgba(0,0,0,.4) } .due-label { border: 2px solid #D52B1E; padding: 5px 10px 4px; text-align: center; font-size: 16px; line-height: 18px; background: pink; /* 요일 배경색..
[애드센스] 광고 서식 지정 없이 본문 중간에 자동으로 삽입하기 (내용 추가 수정) 애드센스 광고를 본문 중간에 삽입하려는 방법입니다. 이 방법은 기존의 방법처럼 특정 위치에 서식을 이용하는 방법이 아니라 문단과 문단 사이를 찾아 자동으로 삽입하는 것입니다. 이 방법은 문단과 문단 사이를 태그를 이용하는 경우 효과가 있습니다. 우선 본문의 구조를 확인해 봐야 합니다. 저의 경우 본문의 구조는 다음과 같이 구성되어 있습니다. 본문 문단 본문 문단 본문 문단 본문 문단 자신의 블로그 구조를 확인하였다면 삽입할 광고를 준비합니다. 위의 w-100, my-4는 Bootstrap 4의 스타일 시트 클래스로 각각 "width: 100%;", "margin-top: 1.5rem;margin-bottom: 1.5rem"을 가리킵니다. Bootstrap 4를 쓰지 않는다면 w-100과 my-4를 지우고..
[애드센스] 광고 본문 중간에 자동으로 삽입하기 (서식 지정 없음) 애드센스 광고를 본문 중간에 삽입하려는 방법입니다. 이 방법은 기존의 방법처럼 특정 위치에 서식을 이용하는 방법이 아니라 문단과 문단 사이를 찾아 자동으로 삽입하는 것입니다. 이 방법은 문단과 문단 사이를 태그를 이용하는 경우 효과가 있습니다. 우선 본문의 구조를 확인해 봐야 합니다. 저의 경우 본문의 구조는 다음과 같이 구성되어 있습니다. 본문 문단 본문 문단 본문 문단 본문 문단 자신의 블로그 구조를 확인하였다면 삽입할 광고를 준비합니다. 위의 w-100, mt-4 는 Bootstrap 4의 스타일 시트 클래스로 각각 "width: 100%;", "margin-top: 1.5rem"을 가리킵니다. 이제 jQuery를 이용하여 준비된 광고를 적당한 위치에 삽입하겠습니다. 위 내용은 간단히 말하면 태그의..
[Tistory] 티스토리 블로그 공감 버튼 변경 티스토리 공감 버튼이 변경되면서 기존의 방법이 무용지물이 되었습니다. 이에 다시 변경된 공감 버튼에 클릭 유도 글귀와 크기 버튼 변경 및 중앙 정렬하는 방법을 살펴 보겠습니다. 준비 : jQuery 공감 버튼 소스의 형식은 아래와 같이 공감, SNS, 신고의 3개의 버튼으로 설정되어 있습니다. 공감 sns 신고 중앙 정렬및 문구 삽입을 위한 사전작업 (태그 추가) 위와 같은 구조에 태그를 추가하고 "공감 클릭" 유도 문구를 추가 하기. 위하여 다음과 같이 위에서 자바 스크립트를 실행합니다. 이제 공감 소스는 다음과 같이 변경되었습니다. 방문은 선택! 공감은 필수! 공감 sns 신고 이제 jQuery를 이용한 HTML 변경은 완료 하였습니다. 다음은 "스타일시트(CSS)"를 이용하여 신고 버튼을 제거 하고..
css만으로 list (li) 의 중앙 정렬 하는 방법 CSS를 이용하여 list를 중앙에 정렬하는 방법입니다. 다음과 같은 HTML 코드가 있다고 예를 들겠습니다. 123 Fake St. Toronto, Ontario, Y1Y 1Y1 416-555-5555 info@email.com 만약 UL이나 OL이 div로 감싸지지 않았다면 감싸길 바랍니다. 이 리스트를 중앙에 정렬하는 CSS는 다음과 같습니다. .footer { float: left; width: 100%; padding-right: 20px; padding-left: 25px; margin: 0 auto; text-align: center; } .footer ul { list-style: none; } .footer ul li { color: #808080; padding-bottom: 3px; ..
