Yes, we always try hard to make our website look professional and more informative than we try many script, CSS and HTML codes. But our today's article will help you getting a Code Box For Your Blogger Website which will make your website look professional.
Simply, A Code Box is beneficial for all bloggers because it gives a style for our code which we share in our website.
So, we will understand about...
You May Like: Ranking a BlogSpot Easily on Google | Apply SEO
How To Add Code Box In A Blogger Posts With CSS
As you all know that when we share any code in our website then we need some code box or any other tool to store our code in that box but when we don't know about How To Add Code Box especially when you using a Blogger Website.
Searching for web Hosting for your website... Try my recommended Hosting.
But don't worry when I'm here to help you about How To Add Code Box. But, before it I would like to say that we should know that What is code box? And how helpful is it. And How it's looks.
*A Code Box is a tool in which you can store or mention any code which looks professional and gives high traffic which leads less bounce rate.
And this can be created easily only with CSS and in last I will show you how to use this code in your blogger posts.*
See the given below Code Box that we will create and follow the given below steps to imply in your Blogger html.
This Is The Code Box We will add In our Blogger Posts. So let's start with it...
Follow The Steps Given Below To Add Code Snippet/Box In Blogger Posts With CSS
1. Login into your Blogger Blog Dashboard.
2. Go To Theme section in Blogger Dashboard and Click Edit HTML.
3. Click anywhere in your HTML Code and press Ctrl + F key to Open Search Box.
Note: The Code that I will give For the Code Box is valid for both AMP Website and Non-Amp Website.
4. Write or paste code in your Search Box ]]</b:skin> If you're using a Non-Amp Website otherwise Search For <style amp custom='amp custom'> If and only if you're using and Amp Website.
5. Just above ]]</b:skin> paste the Code Box CSS Code which is given below (Only For Non-Amp Website).
6. Just below <style amp custom='amp custom'> paste the Code Box CSS Code which is given below (Only For Amp Website).
Note: This is the common Code For Code Box In Blogger Posts(For Both Amp & Non-Amp Website).
.code { background:#f5f8fa; background-repeat:no-repeat; border: solid #FFA500; border-width: 1px 1px 1px 20px; color: #000000; font: 15px 'Courier New', Courier, monospace; line-height: 16px; margin: 10px 0 10px 10px; max-height: 200px; min-height: 16px; overflow: auto; padding: 28px 10px 10px; width: 90%; }
.code:hover { background-repeat:no-repeat; }7. Now Click on Save Template and you are finally done.
Till now we have learn How To Add Code Box In Blogger Posts but we don't know How to use the code box in Blogger Posts.
But don't worry when I'm here to help you to guide through whole article so that we don't lose any importance of it.
So learn How use the Code Box...
Searching for web Hosting for your website... Try my recommended Hosting
How To Use Code Box In A Blogger Posts.
To Use the code box in your blogger posts than follow the following steps carefully:
1. Whenever you want to share the code in your articles than simply click on Html Tab of your blogger post editor.
2. Now write or paste the code given below in blogger posts editor.
<div class='code'>Your Code Here</div>
3. Replace your desired code that you want to share with Your Code Here.
4. Now save it or publish it and see a live code box in your blogger posts.
This is the full guide about How To Add Code Box In Blogger Posts Only With CSS. So if you have any questions or any doubts than comment me and yes don't forget to share this.
Congrats! Today you learned more about How To Add Code box In Blogger/Blogspot Posts with CSS so always be the first to comment us and tell how helpful is this article.
Thanking you! For giving your precious time to us.
Please visit us again...