New`s Block On Your Site Code

[Kernal]

Code Select Expand

<center>
<div class="trf-news-wrap">

    <div class="trf-news-header">
        FORUM NEWS
    </div>

    <div class="trf-news-fader">

        <div class="trf-news-item">
            Forum upgraded and optimised for SMF 2.1.7.
        </div>

        <div class="trf-news-item">
            Blurr Blurr Blurr On & On Enjoy add your info here to be displayed.
        </div>

        <div class="trf-news-item">
            Enter your info here to be displayed on the block.
        </div>

        <div class="trf-news-item">
            New members are always welcome to join the discussion.
        </div>

    </div>

</div>

<style>
.trf-news-wrap{
    width:100%;
    margin:0;
    border:1px solid #8ca3a3;
    background:#f7f7f7;
    overflow:hidden;
    box-sizing:border-box;
    font-family:Arial,Helvetica,sans-serif;
}

/* Kernal theme bar */
.trf-news-header{
    padding:8px 12px;
    font-size:18px;
    font-weight:bold;
    color:#fff;
    text-shadow:1px 1px 1px rgba(0,0,0,.4);

    background:
    linear-gradient(
        to bottom,
        #4f8d8d 0%,
        #3b7474 50%,
        #2c5f5f 100%
    );

    border-bottom:1px solid #d8d8d8;
}

.trf-news-fader{
    position:relative;
    height:48px;
    background:#ffffff;
    overflow:hidden;
}

.trf-news-item{
    position:absolute;
    width:100%;
    left:0;
    top:0;

    padding:14px 10px;
    text-align:center;

    color:#333;
    opacity:0;

    animation:trfFadeNews 16s infinite;
}

.trf-news-item:nth-child(1){
    animation-delay:0s;
}

.trf-news-item:nth-child(2){
    animation-delay:4s;
}

.trf-news-item:nth-child(3){
    animation-delay:8s;
}

.trf-news-item:nth-child(4){
    animation-delay:12s;
}

@keyframes trfFadeNews{

    0%{
        opacity:0;
    }

    5%{
        opacity:1;
    }

    20%{
        opacity:1;
    }

    25%{
        opacity:0;
    }

    100%{
        opacity:0;
    }
}

@media (max-width:600px){

    .trf-news-fader{
        height:60px;
    }

    .trf-news-item{
        font-size:14px;
        line-height:1.4;
        padding:10px;
    }

}
<center/>