Add Responsive Footer in your Blogger Website Do you want to add a responsive custom footer section in your blogger website. But can't find any informative instructions. Then, we say, you come in the right place. In this article, we explain, how you can add a custom footer section. So, you must stay with this article. What is Footer Section? A Footer Section refers a webpage typically contains contact information, links with important pages, copyright details, as well as something essential informations. A footer section is generally located at the bottom of every websites and pages. This section helps to enhance the usability and accessibility of a website by providing all important resources and information. How to Add a Custom Footer Section in Blogger Website You can create a responsive footer section by following these step-by-step instructions: Instr...
Step 5: After doing so, seek the code </b:defaultmarkup> and paste the subsequent Codes simply above to it.
<!--[ Automatic Related Posts Script by Tecky AaryaN ]-->
<b:includable id='auto-relatedPost'>
<script>
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 autoRelatedConfig = {
homePage: "<data:blog.homepageUrl.canonical/>",
numPosts: 10,
titleLength:"auto",
newTabLink: false,
callBack:function(){}
}
</script>
<script>/*<![CDATA[*/ var autoRelatedIndex,showAutoRelated;null!=document.getElementById("autoRelatedPost")&&function(a,n){var e,u={homePage:"https://blog.fineshop.eu.org",numPosts:7,titleLength:"auto",containerId:"autoRelatedPost",newTabLink:!1,callBack:function(){}};for(e in autoRelatedConfig)u[e]=("undefined"==autoRelatedConfig[e]?u:autoRelatedConfig)[e];function l(e){var t=a.createElement("script");t.async="async",t.rel="preload",t.src=e,n.appendChild(t)}function c(e){var t,a,n=e.length;if(0===n)return!1;for(;--n;)t=Math.floor(Math.random()*(n+1)),a=e[n],e[n]=e[t],e[t]=a;return e}var o="object"==typeof labelArray&&0<labelArray.length?"/-/"+c(labelArray)[0]:"";autoRelatedIndex=function(e){var t=e.feed.openSearch$totalResults.$t-u.numPosts,e=(e=1,t=0<t?t:1,Math.floor(Math.random()*(t-e+1))+e);l(u.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+o+"?alt=json-in-script&orderby=updated&start-index="+e+"&max-results="+u.numPosts+"&callback=showAutoRelated")},showAutoRelated=function(e){var t,a,n=document.getElementById(u.containerId),l=c(e.feed.entry),o="<ul>",r=u.newTabLink?' target="_blank"':"";if(n){for(var s=0;s<u.numPosts&&s!=l.length;s++){a=l[s].title.$t,a="auto"!==u.titleLength&&u.titleLength<a.length?a.substring(0,u.titleLength)+"…":a;for(var d=0,i=l[s].link.length;d<i;d++)t="alternate"==l[s].link[d].rel?l[s].link[d].href:"#";o+='<li><a href="'+t+'" '+r+"><span>"+a+"</span></a></li>"}n.innerHTML=o+="</ul>",u.callBack()}},l(u.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+o+"?alt=json-in-script&orderby=updated&max-results=0&callback=autoRelatedIndex")}((window,document),document.getElementsByTagName("head")[0]); /*]]>*/</script>
</b:includable>
Change the marked parts
10: Maximum no. of related posts (eg. 15)
auto: Maximum no. of title characters (eg. 30), leave it auto for full title
false: Replace with true if you want to open related posts in New Tabs
Step 5: Add the following Codes just below to <data:post.body/>.
<!--[ Automatic Related Posts by Tecky AaryaN ]-->
<b:include cond='data:view.isPost' data='post' name='auto-relatedPost'/>
Step 6: Save the changes by clicking on this icon
That's done! Now add the following HTML Codes in your Blog Posts wherever you want to show Related Posts Accordion.
<!--[ Related Posts Accordion by Tecky AaryaN ]-->
<div class='acdn'>
<!--[ Related Posts ]-->
<div class='ac'>
<div class='acCont'>
<input class='acMn' id='offrelPost' name='relatedposts-1' type='checkbox'/>
<label class='acTtl' for='offrelPost'>
<i class='acIcn'></i>
<!--[ Related Posts Title ]-->
<span>More Articles on this topic</span>
</label>
<!--[ Related Posts Content ]-->
<div class='cont'>
<div id='autoRelatedPost'></div>
</div>
</div>
</div>
</div>
Related Posts are shown as per Posts' Labels.
Alternative Usage
You can use this as Accordion in your posts also, for that use the following HTML codes:
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser. The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.
