[Blogspot] 상단 메뉴

blogspot 의 상단 메뉴를 조금 바꿔봤습니다.
HTML/CSS 를 조금 아시는 분들은 간단하게 응용해서 적용 하실 수 있으실 것 같네요.

우선 태그부터 보겠습니다.

<div class="G1sBlogMenu">
  <ul>
    <li>
      <a href="/">Home</a>
    </li>
    <li>
      <a href="/search/label/tip?max-results=1">Tip</a>
      <ul>
        <li><a href="/search/label/blogspot?max-results=1">Blogspot</a></li>
        <li><a href="/search/label/google%20%2b?max-results=1">Google+</a></li>
        <li><a href="/search/label/plan?max-results=1">Plan</a></li>
      </ul>
    </li>
    <li>
      <a href="/search/label/study?max-results=1">Study</a>
      <ul>
        <li><a href="/search/label/open%20api?max-results=1">Open API</a></li>
        <li><a href="/search/label/project%20euler?max-results=1">Project Euler</a></li>
        <li><a href="/search/label/algospot?max-results=1">Algospot</a></li>
      </ul>
    </li>
    <li>
      <a href="/search/label/%EC%9D%BC%EC%83%81?max-results=1">일상</a>
      <ul>
        <li><a href="/search/label/%EC%97%AC%ED%96%89?max-results=1">여행</a></li>
        <li><a href="/search/label/%EC%9E%A1%EB%8B%B4?max-results=1">잡담</a></li>
      </ul>
    </li>
    <li>
      <a href="/p/gallery.html">Gallery</a>
    </li>
    <li>
      <a href="/p/blog-map.html">Blog Map</a>
    </li>
  </ul>
</div>

기본 div ul li 태그 안에 a 태그로 메뉴들이 있구요.
다시 ul li 태그 안에 서브메뉴들이 들어있는 형태입니다.

메뉴와 서브메뉴는 각자 개인에 맞게 적용해 주시고요.
a 태그안의 href 는 각 label의 링크 또는 페이지의 링크를 적용하면 됩니다.

상단에 있는 가젯 영역은 기본적으로 css가 적용되어 태그들이 가로로 정렬이 되는데요.
여기에 간단한 CSS로 필요없는 서브메뉴를 가려보겠습니다.

우선 JQuery를 적용하기 위해 다음 script 태그를 적용해 주시고요.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

다음 Style 과 Script 를 적용합니다.

<style>
.G1sBlogMenu {height:40px; text-align:center;}
.G1sBlogMenu ul li ul { width:1000px; margin-left:0px; }   
.hidemenu ul { display:none; }
.showmenu { width:120px; }  
</style>
<script>
$(".G1sBlogMenu").ready(function() {
 $('.G1sBlogMenu ul li').addClass('g1sMainmenu')
 $('.g1sMainmenu ul li').addClass('g1sSubmenu')
 $('.g1sSubmenu').removeClass('g1sMainmenu')
 $('.g1sMainmenu').addClass('hidemenu')
 $('.g1sMainmenu').hover(function(){
  $('.g1sMainmenu').addClass('hidemenu')
  $('.g1sMainmenu').removeClass('showmenu')
  $(this).addClass('showmenu');
  $(this).removeClass('hidemenu');
  }, function(){ });
 $('.G1sBlogMenu').hover(function(){
  }, function(){
  $('.g1sMainmenu').addClass('hidemenu');
  $('.g1sMainmenu').removeClass('viewmenu');
 });
});
</script>

위 Stryle 는 제 템플릿 디자인을 기준으로 적용한 거라 세밀한 디자인은
각 개인 블로그에 맞게 수정해야 할 수 있습니다.

[Blog] Google + 댓글 적용

아직 구글플러스 댓글 기능은 조금 문제가 있네요.
댓글을 달았을 때 알람이 안오는게 아무래도 좀 크네요.
따로 최근 댓글들을 보여주지도 않고 포스트마다 일일이 확인을 해야하는 군요...
해당 문제가 해결될 때까지 구글플로스 댓글 적용을 해제 하였습니다.

---

오랜만에 와서 블로그에 답글도 달고,
못올리고 있던 포스트도 달고 하던 중 [Google + 댓글 사용] 이라는 메뉴가 있어 적용을 하였습니다.

잠시 쉬고 왔는데 블로그 관리 페이지에 댓글란이 없어 어리둥절.
블로그에 들러보니 댓글 부분이 친숙한 Google + 의 UI로 바뀌었네요.

바로 Google + 댓글에 대해 알아보았습니다.
자세한 정보는 다음 링크 참조해 주세요.

Google + 댓글 정보

UI 뿐 아니라 여러가지 기능들이 눈에 띄네요.
한가지 우려되는 점은 Google + 가입자만 댓글을 달 수 있다는 것.

평소 댓글을 공개로 해놔 미가입자나 익명 사용자도 자유로이 댓글을 달 수 있게 했었는데,
이제는 Google 에 로그인을 하신분만 댓글을 다실 수 있게 되는 군요.

하지만 Google + 와 댓글을 한곳에 모아서 볼 수 있다는 장점에 이대로 적용하기로 결정하였습니다.

Google에 가입하지 않으신 분들이나 익명으로 댓글을 달기를 원하셨던 분들은 양해 부탁드립니다.

아! 또 한가지.

• 블로그에 댓글을 남길 때 Google+와도 댓글을 공유할 수 있는 옵션이 기본적으로 선택되어 표시됩니다.

라는 부분이 있네요.
댓글을 남기실때 댓글 내용과 글 본문이 Google + 로 공유 될 수 있으니 이를 원치않으시는 부분은 아래 체크 되어 잇는 부분을 해제 해 주시기 바랍니다.

공유할 때도 글을 볼 수 있는 서클을 제한 할 수 있으니
이 것도 잘만 사용하면 장점이 될 수 있겠네요.