Cara Membuat Headline News V2

Setelah menerbitkan Headline News V1 (versi 1) sekarang kita akan membuat Headline News V2. Perbedaan antara V1 dan V2 sangat terasa disebabkan Headline News V2 tidak menempel pada bagian atas halaman tapi akan tampil sebagai layaknya sebuah widget blog. Dari perbedaaanya yang mencolok V1 dan V2 tetap punya kesaaman sebagai navigasi tambahan untuk visitor agar lebih mudah menjelajah dalam blog atau site Anda.


Headline News V2 yang tampil layaknya widget tentu punya kelebihan dibanding versi 1-nya yaitu memiliki efek jQuery sehingga pergerakan dalam menampilkan arikel semakin baik dan menarik.



Langkah pembuatan :
  1. masuk pada blog Anda
  2. Pilih Rancangan >> Elemen Laman
  3. Tambah Gadget pada tempat yang Anda inginkan (disarankan lebar lebih dari 200 px)
  4. Pilih HTML/JavaScript pada Gadget
  5. Copy kode berikut :

    <style type="text/css">
    .gfg-root {
    width : 400px;
    height : auto;
    position : relative;
    overflow : hidden;
    text-align : center;
    font-family: "Arial", sans-serif;
    font-size: 10px;
    border: 1px solid #BCCDF0;
    }

    .gfg-title {
    font-size: 12px;
    font-weight : bold;
    color : #FFFFFF;
    background-color: #666666;
    line-height : 1.4em;
    overflow : hidden;
    white-space : nowrap;
    }

    .gfg-title a {
    color : #3366cc;
    }

    .gfg-subtitle {
    font-size: 12px;
    font-weight : bold;
    color : #3366cc;
    background-color: #E5ECF9;
    line-height : 1.4em;
    overflow : hidden;
    white-space : nowrap;
    margin-bottom : 0px;
    }

    .gfg-subtitle a {
    color : #3366cc;
    display:none !important;
    }

    .gfg-entry {
    background-color : white;
    width : 90%;
    height : 6.9em;
    position : relative;
    overflow : hidden;
    text-align : left;
    margin-top : 3px;
    }


    /* To allow correct behavior for overlay */
    .gfg-root .gfg-entry .gf-result {
    position : relative;
    background-color : white;
    width : auto;
    height : 100%;
    padding-left : 20px;
    padding-right : 5px;
    }

    .gfg-list {
    position : relative;
    overflow : hidden;
    text-align : left;
    margin-bottom : 5px;
    display:none !important;
    }

    .gfg-listentry {
    line-height : 1.5em;
    overflow : hidden;
    white-space : nowrap;
    text-overflow : ellipsis;
    -o-text-overflow : ellipsis;
    padding-left : 15px;
    padding-right : 5px;
    margin-left : 5px;
    margin-right : 5px;
    }

    .gfg-listentry-odd {
    background-color : #F6F6F6;
    }

    .gfg-listentry-even {
    }

    .gfg-listentry-highlight {
    background-image : url('garrow.gif');
    background-repeat: no-repeat;
    background-position : center left;
    }


    /*
    * FeedControl customizations.
    */

    .gfg-root .gfg-entry .gf-result .gf-title {
    font-size: 12px;
    line-height : 1.2em;
    overflow : hidden;
    white-space : nowrap;
    text-overflow : ellipsis;
    -o-text-overflow : ellipsis;
    margin-bottom : 2px;
    }

    .gfg-root .gfg-entry .gf-result .gf-snippet {
    height : 3.8em;
    color: #000000;
    margin-top : 3px;
    }


    /*
    * Easy way to get horizontal mode, applicable via js options to gadget.
    */

    .gfg-horizontal-container {
    position : relative;
    }

    .gfg-horizontal-root {
    height : 1.5em;
    _height : 100%;
    position : relative;
    white-space : nowrap;
    overflow : hidden;
    text-align : center;
    font-family: "Arial", sans-serif;
    font-size: 13px;
    border: 1px solid #AAAAAA;
    padding : 5px;
    margin-right : 80px;
    }

    .gfg-horizontal-root .gfg-title {
    font-weight : bold;
    background-color: #FFFFFF;
    line-height : 1.5em;
    overflow : hidden;
    white-space : nowrap;
    float : left;
    padding-left : 10px;
    padding-right : 12px;
    border-right: 1px solid #AAAAAA;
    }

    .gfg-horizontal-root .gfg-title a {
    color : #444444;
    text-decoration : none;
    }

    .gfg-horizontal-root .gfg-entry {
    width : auto;
    height : 1.5em;
    position : relative;
    overflow : hidden;
    text-align : left;
    margin-top : 0px;
    margin-left : 0px;
    padding-left : 10px;
    }


    /* To allow correct behavior for overlay */
    .gfg-horizontal-root .gfg-entry .gf-result {
    position : relative;
    background-color : white;
    width : 100%;
    height : 100%;
    line-height : 1.5em;
    overflow : hidden;
    white-space : nowrap;
    }

    .gfg-horizontal-root .gfg-list {
    display : none;
    }


    /*
    * FeedControl customizations.
    */

    .gfg-horizontal-root .gfg-entry .gf-result .gf-snippet,
    .gfg-horizontal-root .gfg-entry .gf-result .gf-author {
    display : none;
    }

    .gfg-horizontal-root .gfg-entry .gf-result .gf-title {
    color: #0000cc;
    margin-right : 3px;
    float : left;
    }

    .gfg-horizontal-root .gfg-entry .gf-result .gf-spacer {
    float : left;
    }

    .gfg-horizontal-root .gfg-entry .gf-result .gf-spacer,
    .gfg-horizontal-root .gfg-entry .gf-result .gf-relativePublishedDate {
    display : block;
    color: #AAAAAA;
    }

    .gfg-branding {
    white-space : nowrap;
    overflow : hidden;
    text-align : left;
    position : absolute;
    right : 0px;
    top : 0px;
    width : 80px;
    }

    .gfg-collapse-open, .gfg-collapse-closed {
    background-repeat : no-repeat;
    background-position : center;
    cursor : pointer;
    float : right;
    width : 17px;
    height : 20px;
    }

    .gfg-collapse-open {
    background-image : url('arrow_open.gif');
    }

    .gfg-collapse-closed {
    background-image : url('arrow_close.gif');
    }

    .gfg-collapse-href {
    float : left;
    }

    .clearFloat {
    clear : both;
    }
    #feedGadget {
    margin-top : 5px;
    margin-left: auto;
    margin-right: auto;
    width : 500px;
    font-size: 10px;
    color: #9CADD0;
    }
    </style>
    <noscript><a href="http://www.katakan-hey.com" target="_blank">Katakan Hey</a></noscript>
    <script src="http://www.google.com/jsapi/?key=internal-sample"
    type="text/javascript"></script>
    <script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script>

    <script type="text/javascript">

    function showGadget() {
    var feeds = [
    {title:'title',
    url:'http://www.katakan-hey.com/atom.xml?redirect=false&start-index=1&max-results=999'},

    ];

    new GFdynamicFeedControl(feeds, 'feedGadget',
    {numResults : 1000, stacked : true,
    title: "Katakan Hey"});
    }
    google.load("feeds", "1");
    google.setOnLoadCallback(showGadget);
    </script>
    <noscript><a href="http://www.katakan-hey.com" target="_blank">Katakan Hey</a></noscript>
    <div id="feedGadget">Loading Headline News</div>
    <div style="font-size: 8px; text-align: right;"><a href="http://www.katakan-hey.com/" target="_blank">Widget by Katakan-Hey</a></div>

  6. Ganti
    • www.katakan-hey.com dengan alamat URL blog Anda
    • Katakan Hey dengan judul / nama blog Anda
    • width : 400px; dengan lebar headline news yang Anda inginkan
  7. Simpan dan lihat hasilnya
Selamat Mencoba & Happy Blogging

ref : Katakan-Hey


0 komentar:

Posting Komentar