무한잉크 복합기, 무한잉크 프린터, 칼라(컬러) 디지털 복사기 임대 및 판매 전문
Self 검색엔진최적화 추구

인바운드마케팅 보기

HOME > 인바운드마케팅 > 보기

분류1

블로그마케팅

등록자관리자

등록일2015-04-11

조회수10,457

제목

구글블로그에 복층/다충 Drop Down Menu Bar 만들기(html, css 소스 포함)

구글블로그용  drop down menu 소스(HTML, CSS)를 첨부하오니 필요하신 분은 download하시여 이용하세요

 

구글블로그는 많은 가젯과 매우 유연한 편집가능성을 갖고 있는 등 티스토리 못지않은 많은 장점이 있으나 카테고리별를 분류하여 보여주는 기능이 없는 것이 단점입니다. 그 단점을 극복시키는 방법을 아래와 같이 소개합니다. 완성하시면 아래와 같은 Menu Bar가 만들어집니다.

 

 

기본적인 방법은 Drop Down menu(Menu Bar) 만드는 방법에 관한 게시글(Add Dropdown Menus to Blogger with this Code) 과 동영상(How to add Menu Bars to Blogger ... with DROP DOWNS! , https://www.youtube.com/watch?v=KMGVBxAFoiQ ) 을 참조해주세요.

 

 

 

1. 우선, HTML 소스와 이것을 코딩한 CSS를 확보해야 합니다.   

구글에서 drop down menu bar으로 검색하면 많은 방법들과 소스를 만든 사이트를 찾을 수 있습니다.

저는 검색을 통해 http://dropdownmenugenerator.com/Generator.aspx 를 찾아서 해보았습니다. 

기능 좋고 훌륭한데 소스코드가 <script type="text/javascript" src="http://Menu16.com/U/FC799256/1/MyMenu1.js">
</script>
<div id="MyMenu1"></div> 와 같이 되어 있어 자바스크립터를 호출하는 방식이라 제가 소스를 확보하고 조작할 수 있는 부분이 없고 사용하는 동안 매년 15불 또는 60불씩 지불해야해서 더 찾아보았습니다. 

국내에 서너분이 추천해주신 CSS Menu Maker( http://cssmenumaker.com/builder/5414301) 를 살펴보았습니다. 이것도 일년에 14달러로 유료이긴한데, Drop Down Menu Bar 에 대한 HTML 소스는 많은 곳에서 구할 수 있었으나 CSS 코딩을 하는 것은 저에게는 너무 힘든 작업이었고 HTML, CSS 소스를 제공합니다. 웹으로도 저장이 되는데 Theme을 변경하여 바로 전혀 다른 Drop Down Menu Bar 을 만들수 있고 색상, 글짜 크기, 배경색 등의 조작이 수월하여 이것을 이용하기로 하였습니다.

 

좌측에 메뉴바에 메뉴을 넣어주고 Theme, Color, Setting 을 해줍니다. Review 가 제공되어 편하게 웹페이지로 보면서 쉽게 작업하실 수 있습니다. 

구글블로그에 복층 Menu Bar 만들기_3

 

2. 구글블로그에 setting하기

 

    2-1. CSS Menu Maker 편집화면에서 HTML 을 선택하시여 CSS Menu Maker 에서 생성된 HTML 소스를 copy합니다.

구글블로그에 복층 Menu Bar 만들기_4

 

     2-2. 구글블로그 레이아웃에 가시여 파란색 화살표와 같이 [가젯추가]하기를 합니다.

구글블로그에 복층 Menu Bar 만들기_5

 

     2-3. CSS Menu Maker 에서 copy한 소스를 HTML/JavaScript 에 HTML 편집모드에서 붙여넣기 해줍니다.

구글블로그에 복층 Menu Bar 만들기_6

 

     2-4. 다시, CSS Menu Maker로 돌아와 이번에 HTML이 아닌 CSS를 선택하고 소스를 copy해 줍니다.

구글블로그에 복층 Menu Bar 만들기_7

 

     2-4. copy 한 소스는 블로그 [HTML 편집]에서도 편집이 가능하나 이것은 잘못하였을때 수정하기가 어렵고 템플릿 디자이너를 이용하시는 것이 수월합니다. 좌측 메뉴중 [레이아웃]을 선택하시고 [템플릿 디자이너]를 선택하시여 들어가신후

구글블로그에 복층 Menu Bar 만들기_9

 

            좌측 맨아래 [고급] -> 스크롤바를 밑으로 끄집어 내리셔서 CSS추가를 선택하시고 copy 한 CSS 소스를 붙여넣기해주신 후 [블로그에 적용]하시면 됩니다.

구글블로그에 복층 Menu Bar 만들기_8

 

 

3. 메뉴바에 링크를 걸어주기    

라벨가젯 구성에서 [모든 라벨]대신 [선택한 라벨]을 선택하시면 이것을 검색어로 사용하실 수 있습니다. 

 

 

구글블로그 Drop Down menu(Menu Bar) 만들기_1

 

 

구글블로그 Drop Down menu(Menu Bar) 만들기_2

 

 

          목록을 선택하시면 아래와 라벨이름별로 가나다순 또는 빈도별로 표시되게 됩니다. 

 

구글블로그 Drop Down menu(Menu Bar) 만들기_3

 

         여기에서 HP 7280 을 선택하시면 그 주소(URL)는 http://oano1.blogspot.kr/search/label/HP%207280 와 같이 표시됩니다. http://oano1.blogspot.kr/search/label/ 는 동일하고 그 다음이 선택한 라벨에 해당하는 단어가 들어가는 구조입니다. 여기에서 중요한 것은 고유의 주소, 즉, URL이 있다는 점입니다.  

         이 URL을 아래 사진과 같이 CSS Menu Maker에서 메뉴바 메뉴(title) 밑에 링크주소로 넣어주시면 Drop Down Menu 가 생성되어 홈페이지의 Menu Bar 처럼 이용하실 수 있습니다.    

 

CSS Menu Maker에 링크 넣기

 

 

 

   태그를 붙이는 것은 게시글 편집 우측 상단의 태그란에 입력하시면 되고 라벨을 붙이는 방법은 아래의 동영상을 참조하여주십시요. 라벨을 붙이는 방법보다는 태그를 붙이는 방법이 훨씬 수월합니다.  

 

 

 

구글의 페이지즈를 이용하시면 더 많은 내용을 구현하실 수 있습니다. 글(posts)과 페이지즈(pages) 차이점 http://howways.blogspot.kr/2014/01/Google-Blogger-Difference-between-Posts-and-Pages.html 을 참조하세요. - See more at: http://www.i-help.kr/ab-4154291-86#sthash.AR6CNNB1.dpuf

구글 블로그에는 홈페이지나 쇼핑몰의 페이지와 같은 페이지즈가 존재합니다. 글(posts)과 페이지즈(pages) 차이점은 http://howways.blogspot.kr/2014/01/Google-Blogger-Difference-between-Posts-and-Pages.html 을 참조하시여 구글의 페이지즈를 이용하시면 더욱 풍부한 홈페이지/쇼핑몰을 구현하실 수 있습니다.  

 

Pinterest Google+ Google+

 

** 추천 임대 상품 **




 
번호 제목 등록자 등록일 조회수
300 검색엔진최적화 [강추]코니카미놀타 동영상 모음

관리자

2016.04.13 82,863
299 블로그마케팅 아이사랑 카드(아이행복 카드) 단말기 프로그램 재설치 동영상(Windows8 용)

관리자

2015.06.27 130,175
298 인바운드마케팅 PC 프린터 복사기 원격지원

관리자

2013.06.08 150,335
297 인바운드마케팅 캐논 MB2720(2760)에서 관공서 문서(주민등록등본 등) 출력시 드라이버

관리자

2018.04.02 12,054
296 인바운드마케팅 HP Officejet Pro 8610 8600 Printer Failure

관리자

2018.03.19 3,624
295 인바운드마케팅 HP 933 6600 6100 6700 7612 7110 헤드 교체

관리자

2018.02.14 7,150
294 인바운드마케팅 HP OfficeJet 7612 와이드 포맷 e-복합기 무한잉크 개조 방법

관리자

2017.12.16 10,483
293 검색엔진최적화 리모트 UI를 사용하여 캐논 복사기(복합기) 스캔 (폴더) 쉽게 잡기(쉽게하기)

관리자

2017.11.06 10,149
292 인바운드마케팅 HP officejet Pro 8610, 8600, 8100 용지걸림

관리자

2017.08.28 16,532
291 인바운드마케팅 HP 팩스 오류 코드 및 해결 방법 정리(일반적인 송수신 에러 포함)

관리자

2017.06.01 16,949
290 검색엔진최적화 캐논 ir3300 ir2800 ir2200 토너 보급방법(교체방법) 동영상

관리자

2017.05.18 9,137
289 검색엔진최적화 코니카 미놀타 Bizhub 토너 카트리지 교체 방법(이미지)

관리자

2017.05.07 9,993
288 인바운드마케팅 HP photosmart B210 정렬 실패, 강제 정렬

관리자

2017.04.21 12,663
287 검색엔진최적화 캐논 칼라 복사기 IR ADV C3325 시험인쇄 Type = 10 관련 설명 및 출력 동영상

관리자

2017.04.14 12,291
286 인바운드마케팅 X451, X476, X551, X576[듀플렉서(Duplex) 다시 설치] 에러

관리자

2017.04.11 14,947
285 검색엔진최적화 신도 D410 ADF 관련문제 : 용지 한쪽에 검은줄이 감

관리자

2017.03.28 16,206
284 검색엔진최적화 신도리코 D410 (컬러, 흑백, 복사, 인쇄 팩스, 스캔) 카운트(사용매수) 확인 방법

관리자

2017.03.03 19,787
283 검색엔진최적화 원격 인쇄(1. Chrome 클라우드 프린터, 2. HP e-print, 3.Canon PRINT Business)

관리자

2017.03.02 18,155
282 검색엔진최적화 IR ADV C3320 3325 3330 소모품(토너, 폐토너통 등) 상황 및 기타 정보 확인, 폐토너통 교환하는 방법

관리자

2017.02.07 22,507
281 검색엔진최적화 형광펜으로 표시한 부분이 복사가 안 된다는 경우, 해결방법

관리자

2017.01.21 23,871
회사명: 사트커뮤니케이션 / 사업자등록번호: 215-13-77533 / 대표: 김상희
서울특별시 송파구 양산로7길 17-1, 1층,지하1층(거여동)
Tel : 02-404-2463 Fax : 02-404-2461
개인정보관리착임자 : 김상희 / Email : kimsangheu@naver.com
통신판매번호 : 2011-서울송파-1087  Copyright (c) 2012 SATcommunication