Pages

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

Wednesday, May 30, 2012

Recent Post With Slide Effect


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 :.
DMCAProtected by CopyscapeMyFreeCopyright.com Registered & Protected
Share :
Comments
Tweets
3 Comments

3 comments:

  1. Threelas.com telah merilis versi all widget in one plugin. dengan plugin ini anda bisa membuat berbagai macam widget, seperti related post, selected recent post, multi label recent post, dan lain-lain. segera dapatkan secara gratis di threelas.com

    kode dilindungi oleh undang-undang.

    ReplyDelete