; ; ; ; ; ; ; ;
Select Menu

.

.

table one

table three

table four

table six

 ■ 신용카드 10문 10답  클릭!

 ■ 신용카드 Hot Deal  클릭!

 ■ 카드 사용팁 - 항공  클릭!

 ■ 카드 사용팁 - 호텔  클릭!

 ■ 신용점수 확인하기  클릭!

 ■ 신용카드 알짜 TIP  클릭!


table seven

» » 독립적인 블로그 위젯 html 코드 만들기

Print Friendly and PDF   
번역(Translate to)




블로그 템플렛 내에 독립적인 위젯을 넣는 법을 알려드리겠습니다. 보통, 손쉽게 레이아웃에서 html/javascript 칸을 만들어서 스크립트를 붙여 넣기 해서 저장하면 위젯을 설치할 수가 있는데요, 그렇게 되면 위젯이 서로 하나로 묶어져 있어서 동적인 템플렛인 경우 위젯이 세로로 길게 늘여져서 보기가 안 좋습니다. 

하지만 하나하나 따로 코드를 설정한다면 위젯이 화면이 축소됨에 따라 개별적으로 빈 공간이 있는 곳으로 이동하게 됩니다. 보기에도 훨씬 좋고요^^

우선 

<section class='inter'> 
 <b:section class='inter' id='sidebar-bot3' preferred='yes'>
 <b:widget id='HTML55' locked='false' mobile='no' title='제목' type='HTML'>
    <b:includable id='main'>

  <div class='widget-content'>
    <data:content/>
  </div>

  </b:includable>
              </b:widget>
</b:section>
</section>

위 코드가 독립 위젯 코드 입니다.

보통 위젯이 블로그 사이드에 위치에 있기 때문에
템플렛 내 <div class='sidebar' ~~> 라는 코드가 있을 것입니다. 거기를 찾으셔서, 그 밑에 위의 코드를 삽입 하시면 됩니다. 

1. Sidebar-bot3 라고 되어있는 부분은 다른 이름으로 적으셔도 됩니다. Ex] Side1
2. HTML55 라고 되어 있는 부분은 위젯 이름 입니다. 중복되지 않는 다른 이름을 적으시면 됩니다. Ex] HTML2
3. mobile='no' 는 블로그 가 동적 일때, 모바일 상에서 위젯을 표시하지 않게 하는 것입니다. 표시하고 싶으시면 mobile='yes' 라고 적으시면 됩니다.
4. title='제목' 은 블로그 화면에서 위젯 위에 나타나는 제목 입니다. 없으면 표시되지 않습니다. 여기서 제목 대신에, 원하는 글씨를 적으셔야 합니다. 

5. <div class='widget-content'>
    <data:content/>
   </div>

이 부분은 그대로 놔두시면 블로그 레이아웃에서 위젯을 찾아서 코드를 삽입하는 방식으로 위젯을 표현하는 것입니다
위젯코드를 위 파란색 코드 를 지우고 대신 삽입해도 됩니다. 하지만 저는 편리 상 템플렛에 사이드바 위젯코드를 넣지 않습니다.

이상입니다^^






UP World Story 의 모든 정보는 제 개인적인 의견일 뿐입니다. 블로그 자료의 정확성 및 자료 사용의 결과에 대해 일체 책임을 지지 않습니다. 개인적인 판단하에 참조하시기 바랍니다.

All data and information provided on this site is for entertainment purposes only; please use at your own risk.

댓글 없음