라벨이 blogspot인 게시물 표시

블로그스팟에 GSAP 테스트

이미지
GSAP 예제 HTML CSS JavaScript GSAP 박스가 2초 동안 오른쪽으로 이동하면서 회전하고, 끝날 때 튀는 효과: HTML CSS JavaScript GSAP 기본적인 이동 애니메이션: HTML CSS JavaScript GSAP 회전 애니메이션: HTML CSS JavaScript GSAP 크기 변경 애니메이션: HTML CSS JavaScript GSAP 페이드 인/아웃 효과: HTML CSS JavaScript GSAP 여러 속성을 동시에 애니메이션: HTML CSS JavaScript ...

블로그스팟 팁 모음

이미지
  블로그스팟 게시물갯수 조절팁 기본 메인화면에 타이틀 외에 내용이 노출되게 않게 하는 방법 브레이크 타임을 맨상단에 삽입 기본 메인화면에 내용을 요약해서 보여지게 노출하는 방법 (2~3줄만 노출) 브레이크타임을 화면에 보여지는 글자수 내에 삽입 추가로 계속 업데이트 될 예정 ● ● ●

블로그스팟에 구글 태그매니져 설치하는 방법

이미지
구글 태그 매니저 설치 가이드 1. GTM 계정 생성: Google Tag Manager 공식 웹사이트에 접속합니다. Google 계정으로 로그인합니다. 새 계정을 만들고 웹사이트용 컨테이너를 생성합니다. 2. GTM 코드 획득: 계정 생성 후 GTM에서 제공하는 설치 코드를 확인합니다. 또는 관리 > 계정 > 컨테이너 > "Google 태그 관리자 설치" 메뉴에서 코드를 찾을 수 있습니다. 3. 웹사이트에 GTM 코드 삽입: 첫 번째 코드 스니펫(<script> 태그)을 웹사이트의 <head> 태그 내에 가능한 한 상단에 배치합니다. 두 번째 코드 스니펫(<noscript> 태그)을 <body> 태그 바로 다음에 배치합니다. 4. CMS 플러그인 사용 (선택사항): WordPress, Shopify 등의 CMS를 사용하는 경우, GTM 설치를 위한 플러그인을 활용할 수 있습니다. 5. 설치 확인: GTM 미리보기 모드를 사용하거나 브라우저 개발자 도구를 통해 GTM이 제대로 로드되는지 확인합니다. 6. 컨테이너 게시: GTM 인터페이스에서 첫 번째 버전을 제출하고 게시합니다. 주의사항: <script> 부분은 <head> 태그 내에 배치해야 합니다. <noscript> 부분은 <body> 태그 내에 배치해야 합니다. 코드 설치 시 웹사이트의 성능에 영향을 미칠 수 있으므로 주의가 필요합니다. 이렇게...

블로그 스팟에서 정의하는 xml 태그및 속성

이미지
Blogspot(Blogger)에서 사용하는 주요 XML 태그와 속성 <b:section> 블로그 레이아웃의 섹션을 정의합니다. id : 섹션의 고유 식별자 class : HTML 클래스 속성 maxwidgets : 최대 위젯 수 제한 showaddelement : 새 요소 추가 박스 표시 여부 <b:widget> 블로그에 추가되는 위젯을 정의합니다. id : 위젯의 고유 식별자 type : 위젯 유형 (예: Blog, HTML, Label 등) locked : 위젯 이동/삭제 가능 여부 title : 위젯 제목 pageType : 위젯이 표시될 페이지 유형 <b:includable> - 재사용 가능한 코드 블록을 정의합니다. <b:include> - 정의된 includable을 삽입합니다. <data:> - 블로그 데이터를 출력합니다. 예: <data:blog.pageTitle/> <b:if> - 조건부 렌더링을 위한 태그입니다. cond 속성에 조건식을 지정합니다. <b:loop> - 반복 구조를 만듭니다. values 속성으로 반복할 데이터를 지정합니다. expr: - 속성 값에 동적 표현식을 사용할 때 접두사로 사용됩니다. 예: <body expr:class='data:blog.pageType'> <b:skin> - 블로그 스킨의 CSS를 정의합니다. <b:te...

블로그스팟 첫번째이미지 배경화면으로 깔리게 하기

이미지
blogspot 상세이미지중 첫번째 이미지 상단영역에 배경으로 깔기 *내 스킨에 맞춰서 html구조를 변경해 쓰는 거라 일반적인 스킨에서는 안맞을수 있음. HTML CSS JavaScript Python XML .bg-photo-container{ overflow:hidden } .bg-photo-container,.bg-photo-container .bg-photo{ height:464px; width:100% } .bg-photo-container .bg-photo{ background-position:center; background-size:cover; z-index:-1 } @media (max-width:745px){ .bg-photo-container,.bg-photo-container .bg-photo{ height:250px; width:100% } }

블로그스팟 위젯 항상 펼치기 코딩 소스

이미지
블로그스팟 위젯 항상 펼쳐지기 개인적으로 위젯 중 라벨(태그) 부분은 항상 펴기로 설정하는 것을 선호합니다. 라벨(태그) 가젯 항상 펼치기 HTML 편집 모드에서 다음 코드를 찾아봅니다. 현재 라벨 가젯이 하나라면 2곳을 찾을 수 있습니다. 코드 수정 전 <b:attr cond='data:view.isLabelSearch' name='open' value='open'/> 코드 수정 후 <b:attr name='open' value='open'/> 확인 사항 (2020.08.04) 'Blogger > 테마 > HTML 편집'을 통해 직접 코드를 수정하기 전에 반드시 'Blogger > 테마 > 백업' 기능을 이용하여 XML 파일을 사전 다운로드하세요. 변경 후에는 다시 다운로드하여 의도한 부분만 수정되었는지 비교해보세요. 추가 설명 앞서 찾은 두 곳의 코드 중 하나는 <head> 안에 있으며, 기본 라벨 가젯 속성을 정의하여 앞으로 추가하는 라벨 가젯에도 영향을 줍니다. 다른 하나는 <body> 내부에 있으며, 현재 존재하는 라벨 가젯의 속성을 설정합니다. 위 수정 작업을 완료하고 '저장' 버튼을 누르면 현재 라벨 가젯과 앞으로 추가하는 라벨 가젯 모두 항상 펼쳐진 상태로 유지됩니다.