Recent Posts Cantik dari Feddburner dengan CSS3

Sekalipun banyak widget recent posts telah disediakan secara gratis oleh beberapa situs termasuk blogger, namun mungkin sampeyan akan tertarik untuk coba memasang dan menggunakan widget recent posts yang diberikan secara cuma-cuma oleh feedburner yang tak lain dan tak bukan merupakan saudara laki-laki dan masih satu darah dengan blogger/blogspot. Atau mungkin sampeyan masih ragu-ragu dan mengatakan, "apa sih untungnya pakai widget recent posts milik feedburner?", dan masih sembari memicingkan mata menelusuri kata demi kata mungkin terselip sebuah pernyataan, "toh blogger sendiri sudah menyediakan widget ini? Huh ..., ngapain musti repot-repot cari yang lain!".

Hmmm... jika mungkin sampeyan ragu atau malas, akan lebih afdol sekiranya untuk mencoba melihat terlebih duhulu seperti apa sih sebenarnya tongkrongan widget recent posts pemberian feedburner yang telah dimodifikasi dengan menambahkan kode CSS3 ini. He ... he ... perlu sampeyan ketahui juga satu hal yang spesial dari widget ini. Ho ... ho ... Dia mempunyai kecepatan sangat baik dalam inventarisasi data posting kita, lhoh. Hi ... so pasti loadingnya jadi wus ... wus ....wus... atau dalam istilah lain: dia punya kecepatan sangat bagus saat inventarisasi data posting hingga blog juga tetap lancar loadingnya. Heh ... heh .... Gimana? Jadi sedikit penasaran? Makanya ... nih lihat dulu demonya ... trus ... segera buat dan pasang widgetnya!

D E M O

Cara Mendapatkan Widget Recent Posts Feddburner

• 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". .
  Gambar-5
• KLIK "Boot Boost.


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.

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>

Catatan/Keterangan:

• Jika sampeyan ingin menampilkan widget Recent Posts ini di bawah posting blog, maka masuklah terlebih dahulu di "Edit HTML".
• Cari kode ]]></b:skin dan simpan kode CSS di atas kode ]]></b:skin.
• Ketika penyimpanan kode CSS dilakukan di atas kode ]]></b:skin, maka tag <style type="text/css"> dan tag penutupnya </style> harus dihilangkan.
• Lanjutkan dengan mencari kode <div class='comments' id='comments'>.
• Letakkan kode xHTML dan javascript di atasnya.
• KLIK "SAVE Templates/Simpan Templates".

xHTML dan Javascript Recent Posts dari Feedburner

<img src='http://i964.photobucket.com/albums/ae124/gubhugreyot/background/RecentPostsH277V44.jpg' style='display:block;float:none;margin:15px auto;border:1px solid #333;padding:4px 10px;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px; width:277px;height:33px;'/>
  <div class='recentarticles' style='padding:5px;margin:0px 10px 20px;'>
<script src='http://feeds.feedburner.com/blogspot/udvD?format=sigpro' type='text/javascript'/><noscript><p>Subscribe to RSS headline updates from: <a href='http://feeds.feedburner.com/blogspot/udvD'/><br/>Powered by FeedBurner</p> </noscript>

Catatan:

Ganti javascript yang berwarna biru dengan javascript punya sampeyan setelah percobaan selesai dilakukan!

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

• 
• 

» Happy Blogging - gubhugreyot «