Related Posts...
The navigation in the Blogger community is mostly date-based. To get an alphabetical sort, there are painfully elaborate schemes that involve redirecting an RSS feed into an array, sorting the array and then regurgitating the results. Although, such a solution is workable, it seems, in my humble opinion, a bit over-engineered. I looked at a number of related post widgets and tried a handful of them on the site. But, I found that instead of pulling up a reasonable and different selection of pages from the entire site with each iteration, the various widgets would each select many of the same related posts.
The aforementioned related post widgets seemed to work well for other sites, but, apparently my deficient tagging and rather specific subject matter made my content seem a bit more enigmatic and inscrutable than usual. Even so, while these widgets didn't really fit my needs, I feel that's it's only fair to at least mention that you might want to consider them for your needs:
Clearly, since these widgets were not the right fit for my specific needs, I had to take a different course of action. So, I dug around in the archives of my old site and found the inner workings of my previous navigation system. After a bit of tweaking, I came up with the following widget:
<script type="text/javascript">
var d=document;
var divs;
var related_post_content='';
var iCountDivs=0;
if (d.getElementsByTagName('div')){
divs=d.getElementsByTagName('div');
for (var i=0;i<divs.length;i++){
if(divs[i].getAttribute('tag')=='related_post'){
related_post_content+='<div class="related_item_box"><a href="'+divs[i].getAttribute('pageurl').replace('http:', 'https:')+'"><img src="'+divs[i].getAttribute('imgurl').replace('http:', 'https:')+'" class="related_item_img" alt="'+divs[i].getAttribute('pagetitle')+'"/></a><br/><a href="'+divs[i].getAttribute('pageurl').replace('http:', 'https:')+'" class="related_item_txt">'+divs[i].getAttribute('pagetitle')+'</a></div>';
iCountDivs+=1;
}
if(divs[i].getAttribute('tag')=='related_posts_container'){
var optContent='<div class="related_item_box"><a href="[default link]"><img src="[default image]" class="related_item_img" alt="[default text]"/></a><br/><a href="[default link]" class="related_item_txt">[default text]</a></div>';
if(divs[i].getAttribute('option')=='noextralink'){optContent='';}
var optTitle='Related Posts';
if((iCountDivs==1) && (optContent=='')){optTitle='Related Post';}
divs[i].innerHTML='<h3>'+optTitle+'</h3>'+related_post_content+optContent;
if(divs[i].getAttribute('outer')=='wrap'){
var nIH=new String('<div class="related_post_outerwrap">'+divs[i].innerHTML+'</div>')
divs[i].innerHTML=nIH;
}
divs[i].className='related_post_container';
related_post_content='';
iCountDivs = 0;
}
}}
</script>
The style sheet for the widget can be saved in the advanced section of the customize theme menu:
.related_post_outerwrap {
background-color:#eee;
border:1px solid #ddd;
display:block;
float:left;
margin-right:20px;
margin-top:5px;
width:auto;
padding:5px 10px
}
.related_post_container {
margin-top:30px;
margin-bottom:30px;
}
.related_item_box {
padding:0;
margin:0;
background: Gainsboro;
color:black;
display:inline-block;
width:72px;
font-size:10px;
text-align:center;
margin-top:0;
margin-bottom:0;
margin-right:5px;
line-height:11px;
height:115px;
overflow:hidden;
font-weight:bold;
border: 1px solid gray;
}
.related_item_box a {
color:black;
}
.related_item_txt {
word-wrap:break-word;
text-decoration:none;
width:68px;
height:33px;
display:block;
margin-left:auto;
margin-right:auto;
overflow:hidden;
color:black;
margin-top:-10px;
}
.related_item_txt:hover {
text-decoration:none;
}
img.related_item_img {
padding:0px;
margin:0px;
border-bottom:1px solid #dddddd;
margin-bottom:3px;
}
.related_item_box img {
opacity:0.5;
filter:alpha(opacity=50);
}
.related_item_box:hover img {
opacity:1.0;
filter:alpha(opacity=100);
}
.related_item_box:hover, .related_item_box:hover .related_item_txt {
background-color:#000066;
color:#ffffff;
}
It's a fairly simple piece of code that retrieves all of the DIV elements from the page and then looks for a series of attributes that define the page URL, the image URL and the page title. The code continues to gather data for the current related post block until it encounters a container DIV. Once a container DIV is encountered, the related post block is displayed and the code then proceeds to gather data for the next related post block (if any). My widget also adds in a default item that appears in every related post block.Since my movie list (currently well in excess of 4000 titles) is already in a database, it was a simple matter to add a column for the image URL. Then, when I need a new block of code, I just execute a query and out pops a set of DIV elements that have all the necessary formatting. Of course, the hard part, is copying and pasting the navigation and container code to each one of my pages, but, that's the trade-off with this navigation mechanism. There's always room for improvement, but, I thought it would be nice to share what I managed to put together, so far.<div imgurl="[image 1]" pagetitle="[title 1]" pageurl="[link 1]" style="display: none;" tag="related_post"> </div> <div imgurl="[image 2]" pagetitle="[title 2]" pageurl="[link 2]" style="display: none;" tag="related_post"> </div> <div imgurl="[image 3]" pagetitle="[title 3]" pageurl="[link 3]" style="display: none;" tag="related_post"> </div> <div tag="related_posts_container"> </div>
The script above should output a block of HTML like the following:
According to the Picasa Web Reference Manual:<div class="related_post_container"> <div class="related_post_outerwrap"> <h3>Related Posts</h3> <div class="related_item_box"> <a href="[link 1]"><img src="[image 1]" class="related_item_img" alt="[title 1]"></a><br><a href="[link 1]" class="related_item_txt">[title 1]</a> </div> <div class="related_item_box"> <a href="[link 2]"><img src="[image 2]" class="related_item_img" alt="[title 2]"></a><br><a href="[link 2]" class="related_item_txt">[title 2]</a> </div> <div class="related_item_box"> <a href="[link 3]"><img src="[image 3]" class="related_item_img" alt="[title 3]"></a><br><a href="[link 3]" class="related_item_txt">[title 3]</a> </div> </div> </div>
The following values are valid for theI plan to back fill the legacy content and use this widget going forward. I already know that this widget will not work in the dynamic templates. However, I've tested the widget on a Kindle and it actually worked. Of course, JavaScript has to be enabled. Enjoy.thumbsize... query parameters and are embeddable on a webpage. These images are available as both cropped(c) and uncropped sizes by appendingcor not to the size. As an example, to retrieve a 72 pixel image that is cropped, you would specify72-c, while to retrieve the uncropped image, you would specify72for thethumbsize... query parameter values.
32, 48, 64, 72, 104, 144, 150, 160
October 26, 2018
Update
After the untimely death of my primary backup hard-drive, I decided to revisit the related post widget and came up with a somewhat different, but, much more automated mechanism for dealing with related posts that uses an array. The CSS is essentially the same and the output follows a similar format, but, now there's an extra bit of script to lookup the related posts. So, although I don't use this code anymore, someone somewhere may find it interesting.Recemtly, Blogger announced a Spring Cleaning Effort which includes, among other things, disabling support for third-party gadgets. While HTML/JavaScript gadgets will still be available, any gadgets that rely on third-party resources will stop working. So, as a result of this change, it appears that LinkWithin and other similar offerings have been negatively impacted.
