Pages

DonkeyMails.com: No Minimum Payout
Server : Channel :
Use List | DalNet Commands (Open) | Help

Tuesday, December 23, 2014

Membuat Breaking News Blog


Widget blog breaking news atau berita berjalan yang biasanya terdapat pada sebuah blog atau biasa disebut newsticker. Banyak sudah artikel yang membahas mengenai newsticker ini di internet, misalnya dengan menambah efek marquee sehingga teks tersebut dapat berjalan atau newsticker yang saya buat seperti yang diatas namun kali ini saya akan memposting artikel untuk Breaking News lokal alias tanpa menggunakan pihak ketiga. Breaking News ini menggunakan jQuery untuk mengambil data RSS Feed dan menampilkannya sehingga hasilnya akan lebih menarik dan yang pasti dapat mempercatik blog anda. Contoh widget Breaking News ini seperti yang terlihat di bawah ini.


Cara Pemasangan
  • Login » blogger.
  • Rancangan » Edit HTML.
  • Tekan tombol keyboard Ctrl+F dan cari kode berikut: </Head>
  • Apabila anda belum menggunakan kode JQuery silakan anda pasang kode JQuery dibawah ini tepat di atas Kode </Head>.
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
    
  • Copy-Paste kode di bawah ini setelah kode Navigasi Horisontal atau kotak gadget yang memanjang di atas kotak artikel atau bisa juga ditaruh setelah kode Title Blog.

    <style>
        .newspic {
            background: #000 url(http://2.bp.blogspot.com/-XXRGooUuR6w/VG7vs3NU1hI/AAAAAAAAEjw/68L1wHyMNC4/s1600/news.gif) no-repeat top left;
            margin: 0 auto;
            padding: 0 auto;
            height: 32px;
            color: #fff;
        }
        .news {
            width: 970px;
            margin: 0 auto;
            padding: 0 auto;
            line-height: 1.4em;
            text-align: left;
            font-family: Arial;
            font-size: 11px;
            color: #fff;
            overflow: hidden;
            clear: both;
        }
        .news a:link,
        .news a:visited {
            color: #fff;
            text-decoration: none;
        }
        .news a:hover {
            color: #ddd;
            text-decoration: underline;
        }
     .titlefield {
            /*CSS for RSS title link in general*/
            text-decoration: none;
        }
        .labelfield {
            /*CSS for label field in general*/
            color: #aaa;
            font-size: 100%;
        }
        .datefield {
            /*CSS for date field in general*/
            color: #aaa;
            font: normal 14px Arial;
            text-transform: none;
        }
        #example1 {
            /*Demo 1 main container*/
            width: 780px;
            height: 14px;
            border: 0px solid #aaa;
            padding: 0px;
            font: 16px Arial;
            text-transform: none;
            text-align: left;
            background-color: transparent;
        }
        code {
            /*CSS for insructions*/
            color: #fff;
        }
        #example1 a:link,
        #example1 a:visited {
            color: #f2f2f2;
            text-decoration: none;
        }
        #example1 a:hover {
            color: #C8D3F2;
            text-decoration: none;
        }
    </style>
    <script src='http://sites.google.com/site/monozcore/home/GetFeedScript.js'></script>
    <div class='newspic'>
        <div style='float:left;width:auto;padding:6px 0 6px 180px; position:relative; overflow:hidden;'>
            <script type='text/javascript'>
                var cssfeed = new gfeedrssticker("example1", "example1class", 4000, "_new")
                cssfeed.addFeed("Creating Website", "http://indonesia-baru.liputan6.com/feed/rss")
                cssfeed.displayoptions("date") /* show the specified additional fields */
                cssfeed.setentrycontainer("div") /* Wrap each entry with a DIV tag */
                cssfeed.filterfeed(10, "date") /* Show 10 entries, sort by date */
                cssfeed.entries_per_page(1)
                cssfeed.init()
            </script>
        </div>
        <div style='clear:both;'></div>
    </div>
    

  • Keterangan :

    - Ganti kode link rss feed http://indonesia-baru.liputan6.com/feed/rss dengan link rss feed blog sobat atau rss feed situs berita yang sobat inginkan. Silakan klik kumpulan rss feed berikut untuk mengetahui link rss feed website populer di indonesia.

    - Keterangan lain ada pada variabel /* Keterangan */ silakan disesuaikan parameternya agar sesuai dengan template blog atau website sobat.
  • Klik "Save" dan lihat hasilnya
Oke sobat monozcore jangan lupa kritik dan sarannya yaa biar postingan berikutnya semakin unik dan menarik.. Buat yang masih bingung dengan pemasangan widget ini.. monggo ditanyakan lewat kotak komentar, email, facebook ataupun twitter monozcore... happy blogging...

.:Selamat Mencoba:.
DMCAProtected by CopyscapeMyFreeCopyright.com Registered & Protected
Share :
Comments
0 Comments

No comments:

Post a Comment