그누보드 - SIR 메인 HOT SKIN/BUILDER 효과 순차롤링 최신글

SIR 메인 HOT SKIN/BUILDER 효과 순차롤링 최신글 > 퍼블리셔팁

퍼블리셔팁

퍼블리싱과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.

SIR 메인 HOT SKIN/BUILDER 효과 순차롤링 최신글 정보

SIR 메인 HOT SKIN/BUILDER 효과 순차롤링 최신글

본문

팁이라기보단 SIR 에 실제 쓰인 그대로를 옮겨봅니다.

주의! doctype 혹은 기타 css 충돌 등으로 100% 실행되지 않을 수 있습니다. 자신의 사이트에 맞춰서 변경해 쓰세요.

1. 최근게시물을 불러올 자리 마크업

dtd html5 이시면 section 을 그대로 사용하셔도 되지만, 아닌 경우 section 을 div 로 변경하고 사용하세요.

<section id='i_hot'>
    <h2><span></span>최근 뜨는 스킨</h2>
    <ul>
        <li id='i_hot_skin'>
            <h3><span></span>스킨</h3>
            최근게시물 불러오는 자리
            <div><a href='<?=$g4['path']?>/bbs/board.php?bo_table=g4_skin'><span></span>더보기</a></div>
        </li>
        <li id='i_hot_bd'>
            <h3><span></span>빌더</h3>
            최근게시물 불러오는 자리
            <div><a href='<?=$g4['path']?>/bbs/board.php?bo_table=g4_builder'><span></span>더보기</a></div>
        </li>
    </ul>
</section>

2. 최근게시물 스킨

latest.skin.php 로 만들 소스

<ol>
<?
//for 문 자리 : 기본 베이직 최근게시물 스킨을 참조해서 코드를 넣으세요.
?>
    <li>
        <a href='<?=$list[$i]['href']?>'><span class='i_hot_title'><?=$list[$i]['subject']?></span></a>
        <span class='i_senskin_author'><?=$list[$i]['tmp_name']?></span>
        <span class='i_senskin_date'><?=$date?></span>
    </li>
<?
//for 문 끝나는 자리
?>
</ol>

3. CSS

<style>
#i_hot {clear:both;position:relative;margin-bottom:5px;width:100%;height:225px;background:url('../img/index.png') #000 0 -190px;zoom:1}
#i_hot:after {display:block;visibility:hidden;clear:both;height:0;content:""}

#i_hot h2, #i_hot h3 {width:0;height:0;overflow:hidden}
#i_hot ul {position:relative}
#i_hot ul li {position:relative;float:left;padding-top:80px;padding-left:47px;width:393px}
#i_hot ul li ol {list-style:none}
#i_hot ul li ol li {display:none;float:none;padding:0;padding-top:4px;height:26px;width:auto}
#i_hot ul li ol li span {display:inline-block}
#i_hot ul li ol li .i_hot_title {margin-right:10px;width:230px;height:13px;color:#7aa6c7;vertical-align:middle;overflow:hidden}
#i_hot ul li ol li .i_hot_author {margin-right:5px;width:82px;color:#8596a2;text-align:center}
#i_hot ul li ol li .i_hot_date {width:50px;color:#8596a2;text-align:center}
#i_hot #i_hot_skin div {position:absolute;top:50px;left:130px;width:60px;height:20px}
#i_hot #i_hot_skin div span {display:block;position:absolute;top:0;left:0;width:60px;height:20px;background:url('../img/index.png') -130px -240px}

#i_hot #i_hot_bd div {position:absolute;top:50px;left:120px;width:60px;height:20px}
#i_hot #i_hot_bd div span {display:block;position:absolute;top:0;left:0;width:60px;height:20px;background:url('../img/index.png') -560px -240px}
</style>

4. jquery

jquery 는 하단에 넣으시기 바랍니다.

<script>
$(document).ready(function(){
    // ///////////SENSATIONAL SKIN 롤링
    var $intervalll = 0; // 롤링 간격 설정
    for (var i=1; i<6; i++ ) {
        if (i > 1) { $intervalll = $intervalll + 1000; } // 첫 롤링은 바로 실행
        $('#i_hot ul li ol li:nth-child('+i+')').delay($intervalll).slideDown('fast');
    }

});

</script>

5. 사용된 이미지

이미지에서 해당부분만 잘라내서 사용하세요.

이 이미지를 그대로 사용하지 않을 경우 수정해야 하는 부분

#i_hot {clear:both;position:relative;margin-bottom:5px;width:100%;height:225px;background:url('../img/index.png') #000 0 -190px;zoom:1}

#i_hot #i_hot_skin div span {display:block;position:absolute;top:0;left:0;width:60px;height:20px;background:url('../img/index.png') -130px -240px}

#i_hot #i_hot_bd div span {display:block;position:absolute;top:0;left:0;width:60px;height:20px;background:url('../img/index.png') -560px -240px}

하늘색 부분을 자신의 사이트 경로에 맞게 수정하세요.