레이블이 블로그인 게시물을 표시합니다. 모든 게시물 표시
레이블이 블로그인 게시물을 표시합니다. 모든 게시물 표시

2014년 9월 21일 일요일

구글 블로거에서 블로그 글 목차 보여주기.

http://www.dorajistyle.pe.kr/2013/12/google-blogger-table-of-contents.html


구글 블로거에서 블로그 글 목차 보여주기.

블로그를 시작한 지 어느덧 팔 년.
그동안 1,000개가 넘는 글을 썼습니다.
글이 많아지니 전에 썼던 글을 찾을 때, 한참 헤매는 경우가 많아요.
그래서 얼마 전 월풍서가라는 메뉴를 만들었습니다.
블로그에 썼던 글을 좀 편하게 찾아보려는 의도에서였지요.
레이블(태그)별로 RSS를 받아와서 자동으로 목차를 만들어 주면 좋겠다고 생각했는데,
구글 블로거엔 레이블 간 계층을 지원하지 않아 제가 원하는 목차를 만들기 어려울 듯 했습니다.
그래서 수동으로 정리를 시작했어요.
읽었던 책에 대한 글을 한참을 걸려 정리하고 나니, 다른 글을 정리할 엄두가 나지 않았습니다.
글을 새로 쓸 때마다 목차를 갱신해야 한다는 점도 큰 부담이었어요.
거의 반년 동안 목차 페이지를 반쪽짜리로 남겨두었더니 자꾸만 눈에 밟힙니다.
좀 제대로 된 목차를 만들어 보고 싶었어요.
그러던 중 아주 좋은 정보를 얻었습니다.
http://www.dorajistyle.pe.kr/feeds/posts/summary/-/A/B/C
식으로 피드를 받아오면 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

  1. Login to your WordPress account and navigate to the Dashboard for the blog that you'd like to transfer to Blogger.
  2. Click on the Manage tab below the Blog name.
  3. Click on the Export link below the Manage tab.
  4. Download the WordPress WXR export file by clicking on Download Export File.
  5. Save this file to your local machine.
  6. Browse to that saved document with the form below and click Convert.
     
  7. Save this file to your local machine. This file will be the contents of your posts/comments from WordPress in a Blogger export file.
  8. Login to your Blogger or create a new user.
  9. Once logged in, click on the Create a Blog link from the user dashboard, and then click on the Import Blog Tool
  10. Follow the instructions and upload your Blogger export file when prompted.
  11. After completing the import wizard, you should have a set of imported posts from WordPress that you can now publish to Blogger. Have fun!
NOTE: This hosted application will only allow downloads smaller than 1MB. 

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


AdSense


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.

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. 
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이다
물론 웹버전에 추가되어 있지 않는 구성요소가 있다면, 모바일에도 나타나지 않을 것이다. 예를 들어, 웹버전에 저자프로파일 위젯이나, 애드센스가 없다면, 모바일 버전에도 나타나지 않는다.


그럼, 디폴트를 나타나지 않게 하거나, 디폴트가 아닌 요소들을 어떻게 나타나게 할 것인지 알아보자.

위젯을 원하는 대로 편집하자!

먼저 저작권정보를 예로 들어 보면,

<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=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
(위젯 id 뒤의 숫자 1은 동일 위젯이 다수가 되면 늘어나는 숫자이다. 하나만 있으면 1이 붙는다.)

2014년 8월 30일 토요일

Google Apps에서 블로그 연동기능

Google Apps에서 블로그 연동기능

회사내에서 많은 정보들이 있습니다. 이들 정보 중 홍보 및 외부에 공유할 만한 자료를 쉽게 
블로그등과의 사이트에 연동하는 법을 안내해 드립니다.

이를 위해서는 연동을 위한 블로그가 있어야 합니다.
현재 Google Apps와 연동되는 블로그는 Blogger, BlogHarbor, BlogWare, LiveJournal, squarespace, wordpress 가 지원됩니다.

아래의 순서데로 실행하면 자신의 블로그에 Google Apps의 내용을 쉽게 게시 및 삭제가 가능합니다.

1. 올리고자하는 내용의 문서를 선택한 후 추가 작업메뉴에서 게시를 선택 합니다













2. 아래의 화면과 같이 게시설정을 위한 화면이 나타납니다.















3. “블로그 사이트 설정”을 눌러 본인의 블로그와 연결합니다.
  이때 호스트 제공(Blogger)과 , 내 고유 서버/사용자 지정을 선택할 수 있습니다.
여기서는 호스트 제공을 예로 하겠습니다. (기타 [내 고유 서버/사용자 지정]을 선택하면 Blog Api를 통해 Post할 수 있습니다)













4. 위 화면에서 설정이 정상적이면 테스트를 통해 실질적으로 연동정보가 잘되어있는지 확인할 수 있습니다.
 만약 정상적으로 입력이 되지 않으면 다시 블로그의 내용을 확인한 후 정확한 값을 입력해야 합니다.

5. “블로그 게시” 버튼을 눌러서 게시합니다.














6. 블로그에 정상적으로 게시된 내용을 확인할 수 있습니다.















7. 아래와 같이 Google Apps의 내용이 변경시 ”게시물 다시 게시나”, “게시물 제거”를 할 수 있습니다.














해당 기능은 Google의 전략 중 현재 무료로 사용되고 있는 많은 기능들을 Google Apps와 연동하고자 
하는 계획의 내용이며 앞으로는 더많은 어플리케이션과(picasaweb,reader등등) Google Apps간에 통합이 이루어 질것을 기대합니다.

정보를 좀더 쉽게 유통하는 관점에서 정말 유용한 기능이라고 생각됩니다.

 현재 신규 editor에서는 잘 작동이 안되는것 같습니다. 신규에디터에서 작성하면 게시버튼이 보이지를 않습니다.
 해당 내용은 Google 에 Case Open을 해 놓은 상태이고 안되시면 아래의 화면과 같이
 문서도구 관리에서 ”구글문서의 새버전"에 check가 되어있으시면 uncheck하시고 테스트 해보십시요.
추후 해당 내용이 개선되면 새 editor에서도 정상적으로 작동될 것으로 보입니다.


Posted by Frank