Material T는 댓글과 공유(트랙백)이 탭으로 구성되어있습니다.


    그리고, disqus 이용자 분들을 위해 쉽게 설치할 수 있도록 준비되어있습니다.

    또한 원하는 내용을 추가할 수 있는 탭 1개까지 최대 4개의 탭을 설치할 수 있습니다.


    mark3,4도 비슷하니 괄호로 따로 설명합니다.

    Disqus설치하기(mark1,2)(3,4)


    skin.html에서 "디스커스탭" 으로 검색하시면 위 부분을 찾을 수 있습니다.

    그림에 보이는 것 처럼 <!--,-->으로된 주석을 지워주세요.

    (4번째 탭도 주석으로 가려져 있는게 보이시죠? 마찬가지로 주석을 지우면 4번째 탭도 사용이 가능합니다.)

    (mark3부터는 label대신 li가 보일겁니다. 똑같이 주석을 지워주시면됩니다.)


    그리고 id="tab2C"를 찾아서

    <!--여기에 디스커스 코드를 삽입하세요-->

    부분에 디스커스 코드를 삽입하면 됩니다.

    (디스커스 settings - install - Universal Code)


    (mark3부터는 class="tab2를 찾으면 됩니다.)



    이렇게요!


    마찬가지로 4번째 탭은  id="tab4C"를 찾아 내용을 채워넣으면 되겠죠? ^^



    .


    심화과정 - disqus 탭을 클릭했을 때 로딩시작하기

    블로그 속도 개선- Disqus탭 클릭했을 때 로딩되게 하기 에서 다뤘던 내용인데요,

    Disqus가 불필요하게 로딩되는 경우를 방지하기 위해 Disqus 탭을 클릭했을 때에만 로딩이 되게 하는 방법입니다.


    1. disqus탭에 onclick이벤트를 추가해줍니다.

    <label id="tab2L" for="tab2" class="ripplelink" onclick="loadDisqus()">Disqus</label>

    (mark3부터는 label대신 li인것만 빼고 같습니다.)


    2. disqus 코드에서 자신의 disqus_shortname을 알아냅니다.

        <div id="disqus_thread"></div>

        <script type="text/javascript">

            /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */

            var disqus_shortname = '자기 disqus_shortname'; // required: replace example with your forum shortname


            /* * * DON'T EDIT BELOW THIS LINE * * */

            (function() {

                var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;

                dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';

                (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);

            })();

        </script>

        <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>    

    굵게 표시된 부분이 자신의 디스커스를 구분해주는 disqus_shortname입니다.


    3. 기존 디스커스 코드 대신 다음 코드를 삽입합니다.

    <div id="disqus_thread"></div>

    <script type="text/javascript">

       var b = 0;

       function loadDisqus() {

        if (b == 0) {

            var disqus_shortname = '자기 disqus_shortname';

            (function () {

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

                dsq.type = 'text/javascript';

                dsq.async = true;

                dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';

                (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);

            })();b++

        }

       };

    </script>

    <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>    

    자기 disqus_shortname부분을 제대로 채워넣으시면 됩니다.


    완성되면 이런 모습이 되겠죠


    저작자 표시 비영리 동일 조건 변경 허락
    신고
    Posted by 뭐하라

    문제가 있나요?(?)

    내용상 오류가 있음 업데이트 필요 화면이 깨짐 기타 수정이 필요함

티스토리 툴바