Cara Membuat News Ticker di Blog Tanpa Javascript

Cara Membuat News Ticker di Blog Tanpa Javascript

Fitur Widget news ticker di blogger sebenarnya sudah banyak tutorialnya di internet. Berbagai cara menambahkannya juga sangat berbeda-beda namun semuanya sama saja yaitu dengan menggunakan Blogger API dan Pemanggilan Javascript.

Tapi saya menemukan metode baru membuat news ticker di blogger. Yaitu dengan custom widget dan memanfaatkan widget postingan populer. Dan cara kali ini sama sekali tidak menggunakan javascript karena saya hanya memodifikasinya saja supaya mirip dengan news ticker pada situs-situs berita.

Apa kali ini kita akan belajar untuk merombak widgetnya? tentu saja tidak perlu karena saya sudah menyiapkannya. sobat tinggal salin saja kode di bawah ini.

<!-- CODEPELAJAR | HTML -->
<div class='news-ticker'>
    <b:section class='news-ticker-section' id='News_Ticker'>
        <b:widget id='PopularPosts99' locked='false' title='News Ticker' type='PopularPosts' version='1'>
            <b:widget-settings>
                <b:widget-setting name='numItemsToShow'>10</b:widget-setting>
                <b:widget-setting name='showThumbnails'>false</b:widget-setting>
                <b:widget-setting name='showSnippets'>false</b:widget-setting>
                <b:widget-setting name='timeRange'>ALL_TIME</b:widget-setting>
            </b:widget-settings>
            <b:includable id='main'>
                <b:if cond='data:title != &quot;&quot;'>
                    <h2><data:title/></h2>
                </b:if>
                <!-- news ticker by codepelajar.com -->
                <div class='news-ticker-main'>
                    <marquee>
                        <ul>
                            <b:loop values='data:posts' var='post'>
                                <li>
                                    <b:if cond='!data:showThumbnails'>
                                        <b:if cond='!data:showSnippets'>
                                            <a expr:href='data:post.href'>
                                                <data:post.title/>
                                            </a><b:else/>
                                            <h3 class='news-ticker-title'><a expr:href='data:post.href'><data:post.title/></a></h3>
                                        </b:if><b:else/>
                                        <div expr:class='data:showSnippets ? &quot;item-content&quot; : &quot;item-thumbnail-only&quot;'>
                                            <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'></b:if>
                                            <h3 class='news-ticker-title'><a expr:href='data:post.href'><data:post.title/></a></h3>
                                            <b:if cond='data:showSnippets'></b:if>
                                        </div>
                                    </b:if>
                                </li>
                            </b:loop>
                        </ul>
                    </marquee>
                </div>
            </b:includable>
        </b:widget>
    </b:section>
</div>



Lalu tempelkan ke template taruh di tempat yang ingin di munculkan newsticker seperti diatas header atau di bawah header sebelum konten postingan. Selanjutnya tinggal kita atur dengan css. Kali ini saya juga menyiapkan css yang saya buat untuk news ticker ini. Sobat bisa memodifikasinya sesuai keinginan.

<style>
/** CODEPELAJAR | CSS NEWS TICKER ***/
.news-ticker {
    width: 100%;
    font-size: 14px;
    padding: 5px;
    box-sizing: border-box;
    background: #fff;
}
div#PopularPosts99 {
    display: flex;
    flex-wrap: wrap;
}
div#PopularPosts99 > h2 {
    width: 15%;
}
.news-ticker-main {
    width: 85%;
    overflow: hidden;
}
.news-ticker-main > marquee > ul > li {
    display: inline-block;
    margin-right: 20px;
    padding-right: 10px;
    border-right: 1px solid rgba(0,0,0,0.8);
}

.news-ticker-main > marquee > ul > li a {
    color: rgba(0,0,0,0.8);
    font-weight: bold;
    letter-spacing: .5px;
}
@media (max-width:640px){
   div#PopularPosts99 > h2 {
     display:none;
   }
   .news-ticker-main {
     width:100%;
   }
}
</style>

Salin dan taruh kode CSS tepat diatas tag </head> dan Simpan.

News ticker yang saya modifikasi ini memanfaatkan widget popular post yang ditambah tag <marque> untuk animasi teks berjalannya. Setiap tag list dibuat display:inline-block supaya bisa berjajar juga diberi sedikit margin dan border 1px di samping kanannya sebagai pemisah setiap konten judul. Sangat simpel sekali bukan? Kalau sobat penasaran dengan demonstrasinya bisa kunjungi situs berikut ini sebagai contohnya Pastel Ink

Saya belum mencoba membuat newsticker untuk tema AMP tapi saya akan posting jika sudah berhasil membuatnya.

Baiklan cukup sekian dari saya, terima kasih sudah mengikuti tutorial membuat news ticker di blog ini. Jangan lupa untuk mengunjungi tutorial lainnya yang saya sudah sediakan di sidebar dan konten berelasi seperti dibawah ini. Oh ya tetap kunjungi juga code pelajar untuk tutorial anti mainstream lainnya ya. See you next time guys..

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel