본문 바로가기
Posting

★ 티스토리 블로그 사이드바 모듈 간단하게 직접 만들기! (구글 애드센스 달기)

by 반도민 2012. 5. 3.

안녕하세요. 오늘도 제 블로그에 찾아주셔서 감사합니다. :)


 








기본적인 티스토리 블로그에는 사이드바 모듈이 몇 개 없다.


따라서 애드센스 광고나, 즐겨찾기 추가, 등등을 넣고 싶으면 사이드바 모듈에 추가를 해 줘야 한다.











요게 일반적인 기본 티스토리의 모듈이다. 그런데 네이버 블로그와 달리 티스토리에는 사이드바 상에서 모듈을 추가할 수가 없다. 따라서 왼쪽에 보이는 HTML/CSS 편집 상에서 모듈을 추가해 주어야 한다.


굉장히 쉬우니까 아래 방법 대로만 따라해 보면 금방 할수 있을 것이다.





스킨의 기준은 티스토리 스킨에서 3번째 줄에 있는 magazine을 기준으로 하였다. 그러나 대부분의 블로그에서 비슷할 것이라 생각된다.



먼저, HTML/CSS 편집에 들어가자.




여기서 ctrl + f를 눌러서 


div id="sidebar"


요녀석을 검색해 보자. 아마 하나가 검색될 것이다.












얘가 사이드바 모듈을 시작하는 애다. 얘를 찾았으면 반은 성공!!






이제 여기부터 쭉 살펴보자.




눈치가 빠른 사람이라면 알겠지만, 








요기 파란색으로 칠한 부분이 하나의 모듈을 만드는 단위가 된다.


즉 



<s_sidebar_element>

하나의 모듈

</s_sidebar_element>


<s_sidebar_element>

하나의 모듈

</s_sidebar_element>


<s_sidebar_element>

하나의 모듈

</s_sidebar_element>



이렇게 나열되어 있는 구조다.




따라서 



<s_sidebar_element>

★★★★★★★

</s_sidebar_element>




표쳐진 부위에 원하는 태그를 아무거나 입력해서 아까  


div id="sidebar"



얘를 찾아서 


<s_sidebar_element>

하나의 모듈

</s_sidebar_element>


<s_sidebar_element>

하나의 모듈

</s_sidebar_element>


<s_sidebar_element>

하나의 모듈

</s_sidebar_element>




이 모듈들 사이에 끼워넣기만 해 주면 성공이다.




<s_sidebar_element>

하나의 모듈

</s_sidebar_element>


<s_sidebar_element>

원하는 모듈 추가

</s_sidebar_element>


<s_sidebar_element>

하나의 모듈

</s_sidebar_element>


<s_sidebar_element>

하나의 모듈

</s_sidebar_element>





예를 들어, 구글 애드센스 광고를 넣고 싶다면, 애드센스 코드를 그 사이에 붙여넣기해서 넣어 주면 된다.


애드센스 광고 말고도, 여러 다양한 태그를 넣으면 거의 다 되는 듯 싶다. 


본인의 블로그에는 즐겨찾기 추가도 링크해서 넣어 봤는데 잘 작동한다. 


아마 태그로 된 것들 대부분 가능한듯 하다.





추가적으로 모듈 이름을 넣으려면,  부분에 이름을 넣어서 입력하면 된다.



<s_sidebar_element>

<!--  -->

하나의 모듈

</s_sidebar_element>






구글 애드센스로 예를 들어 보자.




이렇게, 다른 사이드바 모듈(파란색) 사이에, 


새로운 모듈 칸을 넣고(붉은색),


이름 넣어 주고(노란색)


구글 애드센스에서 가져온 코드(진한회색)


넣어 주면, 





이렇게 새로운 모듈이 탄생하였다!













모쪼록 잘 활용해 주십시와요....모듈 다는거 엄청 쉽죠!?!!


도움이 되셨다면 아래 손가락 클릭좀^^! 로그인이 필요 없어요~!



댓글