----------------------------------------------------------------------------------------------------

RECOMMENDED POST SLIDE OUT FOR BLOG - YouTube

1. ADD HTML/JAVA WIDGET IN BLOG LAYOUT
2. COPY AND PASTE BELOW CODE

https://project-ayesha.googlecode.com/svn/trunk/RecommendPostSlideOutWidget.js

------------------------------------------------------------------------------------------------------



<div id="hlslidein" style="display:none;"> <div class="help">?</div><div class="expand">+</div> <div class="close">X</div> <p>Recommended for you</p> <div id="hlslidein_image"></div> <div  id="hlslidein_title">Loading..</div> </div>

<script> if(document.location.href.split("/").length==6&&document.location.href.indexOf(".html")!=-1){if(typeof hl_onload_queue=='undefined')var hl_onload_queue=[];if(typeof hl_dom_loaded=='boolean')hl_dom_loaded=false;else var hl_dom_loaded=false;if(typeof hl_async_loader!='function'){function hl_async_loader(src,callback,id){var script=document.createElement('script');script.type="text/javascript";script.async=true;script.src=src;script.id=id;var previous_script=document.getElementById(id);if(previous_script)if(previous_script.readyState=="loaded"||previous_script.readyState=="complete"){callback();return}else{script=previous_script}if(script.onload!=null)previous_callback=script.onload;script.onload=script.onreadystatechange=function(){var newcallback;if(previous_script&&previous_callback)newcallback=function(){previous_callback();callback()};else newcallback=callback;if(hl_dom_loaded){newcallback()}else hl_onload_queue.push(newcallback);script.onload=null;script.onreadystatechange=null};var head=document.getElementsByTagName('head')[0];if(!previous_script)head.appendChild(script)}}if(typeof hl_domLoaded!='function')function hl_domLoaded(callback){hl_dom_loaded=true;var len=hl_onload_queue.length;for(var i=0;i<len;i++){hl_onload_queue[i]()}}hl_domLoaded();hl_async_loader("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js",function(){hl_async_loader("",function(){},"hl-out-slide")},"jQueryjs")} </script> <a href="" target="_blank"></a>

<script type='text/javascript'>
//<![CDATA[
$(function() {
if (typeof hlslidein_custom_css == 'undefined' || !hlslidein_custom_css) $('head').append('<style>#hlslidein{z-index:5;width:400px;height:100px;padding:10px;background-color:#fff;border-top:3px solid #1616f5;position:fixed;right:-430px;bottom:0;-moz-box-shadow:-2px 0 5px #aaa;-webkit-box-shadow:-2px 0 5px #aaa;box-shadow:-2px 0 5px #aaa;font-family:Arial,Helvetica,sans-serif}#hlslidein p{font-size:11px;text-transform:uppercase;font-family:Arial,Helvetica,sans-serif;letter-spacing:1px;color:#555}#hlslidein_title{color:#555;font-weight:700;font-size:16px;margin:10px 20px 10px 0}#hlslidein a,#hlslidein a:hover,#hlslidein_title{text-decoration:none;color:#1616f5}#hlslidein .close,#hlslidein .expand,#hlslidein .help{border:2px solid #EEE;cursor:pointer;color:#9a9aa1;width:13px;height:15px;padding:2px 0 0 5px;position:absolute;right:10px;font-size:17px;font-weight:700;font-family:Arial,Helvetica,sans-serif;font-size:12px}#hlslidein .help{right:35px}#hlslidein_title,#hlslidein_image{float:left;width:80px}#hlslidein_title{width:290px}</style>');
$('#hlslidein').show();
var hlslidein_gone_in = false;
var hl_scroll_lock = false;
$(window).scroll(function() {
if (hl_scroll_lock) return;
if (hlslidein_gone_in == false) $('#hlslidein .expand').hide();
if (document.getElementById("hlslidein_place_holder")) {
var distanceTop = $('#hlslidein_place_holder').offset().top - $(window).height();
} else {
var distanceTop = $(document).height() - $(window).height();
} if ($(window).scrollTop() >= distanceTop) {
if (hlslidein_gone_in == false) {
$('#hlslidein').animate({
'right': '0px',
'bottom': '0px'
}, 300)
} else $('#hlslidein').animate({
'bottom': '-80px',
'right': '0px'
}, 300)
} else $('#hlslidein').stop(true).animate({
'right': '-430px',
'bottom': '0px'
}, 300)
});
$('#hlslidein .close').bind('click', function() {
hl_scroll_lock = true;
$('#hlslidein').stop(true).animate({
'bottom': '-80px'
}, 300);
hl_scroll_lock = false;
hlslidein_gone_in = true;
$('#hlslidein .expand').show();
$('#hlslidein .close').hide()
});
$('#hlslidein .expand').bind('click', function() {
$('#hlslidein .expand').hide();
$('#hlslidein').stop(true).animate({
'bottom': '0px'
}, 300);
hlslidein_gone_in = false;
$('#hlslidein .close').show()
})
});
var hlslideinprocessJson = function(json, status) {
if (json.feed.entry) var randomNum = Math.ceil(Math.random() * json.feed.openSearch$totalResults.$t);
$.ajax({
url: '/feeds/posts/summary',
data: {
'max-results': '2',
'alt': 'json-in-script',
'start-index': randomNum
},
success: hlslideinprocessRecommendation,
dataType: 'jsonp',
cache: true
})
};
$.ajax({
url: '/feeds/posts/summary',
data: {
'max-results': '1',
'alt': 'json-in-script'
},
success: hlslideinprocessJson,
dataType: 'jsonp',
cache: true
});
var hlslideinprocessRecommendation = function(json, status) {
try {
if (json.feed.entry) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
var url = '';
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
url = entry.link[k].href + '?utm_source=blog&utm_medium=gadget&utm_campaign=hl_slideout_plugin';
break
}
};
var title = entry.title.$t;
if (location.href.indexOf(url) == -1) {
try {
var thumbUrl = '';
thumbUrl = entry.media$thumbnail.url;
$('#hlslidein_image').html('<img src="' + thumbUrl + '" class="image" title="' + title + '" />')
} catch (error) {}
var link = $('<a>');
link.attr('title', title);
link.text(title);
link.attr('href', url);
$('#hlslidein_title').empty();
link.appendTo($('#hlslidein_title'));
return
}
}
}
} catch (error) {
$('#hlslidein_title').html('<p>Sorry! Some error occurred while fetching the Blog Feed.</p>')
}
};
//]]>
</script>

------------------------------------------------------------------------------------------------------------
OR USE THIS CODE WITH GOOGLE DRIVE
------------------------------------------------------------------------------------------------------------




---------------------------------------------------------------------------------------------------------
ADD HTML/JAVA WIDGET IN BLOG LAYOUT
COPY AND PASTE BELOW CODE
-----------------------------------------------------------------------------------------------------------

<style>
#bpslidein{z index:5;
width:400px;
height:125px;
padding:10px;
background-color:#fff;
border-top:5px solid #F9780E;
position:fixed;
right:-430px;
bottom:0;-moz-box-shadow:-5px 0 10px #aaa;
-webkit-box-shadow:-5px 0 10px #aaa;
box-shadow:-5px 0 10px #aaa;
font-family:Arial, Helvetica, sans-serif;
}
#bpslidein p{
font-size:11px;
text-transform:uppercase;
font-family:Arial,Helvetica,sans-serif;
letter-spacing:1px;color:#555;
}
#bpslidein_title{
color:#555;
font-weight:700;
font-size:16px;
margin:10px 20px 10px 0;
}
#bpslidein a,#bpslidein a:hover,#bpslidein_title{
text-decoration:none;color:#F9780E;
}
#bpslidein .close,#bpslidein .expand,#bpslidein .help{
border:2px solid #EEE;
cursor:pointer;
color:#9A9AA1;
width:13px;
height:15px;
padding:2px 0 0 5px;
position:absolute;
right:10px;font-size:17px;
font-weight:700;font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
#bpslidein .help{right:35px;
}
#bpslidein_title,#bpslidein_image{
float:left;width:80px;
}
#bpslidein_title{
width:290px;
}
</style>
<div id="bpslidein" style="display:none;">
<div class="help">?</div>
<div class="expand">+</div>
<div class="close">X</div>
 <p>Recommended for you</p>
 <div id="bpslidein_image"></div>
 <div  id="bpslidein_title"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0_6Oztawq5m8gln0rIJNZxQCu9VimoUTEPnvH4rn7uQHr5ZbTVA7ppAeANgipF-PL76hE7yxhczRQwHU-OhIGlOz3oYwTf_PUIpUqkpkatNMopBwZse3AuqsYBKOgSFleZbR1EH3l240e/s1600/MD-loading.gif" /></div><div class='addthis_toolbox addthis_default_style '>
<a class='addthis_button_facebook_like' fb:like:layout='button_count'/>
<a class='addthis_button_tweet'/>
<a class='addthis_button_google_plusone' g:plusone:size='medium'/>
</a></a></a></div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4f086bca05bf6861' type='text/javascript'>
</script>
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div>
<script> if(document.location.href.split("/").length==6&&document.location.href.indexOf(".html")!=-1){if(typeof bp_onload_queue=='undefined')var bp_onload_queue=[];if(typeof bp_dom_loaded=='boolean')bp_dom_loaded=false;else var bp_dom_loaded=false;if(typeof bp_async_loader!='function'){function bp_async_loader(src,callback,id){var script=document.createElement('script');script.type="text/javascript";script.async=true;script.src=src;script.id=id;var previous_script=document.getElementById(id);if(previous_script)if(previous_script.readyState=="loaded"||previous_script.readyState=="complete"){callback();return}else{script=previous_script}if(script.onload!=null)previous_callback=script.onload;script.onload=script.onreadystatechange=function(){var newcallback;if(previous_script&&previous_callback)newcallback=function(){previous_callback();callback()};else newcallback=callback;if(bp_dom_loaded){newcallback()}else bp_onload_queue.push(newcallback);script.onload=null;script.onreadystatechange=null};var head=document.getElementsByTagName('head')[0];if(!previous_script)head.appendChild(script)}}if(typeof bp_domLoaded!='function')function bp_domLoaded(callback){bp_dom_loaded=true;var len=bp_onload_queue.length;for(var i=0;i<len;i++){bp_onload_queue[i]()}}bp_domLoaded();bp_async_loader("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js",function(){bp_async_loader("https://googledrive.com/host/0B2BtMc5vQHtXT2xLUEpjdkZua1k",function(){},"bp-out-slide")},"jQueryjs")} </script>
 <a href="http://fbgadgets.blogspot.co.uk/2014/07/recommended-post-slide-out-for-blogger.html" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf5137RvRB7jq2l_RbarcIQn2TxhXsZQmLI9gp1SVsT4npZMUGBb6mDeXkf5Vzo76AL1Hjo0L4FcjzLbRp-ZIVxrhipzPNwXut6lruQSTeywXq8WC5DM3SW-Nja-Hl4mnfgpM-Ifs7ypFF/s1600/www.gj37765.blogspot.com.png" alt="Recommended Post Slide Out For Blogger" />
</a>
--------------------------------------------------------------------------------------------------------
FILE CODE SHOW LOOK LIKE THIS
http://project-ayesha.googlecode.com/svn/trunk/
https://googledrive.com/host/0B2BtMc5vQHtXT2xLUEpjdkZua1k
https://project-ayesha.googlecode.com/svn/trunk/RecommendPostSlideOutWidget.js
--------------------------------------------------------------------------------------------------------