Blogger Tutorial | Memasang News Update Post di Blogger

Postingan Blogger Tutorial kali ini saya posting atas permintaan salah satu sobat master blogger inspirasi saya si Endi. Katanya pengen nyobain pasang News Update Post seperti di blog saya di blognya cocok atau ga. He manusia emang tidak pernah puas akan sesuatu hal. kalian bisa melihat langsung contoh demonya di blog ini paling bawah. Sebenarnya tutorial ini tidak jauh beda dengan postingan tutorial sebelumnya yakni di Slideshow Recent Post seperti Headlines Berita Kiriman, disini cuma bentuknya aja yang beda lebih kecil sehingga tidak terlalu makan ruang dan simple karena hanya menampilkan judul posting. Berikut script yang digunakan untuk membuatnya.

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

.gfg-title {
  font-size: 20px;
  font-weight : bold;
  color : #3366cc;
  background-color: #E5ECF9;
  line-height : 1.0em;
  overflow : hidden;
  white-space : nowrap;
  text-align : center;
  margin-bottom:40px !important;
}

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

.gfg-subtitle {
  font-size: 20px;
  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 : 100%;
  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: 24px;
  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;
  width:600px;
  height:40px;
}

.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 : 440px;
      font-size: 16px;
      color: #9CADD0;
    }
#feedGadget2 {
      margin-top : 5px !important;
      float:left;
      width : 440px;
     
      color: #9CADD0;
    }
.feedGadget2 {

}
#big {
width : 440px;
font-size: 10px;
}
</style>
<script src="http://www.google.com/jsapi/?key=KODE API KEY KALIAN"
 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:'BLOG_TITLE',
        url:'http://MYBLOG.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999'},
      
       ];

      new GFdynamicFeedControl(feeds, 'feedGadget',
                               {numResults : 1000, horizontal : true,
                               });
    }
    google.load("feeds", "1");
    google.setOnLoadCallback(showGadget);
  </script>
<div id="big">
<div id="feedGadget">Loading...</div>
  <div id="feedgadget2">Gadget by <a href="http://sakawku.blogspot.com/" target="_blank">sakawku</a>.</div></div>

Source Script

Cara pemasangannya

1. Pertama login ke akun blooger kalian, bisa klik disini
2. Pilih Rancangan >> klik Elemen laman >> Tambah Gadget / Widget
3. Copas kode diatas ke kolom konten di bawah kolom judul, mau dikasi judul atau tidak terserah kalian
4. Ganti ketikan yang berwarna merah dengan rincian blog kalian. Dan untuk mendapatkan kode API Key silahkan kalian kunjungi halaman http://code.google.com/apis/loader/signup.html, masukan URL blog kalian kemudian klik generate API Key, dapat dah kode API Keynya untuk mengganti ketikan KODE API KEY KALIAN yang berwarna merah pada script diatas.
5. Selanjutnya klik Simpan / Save
6. Drag gadget / Widget untuk ditaruh ke tempat yang kalian inginkan
7. Terakhir klik Simpan dan lihat hasilnya

Kalian juga bisa menampilkan posting 1 label dengan hanya merubah sedikit URL feed nya seperti punya saya hanya menampilkan label Blogger Tutorial

http://MYBLOG.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999

menjadi

http://sakawku.blogspot.com/feeds/posts/default/-/Blogger%20Tutorial?redirect=false&start-index=1&max-results=999

Semoga kalian senang... Happy blogging...