Modifying and Adding Title Tag Thumbnails Related Posts DTE
Updated on April 07, 2016
Related Post is a blog widget that is very useful and is recommended to be installed on the blog. Besides easier for visitors to get a similar nature, related posts are also useful for reducing the value of the bounce of a blog.
But along with the validation of HTML5, many scripts related posts that actually contribute to the validation error.
Author: Adhy Suriady
Well if you want to install a valid HTML5 related posts, I suggest to try using a related post from DTE. There are 5 types of display related posts from DTE, you can choose according to your taste.
Related posts from DTE allows the user to modify them again to better fit the user's wishes. Please modifications zoom on its CSS code.
Well this time we try to slightly modify the style DTE to see related posts 3 which shows a thumbnail and the title of the article. To get the script please go his Configurator Widget on the link below:
http://dte-project.googlecode.com/svn/trunk/related-post/widget-configuration.html
Read more: DTE
Then simply select its Related Post Style on the Style 3 then click the "Preview & Get Code".
By default, the form of thumbnail form an equilateral tetrahedron (the same height and width). Well this time we will change the thumbnail width becomes wider as shown below.
Please pay attention to modify its CSS code as below.
Then please save the following HTML code javascript under the code <data:post.body/> the bottom or last. Do not forget to add the conditional tags to display widgets only in the post only.
Author: Adhy Suriady
Well if you want to install a valid HTML5 related posts, I suggest to try using a related post from DTE. There are 5 types of display related posts from DTE, you can choose according to your taste.
Related posts from DTE allows the user to modify them again to better fit the user's wishes. Please modifications zoom on its CSS code.
Well this time we try to slightly modify the style DTE to see related posts 3 which shows a thumbnail and the title of the article. To get the script please go his Configurator Widget on the link below:
http://dte-project.googlecode.com/svn/trunk/related-post/widget-configuration.html
Read more: DTE
Then simply select its Related Post Style on the Style 3 then click the "Preview & Get Code".
By default, the form of thumbnail form an equilateral tetrahedron (the same height and width). Well this time we will change the thumbnail width becomes wider as shown below.
 |
| Related Posts default |
 |
| Once modified |
/* ==== Related Post Widget Start ==== */
.related-post {
margin:2em auto 0;
font:normal normal 11px/1.4 Arial,Sans-Serif;
}
.related-post h4 {
font-size:150%;
margin:0 0 .5em;
}
/* Style 3 */
.related-post-style-3,
.related-post-style-3 li {
margin:0;
padding:0;
list-style:none;
word-wrap:break-word;
overflow:hidden;
}
.related-post-style-3 .related-post-item {
display:block;
float:left;
width:80px;
height:auto;
padding:10px;
border-left:1px solid #eee;
margin-bottom:-989px;
padding-bottom:999px;
}
.related-post-style-3 .related-post-item:first-child {border-left:none}
.related-post-style-3 .related-post-item-thumbnail {
display:block;
margin:0 0 10px;
width:80px;
height:80px;
max-width:none;
max-height:none;
background-color:transparent;
border:none;
padding:0;
}
.related-post-style-3 .related-post-item-title {font-weight:bold}
/* ==== Related Post Widget End ==== */
.related-post h4 is the title of the widget, please change the percentage of its font-size to enlarge the size of the title of the widget.
.related-post-style-3 .related-post-item to set the items related post-its, please change its width according to our wishes for example be 140px. And delete the code border-left:1px solid #eee; to strip the edge of each item of his.
Please remove the following code: .related-post-style-3 .related-post-item:first-child {border-left:none}
.related-post-style-3 .related-post-item-thumbnail to adjust the thumbnail view. Please fox and equate its width with width on the code .related-post-style-3 .related-post-item the above (140px). For his height please change according to your wishes, for example, be 90px.
Done ... then please save its CSS code that has been changed but above the code ]]></b:skin> or </style>
To add a title tag on the thumbnail, we must edit the javascript code in :
<!-- Related Post Widget Start -->
<b:if cond='data:blog.pageType == "item"'>
<div id='related-post' class='related-post'/>
<script type='text/javascript'>
var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
"<data:label.name/>"<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop></b:if>];
var relatedPostConfig = {
homePage: "<data:blog.homepageUrl/>",
widgetTitle: "<h4>Related Post:</h4>",
numPosts: 5,
summaryLength: 370,
titleLength: "auto",
thumbnailSize: 80,
noImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",
containerId: "related-post",
newTabLink: false,
moreText: "Read More",
widgetStyle: 3,
callBack: function() {}
};
</script>
<script type='text/javascript' src='http://dte-project.googlecode.com/svn/trunk/related-post/related-post.min.js'/>
</b:if>
<!-- Related Post Widget End -->
Please open his js code and later you will find a code like this.
<img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+l.thumbnailSize+'" height="'+l.thumbnailSize+'">Please replace all of the code below
<img alt="thumbnail" class="related-post-item-thumbnail" src="'+r+'" width="'+l.thumbnailSize+'" height="'+l.thumbnailSize+'" title="'+t+'">Then save the changes and please re-upload his js code. You can use Google Drive to upload his js code.
Then please save the following HTML code javascript under the code <data:post.body/> the bottom or last. Do not forget to add the conditional tags to display widgets only in the post only.