» » Recent Post With Slide Effect

Recent Post With Slide Effect

    Label: Blogspot


Membuat recent post dengan animasi slide yang unik dan menarik. Seperti postingan artikel sebelumnya tentang recent post, postingan kali ini menggunakan API google untuk menampilkan postingan artikel blog terbaru (recent post). Widget recent post banyak digunakan di blog ternama karena dapat membuat rating pageview semakin besar sekaligus memudahkan pengunjung blog untuk mengetahui postingan artikel blog yang terbaru. Nah... buat sobat blogger yang ingin meningkatkan rating pageview di blognya silakan pasang widget recent post berikut ini.

Loading....

Cara Pemasangan :
  • Login ke blog sobat...

  • Klik "Design" kemudian klik "Edit HTML" setelah itu klik centang pada "Expand Widget Templates", seperti gambar dibawah ini.


  • Copy-Pastekan kode di bawah ini kedalam kode template HTML sobat atau, dengan ketentuhan harus di dalam tag <Body> atau penempatan kode di bawah ini juga bisa ditempatkan sebagai widget di sidebar atau di upbar.

    <style type="text/css">
    .gfg-root {
      width: auto;
      height: auto;
      position: relative;
      overflow: hidden;
      text-align: center;
      font-family: verdana, sans-serif;
      font-size: 12px;
      padding:2px;
      background:none;
      border: 0px solid #363636;
    }
    .gfg-title {
      font-size: 16px;
      font-weight : bold;
      color : #fff;
      background-color: none;
      line-height : 1.4em;
      overflow: hidden;
      white-space : nowrap;
    }
    .gfg-subtitle {
      font-size: 14px;
      font-weight: bold;
      color: #333;
      background-color: none;
      line-height : 1.4em;
      overflow : hidden;
      white-space : nowrap;
      margin-bottom : 0px;
    }
    .gfg-subtitle a {
      color : #a43434;
      display:none !important;
    }
    .gfg-entry {
      background-color: none;
      width : 100%;
      height : 9.9em;
      position : relative;
      overflow : hidden;
      text-align : left;
      margin-top : 0px;
    }
    /* To allow correct behavior for overlay */
     .gfg-root .gfg-entry .gf-result {
      position : relative;
      background-color:none;
      width : auto;
      height : 100%;
      padding-left : 5px;
      padding-right : 5px;
    }
    .gfg-list {
      position : relative;
      overflow : hidden;
      text-align : left;
      margin-bottom : 15px;
      display:none !important;
    }
    .gfg-root .gfg-entry .gf-result .gf-title {
      font-size: 13px;
      display:block;
      color:#a43434;
      font-weight:bold;
      line-height: 1.2em;
      overflow : hidden;
      white-space : nowrap;
      text-overflow : ellipsis;
      -o-text-overflow : ellipsis;
      margin-top : 4px;
    }
    .gfg-root .gfg-entry .gf-result .gf-snippet {
      line-height : 1.3em;
      color: #333;
      margin-top : 3px;
      font-size: 12px;
    }
    .clearFloat {
      clear : both;
    }
    #feedGadget {
      margin-top: 3px;
      margin-left: auto;
      margin-right: auto;
      width: auto;
      font-family:verdana, arial;
      font-size: 10px;
      color: #333;
    }
    </style>
    <script src="http://www.google.com/jsapi/?key=ABQIAAAAcV2jSs52yGHKNXjYTcwvNBQjGizh_00DUHOFTBoYdXcXzGgaZxRGIm148GyVsULR8I1--uCF7hoW2w"
    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://url-blog-sobat.com/feeds/posts/default?redirect=false&start-index=1&max-results=999'
      }, ];
      new GFdynamicFeedControl(feeds, 'feedGadget', {
        numResults: 1000,
        stacked: true,
        title: " "
      });
    }
    google.load("feeds", "1");
    google.setOnLoadCallback(showGadget);
    </script>
    <div id="feedGadget">
      <center>Loading....</center>
    </div>

    - Keterangan :
    • Jangan lupa !!! silahkan sobat ganti dahulu url feeds-nya pada kode script [ http://url-blog-sobat.blogspot.com/feeds/posts/default ] dengan url blog sobat.

  • Klik "Save" dan lihat hasilnya...
Gimana...... keren-kan widgetnya... sobat juga bisa mengedit atau mengubah kode tampilan css sesuai dengan keinginan sobat. Ok teruslah berkreasi dan tetap bersemangat.

.: Semoga Bermanfaat :.
Recent Post With Slide Effect 4.5 5 Unknown Membuat recent post dengan animasi slide yang unik dan menarik. Seperti postingan artikel sebelumnya tentang recent post, postingan kali ini...


Label:

Tidak ada komentar:

Posting Komentar