tag:blogger.com,1999:blog-12471259214169784572023-11-16T06:24:05.779-08:00Ghranek SourceJavascript, jQuery and blogger Open sources codes and pluginsMuhammad Abu 'lGharaniqhttp://www.blogger.com/profile/13984768586776488538noreply@blogger.comBlogger2125tag:blogger.com,1999:blog-1247125921416978457.post-80033901513810925212015-09-10T07:22:00.000-07:002015-09-10T07:22:34.528-07:00How to get blogger post custom contents in home page<div dir="ltr" style="text-align: left;" trbidi="on">
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.<br />
<br />
<a href="http://get-post-data.blogspot.com.eg/" target="_blank">Live Demo</a><br />
<a href="https://onedrive.live.com/redir?resid=46EAB3C34A43110D!29448&authkey=!AJ_RFFdHOTUGFnc&ithint=file%2cxml" target="_blank">Download Example Template</a><br />
<br />
At first this method use jQuery lib. so you must have it in your code.<br />
<br />
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.<br />
<blockquote class="tr_bq">
<div class='post-url' expr:data-url='data:post.url'/></blockquote>
<br />
And i got this url using jQuery but before that i get each post content using jQuery .each<br />
<blockquote class="tr_bq">
$('.post-outer').each(function() {<br />});</blockquote>
<div>
<br /></div>
<div>
Then i'll get .post-outer as variable to save it</div>
<div>
<blockquote class="tr_bq">
$('.post-outer').each(function() {<br /> var $this = $(this);<br />});</blockquote>
</div>
<div>
<br /></div>
<div>
After that we do the main function we want to do, it's get post url using variable i named it (postUrl)</div>
<div>
<blockquote class="tr_bq">
$('.post-outer').each(function() {<br /> var $this = $(this);<br /> var postUrl = $this.find('.post-url').attr('data-url');<br />});</blockquote>
</div>
<div>
<br /></div>
<div>
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. </div>
<div>
<blockquote class="tr_bq">
$('.post-outer').each(function() {<br /> var $this = $(this);<br /> var postUrl = $this.find('.post-url').attr('data-url');<br /> $.get(postUrl, function (data) {<br /> $this.find('.post-video').html($(data).find('.post-body iframe[src*="youtube.com"]'));<br /> },"html");<br />});</blockquote>
</div>
</div>
Muhammad Abu 'lGharaniqhttp://www.blogger.com/profile/13984768586776488538noreply@blogger.com0tag:blogger.com,1999:blog-1247125921416978457.post-28915766780811685682015-09-06T21:18:00.002-07:002015-09-07T12:50:10.922-07:00ModernTube jQuery Plugin For Youtube Videos<div dir="ltr" style="text-align: left;" trbidi="on">
ModernTube is jQuery plugin which re-size youtube videos to container width this make youtube video responsive with aspect ration between width and height.<br />
<br />
<a href="http://codepen.io/midoghranek/pen/wolxD/" target="_blank">Find This Project on Codepen</a><br />
<a href="https://github.com/midoghranek/ModernTube" target="_blank">Find This Project on Github</a><br />
<br />
<h3 style="text-align: left;">
How To Call jQuery Plugin</h3>
<blockquote class="tr_bq">
// Select div and give it width using css <br />
$('#container').moderntube();</blockquote>
<h3 style="text-align: left;">
</h3>
<h3 style="text-align: left;">
<br /></h3>
<h3 style="text-align: left;">
Example</h3>
<div>
<br /></div>
<div class="codepen" data-default-tab="js" data-height="1021" data-slug-hash="wolxD" data-theme-id="2159" data-user="midoghranek">
<pre><code>/*
* ModernTube Jquery plugin v1.1
* re-size youtube videos to container width this make youtube video responsive
* Author: Mohamed Abo El-Ghranek
* Author URL: facebook.com/midoghranek
* http://codepen.io/midoghranek/pen/wolxD
*/
(function($) {
$.fn.moderntube = function(tube) {
return this.each(function() {
// select container tag
var container = $(this);
// select iframe tag
var video = container.find('iframe');
// empty height and width attributes before get new values
video.attr('height','').attr('width','');
// get video container width
var videoWidth = $(this).width();
// get video height
var videoHeight = videoWidth * 480/853;
// add new values for height and width
video.attr('height',videoHeight).attr('width','100%');
// Window resize to make it responsive and make sure that the video loaded
$(window).bind('resize load', function() {
var videoWidth = container.width();
var videoHeight = videoWidth * 480/853;
video.attr('height',videoHeight).attr('width','100%');
});
});
};
})(jQuery);
// Select div and give it width using css
$('#container').moderntube();</code></pre>
See the Pen <a href="http://codepen.io/midoghranek/pen/wolxD/">ModernTube </a> by Mohamed Abo ElGhranek (<a href="http://codepen.io/midoghranek">@midoghranek</a>) on <a href="http://codepen.io/">CodePen</a>.</div>
<script async="" src="//assets.codepen.io/assets/embed/ei.js"></script></div>
Muhammad Abu 'lGharaniqhttp://www.blogger.com/profile/13984768586776488538noreply@blogger.com0