Monday, December 20, 2010

Widget Recent Posts Feedburner

Cara Mendapatkan Widget Recent Posts Feedburner
  • Lakukan SignUp ke Feedburner dengan klik link di bawah ini:
http://feedburner.google.com
  • Claim Feed dengan menuliskan URL blog sampeyan kemudian klik "Next »".
    KLIK Gambar-1 untuk melihat contoh pengisian URL.
Gambar-1: Contoh Pengisian URL untuk Claim Feed
  • Pilih Atom atau RSS, kemudian klik "Next »".
    KLIK Gambar-2 untuk melihat contoh pilihan atom dan RSS. Lanjutkan dengan klik "Next »".
Gambar-2: Contoh pilihan Atom dan RSS.
  • Feed Address dan Feed Title. Address Feed dapat sampeyan gunakan/dipasang di blogsebagai feed alternatif. KLIK Gambar-3 untuk melihat contoh Feed Title dan Feed Address. Lanjutkan dengan klik "Next »".
Gambar-3: Contoh bentuk Feed Title dan Feed Address
  • Congrats! Terlihat ucapan selamat dari feedburner karena feed telah selesai dibuat. KLIK Skip direcly to feed management.. Buka/klik Gambar-4 untuk melihat contoh dalam bentuk gambar.
Gambar-4: Congrats! KLIK untuk melihat bentuk ucapan selamat dan Feed Address.
  • KLIK "Publicize" untuk memulai langkah mendapatkan "Widget Recent Posts". clip_image001.
Gambar-5
  • KLIK "Boot Boost.
clip_image002
Gambar-6
  • Setting recent Posts. Tentukan jumlah tampilan posting di recent posts dan lakukan setting pada link.
Gambar-7: Setting Recent Posts
  • Selanjutnya akan diperlihatkan javascript Recent Posts dari Feedburner. KLIK "SAVE", kemudian ambil/copy javascript tersebut untuk disimpan di blog melalui "Add Gadget". Di bawah ini (Gambar-8) adalah contoh javascript yang diberikan oleh feedburner.Silahkan KLIK untuk membuka contoh javascript tersebut.
clip_image004
Cara Memasang Widget Recent Posts Feddburner di Blog
  • Login ke blogger.
  • KLIK "Design/Rancangan".
  • Setelah masuk di "Page Elements/Elemen Laman", klik "Add a Gadget" (dalam box bergaris putus-putus).
  • Simpan kode CSS (lihat kode CSS di bawah!) beserta javascript Recent Posts yang sampeyan dapat di Feedburner di box penambahan widget yang telah disediakan.
  • KLIK "SAVE/Simpan".
Kode CSS :

<style type="text/css">

.feedburnerFeedBlock {
      background:#333; 
      width:400px;
      padding:2px 4px;
      margin:15px 8px;
      border:1px solid #888;
      border-radius:6px;
      -moz-border-radius:6px;
      -webkit-border-radius:6px;

}

.feedburnerFeedBlock ul{
       margin-top:3px;margin-bottom:3px;

}

.feedburnerFeedBlock li {
      list-style:none;
      padding:1px 4px 3px;
      background:#555; 
      border-bottom:1px dotted #777;
      border-top:1px dotted transparent;  
      -o-transition:all ease-out 1s;
      -moz-transition:all ease-out 1s;
      -webkit-transition:all ease-out 1s;  

}

.feedburnerFeedBlock li:hover {
      background:#333; 
      border-bottom:1px dotted #999; 
      border-top:1px dotted #999;      

}

.feedburnerFeedBlock li span.headline a {
      font-size:11px;
      font-family:Arial;
      padding-left:20px;
      padding-right:6px;
      text-decoration:none;
      background:url(http://i828.photobucket.com/


albums/zz208/tantytm/TemplatesImg/bullet.png) no-repeat 0px 0px;    
      color:#eee;
      text-shadow:1px 1px 1px #000;
      -o-transition:all ease-out 1s;
      -moz-transition:all ease-out 1s;
      -webkit-transition:all ease-out 1s;

}

.feedburnerFeedBlock li span.headline a:hover {
      padding-left:30px;
      color:red;
      text-shadow:1px 1px 1px #000;
      background:#333 url(https://sites.google.com/site/tantytemplatesmodification


/images/bgScrollBoxTantyTM_liV11H11.png) no-repeat 5px 0px;

}

#creditfooter{
      padding:0px 0 4px 6px;
      background: url(https://sites.google.com/site/gubhugreyot/images/


bgJQAccordionV30H1.png) center repeat-x;

}

</style>

No comments: