Related Posts Widget With Marquee Scrolling Effect

Tuesday, 20 August 2013

Related Posts Widget With Marquee Scrolling Effect

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

FIND HEAD TAG AND REPLACE BELOW CODE

</head>

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

<b:if cond='data:blog.pageType == "item"'>

#related-posts {

float:center;

text-transform:none;

height:100%;

min-height:100%;

padding-top:5px;

padding-left:5px;

}

#related-posts h2{

background-image:linear-gradient(to right bottom, red, rgba(255, 0, 0, 0));

border:1px solid white;

color:#FFF7C0;

font-size:18px;

font-weight:normal;

margin-bottom:5px;

padding:10px;

}

#related-posts a{

border-right: 1px dotted #DDDDDD;

color:#5D5D5D;

}

#related-posts a:hover{

color:black;

background-color:#EDEDEF;

}

</style>

</b:if>

<script type='text/javascript'>

var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUXkJZM9srOl1bE07HoNGpONGGjUrG9aDQJjZIJB9TatneHsJ9ZK5HXASZYZys8Os2x0hlAgL7-JC_9nde0MkJE9e0CGGmAWifhZqvLQ8eEARh8ug-y1QqJeS0ETtMaD0QoEv4JcxP3sam/s1600/FBGadgets.png";

var maxresults=6;

var splittercolor="#DDDDDD";

var relatedpoststitle="Related Posts";

</script>

<script type='text/javascript'>

//<![CDATA[

var relatedTitles = new Array();

var relatedTitlesNum = 0;

var relatedUrls = new Array();

var thumburl = new Array();

function related_results_labels_thumbs(json) {

for (var i = 0; i < json.feed.entry.length; i++){

var entry = json.feed.entry[i];

relatedTitles[relatedTitlesNum] = entry.title.$t;

try

{thumburl[relatedTitlesNum]=entry.media$thumbnail.url;}

catch (error){

s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5); if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) {thumburl[relatedTitlesNum]=d;} else {if(typeof(defaultnoimage) !=='undefined') thumburl[relatedTitlesNum]=defaultnoimage; else thumburl[relatedTitlesNum]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUXkJZM9srOl1bE07HoNGpONGGjUrG9aDQJjZIJB9TatneHsJ9ZK5HXASZYZys8Os2x0hlAgL7-JC_9nde0MkJE9e0CGGmAWifhZqvLQ8eEARh8ug-y1QqJeS0ETtMaD0QoEv4JcxP3sam/s1600/FBGadgets.png";} } if(relatedTitles[relatedTitlesNum].length>35) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 35)+"...";

for (var k = 0; k < entry.link.length; k++) {

if (entry.link[k].rel == 'alternate') {

relatedUrls[relatedTitlesNum] = entry.link[k].href;

relatedTitlesNum++;

}

function removeRelatedDuplicates_thumbs() {

var tmp = new Array(0);

var tmp2 = new Array(0);

var tmp3 = new Array(0);

for(var i = 0; i < relatedUrls.length; i++) {

if(!contains_thumbs(tmp, relatedUrls[i]))

{

tmp.length += 1;

tmp[tmp.length - 1] = relatedUrls[i];

tmp2.length += 1;

tmp3.length += 1;

tmp2[tmp2.length - 1] = relatedTitles[i];

tmp3[tmp3.length - 1] = thumburl[i];

}

relatedTitles = tmp2;

relatedUrls = tmp;

thumburl=tmp3;

}

function contains_thumbs(a, e) {

for(var j = 0; j < a.length; j++) if (a[j]==e) return true;

return false;

}

function printRelatedLabels_thumbs(current) {

var splitbarcolor;

if(typeof(splittercolor) !== 'undefined') splitbarcolor=splittercolor; else splitbarcolor="#DDDDDD";

for(var i = 0; i < relatedUrls.length; i++)

{

if((relatedUrls[i]==current)||(!relatedTitles[i]))

{

relatedUrls.splice(i,1);

relatedTitles.splice(i,1);

thumburl.splice(i,1);

i--;

}

var r = Math.floor((relatedTitles.length - 1) * Math.random());

var i = 0;

if(relatedTitles.length>0) document.write('<h2>'+relatedpoststitle+'</h2>');

document.write('<div style="clear:both"/>');

while (i < relatedTitles.length && i < 20 && i<maxresults) { document.write('<a style="text-decoration:none;padding:5px;float:left;');

if(i!=0) document.write('border-left:solid .5px '+splitbarcolor+'"'); else document.write('"'); document.write(' href="' + relatedUrls[r] + '"><img style="width:100px;height:100px;border:0px" src="'+thumburl[r]+'"/><br/><div style="width:auto;padding-left:3px;height:auto;border:0 none;margin:3px 0 0;padding:0;font-style:normal;font-variant:normal;font-weight:normal;font-size:12px;line-height:normal;font-size-adjust:none;font-stretch:normal">'+relatedTitles[r]+'</div></a>');

i++;

if (r < relatedTitles.length - 1) {

r++;

} else {

r = 0;

}

document.write('</div>');

relatedUrls.splice(0,relatedUrls.length);

thumburl.splice(0,thumburl.length);

relatedTitles.splice(0,relatedTitles.length);

}

//]]>

</script>

</head>

-----------------------------------------------------------------------------------------------------------
FIND THIS LINE AND OPEN IT
<b:includable id='post' var='post'></b:includable>

AFTER OPEN THIS LINE FIND THIS DIV LINE
<div class='post-footer'>
FIND THIS LINE AND REPLACE WITH BELOW CODE
-----------------------------------------------------------------------------------------------------------


<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop>
<marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='auto'>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</marquee>
</div><div style='clear:both'/>
</b:if>

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

OR USE THIS METHOD IN BLOGGER TEMPLATE
-----------------------------------------------------
Blogger Template Style
Name: Simple
Designer: Josh Peterson
URL: www.noaesthetic.com
----------------------------------------------- */

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

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

FIND HEAD TAG

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

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
background-image:linear-gradient(to right bottom, red, rgba(255, 0, 0, 0));
border:1px solid white;
color:#FFF7C0;
font-size:18px;
font-weight:normal;
margin-bottom:5px;
padding:10px;
}
#related-posts a{
border-right: 1px dotted #DDDDDD;
color:#5D5D5D;
}
#related-posts a:hover{
color:black;
background-color:#EDEDEF;
}
</style>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
var thumburl = new Array();
function related_results_labels_thumbs(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
try
{thumburl[relatedTitlesNum]=entry.media$thumbnail.url;}
catch (error){
s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){
thumburl[relatedTitlesNum]=d;} else thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIwSixvh97Y987yZLbNMFbVh0sBwvjEtUMxj3ATZ3mjOMY0ifB0-mIsNsIRFErzkDxUVgp9j_GMUwn7oMHmF5GEstQVeRbFFp0h6Xg6Sc0dFyOf9IDUC2i-yMPmlr7b6uPKP7bht2mFV2s/s1600/FBGadgets.jpg';
}
if(relatedTitles[relatedTitlesNum].length>35) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 35)+"...";
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;}}}}
function removeRelatedDuplicates_thumbs() {
var tmp = new Array(0);
var tmp2 = new Array(0);
var tmp3 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains_thumbs(tmp, relatedUrls[i])){
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp3.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
tmp3[tmp3.length - 1] = thumburl[i];
}}
relatedTitles = tmp2;
relatedUrls = tmp;
thumburl=tmp3;}
function contains_thumbs(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;}
function printRelatedLabels_thumbs() {
for(var i = 0; i < relatedUrls.length; i++){
if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))){
relatedUrls.splice(i,1);
relatedTitles.splice(i,1);
thumburl.splice(i,1);}}
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
if(relatedTitles.length>0) document.write('<h2>'+relatedpoststitle+'</h2>');
document.write('<div style="clear: both;"/>');
while (i < relatedTitles.length && i < 20 && i<maxresults) {
document.write('<a style="text-decoration:none;padding:5px;float:left;');
if(i!=0) document.write('border-left:solid 0.5px #d4eaf2;"');
else document.write('"');
document.write(' href="' + relatedUrls[r] + '"><img style="width:72px;height:72px;border:0px;" src="'+thumburl[r]+'"/><br/><div style="width:72px;padding-left:3px;height:65px;border: 0pt none ; margin: 3px 0pt 0pt; padding: 0pt; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; line-height: normal; font-size-adjust: none; font-stretch: normal;">'+relatedTitles[r]+'</div></a>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</div>');}
//]]>
</script>
</b:if>


</head>

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

FIND THIS LINE AND OPEN IT
<b:includable id='post' var='post'></b:includable>

AFTER OPEN THESE LINES
<div class='post-footer'>

AFTER THIS POST FOOTER LINE 1 ADD REMAINING CODE

<div class='post-footer-line post-footer-line-1'><span class='post-author vcard'>

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:if></b:loop>
<a href='http://bit.ly/14VzgzB' style='display:none;'>FBGadgets</a>
<a href='http://fbgadgets.blogspot.co.uk/' style='display:none;'>FBGadgets</a>
<marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</marquee>
</div><div style='clear:both'/>
</b:if>

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

FOR ROUNDED BORDER STYLE USE THIS CODE

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

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

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

#related-posts h2{

background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8R6wABYp49CR2PDoxNbfn-bMXj_PftR9gBBHgctI1Dk-m0i9x9mJjqrQuO8PAhXVOwqewo1Wvbo8YqAh3VIOCjCMB3YVNJFtQ58vTZq5UbTkQ8cvoaaf6If6c0EZhj5SIe2S5HmN22aIB/s1600/navigation.png);

width: 100%;

color:#FFF7C0;

font-size:18px;

font-weight:normal;

margin-bottom:5px;

padding:10px;

background-repeat:no-repeat;

}

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

FOR CIRCULAR THUMBNAILS REPLACE YOUR PREVIOUS ABOVE STYLE CODE

WITH BELOW CODE

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

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font:bold 16px Oswald;
color:#fff;
background:#111;
border-top:3px solid #63C4F1;
text-transform:uppercase;
margin:0;
padding:7px 15px
}
#related-posts a{
border-right: 1px dotted #DDDDDD;
color:#5D5D5D;
}
#related-posts a:hover{
color:black;
background-color:#EDEDEF;
}
#related-posts img {
/* thumbnail properties */
margin-top: 2px;
height: 50px;
padding: 5px;
width: 50px;
border: 1px solid #fff;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUXkJZM9srOl1bE07HoNGpONGGjUrG9aDQJjZIJB9TatneHsJ9ZK5HXASZYZys8Os2x0hlAgL7-JC_9nde0MkJE9e0CGGmAWifhZqvLQ8eEARh8ug-y1QqJeS0ETtMaD0QoEv4JcxP3sam/s1600/FBGadgets.png";
var maxresults=5;
var splittercolor="#DDDDDD";
var relatedpoststitle="Related Posts";
</script>
<script src='https://project-ayesha.googlecode.com/svn/trunk/RelatedPostWidget.js' type='text/javascript'/>
</b:if>


</head>

<div class='post-footer'>


<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div><div style='clear:both'/>
</b:if>



-----------------------------------------------------------------------------------------------------------
READ MORE:
http://fbgadgets.blogspot.co.uk/2013/12/n-relate-post-widget.html
http://fbgadgets.blogspot.co.uk/2013/08/related-post-widget-with-google-code.html
http://fbgadgets.blogspot.co.uk/2013/08/related-posts-widget-with-marquee.html
http://fbgadgets.blogspot.co.uk/2014/08/related-postwidget-withfirst-big.html
http://fbgadgets.blogspot.co.uk/2014/10/RelatedPostWidgetListShape_13.html
------------------------------------------------------------------------------------------------------------