CSS를 이용해 드롭다운(Drop Down) 메뉴 만들기 (1)http://kakku.tistory.com/391
구글 블로거(Blogger.com) 개인도메인을 이용한 멀티블로깅http://www.domawe.net/2012/04/bloggercom.html
구글 <사이트도구> 메뉴만들기
http://m.blog.naver.com/ondesign79/30131861085
2014년 9월 21일 일요일
구글 블로거에서 블로그 글 목차 보여주기.
http://www.dorajistyle.pe.kr/2013/12/google-blogger-table-of-contents.html
구글 블로거에서 블로그 글 목차 보여주기.
블로그를 시작한 지 어느덧 팔 년.
그동안 1,000개가 넘는 글을 썼습니다.
글이 많아지니 전에 썼던 글을 찾을 때, 한참 헤매는 경우가 많아요.
그래서 얼마 전 월풍서가라는 메뉴를 만들었습니다.
블로그에 썼던 글을 좀 편하게 찾아보려는 의도에서였지요.
레이블(태그)별로 RSS를 받아와서 자동으로 목차를 만들어 주면 좋겠다고 생각했는데,
구글 블로거엔 레이블 간 계층을 지원하지 않아 제가 원하는 목차를 만들기 어려울 듯 했습니다.
그래서 수동으로 정리를 시작했어요.
읽었던 책에 대한 글을 한참을 걸려 정리하고 나니, 다른 글을 정리할 엄두가 나지 않았습니다.
글을 새로 쓸 때마다 목차를 갱신해야 한다는 점도 큰 부담이었어요.
거의 반년 동안 목차 페이지를 반쪽짜리로 남겨두었더니 자꾸만 눈에 밟힙니다.
좀 제대로 된 목차를 만들어 보고 싶었어요.
그동안 1,000개가 넘는 글을 썼습니다.
글이 많아지니 전에 썼던 글을 찾을 때, 한참 헤매는 경우가 많아요.
그래서 얼마 전 월풍서가라는 메뉴를 만들었습니다.
블로그에 썼던 글을 좀 편하게 찾아보려는 의도에서였지요.
레이블(태그)별로 RSS를 받아와서 자동으로 목차를 만들어 주면 좋겠다고 생각했는데,
구글 블로거엔 레이블 간 계층을 지원하지 않아 제가 원하는 목차를 만들기 어려울 듯 했습니다.
그래서 수동으로 정리를 시작했어요.
읽었던 책에 대한 글을 한참을 걸려 정리하고 나니, 다른 글을 정리할 엄두가 나지 않았습니다.
글을 새로 쓸 때마다 목차를 갱신해야 한다는 점도 큰 부담이었어요.
거의 반년 동안 목차 페이지를 반쪽짜리로 남겨두었더니 자꾸만 눈에 밟힙니다.
좀 제대로 된 목차를 만들어 보고 싶었어요.
그러던 중 아주 좋은 정보를 얻었습니다.
http://www.dorajistyle.pe.kr/feeds/posts/summary/-/A/B/C이거다 싶어서 코드를 짜다 보니 한가지 문제가 있습니다.
너무 많은 요청(Request)를 보내야 하는 것인데요.
결국 1차 레이블만 요청해서 받아온 결과를 클라이언트 단에서 처리해주는 방식으로 코드를 작성했습니다.
페이지를 읽는데 시간이 조금 걸리긴 하지만, 이정도면 만족스럽습니다.
월풍서가(月風書架)
목차를 만들며 레이블 정리를 새로 했습니다.
그러다 보니 예전 글을 좀 읽게 되었는데요.
정말 유치한 글도 보이고, 지금 봐도 마음에 드는 글도 있습니다.
나중엔 마음에 드는 글 목록도 만들어서 월풍서가에 넣고 싶어요.
이번에 글을 정리하다가 알게 된 한가지 사실에 충격을 받았습니다.
제가 미국의 문화식민이었다는 건데요.
블로그에 쓴 영화 감상평을 보면 미국 영화가 대다수더라고요.
한국을 포함한 다른 나라 영화를 모두 합쳐야 미국 영화를 본 수에 겨우 미칩니다.
저도 모르는 사이에 미국 문화에 크게 노출되어있던 거죠.
물론 앞으로도 미국 영화를 볼 때가 많겠지만,
미국 영화라는 것을 의식하고 보고,
다른 나라 영화도 두루 보아야겠습니다.
혹시 구글 블로거에 목차 페이지를 만들고 싶으신 분을 위해 코드를 공유합니다.
필요하신 분은 가져다 쓰세요.
필요하신 분은 가져다 쓰세요.
구글 블로거에 목차 페이지를 생성해 주는 스크립트
2014년 9월 2일 화요일
Wordpress to Blogger converter + Handy Tools
Ever wanted to move your WordPress blogs over to Blogger? This site can aid in the process!
Instructions
|
For information on how to run this conversion on your own, visit the open source project hosted at code.google.com
Handy tools
SEO Tools
- Redfly's tool for creating lists of keywords
- Content Strategy Generator Tool
- Übersuggest - keyword suggestion tool
- Google's Keyword Suggestion tool
- Google Search Insights
- ..... and some tips for using Search Insights
- Typing speed improvement tool
- Keyword research guide
- Blogger sitemap generator
AdSense
Photos:
Miscellaneous:
- Videos: Avidemux is an open source editor
Remove Space between Gadgets in Blogger Sidebar
Remove Space between Gadgets in Blogger Sidebar
Here's a popular question: "How do I remove spaces between gadgets on my sidebar?" I have seen this question being asked many times that I think a proper straight-forward tutorial is needed for this matter for future references. One might want to remove spaces between gadgets for various reasons. A common one is to use a picture gadget as a title, so the picture gadget needs to be really close with the next gadget to serve as a title. If you're interested in reducing space between your blog posts, see this tutorial instead.
Step 1:
As you might have already guessed, you have to identify your Gadget's ID. You have lots of elements in a page. CSS allows you to address a particular element or a particular group of elements via its class or ID. Please refer to this post on a brief note about IDs and Classes. Enough with the lecture, check out how you can identify your gadget's ID here. To play safe, identify both top and bottom gadgets' IDs (the space that will be removed lies between these two gadgets)
This is the ID of my gadgets (using my favorite add-on FireBug of course):
So my top gadget's ID is Label1, and my bottom gadget's ID is BlogArchive1.
As you might have already guessed, you have to identify your Gadget's ID. You have lots of elements in a page. CSS allows you to address a particular element or a particular group of elements via its class or ID. Please refer to this post on a brief note about IDs and Classes. Enough with the lecture, check out how you can identify your gadget's ID here. To play safe, identify both top and bottom gadgets' IDs (the space that will be removed lies between these two gadgets)
This is the ID of my gadgets (using my favorite add-on FireBug of course):
So my top gadget's ID is Label1, and my bottom gadget's ID is BlogArchive1.
Step 2:
If you're using the old Blogger interface: Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.
If you're using the new Blogger interface: Go to Dashboard ('House' symbol) - Template - Customize - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.
Replace 'Label1' with the ID of your top gadget. By doing this, the gap between these two gadgets will be reduced. It goes without saying that you'd have to change the value 50 accordingly. You can use the following code too:
Where 'BlogArchive1' is the ID of your bottom gadget. You have seen two different ways on how you can reduce the gap between your gadgets. In most cases, just use either one of these methods and it will work like a charm. In some rare cases, you might have to use both these methods combined.
Also, if you want to reduce 2 gaps between 3 gadgets, checkout the screenshot below. It speaks for itself:
Now that you've gotten the idea, it's just a matter of creativity on how you use these useful tools. And yes, you can use 'margin-right' and 'margin-left' CSS attributes as well to move your gadgets/elements horizontally. Have fun!
If you're using the old Blogger interface: Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.
If you're using the new Blogger interface: Go to Dashboard ('House' symbol) - Template - Customize - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.
1 2 3 | #Label1{margin-bottom: -50px !important;} |
Replace 'Label1' with the ID of your top gadget. By doing this, the gap between these two gadgets will be reduced. It goes without saying that you'd have to change the value 50 accordingly. You can use the following code too:
1 2 3 | #BlogArchive1{margin-top: -50px !important;} |
Where 'BlogArchive1' is the ID of your bottom gadget. You have seen two different ways on how you can reduce the gap between your gadgets. In most cases, just use either one of these methods and it will work like a charm. In some rare cases, you might have to use both these methods combined.
Also, if you want to reduce 2 gaps between 3 gadgets, checkout the screenshot below. It speaks for itself:
Now that you've gotten the idea, it's just a matter of creativity on how you use these useful tools. And yes, you can use 'margin-right' and 'margin-left' CSS attributes as well to move your gadgets/elements horizontally. Have fun!
[블로그 모바일 최적화] 구글 블로그 모바일 스킨의 위젯 구조
[블로그 모바일 최적화] 구글 블로그 모바일 스킨의 위젯 구조
구글 블로그의 모바일 스킨을 커스텀으로 꾸미고자 한다면, 웹버전의 색상과 글꼴 테마를 적용시키는 것 뿐 아니라, 위젯의 구조를 알고 위젯을 편집할 수 있어야 한다. 모바일버전은 웹버전처럼 세로2단 이상이 아닌, 세로 1단의 구조로 되어있기 때문이다. 이번 포스팅에서는 세로1단의 모바일 스킨이 어떤 위젯의 구성으로 이루어져 있는지, 어떻게 편집하는지에 대해서 알아본다. (컬러나 폰트 등의 테마 변경 부분은 이전 포스트인 모바일 커스텀 테마 편 참조).
모바일 스킨의 위젯 구조
우선 이 구조 파악의 기초 지식은 구글의 custom mobile template 안내에 따랐음을 밝혀둔다.
디폴트 값으로 모바일 스킨에 포함되는 구성요소는 여섯 가지이다.
1. 헤더(Header) - 블로그 타이틀과 설명이 들어간다.
2. 포스트본문요소(Blog)
3. 블로그 저자 프로파일(Profile)
4. 페이지리스트(PageList) - 페이지 요소들. 첫 화면의 최신 글 리스트들도 사실은 페이지요소이다. 그 외에 다른 페이지 요소를 블로그에 추가해서, 웹버전에 상단이든지 옆부분이든지 사용하고 있다면, 모바일버전에 선택목록이 나타난다.
5. 애드센스(AdSense)
6. 저작권정보(Attribution) - powered by blogger 같은...
괄호안의 용어들은 구글 블로그 html 템플릿에서 사용되는 위젯의 id이다
물론 웹버전에 추가되어 있지 않는 구성요소가 있다면, 모바일에도 나타나지 않을 것이다. 예를 들어, 웹버전에 저자프로파일 위젯이나, 애드센스가 없다면, 모바일 버전에도 나타나지 않는다.
그럼, 디폴트를 나타나지 않게 하거나, 디폴트가 아닌 요소들을 어떻게 나타나게 할 것인지 알아보자.
디폴트 값으로 모바일 스킨에 포함되는 구성요소는 여섯 가지이다.
1. 헤더(Header) - 블로그 타이틀과 설명이 들어간다.
2. 포스트본문요소(Blog)
3. 블로그 저자 프로파일(Profile)
4. 페이지리스트(PageList) - 페이지 요소들. 첫 화면의 최신 글 리스트들도 사실은 페이지요소이다. 그 외에 다른 페이지 요소를 블로그에 추가해서, 웹버전에 상단이든지 옆부분이든지 사용하고 있다면, 모바일버전에 선택목록이 나타난다.
5. 애드센스(AdSense)
6. 저작권정보(Attribution) - powered by blogger 같은...
괄호안의 용어들은 구글 블로그 html 템플릿에서 사용되는 위젯의 id이다
물론 웹버전에 추가되어 있지 않는 구성요소가 있다면, 모바일에도 나타나지 않을 것이다. 예를 들어, 웹버전에 저자프로파일 위젯이나, 애드센스가 없다면, 모바일 버전에도 나타나지 않는다.
그럼, 디폴트를 나타나지 않게 하거나, 디폴트가 아닌 요소들을 어떻게 나타나게 할 것인지 알아보자.
위젯을 원하는 대로 편집하자!
먼저 저작권정보를 예로 들어 보면,
<b:widget id="Attribution1" locked="true" title="Attribution" type="Attribution">
이런 식으로 시작된다. 여기서 locked="true"로 지정된 값은 레이아웃 편집 모드에서 위젯 삭제 버튼이 나타나지 않게 하는 기능을 한다. 아뭏든 여기 속성 중에 mobile="no"라고 첨가해 주면, 모바일에서 powered by blogger나 블로거 제공이나 이런 문구가 나타나지 않게 된다.
여기까지가 구글의 안내에 따른 방법이 되겠다. 이 블로그는 디폴트로 지정된 저작권 정보가 없어진지 몇 주 되는지라 이 방법이 잘 기능하는지 시험해보지를 못했다.
대신 헤더 부분을 가지고 시험해 보았다.
html 편집 모드를 통해 본 이 블로그 헤더 부분 코드는 다음과 같다.
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='false' title='헬라인의 weblog...[graphai](헤더)' type='Header'>
일단 헤더 위젯은 헤더 섹션 아래 들어가 있다. 헤더 섹션은 최대위젯수가 한개(maxwidgets='1')로 정해져 있다. 구글 안내대로, 두번째줄의 위젯 코드에 mobile='no'를 넣어주었다. 그 결과는...
블로그 타이틀 부분이 있는 헤더의 실종!!!
반대로 디폴트가 아닌 값을 모바일 템플릿에 넣고자 한다면, 해당 위젯코드에 mobile='yes'라고 기입해 주면 되겠다.
이 블로그 아래에 있는 copyright 어쩌구 하는 부분은 html/Javascript 위젯으로 만들어진 것이다. 원래의 저작권 정보(powered by blogger)가 편집이 불편해서 이렇게 만들어 주었다.
이 부분을 모바일 버전에도 나타나게 하고자 한다면,
<b:widget id='HTML3' locked='false' mobile='yes' title='' type='HTML'/>
이렇게 해당 위젯을 찾아서 mobile='yes'를 넣어주었다.(가젯코드 펼쳐보기를 하지 않으면 위젯의 제목부분만 나오므로, 원하는 위젯을 보다 쉽게 찾을 수 있다.)
화면 하단에 웹버전처럼 copyright...about me 등등이 나오는 것을 볼 수 있다.
만약, 어떤 위젯이 모바일에서만 나오기를 원한다면, mobile='only'라고 기입해 넣으면 된다.
<b:widget id="Attribution1" locked="true" title="Attribution" type="Attribution">
이런 식으로 시작된다. 여기서 locked="true"로 지정된 값은 레이아웃 편집 모드에서 위젯 삭제 버튼이 나타나지 않게 하는 기능을 한다. 아뭏든 여기 속성 중에 mobile="no"라고 첨가해 주면, 모바일에서 powered by blogger나 블로거 제공이나 이런 문구가 나타나지 않게 된다.
여기까지가 구글의 안내에 따른 방법이 되겠다. 이 블로그는 디폴트로 지정된 저작권 정보가 없어진지 몇 주 되는지라 이 방법이 잘 기능하는지 시험해보지를 못했다.
대신 헤더 부분을 가지고 시험해 보았다.
html 편집 모드를 통해 본 이 블로그 헤더 부분 코드는 다음과 같다.
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='false' title='헬라인의 weblog...[graphai](헤더)' type='Header'>
일단 헤더 위젯은 헤더 섹션 아래 들어가 있다. 헤더 섹션은 최대위젯수가 한개(maxwidgets='1')로 정해져 있다. 구글 안내대로, 두번째줄의 위젯 코드에 mobile='no'를 넣어주었다. 그 결과는...
반대로 디폴트가 아닌 값을 모바일 템플릿에 넣고자 한다면, 해당 위젯코드에 mobile='yes'라고 기입해 주면 되겠다.
이 블로그 아래에 있는 copyright 어쩌구 하는 부분은 html/Javascript 위젯으로 만들어진 것이다. 원래의 저작권 정보(powered by blogger)가 편집이 불편해서 이렇게 만들어 주었다.
이 부분을 모바일 버전에도 나타나게 하고자 한다면,
<b:widget id='HTML3' locked='false' mobile='yes' title='' type='HTML'/>
이렇게 해당 위젯을 찾아서 mobile='yes'를 넣어주었다.(가젯코드 펼쳐보기를 하지 않으면 위젯의 제목부분만 나오므로, 원하는 위젯을 보다 쉽게 찾을 수 있다.)
화면 하단에 웹버전처럼 copyright...about me 등등이 나오는 것을 볼 수 있다.
만약, 어떤 위젯이 모바일에서만 나오기를 원한다면, mobile='only'라고 기입해 넣으면 된다.
중요 위젯들의 id
방법을 알았다고 해도, 각종 위젯의 id를 알지 못한다면 이 방법은 무용지물이다. 위에서 열거된 디폴트 값들 외에 사용할 가능성이 높은 위젯들을 중심으로 위젯 id들은 다음과 같다.
- 블로그목록 - BlogList1
- 링크목록 - LinkList1
- 인기글목록 - PopularPosts1
- 라벨가젯구성 - Label1
- 블로그보관함 - BlogArchieve1
- 검색창 - CustomSearch1
- 관심사용자 - Followers1
- 통계 - Stats1
- 구독링크 - Subscribe1
- 슬라이드쇼 - Slideshow1
- 비디오바 - VideoBar1
2014년 8월 27일 수요일
웹이 죽어가고 있다.
“개방적이고 평등한 웹이 죽어가고 있다”
웹이 죽어가고 있다.
월드와이드웹이 위기에 처했다는 경고음이 계속 울리고 있다. 1990년 12월 평등주의를 기초로 탄생한 웹은 점차 덜 개방적이고 폐쇄적인 인터넷의 생태계로 편입되고 있다는 비판도 제기된다. 웹의 창시자 팀 버너스 리도 경고 메시지를 더욱 강한 톤으로 내뱉고 있다.
‘가디언’은 8월24일 ‘어떻게 웹은 자신의 길을 잃어버리고 있는가’라는 제목의 장문 기사를 내보냈다. 크리스 앤더슨, 찰스 리드비터, 팀 버너스 리의 최근 발언들을 인용해 위기에 처한 웹의 현재를 집중 조명했다. 웹의 개방성, 평등성을 위협하는 다양한 사례도 제시됐다. 하필 그 핵심에 페이스북이 놓여있었다.
팀 버너스 리(출처 : 위키피디아)
1990년 겨울 유럽입자물리연구소(CERN)에서 탄생한 월드와이드웹은 ‘세상 모든 사람들이 어떤 누구와 언제 어디서든지 정보를 공유할 수 있도록 하기 위해’ 탄생했다. 그것이 웹의 정신이었고 비교적 최근까지도 그 정신은 지켜져왔다. 웹의 정신은 풀뿌리에서부터 공감을 얻으며 전 세계로 확장하는 토대가 됐다. 팀 버너스 리는 웹의 성장할 수 있도록 가장 큰 동력으로 ‘평등성’을 꼽았다.
“웹은 강력한, 그리고 유비쿼터스적 도구로 진화해왔다. 그것은 평등주의적 조건 위에서 구축됐기 때문이고, 월드와이드웹 컨소시엄의 부분으로서 수천명의 개인과 대학, 기업이 독립적이면서도 함께 작업했기 때문이다.”
하지만 ‘가디언’은 웹의 평등주의 정신이 서서히 뒤로 밀려나고 있다고 지적했다. 웹이 가져다줄 긍정적인 미래의 잠재력에 대해서 회의적인 시각이 확산되고 있다고도 했다. 웹에서 여성 혐오주의가 확산되고, 보복성 포르노와 같은 악성 범죄가 늘어나고 있으며 기업과 정부의 감시가 퍼져나가고 있는 것이 그 방증이다. 뿐만 아니라 인종주의를 비롯해 각종 부정적인 글들이 넘쳐나는 현실도 더 이상 방관할 수 없는 상황에 왔다고 말한다.
모바일의 확산도 웹엔 위기 요소다. 크리스 앤더슨의 말처럼 “우리는 웹이 아니라 인터넷에서 하루를 보내고 있다”. 웹이 개방과 평등을 상징한다면 모바일은 준폐쇄적 인터넷이라는 공간적 의미를 지닌다. 웹만큼 열려있지 않고 평등하지도 않다. 모바일 시대로의 전환은 웹의 위축을 가져오고 있고, 그러한 경향성은 더욱 짙어지고 있다. 그것이 크리스 앤더슨이 말하는 ‘웹의 죽음’이다.
특히 ‘가디언’은 웹과 페이스북을 대척점에 세워놓았다. 페이스북의 감정조작, 감시 시스템, 광고 모델 등은 웹의 정신과 배치된다는 의미에서다. 런던북리뷰의 편집자인 토마스 존슨은 ‘가디언’과의 인터뷰에서 “우리는 페이스북의 이용자가 아니라 페이스북의 상품일 뿐이다”라고 언급하기도 했다.
웹 창시자마저도 페이스북에 경고
최근에는 팀 버너스 리도 페이스북 비판 대열에 가세했다. 그는 인터넷닷오아르지를 추진하고 있는 페이스북을 향해 “페이스북닷컴으로만 가게 하는 휴대폰을 만들 엄두도 내지 마라”고 경고했다. 인터넷닷오아르지는 마크 주커버그가 “연결이 곧 인권”이라는 명분으로 추진 중인 저개발국 인터넷 연결 프로젝트다. 페이스북은 이 프로젝트를 위해 통신사들과 협력하고 있다.
현재의 웹은 분명 팀 버너스 리가 의도했던 방향과는 멀어지고 있다. 모든 기술이 설계자의 의도대로 진화하진 않지만, 지금의 웹은 초기의 정신과는 상반된 방향으로 성장하고 있어 우려를 증폭시킨다. 오죽하면 팀 버너스 리가 “웹이 조지 오웰의 우려 이상으로 감시를 촉진시키는 기술이 될 것이라곤 전혀 예상하지 못했다”고 안타까워했을까. 지금 웹이 처한 위기 상황을 대변하는 씁쓸한 풍경이다.
http://www.bloter.net/archives/203986
블로터닷넷 매거진 팀장입니다. 이메일은 dangun76@bloter.net 트위터는 @dangun76 을 쓰고 있습니다. 독자 여러분들의 다양한 피드백을 간절히 원하고 있습니다.
피드 구독하기:
글 (Atom)