Related Posts Widget Square Shapes ThumbNails

Friday, 16 August 2013

Related Posts Widget Square Shapes ThumbNails

-----------------------------------------------------------------------------------------------------------
COPY AND PASTE BELOW CODE
----------------------------------------------------------------------------------------------------------------
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
----------------------------------------------------------------------------------------------------------------

----------------------------------------------------------------------------------------------------------
OR CHANGE THUMBNAIL STYLE

#related-posts a{

width: 41.65%;

float: left;

list-style: none;

margin: 0 4% 4% 0;

background-color: #fff;

padding: 3%;

-webkit-box-shadow: 0px 0px 4px rgba(180, 180, 180, 0.55);

-moz-box-shadow: 0px 0px 4px rgba(180, 180, 180, 0.55);

box-shadow: 0px 0px 4px rgba(180, 180, 180, 0.55);

}

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

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:72px;padding-left:3px;height:65px;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 FINE 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>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div><div style='clear:both'/>
</b:if>


<div class='post-footer'>

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

USED IMAGES IN THIS TUTORIAL

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

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

OR USE ROUNDED CORNER STYLE FOR RELATED POST WIDGET H2

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

http://cssround.com/

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

FOR ROUNDED BORDER STYLE USE THIS CODE

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

#related-posts h2{

background-image:

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

-webkit-border-radius: 99px;

-moz-border-radius: 99px;

border-radius: 99px;border:4px solid #346B2E;

background-color:#FF9408;

-webkit-box-shadow: #9A1BB3 3px 3px 3px;

-moz-box-shadow: #9A1BB3 3px 3px 3px;

box-shadow: #9A1BB3 3px 3px 3px;

color:#FFF7C0;

font-size:18px;

font-weight:normal;

margin-bottom:5px;

padding:10px;

}

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

FOR CIRCULAR THUMBNAILS REPLACE YOUR PREVIOUS ABOVE STYLECODE

WITH BELOW CODE

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

<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 img {

/* thumbnail properties */

margin-top: 2px;

height: 82px;

padding: 5px;

width: 82px;

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);

}

#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>

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

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;

}