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:
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:
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;}
To change to phone view simply right click, inspect and then press the following:
Add a copy button to your Blockquotes
To add a copy button to your Blockquotes, do this simple step:
To add a copy button to your Blockquotes, do this simple step:
Head to layput, add HTML/Javascript widget, paste the following:
<style>.post-body blockquote,.post-content blockquote,.entry-content blockquote{position:relative;background:#fff;border:2px solid #000;border-radius:16px;margin:18px 0;padding:18px 16px 16px;max-height:350px;overflow:auto;-webkit-overflow-scrolling:touch;box-shadow:0 18px 40px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.9);font-size:14px;line-height:1.6}.vs-bq-tools{position:sticky;top:10px;z-index:9;display:flex;justify-content:flex-end;margin-bottom:10px;pointer-events:none}.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;background:#eee;color:#000;font-weight:800;font-size:13px;letter-spacing:.6px;cursor:pointer;user-select:none;box-shadow:0 10px 24px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.85);transition:.2s ease;-webkit-tap-highlight-color:transparent}.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)}.vs-bq-copy.is-copied{background:#0b8a2a;color:#fff;box-shadow:0 14px 30px rgba(0,0,0,.25)}</style>
<script>(function(){if(window.__VS_BQ_COPY_SEL__)return;window.__VS_BQ_COPY_SEL__=1;function copyBySelecting(el){var sel=window.getSelection&&window.getSelection();if(!sel)return false;var prevRanges=[];try{for(var i=0;i<sel.rangeCount;i++)prevRanges.push(sel.getRangeAt(i).cloneRange())}catch(e){}sel.removeAllRanges();var r=document.createRange();r.selectNodeContents(el);sel.addRange(r);var ok=false;try{ok=document.execCommand("copy")}catch(e){ok=false}sel.removeAllRanges();try{for(var j=0;j<prevRanges.length;j++)sel.addRange(prevRanges[j])}catch(e){}return ok}function targetNode(bq){return bq.querySelector("pre")||bq.querySelector("code")||bq}function build(){document.querySelectorAll(".post-body blockquote,.post-content blockquote,.entry-content blockquote").forEach(function(bq){if(bq.querySelector(":scope>.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.addEventListener("click",function(e){e.preventDefault();e.stopPropagation();var t=targetNode(bq);var ok=copyBySelecting(t);btn.textContent=ok?"COPIED":"FAILED";btn.classList.add("is-copied");clearTimeout(btn._t);btn._t=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.
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