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...



    14 komentar:

    Asis Sugianto said...

    demonya mana nih sobat??? soalnya kalau penting sy ikutan pasang,, hehehhe

    Arman said...

    Jah ga penting koq sob...recent posting tampil beda ini aja koq, demonya di paling bawah blog ini sob...blogger tutorial...

    Black Angel Syndicate said...

    wah makasih atas tutorial nya sob :D
    Absen siang

    corolla78 said...

    makasih bang tutorialnya kapan kapan ane pasang.


    happy blogging

    corolla78 said...

    thnks kang....ane mau coba nih

    happy blogging

    Arman said...

    @Black, sama2 pak black....:D

    @Corolla78, iya sama2 bang semoga berhasil...:D

    Iskaruji dot com said...

    Wah...ini bagus juga Sob untuk di terapkan di blog saya....nice share and happy blogging

    SAZLINA COMP said...

    Bagus Tutorialnya sob

    veven said...

    walah, aku coba malah tidak bisa di save terus/failed. kenapa yah?

    Arman said...

    @Iskaruji, thanks sob

    @SAZLINA, thanks sob

    @Veven, kata failednya gmna sob?

    pasarherbal said...

    Tutorial dahsyat nih....hebat semoga bermanfaat..sekalian mau tanya dong...kalo buat forum sederhana di blog ada ga tutornya..pengunjung bisa bertanya dan saya menjawab,,thanks..salam sehat selalu...

    Arman said...

    @Pasarherbal, Ya pasti ada sob tp ga ada disini karena saya blum pernah buat forum, coba di googling aja sob pasti ketemu...

    ibnuwibowo said...

    Klo widget bawaan blogspot namanya apa ya?
    Intinya supaya bisa berjalan juga (gbrnya berjalan). Terima kasih.

    ARMAN said...

    @ibnuwibowo, nama widget tergantung jenis widget yang akan sobat pasang diblog sobat

    Post a Comment

    Silahkan kalian berkomentar, namun tetap jaga kesopanan dengan tidak melakukan komentar spam. Saya Lagi Bermasalah Dengan Adsense, Saya izin Vakum Ngeblog Dulu Sobat Buat Nyari Solusi!!

    Related Posts Plugin for WordPress, Blogger...