Blogger에서 나만의 가젯 추가 방법 / Add Custom Gadget

제가 Blog 시작한지가 얼마 안되는데요

구글 애드센스를 목표로 열심히 하고 있습니다

디지털 노마드라고 하죠 :P

Blogger 가 기본적인 템플렛은 제공하는데 몬가 아쉬운 부분이 많습니다

저같은 경우에는 카테고리가 있으면 좋을것 같다 생각했습니다

아래 사진이 제 Blogger에 추가한 Category 입니다

먼저 Blogger 관리에서 레이아웃 부분에 사이드바(하단)에 가젯 추가 버튼을 누릅니다

항목이 여러개 나오는데, 여기서 HTML/JavaScript 선택

그 후에 제목(예: Category)을 입력해 주시고, 내용 부분에 쏘스를 넣어주시면 됩니다

해당 쏘스입니다

<div id='category' class='Kanadel1'>

   <li class='cate'>

      <a id='cate-all' href='/search/label/?'>All </a>

   </li>

   

   <li class='cate1'>

      <a id='category-EAI' href='/search/label/EAI?'>EAI </a>

                

   <li class='cate2'>

       <a id='category-SAP' href='/search/label/SAP?'>SAP </a>

   </li>

      

   <li class='cate3'>

       <a id='category-IT Tip' href='/search/label/IT%20Tip?'>IT Tip </a>

   </li>

   

   <li class='cate4'>

       <a id='category-Trip' href='/search/label/Trip?'>Trip </a>

   </li>

   

   

<script>

function Category(id, label, name)

{

  this.a = document.getElementById(id);

  this.label = label;

  var script = document.createElement('script');

  script.type = 'text/javascript';

  script.charset = 'utf-8';

  script.src = home + '/feeds/posts/summary/-/' + label + '?&alt=json-in-script&callback=' + name +'.pong';

  document.getElementsByTagName('head')[0].appendChild(script);

  

  this.pong = function(cfeed){

   var cnt = cfeed.feed.openSearch$totalResults.$t;

   this.a.innerHTML = this.a.innerHTML + '(' + cnt + ')';

  };

}

function TotalPostCnt(id, label, name)

{

  this.a = document.getElementById(id);

  this.label = label;

  var script = document.createElement('script');

  script.type = 'text/javascript';

  script.charset = 'utf-8';

  script.src = home + '/feeds/posts/summary/?&alt=json-in-script&callback=' + name +'.pong';

  document.getElementsByTagName('head')[0].appendChild(script);

  

  this.pong = function(cfeed){

   var cnt = cfeed.feed.openSearch$totalResults.$t;

   this.a.innerHTML = this.a.innerHTML + '(' + cnt + ')';

  };

}

var home = 'https://eaixipipo.blogspot.com/';

var postAll = new TotalPostCnt('cate-all','All','postAll');

var cate1 = new Category('category-EAI','EAI','cate1');

var cate2 = new Category('category-SAP','SAP','cate2');

var cate3 = new Category('category-IT Tip','IT Tip','cate3');

var cate4 = new Category('category-Trip','Trip','cate4');

</script>

</div>

매우 간단합니다 lol

참고 : 쏘스 보여주기 싫으시면 표시에 HTML/JavaScript 표시 체크 해제 하시면 됩니다

도움을 주신 킴달존님 감사합니다

킴달존님 블로그 Go ~> https://dalzonkim.blogspot.com/