Bored with your default Feed Reader? Looking for a better "Recent Posts" widget? Yeah sure there is, and here it is. A "Recent Posts" widget with editable date format, controllable description range and much more. Such a must for sites with blogs.
This tutorial requires the Feed Address of your blog. Please read "How to Activate Email Subscription". Once your blog is registered, you can see your Feed Address on the "Edit Feed Details" tab.
FILES NEEDED
How to use these files? Click Here!
FOOTER CODE
Where to place these codes? Click Here!
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://mwtdatabase.weebly.com/files/theme/FeedEk.min.js"></script>
<script src="http://mwtdatabase.weebly.com/files/theme/moment-with-locales.min.js"></script>
<script>
$('#divRss').FeedEk({
FeedUrl:'http://feeds.feedburner.com/blogspot/mdhQy',
MaxCount : 5,
ShowDesc : true,
ShowPubDate:true,
DescCharacterLimit:100,
TitleLinkTarget:'_blank',
DateFormat: 'MM/DD/YYYY',
DateFormatLang:'en'
});
</script>
<script type="text/javascript" src="http://mwtdatabase.weebly.com/files/theme/FeedEk.min.js"></script>
<script src="http://mwtdatabase.weebly.com/files/theme/moment-with-locales.min.js"></script>
<script>
$('#divRss').FeedEk({
FeedUrl:'http://feeds.feedburner.com/blogspot/mdhQy',
MaxCount : 5,
ShowDesc : true,
ShowPubDate:true,
DescCharacterLimit:100,
TitleLinkTarget:'_blank',
DateFormat: 'MM/DD/YYYY',
DateFormatLang:'en'
});
</script>
Notes:
Red text - Change with your site address.
Green text - change with your Feed Address.
Blue text - Settings for your Feed appearance.
HEADER CODE
Where to place these codes? Click Here!
<style>
.feedEkList{width:350px; list-style:none outside none;background-color:#FFFFFF; border:1px solid #D3CAD7; padding:4px 6px; color:#3E3E3E;}
.feedEkList li{border-bottom:1px solid #D3CAD7; padding:5px;}
.feedEkList li:last-child{border-bottom:none;}
.itemTitle a{font-weight:bold; color:#4EBAFF !important; text-decoration:none }
.itemTitle a:hover{ text-decoration:underline }
.itemDate{font-size:11px;color:#AAAAAA;}
</style>
.feedEkList{width:350px; list-style:none outside none;background-color:#FFFFFF; border:1px solid #D3CAD7; padding:4px 6px; color:#3E3E3E;}
.feedEkList li{border-bottom:1px solid #D3CAD7; padding:5px;}
.feedEkList li:last-child{border-bottom:none;}
.itemTitle a{font-weight:bold; color:#4EBAFF !important; text-decoration:none }
.itemTitle a:hover{ text-decoration:underline }
.itemDate{font-size:11px;color:#AAAAAA;}
</style>
Note:
Red text - Change with your desired width.
BODY CODE
Where to place these codes? Click Here!
<div id="divRss"></div>
CONCLUSION
If you requires assistance on installing this widget, please post your queries on the forum. Queries may include additional styling and getting your Feed Address.
This tutorial uses one of the "10 Capsulated Tips".
Hello, I wanted to know if its possible for the links to open in the same page not make a new tab or window. Also the widget is not displaying the description of the post.
ReplyDeleteHi,
ReplyDeletePlease use the forum for queries. Thank You.