[ 리버싱 / 프로그래밍 / 음악 / 게임 / 그 외... ]

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


금요일, 2월 19, 2016



티스토리를 쓰다가 Blogger 로 넘어왔을 때...

가장 아쉬운 점이 '카테고리(Category)'의 부재였습니다.


티스토리의 카테고리

Blogger 레이아웃 메뉴에서 이것저것 만지다보니

"라벨(태그)" 가젯으로 카테고리처럼 꾸밀 수 있더군요 @_@;;;


태그(라벨) 가젯 설정

블로그의 게시물에 지정된 라벨들 중 원하는 일부만 표시하는 것이 가능한데...

보여줄 라벨을 선택한 다음 표시 방법을 '목록' 으로 지정하면...?


라벨(태그) 가젯을 이용한 카테고리

이렇게 보여집니다 :)

각 카테고리에 해당하는 게시물을 작성할 때는 라벨만 지정해주면 됩니다.


라벨 가젯을 이용하는 게 가장 쉽고 편하지만...

아쉬운 점이 있다면 표시되는 카테고리의 순서를 임의로 지정할 수가 없다는 건데요.

HTML/JavaScript 가젯에 HTML 코드를 입력해서 카테고리를 만들 수도 있습니다.


라벨 가젯을 이용한 카테고리 HTML 소스

HTML/JavaScript 가젯에 카테고리 HTML 코드 입력

HTML 코드를 직접 입력하면 화면에 표시되는 카테고리의 순서를 바꿀 수도 있고

카테고리명을 실제 라벨과 다르게 지정할 수도 있습니다 :)


<script type="text/javascript">
//<![CDATA[
function getPostCount(json) {
 document.write(json.feed.entry.length);
 }
 //]]>
</script>
<ul>
<li>
<a dir="ltr" href="http://www.xeronichs.com/search/label/game">game</a>
<span dir="ltr">(<script src="http://www.xeronichs.com/feeds/posts/default/-/game?&alt=json-in-script&callback=getPostCount"></script>></span>
</li>
<li>
<a dir="ltr" href="http://www.xeronichs.com/search/label/music">music</a>
<span dir="ltr">(<script src="http://www.xeronichs.com/feeds/posts/default/-/music?&alt=json-in-script&callback=getPostCount"></script>)</span>
</li>
<li>
<a dir="ltr" href="http://www.xeronichs.com/search/label/programming">programming</a>
<span dir="ltr">(<script src="http://www.xeronichs.com/feeds/posts/default/-/programming?&alt=json-in-script&callback=getPostCount"></script>)</span>
</li>
<li>
<a dir="ltr" href="http://www.xeronichs.com/search/label/reverse%20engineering">reverse engineering</a>
<span dir="ltr">(<script src="http://www.xeronichs.com/feeds/posts/default/-/reverse%20engineering?&alt=json-in-script&callback=getPostCount"></script>)</span>
</li>
</ul>

각 카테고리에 포함된 게시물 수를 가져오기 위해 JavaScript 를 썼는데...

카테고리마다 호출하는 것이 내키지 않아서 실제로 적용은 하지 않았습니다. oTL;;;

게시물 수를 보여줄 수 있는 더 깔끔한 방법이 없는지 찾아보는 중입니다.


일단 결론은 Blogger 에서도 카테고리 구현이 가능한 걸로... @_@ !!!



월요일, 2월 08, 2016



Blogger 를 처음 만든게 1월 28일...

이것저것 꾸미기 시작한지도 열흘 정도 지났네요 @_@;;;

티스토리에 너무 익숙해져 있다보니 적응이 덜 되어 불편하게 느껴지는 부분도 다소 있구요. (ㅠㅠ)


Blogger 에서 제공해주는 기본 템플릿이 적용하긴 편하지만...

뭔가 가려운 곳을 확 긁어내주는 그런 느낌이 부족한지라

고민하다가 템플릿을 바꾸기로 결정 ~ !!


New Blogger Themes


New Blogger Themes 라는 사이트가 있길래 들어가보니

"Busby" 라는 템플릿이 눈에 딱 들어오더군요... @_@


Template Name : Busby

Author : NewBloggerThemes

Designer : WP Lift

Published Date : March 19, 2013

Updated Date: January 27, 2016

Advanced Details:

http://newbloggerthemes.com/busby-blogger-template/ 



템플릿 파일을 받은 후, 블로그 설정 -> '템플릿' 메뉴에서 '백업/복원' 을 통해

내려받은 템플릿 xml 파일을 복원시키니 적용이 되더군요... (우와 +_+ )





일단 전체적인 템플릿 틀은 적용이 됐는데, 세세한 설정이 생각보다 번거롭더군요... oTL;;;

가젯들도 일일이 다시 설정해줘야 되고...

특히나 번거로운 부분은 기본 제공 템플릿이 아니다보니

템플릿 '맞춤설정' 이 지원되지 않는 점 이랄까요;;;

HTML 코드 하나하나 뒤져가면서 이것저것 손을 봐야 했습니다.


설정이 어느 정도 마무리가 됐다 싶을때...

' 뭔가  설정을 잘못했나? ' 싶은 생각이 드는게...


undefined ..!? @_@;;

날짜를 보여줘야 되는 노란 원에 "undefined" 라는 문자열이 뜨더군요...;;;




템플릿의 소스코드에는 이렇게 되어있는데...

<data:post.timestamp/> 값의 형식에 따라서 date_dd, date_mmm 값이 들어가지 않을 수도 있고...

제 블로그가 딱 그 상황이더군요.

해당 값 형식은 블로그 설정 -> '언어 및 서식' 에서 변경이 가능합니다.


원하는 걸로 설정 ~


아... 참고로 저는 '시간형식' 대신 '날짜형식'을 변경하고 스크립트를 살짝 수정했습니다.




<data:post.timestamp/> 부분을 <data:post.dateHeader/> 으로 변경~


날짜가 딱~! 수정 성공적~!


날짜가 딱~! 보일 때의 그 뿌듯함이란...ㅋㅋㅋㅋㅋ


HTML, CSS 이런 웹쪽은 잘 몰라서 매번 어버버하고 있지만...

그런만큼 입맛에 맞게 변경해 나가는 재미는 더 큰 거 같아요~!


오늘은 여기까지...






화요일, 2월 02, 2016



티스토리 시절부터 계속 써오던 SyntaxHighlighter 를 이 곳에도 적용했습니다.

Blogger 는 임의로 css / js 파일 등을 업로드 할 수가 없는 것 같아서...

호스팅 버전을 그대로 끌어와서 쓰는 걸로... =_=;;;
( 참고 : http://alexgorbatchev.com/SyntaxHighlighter/hosting.html )


설정 방법은 복잡하진 않네요.

Blogger 설정 -> '템플릿' -> 'HTML 편집' 에서 필요한 코드를 추가하면 끝 !











저는 <head> 태그 밑에 바로 추가했는데 별 문제는 없는 듯 하네요.

[ 테스트 코드 ]
int main()
{
    // =_=;;;

    return 0;
}


ps.

템플릿 수정 해두고 테스트 게시물 간단하게 작성해서
'미리보기' 로 계속 확인하는데 이상하게도 적용이 되지 않더군요.
이 자료 저 자료 뒤져가며 계속 삽질하다가 실수로 '게시'를 해버렸는데
게시한 상태에서는 제대로 나오더군요... =_=;;;;

'미리보기' 상태에서 안나오길래 계속 스트레스 받고 있었건만... oTL



카테고리

가장 많이 본 글

통계

Copyright © XeroNic(HS) BLOG | Powered by Blogger
Design by WP Lift | Blogger Template by NewBloggerThemes.com