HTML and CSS codes for your Blogger/site Part Four

Part Four HTML and CSS codes for your Blogger however most can be implemented on other sites.

First, back up your template. Make sure you have the following code just above your theme HTML </body> don't worry if you have to place another code just above </body> after.

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Click the dropdown menu to go to the part of the page you need. Can't find what you're looking for? Click here to see all of the coding you can try.

Skip to the part you need:

Return link not working in Blogger Make multiple pages pagination for Blogger

Return link not working on Blogger

Blogger's default return link links you back to the homepage. However I coded this bit of HTML by myself I am proud to say. It takes you to the page you were on before. Back up your template and then follow these steps.

First find <b:include data='{ iconClass: &quot;touch-icon back-button rtl-reversible-icon&quot; }' name='backArrowIcon'/> or something similar.

Above that code you should find <a expr:href='data:blog.homepageUrl'> or something similar.

Replace that code with: 

 <a class='return_link' onclick='history.back()'>

Make multiple pages pagination for Blogger

I got this from Github however I tweaked it a bit to make it work properly. 

First, paste the following code above ]]></b:skin>

 .lalulintas1{width:728;height:90px;background:#d5d5d5;margin:0 auto;position:relative;max-width:100%}.rambuhijau1{background:#e7e7e7;position:absolute;display:block;color:rgba(0,0,0,.2);text-align:center;text-transform:uppercase;font-size:180%;padding:10px;margin:5px;right:0;left:0;top:0;bottom:0;font-weight:700;line-height:4.4rem}

.aiti-message { width: 77%; margin: auto; }

.aiti_prev1{background-color: #000000;float:left;color:#fff !important;width: 135px;}

.aiti_next1{background-color: #000000;float:right;color:#fff !important;width: 135px;}

#aiti-page-number{

BACKGROUND-COLOR: #fff;

font-size: 17px;

text-align: center;

padding: 5px 0px;

text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);

font-weight: bold;

color: #000; !important;

}

@media only screen and (max-device-width: 375px) {

.aiti_prev1{background-color: #000000;float:left;color:#fff !important;width: 80px;}

.aiti_next1{background-color: #000000;float:right;color:#fff !important;width: 80px;}

}

.post-pagination {

    height: 40px;

    margin-bottom: 20px;

    margin-top: 20px;

}

.pag-btn {

    font-size: 17px;

    box-sizing: border-box;

    text-transform: uppercase;

    text-align: center;

    padding: 5px 0px;

    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);

    color: #FFF !important;

    font-weight: bold;

    -moz-border-radius: 2px;

    -webkit-border-radius: 2px;

    border-radius: 2px;

    display: inline-block;

}

.aiti-message {

    display: none;

}

 Then paste the following above </body> 

  <script type='text/javascript'>

//<![CDATA[

var ll = function ll(sParam) { var l1 = decodeURIComponent(window.location.search.substring(1)), sURLVariables = l1.split('&'), sParameterName, i;                             

for (i = 0; i < sURLVariables.length; i++){ 

  sParameterName = sURLVariables[i].split('='); if (sParameterName[0] === sParam) { return sParameterName[1] === undefined ? true : sParameterName[1]; }}};

var lI = ll('atpage');

var l1l = $('#aiti_next');

var l11 = $('#aiti_prev');

var l1I = $('.aiti-body').prop('innerHTML').split('💙');

$('.aiti-body').remove();

var lIl = $('#aiti-out');

var lI1 = $('#aiti-page-number');

var total=l1I.length ;

if(lI === undefined || lI == 1)  

                                {

                              l11.remove();

                              l1l.find('a').attr('href', '?atpage=2');

                              lIl.html(l1I[0]);

lI1.html('1'+' of '+ total); } 

else { 

  

lI = parseInt(lI); 

if(l1I.length <= lI){ l1l.remove();}

var lII = lI + 1;

var l1ll = lI - 1; l1l.find('a').attr('href', '?atpage=' + lII);

l11.find('a').attr('href', '?atpage=' + l1ll);

lIl.html(l1I[l1ll]);

//lI1.html(lI);

lI1.html(lI+' of '+ total);

 }

//]]>

</script>

 Then search for <data:post.body/> 

If you have multiple <data:post.body/> in your template then, before each of those <data:post.body/> tag write this <h1>First place</h1> , here ‘First’ is for the first <data:post.body/> , write ‘Second’ for the second <data:post.body/> and so on. Now save your template.

After saving is complete, go to your blog and notice which <h1 /> tag is appearing before your post body. If ‘First’ is appearing then the first <data:post.body/> is the actual <data:post.body/>.

Now go back to your template code editor and again find all those <data:post.body/> and remove the <h1></h1> tag you added to debug.

Remove the real <data:post.body/> and replace with the following:

<b:if cond='data:blog.pageType in {&quot;item&quot;,&quot;static_page&quot;}'>

</b:if>

<b:if cond='data:post.body contains &quot;💙&quot;'>

<div class='aiti-body' id='PostBody'>

<data:post.body/>

  </div>

 <b:if cond='data:blog.pageType in {&quot;item&quot;,&quot;static_page&quot;}'>

<!-- only display title if it's  non-empty -->

<b:if cond='data:post.body contains &quot;💙&quot;'>

  <div id='aiti-out'/><br/>

<div class='aiti-message'>

<i class='fa fa-map' style='color: #000; font-size: 20px;'/><b>

 Continue Reading about the  </b><b><a expr:href='data:post.url' style='font-size:18px;color:#000'>&quot;<data:post.title/>&quot;</a></b><b>  on the next page below</b></div>

<br/>

<div class='post-pagination'>

<div class='aiti-next-prev' id='aiti_prev'><a><div class='aiti_prev1 pag-btn'><span>&#171; back</span></div></a></div>

<div class='aiti-next-prev' id='aiti_next'><a><div class='aiti_next1 pag-btn'><span>next &#187;</span></div></a></div>

<div id='aiti-page-number'/>

</div>

  </b:if>

</b:if>

  <b:else/>

<data:post.body/>

    </b:if>

Finally, where you want the next page to start, simply add:

💙

Check out my live demo

 Don't forget to save your edits! 

I do hope you've found something useful on this page. Leave me a comment below if something isn't working right! Thank you.