HTML Ad Code Box on Blogger Website | Enter the code box in the blogger post
So, today I will tell you how to add a code box to a blogger post. Blogger is the best forum for newcomers who want to start their own blog without spending a cent. It gives you all the options to make your blog beautiful and make your blog look like a professional blog.
There are many professional blogs captured on blogger such as My Blogger tactics, Help Blogger etc. And every blogger starts their blogging journey from there to any other blog. Gives you the option to edit your Blogger Blog Template according to your preferences. You just need a basic knowledge of HTML and CSS.
When you write about a blog on your blogger you may be sharing a code that you will attach to the Template. It is best to share those codes in a separate code box in a way that looks stylish. It also helps visitors because they can easily copy the code into the code box.
1. Login to your blogger blog dashboard.
2. Copy the code to the "html code box" below
<textarea cols = "100" id = "htmlText" readonly = "" rows = "20" style = "background-color: # 1b1b1b; color: white; height: auto; overflow: auto; resize: none; width: 100 %; "> {---- Enter Your Code Here ----} </textarea> <button id =" htmlBtn "onclick =" copyhtml () "style =" background-color: # 4caf50; border: none; color: white; cursor: pointer; display: inline-block; font-size: 16px; margin: 4px 2px; padding: 10px 30px; text-align: center; text-decoration: none; "> Copy </button> < script> function copyhtml () {const text = document.querySelector ("# htmlText"); const btnText = document.querySelector ("# htmlBtn"); text.select (); document.execCommand ("copy"); btnText.textContent = "Copied"; setTimeout (function () {btnText.textContent = "Copy";}, 5000); } </script> <br /> <br />
3. Then go to "New Post"> "HTML view" Select
4. Paste your code there
5. Replace "Enter Your Code Here" with the code you like.
6. Now click on "Publish Button" and see it live.
Thank you.
No comments:
Post a Comment