HTML and CSS codes for your Blogger/site Part Three
Part Three 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:
Go to Layout' and click on 'Add a gadget', give any title, copy and paste this code into that widget:
First, head to “Template” and click to “Edit HTML” button.
I found this information from Geeksforgeeks. To make a clickable popup, simply copy the code below changing the bold writing, and editing as you like:
To make a Popup work on Freeflarum, you have to edit the forum widgets app on Freeflarum.
You can't put your HTML made popup on the top of the page as that will only work on computer.
<style>
/* Recent posts by labels widget by tutes inside*/
img.label_thumb{
float:left;
margin-right:10px !important;
height:72px; /* Thumbnail height */
width:72px; /* Thumbnail width */
border: 1px solid #fff;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
}
#label_with_thumbs { text-align: inherit;
font: normal 18px Port Lligat Slab;
float: left;
width: 98%;
min-height: 70px;
margin: 0px 10px 2px 0px;
padding: 0;
}
ul#label_with_thumbs li {
padding:8px 0;
min-height:75px;
margin-bottom:0px;
border-bottom: 1px dotted #999999;
}
#label_with_thumbs li{
list-style: none ;
padding-left:0px !important;
}
#label_with_thumbs a:visited {
text-decoration: none;
color: black;}
#label_with_thumbs a:link {
text-decoration: none;
color: black;}
#label_with_thumbs a { text-transform: none;}
#label_with_thumbs a:hover { text-decoration: underline;}
#label_with_thumbs strong {padding-left:0px; }</style>
<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<ul id="label_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
{s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxPUKOIa7NScbPFPMx98_aqvLRr_FM9LJFCG0jAuSloZAZlNYBg1GsUGNzMZCOoboPAnf8wiFLBnC_nj0m5JUqx7V5NAadtb6l6L0yApRQ2Sos7bBo9e3qXtItZaa_2caVB_ufPZrl8SM/s1600/picture_not_available.png';}
var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="June";monthnames[7]="July";monthnames[8]="Aug";monthnames[9]="Sept";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)
document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');if("content"in entry){var postcontent=entry.content.$t;}
else
if("summary"in entry){var postcontent=entry.summary.$t;}
else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}
else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}
var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
if(showcommentnum==true)
{if(flag==1){towrite=towrite+' | ';}
if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;}
document.write(towrite);document.write('</li>');if(displayseparator==true)
if(i!=(numposts-1))
document.write('');}document.write('</ul>');}
//]]>
</script>
<script type='text/javascript'>var numposts = 500;var showpostthumbnails = false;var displaymore = true;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 200;</script>
<script type="text/javascript" src="/feeds/posts/default/-/YOURLABELHERE?published&alt=json-in-script&callback=labelthumbs"></script>
You can edit what's in bold to your liking, like add your post's label name, thumbnail height, thumbnail width, thumbnail image that appears when there is no image in post, number of posts with that label, show post thumbnails true or false etc. After making your edits, press save.
You may not be able to change the size of the thumbnails in the code I showed you, so to do this, find out the widget's name which should be img.label_thumb but double check, and put that and the following in the CSS box after the widget's name:
{width: 130px !important; height: 85px !important;}
How to make a collapsible dropdown menu for HTML widgets, in Blogger
I found this information out at Howinblogs.First, head to “Template” and click to “Edit HTML” button.
Next, find, how to find can be found here, </head> and above, paste the following code:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Next, find </body> and above, paste the following code:
<script type='text/javascript'>$(document).ready(function(){$(".sh-section-btn").on("click",function(){$(this).parent().children(".h-section-cont").slideToggle(200);});});</script>
Now we have to add CSS, then go to “Template” and click to “Customize” button. Than click for “Advanced” under which you will find “Add CSS”, click on it. Paste the following code:
/* Expandable Box CSS */.hidden-section-container { background-color:rgba(187, 187, 187, 0.93);
box-shadow:0 2px 10px rgba(0,0,0,0.2);
}
.sh-section-btn {
font-size:18px;
color:#fff;
text-shadow:1px 1px 0px rgba(0,0,0,0.2);
padding:5px 10px;
cursor:pointer;
}
.h-section-cont {
padding:10px 10px;
background-color:#eee;
display:none;
}
Now use below HTML code for collapsible view/hide section:
<div class='hidden-section-container'><div class='sh-section-btn'><span><div style="text-align: center;">Your content's name here</div></span></div><div class='h-section-cont shw-box'><p>All your text/HTML here</p></div></div>
Change the text in bold Show, to what you want it to say, and the other text in bold to your text/HTML.
<html lang="en"> <head> <meta charset="UTF-8"></meta><meta content="width=device-width, initial-scale=1.0" name="viewport"></meta><style> .box {height: vh;display: flex;align-items: center;justify-content: center;}.box a {padding: 10px;background-color: #ccccff;border-radius: 3px;text-decoration: none;}.modal {position: fixed;inset: 0;background:(254,126,126,0.7);display: none;align-items: center ;justify-content: center;}.content {position: relative;background: #ccccff;padding: 1em 2em;border-radius: 4px;}.modal:target {display: flex;}</style></head><body><div class="box"><a href="#popup-box">Your popup name</a></div><div class="modal" id="popup-box"><div class="content"><h1 style="color: black;">Your popup title</h1><p> Your popup description</p><a href="#" style="color: black; font-size: 30px; position: absolute; right: 10px;text-decoration: none; top: 10px;">×</a></div></div></body></html>
To display something on top of something, you need to give the z-index a higher number than the content you want to be behind. If your content doesn't have a z-index, you can use 1.
Simply write this next to what your CSS item is called:
{z-index: 1;}
If you have an issue like me where every time you press a clickable button, the screen turns purple and doesn't show anything, you can try this fix. Simply put this in your CSS part, you can edit to your liking (you may have to see what your CSS items are called, you can learn how to do that by visiting this).:
.ModalManager.modal { display: contents;}.Modal.in {position: inherit; top: 100px;}.Modal-backdrop.backdrop {display: none;}
You can't put your HTML made popup on the top of the page as that will only work on computer.
So move the HTML widget anywhere but the top.
Do this as well as my above mention on how to put something on top of something as your popup can show content from behind otherwise.
When you place your widget in certain places, it can make the popup not display fully. The way around this is to put more content in your HTML box.
To change to phone view simply right click, inspect and then press the following:
If select category won't work on FreeFlarum, you can try this.
.Modal-content { position: absolute; top: -310px; left: 100px; z-index: 1;}
Change the bold writing to the CSS name of your category popup, you can find how to do that here, how far on the top it needs to be, how far left, and make the z-index higher than the comment form behind it to make it appear on top.
You may need to put the z-index beside a different CSS name. It's all about finding what works for you.
Editing this may make your Login, Sign up and Forgot password popups invisible, if this is the case, change their positions just as you have done here, you may need to delete what you've wrote in the CSS box so the login links appear again, edit their position via CSS, and re paste this CSS.
To add a copy button to your Blockquotes, do this simple step:
Head to layput, add HTML/Javascript widget, paste the following:
/* Blockquote container */<style>.post-body blockquote,.post-content blockquote,.entry-content blockquote{position:relative;background:#ffffff;border:2px solid #000;border-radius:16px;margin:18px 0;padding:18px 16px 16px;max-height:350px;overflow:auto;-webkit-overflow-scrolling:touch;/* Darker grey copied state */.vs-bq-copy.is-copied{background:#cfcfcf !important;color:#000 !important;box-shadow:0 14px 30px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.75) !important;}/* refined shadow */box-shadow:0 18px 40px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.9);}/* Sticky toolbar */.vs-bq-tools{position:sticky;top:10px;z-index:9;display:flex;justify-content:flex-end;margin-bottom:10px;pointer-events:none;}/* Copy button */.vs-bq-copy{pointer-events:auto;display:flex;align-items:center;justify-content:center;min-width:110px;height:40px;padding:0 22px;border-radius:999px;/* light grey pill */background:#eeeeee;color:#000;font-weight:800;font-size:13px;letter-spacing:.6px;line-height:1;cursor:pointer;user-select:none;/* soft floating shadow */box-shadow:0 10px 24px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.85);transition:.2s ease;}/* Hover */.vs-bq-copy:hover{background:#e6e6e6;transform:translateY(-1px);box-shadow:0 14px 30px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.9);}/* Copied state */.vs-bq-copy.is-copied{background:#0b8a2a;color:#fff;box-shadow:0 14px 30px rgba(0,0,0,.25);}.post-body blockquote,.post-content blockquote,.entry-content blockquote{font-size:14px;line-height:1.6;}</style><script>(function(){if(window.__VS_COPY_FIXED__)return;window.__VS_COPY_FIXED__=1;function fallbackCopy(t){var a=document.createElement("textarea");a.value=t;a.setAttribute("readonly","");a.style.position="fixed";a.style.left="-9999px";document.body.appendChild(a);a.select();try{document.execCommand("copy")}catch(e){}document.body.removeChild(a);}function copyText(t){if(navigator.clipboard&&location.protocol==="https:"){navigator.clipboard.writeText(t).catch(function(){fallbackCopy(t)});}else fallbackCopy(t);}function getText(bq){var c=bq.cloneNode(true);c.querySelectorAll(".vs-bq-tools").forEach(function(n){n.remove()});return(c.textContent||"").trim();}function build(){document.querySelectorAll(".post-body blockquote,.post-content blockquote,.entry-content blockquote").forEach(function(bq){if(bq.querySelector(".vs-bq-tools"))return;var tools=document.createElement("div");tools.className="vs-bq-tools";var btn=document.createElement("div");btn.className="vs-bq-copy";btn.textContent="COPY";btn.onclick=function(){copyText(getText(bq));btn.textContent="COPIED";btn.classList.add("is-copied");setTimeout(function(){btn.textContent="COPY";btn.classList.remove("is-copied");},1100);};tools.appendChild(btn);bq.insertBefore(tools,bq.firstChild);});}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",build):build();setTimeout(build,800);})();</script>
Once you're done, with all the CSS edits you can do, like making the boarder a different colour like I show you how to do here, you can have it how you want it, you can view this version in my live demo.
To make part of your Blog scrollable, simply add this CSS:
{overflow-y: scroll; max-height: 350px;}
Change the writing in bold to what you like. You can edit things like height on top to suit your needs.
If the post symbol for FreeFlarum isn't popping up, you can try the following code:
i.icon.fas.fa-paper-plane.Button-icon { border: 30px solid white;}
Change the writing in bold to match your Blog.
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!
The next thing I suggest you read is HTML and CSS codes for youe Blogger - Part four
Thank you!
I'd love feedback about this Blog's coding series. Feel free to leave me some!
ReplyDelete