블로그 팁65 플로팅 상단 메뉴바 달기 사용 가능한 블로그의 범위가 그다지 넓은편은 아니지만 요청하시는 분이 몇몇 계셔서 공개합니다. 이번 글에서 다룰 플로팅 상단 메뉴바는 본 블로그의 상단에 있는 것과 똑같은 모양으로, 예전에 이와 관련해 올린 글들을 참고하시면 디자인을 원하시는 대로 수정할 수 있습니다. 다만 해당 내용들은 기존에 이미 다뤘던 내용들이기 때문에 이번 포스트에서 자세히 다루지는 않겠습니다. 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. CSS를 이용해 블로그 상단 메뉴바 만들기(2) CSS를 이용해 블로그 상단 메뉴바를 만드는 방법에 대한 두 번째 글입니다. 지난 시간에는 기본적인 내용들에 대해서 다루어봤고, 이번 글에서는 보다 세부적인 사항들에 대해서 설명드리겠습니다. 지난 글에서 이어지는 글로, 이전 글을 확인하지 않을 경우 진행에 어려움이 있을 수 있습니다. source : 1. 메뉴의 배경 색 / 글자 색 / 크기 변경하기 현재까지 완성된 메뉴바는 실제로 이용하기에는 너무 밋밋합니다. 이 메뉴바의 배경과 글자를 꾸밈으로써 변화를 주도록 하겠습니다. 배경 색은 background-color라는 스타일을 ul에 적용함으로써 변경할 수 있으며, 레이어에도 적용하면 보다 다양한 효과를 낼 수 있습니다. 글자 색은 color 스타일을 ul이나 li에 사용할 수 있고, 크기는 font-.. 2013. 2. 22. CSS를 이용해 블로그 상단 메뉴바 만들기(1) 대부분의 블로그들의 상단을 살펴보면 메인이나 특정 카테고리로 이동할 수 있는 메뉴바가 있음을 살펴볼 수 있습니다. 대개의 티스토리 스킨에서는 이를 기본적으로 지원해서, 화면 설정 > 메뉴로 접속하게 되면 편집을 할 수 있으나 그 모양을 다르게 꾸밀수는 없다는 단점이 있습니다. 이번 글에서는 먼저 CSS를 이용하여 메뉴바를 만드는 방법에 대하여 자세히 살펴보고난 후, 특정 스킨에서 기본으로 제공하는 메뉴바를 편집하는 법에 대해서 살펴보도록 하겠습니다. source : 1. 메뉴 리스트 작성하기 먼저 어떤 것들을 메뉴로 만들것인지를 정합니다. 편의상 메뉴1 ~ 메뉴5로 정하고, 과 를 이용하여 리스트를 만들어 보겠습니다. - ul태그는 순서가 없는 블릿 리스트이며 li는 ul 아래의 항목들을 의미합니다. 메.. 2013. 2. 21. 최근 글과 댓글을 스크롤링 형태로 출력시키기 네이버나 다음의 인기검색어 부분을 살펴보면 현재의 인기검색어가 하나씩 스크롤링 되며 보여지는 것을 확인할 수 있습니다. 이러한 텍스트 스크롤링 스크립트를 티스토리에서도 적용이 가능합니다. 원하는 내용을 입력하여 스크롤링 할 수도 있으며, 최근 글이나 최근 댓글과 같이 지속적으로 변하는 내용의 경우에도 스크롤링이 가능합니다. 현재 블로그 상단메뉴에 최근 댓글이 스크롤링 되어 출력되고 있는 것을 살펴볼 수 있습니다. 이번 글에서는 최근 글이나 댓글을 스크롤링 할 수 있는 방법에 대해서 살펴보겠습니다. 단, 이를 사용할 시 사이드바에 있는 최근 글과 최근 댓글 모듈은 정상적으로 출력되지 않을 수 있다는 점에 유의하시길 바랍니다. 사이에 삽입할 내용 HTML/CSS 편집 모드에서 skin.html의 사이에 추가.. 2013. 2. 19. 이전 1 2 3 4 5 6 ··· 8 다음 반응형
