In addition of Tab Menu widget that I had written in the previous article at title Creating Responsive Drop Down Menu At Blogger Using HTML + CSS And Basic Horizontal Menu Blogger. Related Post is one of widget that is always there on a blog, which in general related post widget is placed after / below the post.
And in earlier article I have said a little about the related post on blogger, which if we want to create a related post on blogger, then every post is required to have a label, for more details please see:
Well, on this occasion I will write about how to create a related post on blogger, which then this related post you can put under the post or at top of the post.
This related post script for blogger that we will use it we can use to create a related post with thumbnails in blogger or not, as well as related post with summary or not, it depends on our desire.
Because the related post widget script has 6 styles selection or can be called 6 in 1 related post widget for blogger.
The 6 Related Post Widget Options For Bloggers are:
If you are already on blogger template editor page, then please find this code
Then find the code
Which is not far below the code
In which the code (
If you are, friends, want to create related post just below (at the end of the post / article), then please put the related post script for bloggers just below that code.
Or you can also put it in a different position, for example after the code
or
Or it could be placed before
Most importantly the related post script is still in the code
Now please find the code
If you have found it, then please put related post script just below
Or you may also put it in different position, the important is it still in
And one of the related post widget script for blogger that we can use is this 6 in One Related Post Widget For Blogger (script)
Before clicking the Save Template button do not forget the set first the widget script if it’s necessary.
Here are some settings that can customize by ou own wishes:
As for the code
And you friends can install this related post CSS before the code
Or you can also install it before
Style 1 = Related Post Title List
Please modify the CSS code as necessary if you want.
And in earlier article I have said a little about the related post on blogger, which if we want to create a related post on blogger, then every post is required to have a label, for more details please see:
Well, on this occasion I will write about how to create a related post on blogger, which then this related post you can put under the post or at top of the post.
This related post script for blogger that we will use it we can use to create a related post with thumbnails in blogger or not, as well as related post with summary or not, it depends on our desire.
Because the related post widget script has 6 styles selection or can be called 6 in 1 related post widget for blogger.
- Style 1: Related Post Title List
- Style 2: Related Post Thumbnail with Summary
- Style 3: Related Post Thumbnail with Post Title
- Style 4: Related Post Thumbnail with Tooltip Hover
- Style 5: Related Post Thumbnail with Title Overlay Hover
- Style 6: Related Post Title List with Tooltip Hover
How to Install Widget Related Post Under Blogger Post
The steps that must be done to install the related post below blogger post are as follow:- Sign into Blogger Dashboard
- Open Template page
- Backup first your current template to prepare if there any case happen that are not desirable.
- Then click Edit HTML
<b: includable id ='post' var ='post'>Then find the code
<data: post.body />Which is not far below the code
<b: includable id='post' var='post'>In which the code (
<data: post.body />) is the code that will display the entire content of the post.If you are, friends, want to create related post just below (at the end of the post / article), then please put the related post script for bloggers just below that code.
Or you can also put it in a different position, for example after the code
<div class ='post-footer ">or
<div class ='post-footer-line post-footer-line-3'>Or it could be placed before
</ b: includable> (cover code <b: includable id='post' var='post'>)Most importantly the related post script is still in the code
<b: includable id='post' var ='post'> and code </ b: includable> (cover)Adding Related Post Script On Blogger Mobile Template
If you activated blogger mobile template on your blog template setting, then you will also need to add related post script over on mobile template.Now please find the code
<b:includable id="mobile-post 'var='post'> in your template blogger.If you have found it, then please put related post script just below
<data: post.body/>, not far below the <b: includable id="mobile-post 'var='post'> earlier.Or you may also put it in different position, the important is it still in
<b: includable id = "mobile-post 'var =' post '> and </ b: includable> (cover mobile-post).6 in One Related Post Widget Script for Blogger
After determining where to install the related post widget, then the next thing that is needed is a related post script for blogger.And one of the related post widget script for blogger that we can use is this 6 in One Related Post Widget For Blogger (script)
<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: "chrome://global/skin/media/imagedoc-darknoise.png", containerId: "related-post", newTabLink: false, moreText: "Read More", widgetStyle: 1, callBack: function() {} }; </script> <script type='text/javascript'>//<![CDATA[ /*! Related Post Widget for Blogger by Taufik Nurrohman => http://gplus.to/tovic */ var randomRelatedIndex,showRelatedPost;!function(e,t,a){var l={widgetTitle:"<h4>Related Post:</h4>",widgetStyle:1,homePage:"http://www.makeonblog.com",numPosts:7,summaryLength:370,titleLength:"auto",thumbnailSize:72,noImage:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId:"related-post",newTabLink:!1,moreText:"Baca Selengkapnya",callBack:function(){}};if("object"==typeof relatedPostConfig)for(var i in relatedPostConfig)l[i]=relatedPostConfig[i];l.homePage=l.homePage.replace(/\/?\?m=\d+|\/+$/,"");var s=function(e){var l=t.createElement("script");l.type="text/javascript",l.src=e,a.appendChild(l)},r=function(e,t){return Math.floor(Math.random()*(t-e+1))+e},n=function(e){var t,a,l=e.length;if(0===l)return!1;for(;--l;)t=Math.floor(Math.random()*(l+1)),a=e[l],e[l]=e[t],e[t]=a;return e},o="object"==typeof labelArray&&labelArray.length>0?"/-/"+n(labelArray)[0]:"",m=function(e){var t=e.feed.openSearch$totalResults.$t-l.numPosts,a=r(1,t>0?t:1);s(l.homePage+"/feeds/posts/summary"+o+"?alt=json-in-script&orderby=updated&start-index="+a+"&max-results="+l.numPosts+"&callback=showRelatedPost")},d=function(e){var a,i,s,r,o,m=t.getElementById(l.containerId),d=n(e.feed.entry),h=l.widgetStyle,p=l.widgetTitle+'<ul class="related-post-style-'+h+'">',c=l.newTabLink?' target="_blank"':"",u='<span style="display:block;clear:both;"></span>';if(m){for(var g=d.length,b=0;b<l.numPosts&&b!==g;b++){i=d[b].title.$t,s="auto"!==l.titleLength&&l.titleLength<i.length?i.substring(0,l.titleLength)+"…":i,r="media$thumbnail"in d[b]&&l.thumbnailSize!==!1?d[b].media$thumbnail.url.replace(/\/s\d+(\-c)?\//,"/s"+l.thumbnailSize+"-c/"):l.noImage,o="summary"in d[b]&&l.summaryLength>0?d[b].summary.$t.replace(/<br *\/?>/gi," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,l.summaryLength)+"…":"";for(var A=0,f=d[b].link.length;f>A;A++)if("alternate"==d[b].link[A].rel){a=d[b].link[A].href;break}p+=2==h?'<li><img alt="that I had written in the previous article at title 6 Widget Option To Create Related Post in Blogger With Thumbnails and Summary or Not" class="related-post-item-thumbnail" src="'+r+'" width="'+l.thumbnailSize+'" height="'+l.thumbnailSize+'"><a class="related-post-item-title" title="6 Widget Option To Create Related Post in Blogger With Thumbnails and Summary or Not" href="'+a+'"'+c+">"+s+'</a><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+o+'</span> <a href="'+a+'" class="related-post-item-more"'+c+">"+l.moreText+"</a></span>"+u+"</li>":3==h||4==h?'<li class="related-post-item" tabindex="0"><a class="related-post-item-title" href="'+a+'"'+c+'><img alt="that I had written in the previous article at title 6 Widget Option To Create Related Post in Blogger With Thumbnails and Summary or Not" class="related-post-item-thumbnail" src="'+r+'" width="'+l.thumbnailSize+'" height="'+l.thumbnailSize+'"></a><div class="related-post-item-tooltip"><a class="related-post-item-title" title="6 Widget Option To Create Related Post in Blogger With Thumbnails and Summary or Not" href="'+a+'"'+c+">"+s+"</a></div>"+u+"</li>":5==h?'<li class="related-post-item" tabindex="0"><a class="related-post-item-wrapper" href="'+a+'" title="6 Widget Option To Create Related Post in Blogger With Thumbnails and Summary or Not"'+c+'><img alt="that I had written in the previous article at title 6 Widget Option To Create Related Post in Blogger With Thumbnails and Summary or Not" class="related-post-item-thumbnail" src="'+r+'" width="'+l.thumbnailSize+'" height="'+l.thumbnailSize+'"><span class="related-post-item-tooltip">'+s+"</span></a>"+u+"</li>":6==h?'<li><a class="related-post-item-title" title="6 Widget Option To Create Related Post in Blogger With Thumbnails and Summary or Not" href="'+a+'"'+c+">"+s+'</a><div class="related-post-item-tooltip"><img alt="that I had written in the previous article at title 6 Widget Option To Create Related Post in Blogger With Thumbnails and Summary or Not" class="related-post-item-thumbnail" src="'+r+'" width="'+l.thumbnailSize+'" height="'+l.thumbnailSize+'"><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+o+"</span></span>"+u+"</div></li>":'<li><a title="6 Widget Option To Create Related Post in Blogger With Thumbnails and Summary or Not" href="'+a+'"'+c+">"+s+"</a></li>"}m.innerHTML=p+="</ul>"+u,l.callBack(e)}};randomRelatedIndex=m,showRelatedPost=d,s(l.homePage+"/feeds/posts/summary?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")}(window,document,document.getElementsByTagName("head")[0]); //]]></script> </b:if> <data:post.body/>Before clicking the Save Template button do not forget the set first the widget script if it’s necessary.
The Way of Widget Related Post Setting to Determine the Thumbnail or No (Define style 1-6)
Related post widget script for bloggers that I wrote above is made with some settings that we can customize based on our wishes.Here are some settings that can customize by ou own wishes:
widgetTitle: "<h4>Related Post:</h4>"→ Related Post is a title that is on the related post listnumPosts: 5→ number 5 is the value which will determine the amount to be displayed of related post.summaryLength: 370→ number 370 is the value of the number of posts summary that will be displayed.ThumbnailSize: 80→ number 80 is the value used to determine the width and height of the thumbnail on the related post.noImage: "chrome://global/skin/media/imagedoc-darknoise.png"→ chrome://global/skin/media/imagedoc-darknoise.png is the default thumbnail that will be displayed if the post does not have pictures.containerId: "related-post"→ Related-post is id area that will display related post list (see at the script you can find the code <div id="related-post'class="related-post'/>)moreText: "Read More"→ Read More is a text read more that will be displayed if you use the related post with summary.widgetStyle: 1→ Number 1 is the value that will determine the related post style, you can replace the number 1 to number 2, 3, 4, 5, or 6 according to the style related post that you want (sequence according the style list that I wrote above).
As for the code
<b:if cond='data: blog.pageType =="item"'> and </b:if> is the code that will create related post widget will appear only on Post page.How to Add Style (CSS) To Related Post Widget
After successfully installing the related post script on your blogger blog, then the next step should be done is to give style /add css code to related post widget with the appropriate styles that you have been set on the related post script above.And you friends can install this related post CSS before the code
]]></b:skin> in the template that you use.Or you can also install it before
</head> by adding a little code, namely: <style type='text/css'> /*** Paste CSS Related Post Here ***/ </style> Style 1 = Related Post Title List
.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; } .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 2 */ .related-post-style-2, .related-post-style-2 li { margin:0; padding:0; list-style:none; } .related-post-style-2 li { padding:10px; border-top:1px solid #eee; overflow:hidden; } .related-post-style-2 li:first-child {border-top:none} .related-post-style-2 .related-post-item-thumbnail { width:80px; height:80px; max-width:none; max-height:none; background-color:transparent; border:none; padding:0; float:left; margin:2px 10px 0 0; } .related-post-style-2 .related-post-item-title { font-weight:bold; font-size:110%; } .related-post-style-2 .related-post-item-summary { display:block; overflow:hidden; } .related-post-style-2 .related-post-item-more {} .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 { margin:2em auto 0; font:normal normal 11px/1.4 Arial,Sans-Serif; } .related-post h4 { font-size:150%; margin:0 0 .5em; } /* Style 4 */ .related-post-style-4, .related-post-style-4 li { margin:0; padding:0; list-style:none; word-wrap:break-word; overflow:visible; position:relative; outline:none; } .related-post-style-4 .related-post-item { display:block; float:left; width:80px; height:auto; padding:10px; } .related-post-style-4 .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-4 .related-post-item-title {font-weight:bold} .related-post-style-4 .related-post-item-tooltip { border:1px solid #bbb; background-color:white; width:150%; text-align:center; position:absolute; bottom:100%; left:0; z-index:999; margin-bottom:-30px; padding:10px 10px 12px; -webkit-box-shadow:0 1px 3px rgba(0,0,0,.2); -moz-box-shadow:0 1px 3px rgba(0,0,0,.2); box-shadow:0 1px 3px rgba(0,0,0,.2); display:none; } .related-post-style-4 .related-post-item:last-child .related-post-item-tooltip { left:auto; right:0; } .related-post-style-4 .related-post-item-tooltip:before, .related-post-style-4 .related-post-item-tooltip:after { content:""; display:block; width:0; height:0; border:10px solid transparent; border-top-color:inherit; position:absolute; top:100%; left:37px; } .related-post-style-4 .related-post-item-tooltip:after { border-top-color:white; border-width:9px; margin-left:1px; } .related-post-style-4 .related-post-item:last-child .related-post-item-tooltip:before, .related-post-style-4 .related-post-item:last-child .related-post-item-tooltip:after { right:37px; left:auto; } .related-post-style-4 .related-post-item:last-child .related-post-item-tooltip:after { margin-left:auto; margin-right:1px; } .related-post-style-4 .related-post-item:focus {outline:none} .related-post-style-4 .related-post-item:focus .related-post-item-tooltip, .related-post-style-4 .related-post-item:hover .related-post-item-tooltip {display:block} .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 5 */ .related-post-style-5, .related-post-style-5 li { margin:0; padding:0; list-style:none; word-wrap:break-word; overflow:hidden; } .related-post-style-5 .related-post-item { display:block; float:left; width:80px; height:auto; padding:10px; border-left:1px solid #eee; } .related-post-style-5 .related-post-item:first-child {border-left:none} .related-post-style-5 .related-post-item-wrapper { display:block; position:relative; overflow:hidden; } .related-post-style-5 .related-post-item-thumbnail { display:block; margin:0; width:80px; height:80px; max-width:none; max-height:none; background-color:transparent; border:none; padding:0; } .related-post-style-5 .related-post-item-tooltip { display:block; background-color:black; background-color:rgba(0,0,0,.9); position:absolute; top:0; right:0; bottom:0; left:0; padding:10px; line-height:normal; font-style:italic; color:white; overflow:hidden; display:none; } .related-post-style-5 .related-post-item:focus .related-post-item-tooltip, .related-post-style-5 .related-post-item:hover .related-post-item-tooltip {display:block} .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 6 */ .related-post-style-6 li {position:relative} .related-post-style-6 .related-post-item-thumbnail { width:80px; height:80px; max-width:none; max-height:none; background-color:transparent; border:none; padding:0; float:left; margin:0 10px 0 0; } .related-post-style-6 .related-post-item-title { display:block; font-weight:bold; } .related-post-style-6 .related-post-item-summary { display:block; overflow:hidden; font-size:11px; } .related-post-style-6 .related-post-item-tooltip { position:absolute; bottom:100%; left:-10px; z-index:999; margin-bottom:10px; border:1px solid #bbb; background-color:white; padding:10px; width:90%; height:auto; -webkit-box-shadow:0 1px 3px rgba(0,0,0,.2); -moz-box-shadow:0 1px 3px rgba(0,0,0,.2); box-shadow:0 1px 3px rgba(0,0,0,.2); display:none; } .related-post-style-6 .related-post-item-tooltip:before, .related-post-style-6 .related-post-item-tooltip:after { content:""; display:block; width:0; height:0; border:10px solid transparent; border-top-color:inherit; position:absolute; top:100%; left:35px; } .related-post-style-6 .related-post-item-tooltip:after { border-top-color:white; border-width:9px; margin-left:1px; } .related-post-style-6 li:hover .related-post-item-tooltip {display:block} Please modify the CSS code as necessary if you want.
0 Response to "6 Widget Option To Create Related Post In Blogger With Thumbnails And Summary Or Not"