Attention please, this blog for developers i publish here source codes which i developed, so you should have knowledge in javascript, jQuery and sometimes blogger data.

How to get blogger post custom contents in home page

In this post i'll write about blogger custom contents in home page, for example by this method we can do alot of things, like get post format content like youtube or vimeo videos, soundclound tracks etc. also we can do more than this, i can use this to edit popular posts widget to show date, number of comments and all other post meta data or any thing else.

Live Demo
Download Example Template

At first this method use jQuery lib. so you must have it in your code.

We will get post data by using post url, in my example i will do that by including a small tag in post contents which will apear in home page.
 <div class='post-url' expr:data-url='data:post.url'/>

And i got this url using jQuery but before that i get each post content using jQuery .each
$('.post-outer').each(function() {
});

Then i'll get .post-outer as variable to save it
$('.post-outer').each(function() {
    var $this = $(this);
});

After that we do the main function we want to do, it's get post url using variable i named it (postUrl)
$('.post-outer').each(function() {
    var $this = $(this);
    var postUrl = $this.find('.post-url').attr('data-url');
});

Finally we will get custom data we need to add in the post contents in home page post div (post-outer), i send cotent to (post-video) div from (post-body) div in post page, and the content i get is iframe which it's src contain "youtube.com" so it's a youtube video. 
$('.post-outer').each(function() {
    var $this = $(this);
    var postUrl = $this.find('.post-url').attr('data-url');
    $.get(postUrl, function (data) {
      $this.find('.post-video').html($(data).find('.post-body iframe[src*="youtube.com"]'));
    },"html");
});

No comments:

Post a Comment

Powered by Blogger.