Everybody likes beautiful things. Most of the tech bloggers share their code through their blogs. It's actually a great work. So that newbie can learn code or computer programming.
For displaying the code through their blog they use a lot of Javascript and CSS codes. Which will slow down your website. Today I will show you a simple CSS trick, so that you can also share your code nicely.
I'm using Blogger (powered by Google) website for blogging. It's under ablogspot domain.
Blogger website style depends on Blogger template style. If the template developer add the style for showing the HTML/CSS/Javascript/PHP code properly and if you like the style, then you no need to add more style through the blog.
But if on the template have no styles for displaying <code> properly, then you can try my CSS codes. If you don't use any styles, user will feel uneasy or tease for reading your blog. The code will show as broken code. They can't use your shared code properly. So it's important to give styles for sharing code, so that the user can see easily or copy it quickly.
Let's see what I'm going to show you. Imagine you want to share some CSS code. If you use the style, then your shared CSS will look like as-
How to you can do it?
1. Go to Blogger dashboard and login with your Gmail account.
2. Go to Template section (from left dashboard menu) and click the 'Edit HTML'. See the screenshot, please- http://prntscr.com/aisnu1
3. The template will open and paste the below CSS code in the <style> tag.
4. Now click 'Save Template' button
5. Go to 'New Post', write posts and codes. Whichcode you want share mark it and click 'Blockquote' icon. See the screenshot, please- http://prntscr.com/aisomr
6. Publish the post and see the post through your blog homepage.
You can change the styles as you want. Like as background image, color, font-size etc.
That's all.
If you face any problem, please leave a comment. Moderation team will reply you with a proper answer.
For more Tutorials keep visiting our Blog.
Share it with your friend through Facebook, Google+, Twitter etc.
Thanks.
For displaying the code through their blog they use a lot of Javascript and CSS codes. Which will slow down your website. Today I will show you a simple CSS trick, so that you can also share your code nicely.
I'm using Blogger (powered by Google) website for blogging. It's under a
Blogger website style depends on Blogger template style. If the template developer add the style for showing the HTML/CSS/Javascript/PHP code properly and if you like the style, then you no need to add more style through the blog.
But if on the template have no styles for displaying <code> properly, then you can try my CSS codes. If you don't use any styles, user will feel uneasy or tease for reading your blog. The code will show as broken code. They can't use your shared code properly. So it's important to give styles for sharing code, so that the user can see easily or copy it quickly.
Let's see what I'm going to show you. Imagine you want to share some CSS code. If you use the style, then your shared CSS will look like as-
/* Post Blockquote Start */. post blockquote {
background : #333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUMHpbilNEF5JgCvBkTvXnXQCZRgKLLB-j14bAd6NJeOCUbxc_W8r1-3xjSdEYzZHaWLBNv-na2VoQlzOQUzHD1vJX00XG4-kXBIBVpV1nnxs6gqYbtaY_RbbsT1EHZupupdZmkXyy00g/s1600/1.png);
background -position: top left;
background -repeat: repeat-y;
margin : 0 20px;
padding : 10px 20px 10px 45px;
border -top: 2px solid #DDD;
border -right: 5px solid #666;
border -left: 2px solid #DDD;
border -bottom: 5px solid #666;
font -size: 16px;
color : #fff;
}
/* Post Blockquote End */
How to you can do it?
1. Go to Blogger dashboard and login with your Gmail account.
2. Go to Template section (from left dashboard menu) and click the 'Edit HTML'. See the screenshot, please- http://prntscr.com/aisnu1
3. The template will open and paste the below CSS code in the <style> tag.
/* Post Blockquote Start */. post blockquote {
background : #333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUMHpbilNEF5JgCvBkTvXnXQCZRgKLLB-j14bAd6NJeOCUbxc_W8r1-3xjSdEYzZHaWLBNv-na2VoQlzOQUzHD1vJX00XG4-kXBIBVpV1nnxs6gqYbtaY_RbbsT1EHZupupdZmkXyy00g/s1600/1.png);
background -position: top left;
background -repeat: repeat-y;
margin : 0 20px;
padding : 10px 20px 10px 45px;
border -top: 2px solid #DDD;
border -right: 5px solid #666;
border -left: 2px solid #DDD;
border -bottom: 5px solid #666;
font -size: 16px;
color : #fff;
}
/* Post Blockquote End */
4. Now click 'Save Template' button
5. Go to 'New Post', write posts and codes. Which
6. Publish the post and see the post through your blog homepage.
You can change the styles as you want. Like as background image, color, font-size etc.
That's all.
If you face any problem, please leave a comment. Moderation team will reply you with a proper answer.
For more Tutorials keep visiting our Blog.
Share it with your friend through Facebook, Google+, Twitter etc.
Thanks.
