Membuat Widget Feed Reader

Diposkan oleh Hery Prasetyo Wednesday, May 5, 2010
بسم الله الرحمن الرحيم

Widget Feed Reader adalah sebuat widget yang dapat menampung dan me-load feed blog, seperti post atau komentar juga bisa di tambahkan feed blog teman jika ingin mengetahui postingan terakhir blog tersebut. seperti layaknya tab view yang bisa dipasang di sidebar.

Membuat Widget Feed ReaderDipasang recent post atau recent comment untuk memudahkan pengunjung atau pun admin blog untuk mengontrol lalu lintas yang terjadi di blog. dengan menggunakan JQuery menjadikan widget ini lebih atraktif.

Silahkan lihat demo Widget Feed Reader berikut :


Cara membuat Widget Feed Reader adalah sebagai berikut :

- Login keBlogger dengan account anda.
- Pergi ke "Tata Letak" kemudian "Edit HTML".
- Sebelumnya pastikan blog anda telah tertanam didalamnya JQuery versi 1.3.2, jika belum silahkan copy JQuery versi 1.3.2 dibawah ini dan letakkan dibawah <head> :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

- Silahkan masukan feed anda dalam script berikut :

/* Configuration: */

var tabs = {
"@Tutorial" : {
"feed" : "http://feeds.feedburner.com/hapiamesir/tips_blogging",
"function" : rss
},

"Latest Posting": {
"feed" : "http://feeds.feedburner.com/HapiaMesir",
"function" : rss
},

"CSS Editing": {
"feed" : "http://feeds.feedburner.com/hapiamesir/css_editing",
"function" : rss
},

"Download Mp3" : {
"feed" : "http://feeds.feedburner.com/hapiamesir/download_mp3",
"function" : rss
},

"Comments" : {
"feed" : "http://feeds.feedburner.com/hapiamesir/comment",
"function" : rss
}
}

var totalTabs;
$(document).ready(function(){
/* This code is executed after the DOM has been completely loaded */

/* Counting the tabs */
totalTabs=0;
$.each(tabs,function(){totalTabs++;})


$('#feedWidget').show().mouseleave(function(){

/* If the cursor left the widet, hide the drop down list: */
$('.dropDownList').remove();
$('#activeTab').removeClass('hover');

}).mouseenter(function(){

if(totalTabs>1) $('#activeTab').addClass('hover');

});

$('#activeTab').click(showDropDown);

/* Using the live method to bind an event, because the .dropDownList does not exist yet: */
$('.dropDownList div').live('click',function(){

/* Calling the showDropDown function, when the drop down is already shown, will hide it: */
showDropDown();
showTab($(this).text());
});


/* Showing one of the tabs on load: */
showTab('@Tutorial');

});


function showTab(key)
{
var obj = tabs[key];
if(!obj) return false;

var stage = $('#tabContent');

/* Forming the query: */
var query = "select * from feed where url='"+obj.feed+"' LIMIT 5";

/* Forming the URL to YQL: */
var url = "http://query.yahooapis.com/v1/public/yql?q="+encodeURIComponent(query)+"&format=json&callback=?";

$.getJSON(url,function(data){

stage.empty();

/* item exists in RSS and entry in ATOM feeds: */
$.each(data.query.results.item || data.query.results.entry,function(){
try{
/* Trying to call the user provided function, "this" the rest of the feed data: */
stage.append(obj['function'](this));

}
catch(e){
/* Notifying users if there are any problems with their handler functions: */
var f_name =obj['function'].toString().match(/functions+(w+)(/i);
if(f_name) f_name = f_name[1];

stage.append('<div>There is a problem with your '+f_name+ ' function</div>');
return false;
}
})
});

$('#activeTab').text(key);
}

function showDropDown()
{
if(totalTabs<2) return false;

if($('#feedWidget .dropDownList').length)
{
/* If the drop down is already shown, hide it: */
$('.dropDownList').slideUp('fast',function(){ $(this).remove(); })
return false;
}

var activeTab = $('#activeTab');

var offsetTop = (activeTab.offset().top - $('#feedWidget').offset().top )+activeTab.outerHeight() - 5;

/* Creating the drop down div on the fly: */
var dropDown = $('<div>').addClass('dropDownList').css({

'top' : offsetTop,
'width' : activeTab.width()

}).hide().appendTo('#feedWidget')

$.each(tabs,function(j){
/* Populating the div with the tabs that are not currently shown: */
if(j==activeTab.text()) return true;

$('<div>').text(j).appendTo(dropDown);
})

dropDown.slideDown('fast');
}


function rss(item)
{
return $('<div>').html(
formatString(item.title.content || item.title)+
' <a href="'+(item.origLink || item.link[0].href || item.link)+'" target="_blank">[read]</a>'
);
}


function formatString(str)
{
str = str.replace(/<[^>]+>/ig,'');
str=' '+str;
str = str.replace(/((ftp|https?)://([-w.]+)+(:d+)?(/([w/_.]*(?S+)?)?)?)/gm,'<a href="$1" target="_blank">$1</a>');
return str;
}

- Simpan script diatas dengan nama yang anda inginkan dengan ekstensi .js atau .txt, kemudian upload ke situs hosting anda.

- Kemudian masukan ke template anda dibawah JQuery 1.3.2 diatas dengan format :

<script src='http://SITUS-HOSTING-ANDA.com/NAMA-FILE-ANDA.js' type='text/javascript'/>

- Untuk pengaturan CSS, silahkan copy paste code css berikut dan letakkan di atas ]]></b:skin> :

#feedWidget{
background:#333;
border:2px solid #48535e;
margin:0 auto;
width:200px;
padding:5px;
position:relative;

/* Remains hidden if JS is not enabled: */
display:none;
z-index:20;
}


#activeTab.hover,.dropDownList{
background:url(http://4.bp.blogspot.com/_QeR8kbaWhLU/S-EC0oXWgWI/AAAAAAAAAuc/y-BCgoevNY0/s1600/drop_arrow.png) no-repeat 95% 50% #758695;
border:1px solid #38434d;

margin:-1px;

cursor:pointer;

/* CSS3 round corners: */
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;

}

#activeTab,.dropDownList div{
color:white;
cursor:pointer;
font-size:20px;
margin:0 2px 0 0;
padding:5px;

text-shadow:0 1px 1px black;
}

.line{
height:1px;
overflow:hidden;
background-color:#eee;
border-bottom:1px solid #687581;
margin:10px 0;
}

.dropDownList{
background-image:none;
position:absolute;

border-top:none;
padding:5px;

/* We reset the roundness of the top corners, inherited by a previous rule: */

-moz-border-radius-topleft: 0;
-moz-border-radius-topright: 0;
-webkit-border-top-left-radius: 0;
-webkit-border-top-right-radius: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}

.dropDownList div:hover{
background-color:#505E6B;
}

#tabContent div{
/* The feed entry divs */

background-color:#EEE;
color:#555555;
font-size:11px;
font-weight:bold;
margin-bottom:11px;
padding:5px;
position:relative;

-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;

-moz-box-shadow:0 1px 1px black;
-webkit-box-shadow:0 1px 1px black;
box-shadow:0 1px 1px black;
}

- Simpan template.

- Kemudian letakkan code berikut ditempat yang anda inginkan :

<div id="feedWidget" style="display: block;"><div id="activeTab" class=""></div><div class="line"></div><div id="tabContent"><div></div></div></div>

- Simpan.

# @Tutorial; pada script diatas jika anda ganti dengan tulisan yang anda inginkan, ganti juga tulisan @Tutorial yang kedua pada script tersebut, gunakan tulisan tanpa spasi jika anda ingin menggantinya.
# @Tutorial adalah nama feed yang pertama ditampilkan.

# Bagi yang ingin menampilkan widget update tutorial dari HAPIA Mesir di blog anda, silahkan gunakan script berikut untuk menggantikan script kedua :

<script src='http://hapiajavascript.googlecode.com/files/hapia-widget.js' type='text/javascript'/>

Untuk tutorial aslinya silahkan kunjungi Making a Sleek Feed Widget With YQL, jQuery & CSS3.

Selamat mencoba dan happy blogging.


Jika postingan ini dirasa berguna bagi yang lain. silahkan share untuk berbagi.

Dapatkan Update Terbaru Dari HAPIA Mesir, Masukan Email Anda :

HAPIA Mesir Readers

Bookmark and Share

Direkomendasikan Untuk Dibaca :

31 Responses to Membuat Widget Feed Reader

  1. Rock Says:
  2. Keren nich...
    Coba dulu ahhh...

     
  3. KangTiar Says:
  4. Manthap

     
  5. Beben Says:
  6. its a rock...good

     
  7. Thanks yach..

     
  8. Gak pernah habis ilmu yg dibagikan rupanya...

     
  9. the others Says:
  10. Heran..., ilmunya dapat dari mana sih kok gak habis2 ?

     
  11. GADO GADO Says:
  12. thx ya udah share? Masalah kapasitas banyak menguras memori css ga? Thx

     
  13. HAPIA Mesir Says:
  14. Mbak Reni@ alhmdllh mbak.. ilmu yg saya dapet baru sedikit dibandingkan yg ada di dunia luar sana mbak...hehhe..kalo sumbernya bisa dari mana2 aja mbak... beberapa tutorial memang memerlukan penyesuaian utk bisa diterapkan...saya hanya melakukan beberapa uji coba dan perubahan yg diperlukan...semoga bermanfaat mbak...

    GADO GADO@ untuk kapasitas CSS g sob.. soalnya code CSSnya g panjang2 amat... jika mw lebih rinkas lagi silahkan di kompres lagi aja codenya sob...

     
  15. aryadevi Says:
  16. salam teman, ^__^

     
  17. selalu ada yang baru ditempat sahabat. Terima-kasih atas semuanya Sahabat. Salam

     
  18. sangat bagus tutornya ,, cukup menarik ..
    thnks sob :)
    RikyRizkiyana™

     
  19. NURA Says:
  20. salam sobat
    saya akan coba buat widget feed reader ini.
    trims sudah diberikan kodenya,,bisa langsung kopas nich.

     
  21. Hmmm...bagus mas, pengen coba sih tp takut memperberat loading blog.

    Gak memperberat kan mas? saya ijin simpan artikelnya ya mas biar ntr kapan2 dipraktekkan mas..

    trims..

     
  22. YudaN Says:
  23. Tutor bgus sob, thx for share...tp bikin blog kta berat gk?

     
  24. HAPIA Mesir Says:
  25. ALL@ ini g memberatkan blog dengan syarat blog sebelumnya juga belum berat...kalo blognya udah berat duluan ya dipasang ini tetep berat loadingnya...bukan malah jadi ringan...ckckck

    kalo bikin berat blog yg g usah dipasang....wkwkwkwk..

     
  26. Ega Says:
  27. mantabs kang infonya

     
  28. walah keren dah wes sob.... oy izin aq pasang linknya di update my friend blog

     
  29. mas doyok Says:
  30. wah kalau utk ek giu saya milih biasa aja pake feed agdget dan sentuhan css
    kalau pake script lagi wah mumet mumet blog saya ntar mas hahaha

     
  31. Rizky2009 Says:
  32. kok g bisa yah d pasang d update my friend blog

     
  33. Nugraha Says:
  34. Wow, kalau mencari script2 buat widget di blog, ke sini aja. Ada pakarnya lho.. Terima kasih sob :)

     
  35. akhatam Says:
  36. Widih keren Hapia.... kapan2 ku coba ahh.. Tx

     
  37. Beben Says:
  38. guest booknya kok gak ada yah sob???
    lag kah disaya yak???
    hmmm...?

     
  39. HAPIA Mesir Says:
  40. kang Beben@ guest booknya khusus yg udah follow....wkwkwkkwkwkwkwkw...

     
  41. blue datang,kawan
    p cabar
    salam hangat dari blue

     
  42. wah keren nih..ntar ku coba ah..

     
  43. darahbiroe Says:
  44. tengkyua
    yaw
    untuk tutorialnya

     
  45. aisyah muna Says:
  46. ikut nge-save as ya pak...buat belajar-belajar...
    ^__^

     
  47. sehat-mu Says:
  48. menarik sekali sobat..
    langsung dicoba dulu semoga bisa bekerja dengan baik...
    terimaksih banyak sobat..

     
  49. ahmad Says:
  50. brarti sama kaya' recent post ama recent comment ya sob?? tapi ini bisa ngambil menurut label. kereeen! langsung ane cek TKP dolo sob! thanks dah share

     
  51. JUN Says:
  52. keren banget!!!

    bentar saia save page dulu :P

    eh, yang di sidebar itu juga keren loh kak, ditulis dunk tutorialnya ;)

     
  53. HAPIA Mesir Says:
  54. JUN@ kalo yg di sidebar tu udah ada sob... dipostingan sebelum ini...kl g didaftar tutorial tu ada semua....

     

Post a Comment