HTML and CSS codes for your Blogger/site Part Three
Last updated Blog:
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:
Make post labels appear on the homepage
I found this information on Tutesinside.<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.
It should look something like this:
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.
It will look something like this when finished:
<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>
lt should look like this when done before and after being clicked:
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;}
Make a popup work on FreeflarumTo 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.
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.
I found the following information at tialwizards.in
To add a copy button to your Blockquotes, you'll have to CSS edit yourself styling the way you want and getting rid of the buttons you don't want etc. Before you're able to do that you will need to complete the following:
Head to the HTML part of your Blogger, and paste the following above </head>:
<style type='text/css'>.at-quote-share .copyit span.copied::after{content:'Copied ';color:#fff}blockquote.at-social-share { background-color: #fff; box-shadow: 0 2px 14px -4px rgb(0 0 0 / 20%); border-radius: 6px; margin-right: 1%; margin: 1.5em 0px 1.5em 0px; padding-bottom: 1.1rem; border: 2px solid; border-image-slice: 1; padding-top: 3.1rem; border-image-source: linear-gradient(to left, #f5d020, #f53803); padding-right: 1.1rem; padding-left: 1.1rem; text-align: center; display: block; } blockquote.at-social-share:before{ content:none; } blockquote.at-social-share p { line-height: 1.5;margin:0; } blockquote.at-social-share .at-quote-share { padding-top: 7px; margin-left: 10px; text-align: center; justify-content: center; align-items: center; display: flex; font-size: 12px; text-transform: uppercase; margin: 0; color: #444; margin-top: 13px; padding-bottom: 8px; } blockquote.at-social-share .at-quote-share span { font-size: 12px; font-style: normal; padding: 0px; padding-top: 4px; padding-right: 11px; word-break: initial; } blockquote.at-social-share .at-quote-share a {font-size: 22px; padding: 4px 20px; line-height: 1.4; margin: 0 3px; cursor: pointer; position: relative; color: #000; text-decoration: none; word-break: initial; } blockquote.at-social-share .at-quote-share a:hover {transition: .3s; } blockquote.at-social-share .at-quote-share a.icon-facebook { background: #3b5998; font-size: 15px; box-shadow: 0 3px 0 0 #91a6d4; border-radius: 15px; color: #fff; width: auto; } blockquote.at-social-share .at-quote-share a.icon-whatsapp { background: #0f9806; font-size: 15px;box-shadow: 0 3px 0 0 #8cfa85; border-radius: 15px; color: #fff; width: auto; } blockquote.at-social-share .at-quote-share a.icon-telegram { background: #32afed; font-size: 15px;box-shadow: 0 3px 0 0 #8ad1f5; border-radius: 15px; color: #fff; width: auto; } blockquote.at-social-share .at-quote-share .copyit {box-shadow: 0 3px 0 0 #ff9f80; background: #cc3300 ; font-size: 15px; font-style: normal; border: none; border-radius: 15px; color: #fff; width: auto; } blockquote.at-social-share .at-quote-share span.copied { background: #049a10; color: #fff; position: absolute; top: 0; left: 0; display: none; right: 0; text-align: center; padding: 5px; font-size: 15px; border-radius: 15px; } @media only screen and (max-width: 380px) { blockquote.at-social-share .at-quote-share a { padding: 4px 13px; } } span.q-share::after{content:'Share:';color:#666} .at-quote-share .copyit::after{content:'Copy ';color:#fff} .at-quote-share i.at-twitter::after{content:'';background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z' fill='%23fff'/%3E%3C/svg%3E") center / 20px no-repeat; width:20px; height:20px;display: block;} .at-quote-share i.at-whatsapp::after{content:'';background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91C2.13 13.66 2.59 15.36 3.45 16.86L2.05 22L7.3 20.62C8.75 21.41 10.38 21.83 12.04 21.83C17.5 21.83 21.95 17.38 21.95 11.92C21.95 9.27 20.92 6.78 19.05 4.91C17.18 3.03 14.69 2 12.04 2M12.05 3.67C14.25 3.67 16.31 4.53 17.87 6.09C19.42 7.65 20.28 9.72 20.28 11.92C20.28 16.46 16.58 20.15 12.04 20.15C10.56 20.15 9.11 19.76 7.85 19L7.55 18.83L4.43 19.65L5.26 16.61L5.06 16.29C4.24 15 3.8 13.47 3.8 11.91C3.81 7.37 7.5 3.67 12.05 3.67M8.53 7.33C8.37 7.33 8.1 7.39 7.87 7.64C7.65 7.89 7 8.5 7 9.71C7 10.93 7.89 12.1 8 12.27C8.14 12.44 9.76 14.94 12.25 16C12.84 16.27 13.3 16.42 13.66 16.53C14.25 16.72 14.79 16.69 15.22 16.63C15.7 16.56 16.68 16.03 16.89 15.45C17.1 14.87 17.1 14.38 17.04 14.27C16.97 14.17 16.81 14.11 16.56 14C16.31 13.86 15.09 13.26 14.87 13.18C14.64 13.1 14.5 13.06 14.31 13.3C14.15 13.55 13.67 14.11 13.53 14.27C13.38 14.44 13.24 14.46 13 14.34C12.74 14.21 11.94 13.95 11 13.11C10.26 12.45 9.77 11.64 9.62 11.39C9.5 11.15 9.61 11 9.73 10.89C9.84 10.78 10 10.6 10.1 10.45C10.23 10.31 10.27 10.2 10.35 10.04C10.43 9.87 10.39 9.73 10.33 9.61C10.27 9.5 9.77 8.26 9.56 7.77C9.36 7.29 9.16 7.35 9 7.34C8.86 7.34 8.7 7.33 8.53 7.33Z' fill='%23fff'/%3E%3C/svg%3E") center / 20px no-repeat; width:20px; height:20px;display: block;} .at-quote-share i.at-facebook::after{content:'';background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2.04C6.5 2.04 2 6.53 2 12.06C2 17.06 5.66 21.21 10.44 21.96V14.96H7.9V12.06H10.44V9.85C10.44 7.34 11.93 5.96 14.22 5.96C15.31 5.96 16.45 6.15 16.45 6.15V8.62H15.19C13.95 8.62 13.56 9.39 13.56 10.18V12.06H16.34L15.89 14.96H13.56V21.96A10 10 0 0 0 22 12.06C22 6.53 17.5 2.04 12 2.04Z' fill='%23fff'/%3E%3C/svg%3E") center / 20px no-repeat; width:20px; height:20px;display: block;}</style>
Again, now just above the </head>: tag, paste the following:
<link href='https://cdn.statically.io' rel='dns-prefetch preconnect'/> <script src='https://cdn.statically.io/gh/anupamxxx/anutrickzv1/master/copy-to-clipboard.js'/>
Then just above the </body> paste the following:
<script src='data:text/javascript;base64,ICAgZXZhbChmdW5jdGlvbihwLGEsYyxrLGUsZCl7d2hpbGUoYy0tKXtpZihrW2NdKXtwPXAucmVwbGFjZShuZXcgUmVnRXhwKCdcXGInK2MrJ1xcYicsJ2cnKSxrW2NdKX19cmV0dXJuIHB9KCcyOCAxMj1cJzwxMyAwPSI2LTI3LTEiPlxcNTw4IDA9XFxcJzI2LTFcXFwnPjwvOD5cXDU8MiAgMD0iMy05IiAxMD0iMS05LTMiPjw0IDA9IjYtOSI+PC80PjwvMj5cXDUgPDIgMjQ9IjIzIiAwPSIzLTciIDIyLTIxPSIxLzcvMSIgMTA9IjEtNy0zIj48NCAwPSI2LTciPjwvND48LzI+XFw1PDIgMD0iMy0xOSIgMTA9IjEtMTEtMyI+PDQgMD0iNi0xMSI+PC80PjwvMj5cXDU8MiAwPSIxNCI+PDggMD0iMTYiPjwvOD48LzI+IDwvMTM+XCc7MTcoIjE4IikuMjAoIjYtMjUtMSIpLjE1KDEyKTsnLDEwLDI5LCdjbGFzc3xzaGFyZXxhfGljb258aXxufGF0fHdoYXRzYXBwfHNwYW58ZmFjZWJvb2t8aWR8dHdpdHRlcnxzaGFyZV9odG1sfGRpdnxjb3B5aXR8YXBwZW5kfGNvcGllZHxqUXVlcnl8YmxvY2txdW90ZXx0ZWxlZ3JhbXxhZGRDbGFzc3xhY3Rpb258ZGF0YXxfMHx0YXJnZXR8c29jaWFsfHF8cXVvdGV8dmFyJy5zcGxpdCgnfCcpKSk7ZXZhbChmdW5jdGlvbihwLGEsYyxrLGUsZCl7d2hpbGUoYy0tKXtpZihrW2NdKXtwPXAucmVwbGFjZShuZXcgUmVnRXhwKCdcXGInK2MrJ1xcYicsJ2cnKSxrW2NdKX19cmV0dXJuIHB9KCcwKCIuMTgiKS41KDYoKXsxPTAoMikuNygiOCIpLjkoKS40KCIxMSIpLjEyKCJcXDEwXFwxMyIpLjE0KCkuMygpLDAoMikuMTUoIjE2LTE3LTMiLDEpfSk7JywxMCwxOSwnalF1ZXJ5fGNvb2x8dGhpc3x0ZXh0fGZpbmR8ZWFjaHxmdW5jdGlvbnxwYXJlbnRzfGJsb2NrcXVvdGV8Y2xvbmV8cnxicnxwcmVwZW5kfG58ZW5kfGF0dHJ8ZGF0YXxjbGlwYm9hcmR8Y29weWl0Jy5zcGxpdCgnfCcpKSk7ZXZhbChmdW5jdGlvbihwLGEsYyxrLGUsZCl7d2hpbGUoYy0tKXtpZihrW2NdKXtwPXAucmVwbGFjZShuZXcgUmVnRXhwKCdcXGInK2MudG9TdHJpbmcoYSkrJ1xcYicsJ2cnKSxrW2NdKX19cmV0dXJuIHB9KCcwKHkpLmgoImciLCIjZi0yLWQiLGMoKXtiIGU9MCg0KS44KCI3IikuNigpLjUoImkiKS5hKCJcXHJcXG4iKS5qKCkuaygpLG89Imw6Ly9tLjIucC8zLzMucT91PSIrMS5zLnQrIiZ2PSIrZTsxLncoeChvKSwiOSIpfSk7JywzNSwzNSwnalF1ZXJ5fHdpbmRvd3xmYWNlYm9va3xzaGFyZXJ8dGhpc3xmaW5kfGNsb25lfGJsb2NrcXVvdGV8cGFyZW50c3xfMHxwcmVwZW5kfHZhcnxmdW5jdGlvbnxpY29ufHxzaGFyZXxjbGlja3xvbnxicnxlbmR8dGV4dHxodHRwc3x3d3d8fHxjb218cGhwfHxsb2NhdGlvbnxocmVmfHxxdW90ZXxvcGVufGVuY29kZVVSSXxkb2N1bWVudCcuc3BsaXQoJ3wnKSkpO3ZhciBfMHg0ZWQ3PVsiXHg2M1x4NkNceDY5XHg2M1x4NkIiLCJceDIzXHg3M1x4NjhceDYxXHg3Mlx4NjVceDJEXHg3N1x4NjhceDYxXHg3NFx4NzNceDYxXHg3MFx4NzBceDJEXHg2OVx4NjNceDZGXHg2RSIsIlx4NjhceDc0XHg3NFx4NzBceDczXHgzQVx4MkZceDJGXHg3N1x4NjFceDJFXHg2RFx4NjVceDJGXHgzRlx4NzRceDY1XHg3OFx4NzRceDNEIiwiXHg3NFx4NjVceDc4XHg3NCIsIlx4NjVceDZFXHg2NCIsIlx4MERceDBBIiwiXHg3MFx4NzJceDY1XHg3MFx4NjVceDZFXHg2NCIsIlx4NjJceDcyIiwiXHg2Nlx4NjlceDZFXHg2NCIsIlx4NjNceDZDXHg2Rlx4NkVceDY1IiwiXHg2Mlx4NkNceDZGXHg2M1x4NkJceDcxXHg3NVx4NkZceDc0XHg2NSIsIlx4NzBceDYxXHg3Mlx4NjVceDZFXHg3NFx4NzMiLCJceDBEXHgwQVx4MERceDBBXHgyMFx4MkRceDc2XHg2OVx4NjFceDNBIiwiXHg2OFx4NzJceDY1XHg2NiIsIlx4NkNceDZGXHg2M1x4NjFceDc0XHg2OVx4NkZceDZFIiwiXHg1Rlx4NjJceDZDXHg2MVx4NkVceDZCIiwiXHg2Rlx4NzBceDY1XHg2RSIsIlx4NkZceDZFIl07alF1ZXJ5KGRvY3VtZW50KVtfMHg0ZWQ3WzE3XV0oXzB4NGVkN1swXSxfMHg0ZWQ3WzFdLGZ1bmN0aW9uKCl7dmFyIF8weDJmYmF4MT1fMHg0ZWQ3WzJdKyBqUXVlcnkodGhpcylbXzB4NGVkN1sxMV1dKF8weDRlZDdbMTBdKVtfMHg0ZWQ3WzldXSgpW18weDRlZDdbOF1dKF8weDRlZDdbN10pW18weDRlZDdbNl1dKF8weDRlZDdbNV0pW18weDRlZDdbNF1dKClbXzB4NGVkN1szXV0oKSsgXzB4NGVkN1sxMl0rIHdpbmRvd1tfMHg0ZWQ3WzE0XV1bXzB4NGVkN1sxM11dO3dpbmRvd1tfMHg0ZWQ3WzE2XV0oZW5jb2RlVVJJKF8weDJmYmF4MSksXzB4NGVkN1sxNV0pfSk7ZXZhbChmdW5jdGlvbihwLGEsYyxrLGUsZCl7d2hpbGUoYy0tKXtpZihrW2NdKXtwPXAucmVwbGFjZShuZXcgUmVnRXhwKCdcXGInK2MrJ1xcYicsJ2cnKSxrW2NdKX19cmV0dXJuIHB9KCc2KDMxKS4xNigiMTUiLCIjMTQtNS0xMyIsMTIoKXsxMSAzPSI5Oi8vNS44LzcvMTc/Mj0iKzYoMTkpLjIwKCIxOCIpLjIxKCkuMjIoIjIzIikuMjQoIlxcMVxcMCIpLjI1KCkuMigpKyJcXDFcXDBcXDFcXDAgLTI2OiIrNC4yNy4yODs0LjI5KDMwKDMpLCIxMCIpfSk7JywxMCwzMiwnbnxyfHRleHR8dHx3aW5kb3d8dHdpdHRlcnxqUXVlcnl8aW50ZW50fGNvbXxodHRwc3xfMHx2YXJ8ZnVuY3Rpb258aWNvbnxzaGFyZXxjbGlja3xvbnx0d2VldHxibG9ja3F1b3RlfHRoaXN8cGFyZW50c3xjbG9uZXxmaW5kfGJyfHByZXBlbmR8ZW5kfHZpYXxsb2NhdGlvbnxocmVmfG9wZW58ZW5jb2RlVVJJfGRvY3VtZW50Jy5zcGxpdCgnfCcpKSk7bmV3IENsaXBib2FyZEpTKCcuY29weWl0Jyk7alF1ZXJ5KGRvY3VtZW50KS5vbigiY2xpY2siLCIuY29weWl0IixmdW5jdGlvbigpe2pRdWVyeSh0aGlzKS5maW5kKCJzcGFuIikuZmFkZUluKDUwMCksalF1ZXJ5KHRoaXMpLmZpbmQoInNwYW4iKS5mYWRlT3V0KDFlMyl9KTsg '/>
Via CSS you can make the copy button appear at the top by adding the following CSS code:
blockquote {position: relative !important;}
blockquote.at-social-share .at-quote-share .copyit {position: absolute; top: 10px; right: 20px;}
Once you're done, with all the CSS edits you can do, like removing unwanted buttons like I show you how to do here, and making the boarder black like I show you how to do here, it should end up something like this:
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 your Blogger - Part four
Thank you!
_LI.jpg)
I'd love feedback about this Blog's coding series. Feel free to leave me some!
ReplyDelete