Translate

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

2018년 9월 2일 일요일

[Blogger / Blogspot / 구글 블로그] 로그인 시에만 보이는 태그 만들기 (글쓰기, 글수정 등)




내 블로그로 예를 들어보면 위가 로그인 전, 아래가 로그인 후이다.

자세히 차이점을 찾아보면 왼쪽메뉴 최하단의 글쓰기와 각 글 옆의 펜모양이 보일 것이다.
이렇게 로그인 시에만, 즉 자신에게만 보이는 버튼을 만들어 보자.

사실 기본 블로그 테마들을 이용하면 상단에 navbar라는 게 있어서 글쓰기 버튼에 대한 고민은 하지 않아도 되고,
글 수정 버튼도 기본적으로 있지만,
나처럼 외부 템플릿을 불러왔는데 이것들이 없을 경우에 참고하면 좋은 글이다.

그리고 위치 지정의 경우 스스로의 블로그에 대한 html 소스를 대략 알고 있어야 가능해서,
소스에 대해서만 설명하겠다.

우선 글쓰기 버튼은, 확인해야할 사항이 하나 있다.
blogger.com으로 들어가서 글쓰기 버튼을 누르고 URL을 복사해온다.

https://www.blogger.com/blog/post/edit/★
같은 형식일텐데, ★ 부분은 랜덤한 숫자처럼 보이는 걸로 봐선 아마 계정별로 다를 것이다.

그리고 원하는 위치에 다음 소스를 붙히면 된다. (href 속성 안에 URL를 붙이면 된다)
<span class='item-control blog-admin'>
    <a target='_blank' href='https://www.blogger.com/blog/post/edit/★'>글쓰기</a>
</span>


두번째로 수정 버튼은, 사실 기본 테마에서 그대로 가져온 소스긴 하지만 어쨌든 적어보자면

<b:include data='post' name='postQuickEdit'/>
<b:if cond='data:post.editUrl'>
   <span expr:class='&quot;item-control &quot; + data:post.adminClass'>
       <a target='_blank' expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
           <img alt='' class='icon-action' height='18' src='http://img2.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
       </a>
   </span>
</b:if>

이건 내부적으로 blogger 자체 태그를 쓰는거라 따로 변경해줄 부분은 없다.
여기도 문자로 바꾸고 싶다면 img 태그 대신 문자를 그대로 쓰면 된다.


2018년 6월 22일 금요일

[Blogger / Blogspot / 구글 블로그] 사진, 동영상 크기 관련 팁


1. 사진 여러 장 업로드 시 일괄 크기 지정법





기본적으로 글쓰기 탭에서 사진을 여러 장 삽입할 경우,
별 중간과정 없이 그대로, 그것도 Blogger 기준 '크게' 사이즈로 삽입되기 때문에
그 크기를 바라지 않을 경우 일일히 노가다를 하는 수밖에 없다.

그런데 사실 Blogger에는 이를 보완할 기능이 있다.

바로 글쓰기 옆의 HTML 탭으로 변경 후 사진을 여러 장 삽입해보면,
아까와는 달리 이런 창이 등장한다.




딱 보면 알겠지만, 사진들을 일괄처리할 수 있는 기능이다.

추측으로는 만들었다가 현재 글쓰기 메뉴에 적용을 실수로 안한 게 아닐까 생각한다.



2. 동영상 크기 변경법

Blogger에서 제공하는 기능으로 개인 동영상을 올리든, 유튜브 동영상을 올리든
공통적으로 크기가 너무 작다.

html 값을 보면 희한하게도 크기를 320 * 266 으로 딱 고정해놓았다.

CSS 추가로 강제로 이 기본값을 바꿀 수 있다.


Blogger에서 테마 - 맞춤설정을 선택,
고급 탭에서 맨 아래의 CSS추가를 선택한다.
(간혹 외부 템플릿을 적용한 경우는 너비 조정 탭에서 나온다.)


그리고 아래 소스를 입력한다.


.b-hbp-video, .YOUTUBE-iframe-video
{
  width: 90%;
  height: 56vh;
}

간단히 설명하자면 b-hbp-video 와 YOUTUBE-iframe-video라는 클래스(각각 업로드 동영상, 유튜브 동영상)의 크기를 조정하는 것인데,

가로는 포스트창 기준으로 %가 적용되지만,
세로는 기준이 뭔지 %는 이상한 결과가 나오고
그 대신 vh라는 브라우저 높이값에 비례하는 값을 썼다.
이게 모바일에서도 제일 무난하게 나오는 것 같다.

위 값대로 하면 이 정도 사이즈가 되고,




만약 변경하고 싶다면 F12를 누르면 나오는 개발자모드에서 미리보기를 할 수 있다.
왼쪽 상단에 커서 버튼을 클릭하고 동영상을 누르면 해당 태그를 쉽게 찾을 수 있다.
(선택한 채로 위, 아래 방향키로 값 조정이 가능하다.)


계속 느끼는 지만, Blogger는 html 지식이 없는 사용자에게는 상당히 불편한 플랫폼인 것 같다.

2018년 6월 10일 일요일

[Blogspot / Blogger / 구글 블로그] 외부 템플릿 불러오기 시 Google+ 댓글이 나오지 않는 현상 해결


대부분의 외부 템플릿이 기본적으로 Blogger 자체의 댓글이 보이도록 되어있는데,
댓글을 Google+로 변환 시 아예 다른 api를 사용하게 되는 모양인지 댓글이 전부 없어져 버리는 현상이 발생한다. 

다시 제공 템플릿으로 돌아오면 보이는 걸 보면 제공 템플릿에는 자동적으로 소스가 변경되도록 어떤 장치가 되어있는 것 같은데, 그게 뭔지는 잘 이해를 못했다.

어쨌든 변경해야 할 부분은 댓글 수 부분과 댓글이 보이는 부분이다.


테마 HTML 편집을 보면 다음과 같은 부분이 두 군데 있다. (showThreadedComments 를 검색)

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
  <b:if cond='data:post.showThreadedComments'>
 <b:include data='post' name='threaded_comments'/>
  <b:else/>
 <b:include data='post' name='comments'/>
  </b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <b:if cond='data:post.showThreadedComments'>
 <b:include data='post' name='threaded_comments'/>
  <b:else/>
 <b:include data='post' name='comments'/>
  </b:if>
</b:if>


그 두 부분을 모두 이렇게 변경한다.

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
  <b:include data='post' name='comment_picker'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <b:include data='post' name='comment_picker'/>
</b:if>


이러면 댓글을 보이게 하는데까진 성공이나,
아직 댓글 수는 Blogger 댓글 수로 나오기 때문에 바뀌지 않은 상태일 것이다.


이 부분도 역시 HTML 편집에서 comment_count_picker를 검색하고, 해당 태그를 아래와 같이 변경한다. (만약에 없다면, comment_picker 등 유사한 이름을 찾아보거나 새로 만들면 된다.)

<b:includable id='comment_count_picker' var='post'>
  <b:if cond='data:post.commentSource == 1'>
    <span class='cmt_count_iframe_holder' expr:data-count='data:post.numComments' expr:data-onclick='data:post.addCommentOnclick' expr:data-post-url='data:post.url' expr:data-url='data:post.canonicalUrl'>
    </span>
  <b:else/>
    <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
      <data:post.commentLabelFull/>:
    </a>
  </b:if>
</b:includable> 


그리고 댓글 수가 나오는 부분을 찾는다.
보통 다음과 같은 구성이다. (post-comment-link를 검색)

<span class='post-comment-link'>
                <b:if cond='data:blog.pageType != &quot;item&quot;'>
                  <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
                    <b:if cond='data:post.allowComments'>
                      <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
                    </b:if>
                  </b:if>
                </b:if>
</span>


이것을 아래와 같이 바꾼다. (아까 작성한 comment_count_picker를 사용하는 걸 볼 수 있다.)


<span class='post-comment-link'>
                <b:if cond='data:blog.pageType != &quot;item&quot;'>
                  <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
                    <b:if cond='data:post.allowComments'>
                      <b:include data='post' name='comment_count_picker'/>
                    </b:if>
                  </b:if>
                </b:if>
</span>


다만 제공해주는 api를 이용하는 것이기 때문에 디자인은 기본 템플릿에서 벗어날 수 있다.
이 부분은 css등을 이용하여 조정해주면 되고,
그게 싫다면 Google+ 댓글을 안쓰거나 제공 템플릿을 쓰는 수밖에...

주의사항은, Blogger 댓글을 사용하다가 Google+ 댓글로 전환하고 이 방법을 썼을 경우
보이는 데는 문제가 없으나, 왜인지 댓글 수가 2배로 나오고 뭔가가 별개로 구분되어 버리는 건지 삭제 등의 작업을 할 수 없게 된다.

결국 둘 다 기능 문제 없이 사용하고 싶다면 제공 템플릿을 쓸 수밖에 없고,
혹은 처음부터 Google+ 댓글을 쓸건지 말건지를 확실히 하는 것 같다.



참고 사이트:

댓글 보이게 하기:

댓글 수:

2018년 6월 7일 목요일

2017년 4월 5일 수요일

Blogger jQuery 적용 및 자체 스크롤 만들기


* Blogger 기본 테마 중 '세련' 테마 적용 중에 작성하였다.

항목 중에서 Tap 영역에 overflow: auto; 로 스크롤을 추가하였는데, div태그라 그런지 전체 스크롤과 동시에 움직이는 문제가 발생하였다.

검색해보니 두가지 해결법이 있는데,
mouseenter 이벤트를 이용하여 커서가 div에 진입할때 전체 스크롤를 없애거나(overflow: hidden;)
mousewheel 이벤트를 이용하여 스크립트로 작동하는 자체 스크롤을 만들어주는것.

후자가 더 깔끔해보여서 선택하기로 했다.
좋은지 나쁜지 애매한 점은 스크롤이 눈으로 보이진 않는다.

일단 CSS부분은 overflow: hidden; 으로 바꿔준다.
(이전글 http://bluebead38.blogspot.kr/2017/04/blogger-css.html 참고)


일단 소스는 다음과 같다.


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js">
    <!-- jQuery Connection -->
</script>

<script>
    $(function() {

        // column-left-outer class 지정 개체에서 스크롤 액션이 감지될 때
        $('.column-left-outer').on('mousewheel DOMMouseScroll', function(e) {

            var E = e.originalEvent;

            // 스크롤 액션의 변화값 증감에 따라 화면 스크롤 변화
            if (E.wheelDelta >= 100) {

                this.scrollTop -= 20;

            } else if (E.wheelDelta < -100) {
              
                this.scrollTop += 20;

            }

            return false;

        });

    });
</script>

이걸 그대로 복사하면 기호를 인식하지 못하고 오류가 난다.
Entity Name으로 전환해주는 작업이 필요하다.

https://mothereff.in/html-entities
여기서 간단하게 전환이 가능하다.
allow named character references in output도 체크해준다.


결과적으로는 아래 소스를 추가하면 된다. (주석도 같이 전환되기 때문에  지저분해서 지웠다.)
붙여넣는 위치는 <head> 내부면 된다. 적당히 </head> 위로 했다.



<b:include data='blog' name='google-analytics'/>
&lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js&quot;&gt;
    &lt;!-- jQuery Connection --&gt;
&lt;/script&gt;

&lt;script&gt;
    $(function() {

     
        $(&apos;.column-left-outer&apos;).on(&apos;mousewheel DOMMouseScroll&apos;, function(e) {

            var E = e.originalEvent;
          
            if (E.wheelDelta &gt;= 100) {

                this.scrollTop -= 20;
           
            } else if (E.wheelDelta &lt; -100) {
                this.scrollTop += 20;

            }
            return false;
        });
    });
&lt;/script&gt;

</head>



+ 문제점
Firefox에서는 작동하지 않는다.
좀더 자세히 말하면 DOMMouseScroll 까진 인식이 되나 scrollTop에서 문제가 생기는듯하다.

+다음 소스로 수정하면 Firefox에서도 동작한다.


$( '.column-left-outer' ).on( 'mousewheel DOMMouseScroll', function ( e ) {
    var E = e.originalEvent;
    delta = E.wheelDelta || -E.detail;

    this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30;
    e.preventDefault();
});

알아보니 detail이라는 값이 Firefox에서만 사용되는 값인데, +, - 만 구분하기 때문에 값을 더 곱함으로써 스크롤처럼 보이도록 하는 것 같다.


참고 사이트 :
http://alik.info/p/65
http://stackoverflow.com/questions/7600454/how-to-prevent-page-scrolling-when-scrolling-a-div-element
http://recoveryman.tistory.com/120

2017년 4월 4일 화요일

Blogger CSS 수정 및 스크롤 고정하기


* Blogger 테마 중 '세련' 테마 적용 중에 작성하였다.

블로그 디자인을 좀 수정했다.

간단하게 말하면 Navbar, Header 및 Tap 스크롤 고정 작업이다.
[디자인] - [테마] - [HTML 편집] 을 건드리면 된다.

고정은 모두 position: fixed; 를 추가한다.

첫번째로 Navbar.
Blogger 기본 서식에 navbar 라는 class가 적용되어 있어 이것을 추가하고 작성하면 된다.
z-index는 중첩시 우선순위를 결정하는 것으로, 어느정도 높은 수치를 주면 된다.
(그렇지 않을 시 스크롤때마다 다른 항목들에 가려지면서 흔들리는것같은 효과를 가진다.)
기본 서식은 배경이 반투명한 색이나, background-color 속성을 추가하면 불투명한 해당 색상으로 바뀐다.

.navbar {
    width: 100%;
    top: 0;
    position: fixed;
    z-index: 99;
}




Header는 header-outer 라는 class로 지정되어 있다.
기본 서식에 있으니 수정해주면 된다.

.header-outer {
    margin: $(header.margin.top) 0 $(header.margin.bottom) 0;
    background: $(header.background.color) $(header.background.gradient) repeat scroll 0 0;
    position: fixed;
}



Tap 은 왼쪽 기준으로 column-left-outer라는 class로 지정되어 있다.
마찬가지로 기본 서식에 있으니 수정해주면 된다.
위치는 margin-right와 top, 크기는 width와 height를 조정해주면 된다.
overflow-y: auto; 는 스크롤바를 생성한다.

.main-inner .column-left-outer,
.main-inner .column-right-outer {
    margin-top: $(widget.outer.margin.top);
    position: fixed;
    top: 180px;
    margin-right: -300px;
    width: 120px;

    height: 600px;
    overflow-y: auto;

}



덤으로, 게시물 내용이 너무 왼쪽으로 붙어있어서 padding-left를 추가했다.
post-outer 를 수정하면 된다.

.post-outer {
  padding-bottom: 10px;
padding-left: 50px;
}