Blog Tip/Design22 블로그 관리자의 댓글 / 방명록 답글만 다르게 나타내기 관리자가 남긴 댓글, 또는 방명록의 답글만 다르게 나타내는 방법에 대해서 간략하게 설명드리고자 합니다. 적용된 예시는 제 블로그에서 댓글이 달려있는 글들을 살펴보시면 되는데, 워낙 이 블로그에 댓글이 잘 달리지 않는 편이라서 그나마 댓글이 많이 달려있는 글을 링크해드리니 참고해주시길 바랍니다. 적용 예 : 검색 엔진 최적화의 기본, 타이틀 태그와 메타 태그(http://kakku.tistory.com/378) 1. 먼저 skin.html내의 댓글 / 방명록 구조를 확인합니다. [ ##_rp_rep_id_##] : 전체 코멘트영역을 가리키는 아이디 - (최신 댓글을 클릭했을때 이 위치로 이동)[ ##_rp_rep_class_##] : 비밀글, 관리자, 일반글에 따른 스타일을 지정하기 위한 치환자 [ ##_.. 2013. 8. 6. 티스토리 카테고리 목록 갤러리 형태로 보기 제가 만든 소스가 아니기 때문에 소개해드리지 않으려고 했지만 문의하시는 분들이 많아서 간략하게 소개하려고 합니다. 본래 이 소스를 만드신 분의 블로그는 http://www.yongzz.com 이고, 최근 사이트를 운영하고 계시지 않은것 같아서 허락을 득하지 못하고 이곳에 글을 싣습니다. 혹시라도 문제되면 바로 삭제하도록 하겠습니다. 네이버 블로그의 경우 카테고리 목록을 갤러리 형태로 볼 수 있는 기능을 지원하지만 티스토리의 경우에는 이를 지원하지 않습니다. 오늘 소개해드리고자 하는 소스는 티스토리에서도 이러한 갤러리 형태의 카테고리 목록을 사용 가능하도록 도와주는 소스로, 이를 적용한 예제는 본 블로그에서 카테고리 목록을 확인해주시면 됩니다. ※ 필요한 소스의 내용은 글의 하단에 txt파일로 첨부했습니다.. 2013. 8. 5. 원하는 모양대로 H 태그를 꾸며 사용하기 지난번에 올린 '읽기 편한 포스트를 만드는 4가지 방법'에서 예고한바대로 이번 포스트에서는 제목에 주로 사용되는 H 태그에 스타일을 적용하는 방법에 대해서 살펴보도록 하겠습니다. 오늘 소개해드리는 내용의 큰 줄기는 이전에 포스트했었던 '배경과 테두리, 그림자로 레이어 꾸미기'와 상당부분 일치합니다. 이번 포스트는 다음의 순서대로 진행됩니다. 1. 미리 확인할 부분 2. H 태그의 글자 크기 / 색 / 정렬 3. H 태그의 배경 / 테두리 4. 현재 블로그에 사용중인 예 미리 확인할 부분 먼저 사용중인 블로그에서 사전에 H 태그에 대한 스타일을 선언해두었는지 확인해야 합니다. 이는 관리자 페이지 > HTML/CSS 편집 > style.css 부분에서 H1이나 H2를 검색하여 찾아보시면 됩니다. 또한 이렇게.. 2013. 7. 9. 플로팅 상단 메뉴바 달기 사용 가능한 블로그의 범위가 그다지 넓은편은 아니지만 요청하시는 분이 몇몇 계셔서 공개합니다. 이번 글에서 다룰 플로팅 상단 메뉴바는 본 블로그의 상단에 있는 것과 똑같은 모양으로, 예전에 이와 관련해 올린 글들을 참고하시면 디자인을 원하시는 대로 수정할 수 있습니다. 다만 해당 내용들은 기존에 이미 다뤘던 내용들이기 때문에 이번 포스트에서 자세히 다루지는 않겠습니다. 1. Style.css 파일에 삽입할 내용 #float_menu { position: relative; margin: auto; padding: 0; width:980px; margin-top: -8px; } .underlinemenu{ font-size:10pt; width:980px; height:24px; font-weight: bo.. 2013. 3. 6. 플로팅 SNS 배너 달기 블로그의 좌측에 위치하는 플로팅 배너가 이제는 공유할 수준은 되었다고 판단되어 소스 공개합니다. 편의상 플로팅 SNS 배너라고 이름을 붙였습니다. 설치방법은 1. 아이콘 파일 업로드 2. 소스 수정 3. 소스 삽입 후 위치 조정 순입니다.예전에 플로팅 배너 소개하면서 다뤘던 내용의 상당수가 이곳에서 언급될 예정이오니 자세한 사항은 '블로그에 플로팅 배너(플로팅 레이어) 달기'포스트 참고해주기 바랍니다. 이 포스트에서 자세한 설명은 생략할 예정입니다. - 특정 스킨에서 정상적으로 작동하지 않을 수도 있으니 그럴 경우에는 댓글이나 방명록에 글 남겨주시길 바랍니다 - 1. 아이콘 파일 업로드 아이콘은 SNS는 페이스북과 트위터가, 블로그 구독용으로는 한RSS, 네이버 이웃커넥트, 다음 뷰, 그 외에 즐겨찾기 .. 2013. 3. 5. 스킨 제공 상단 메뉴바에 드롭다운 메뉴 넣기 이번 글을 보시기 전에 이전에 메뉴바와 관련해 올렸던 글들을 미리 읽어보시길 권장합니다. 오늘 다룰 '스킨에서 제공하는 상단 메뉴바에 서브 메뉴 넣기'는 이전에 메뉴바를 다뤘던 모든 글들이 합쳐져 있기 때문입니다. 모두 읽어 보시기에 시간이 부족하시다면 '스킨에서 제공하는 상단 메뉴바 수정하기'라는 포스트는 꼭 읽어주시길 바랍니다. 본 포스트의 내용은 해당 포스트에서 이어지는 내용입니다. 이전에 모두 다룬 내용이기 때문에 자세한 설명은 생략하도록 하겠습니다. CSS를 이용해 블로그 상단 메뉴바 만들기 (1) CSS를 이용해 블로그 상단 메뉴바 만들기 (2) 스킨에서 제공하는 상단 메뉴바 수정하기 CSS를 이용해 드롭다운(Drop Down) 메뉴 만들기 (1) CSS를 이용해 드롭다운(Drop Down) .. 2013. 3. 4. CSS를 이용해 드롭다운(Drop Down) 메뉴 만들기 (2) 이전에 만들어 놓은 예제(드롭다운 첫번째 글)를 계속 이용하겠습니다. 이번 포스트에서 다룰 내용은 이미 만들어져 있는 서브메뉴의 형태를 보다 보기좋게 수정하는 방법에 관한 글입니다. 여기서 주로 다루게 되는 내용은 기존에 다룬바 있는 내용(배경과 테두리, 그림자로 레이어 꾸미기)이므로, 이전 글을 보신다면 더 큰 도움이 되지 않을까 생각합니다. 사용할 예제 Menu 1 Menu 2 Sub Menu 1 Sub Menu 2 Sub Menu 3 Menu 3 Sub Menu 1 Sub Menu 2 Sub Menu 3 Menu 4 Menu 5 1. 서브메뉴에도 그림자 적용하기 blogMenu 스타일에 적용되어 있는 부분을 그대로 복사하여 이용하셔도 상관은 없으나 같은 스타일을 여러번 입력하지 않고 다른 방법을 이.. 2013. 3. 1. CSS를 이용해 드롭다운(Drop Down) 메뉴 만들기 (1) 몇몇 블로그를 살펴보면 상단 메뉴바에 마우스를 올릴경우 하위 메뉴가 나오는 것을 확인할 수 있습니다. 이러한 형식을 '드롭다운(Drop Down)' 메뉴라고 이야기합니다. 이번 글에서는 이전에 만들어놓은 상단 메뉴바(관련글)에 서브 메뉴를 추가하는 방법에 대해서 살펴보도록 하겠습니다. 오늘 사용할 스타일 시트 예제 1. 메뉴 리스트 작성하기 먼저 사용하고 싶은 메뉴 리스트를 작성합니다. 상위 메뉴의 리스트가 작성된 후에는, 서브 메뉴를 만들고 싶은 상위 메뉴의 내부에 태그를 이용하여 다시 리스트를 작성합니다. 이번 글에서는 기본 상위 메뉴로 Menu1 ~ Menu5를, 그리고 Menu2와 3의 하위에 Sub Menu 1, 2, 3을 각각 추가하는 경우의 예를 들어보겠습니다. Menu 1 Menu 2 Su.. 2013. 2. 27. 스킨에서 제공하는 상단 메뉴바 수정하기 이전 글에서 다룬 내용(CSS를 이용해 블로그 상단 메뉴바 만들기)을 바탕으로 기존에 블로그 스킨에서 제공하고 있는 상단 메뉴바의 모양을 수정하는 방법에 대해서 살펴보겠습니다. 이 포스트에서는 블로그 상단 메뉴가 비교적 평범하게 있는 Life In Mono(Light) 스킨을 기준으로 설명드리겠습니다. 편의상 이 스킨을 기준으로 작성하나 다른 스킨의 경우도 방법적인 측면에서 큰 차이는 없습니다. 1. 블로그 메뉴 치환자 찾기 블로그 메뉴는 [ ##_blog_menu_## ] 라는 치환자로 만들어집니다. 해당 치환자를 찾은 다음에는, 치환자가 들어가 있는 레이어의 이름(div id="blogmenu")이나 클래스 이름(div class="blogmenu")을 확인합니다. 해당 부분을 확인한 후 style... 2013. 2. 26. 이전 1 2 3 다음 반응형
