We all have to deal with code snippets in one post or another.Especially when your interested in posting about widgets , blog design or anything that has the 'Editing Template' part.
Now the problem with these code snippets is that, they don't just look too good when you put them just the same way as your content.
Sure, you can use different colors to make it look different and the same time make it easy to pick.
But why should you stick with it when there are better ways to put it on your blog ?
Today i'll be showing you how you can post code snippets in a way that will suit your blog well and will please your readers too.
Add Codes In Blog Posts :
1. Go to blogger dashboard and choose your blog.
2.Now head to the template section of the blog and click 'Edit Template.
3.Press Ctrl + f to get the search bar and search for this code :
</b:skin>
4.Paste the following code before the tag given above.
.snippet{
background: grey;
background-image:url('image url');
font: 13px 'Courier New', Courier, monospace;
line-height: 16px;
margin: 10px 0 10px 10px;
overflow: auto;
padding: 10px 10px 10px; width: 90%;
color: black;
}
Customizing the Code Snippet :
Don't forget to put your background image url, if you don't want any background image in your code snippets then just leave it as it is.
You can change the background color or the font color according to your blogs appearance.
Putting the Snippet Code in Blog Posts :
Now all you'v got to do to make the code snippet appear the way you want is to put the code in between the <div class='snippet'> </div>tags.
I'll show you
1.In the post editor click Html.
2.Now find the code snippet.
3.Put it in between <div class='snippet'> , </div> tags.
That was all required to give your code snippets a beautiful look.Just put the code snippets in between the the tags i mentioned above, while preparing a post.
Share your Views :
If you have any queries regarding this post so don't forget to leave a comment below and if you liked the idea then do consider sharing it.
Which look are you interested for code snippets ?
2.Now find the code snippet.
3.Put it in between <div class='snippet'> , </div> tags.
That was all required to give your code snippets a beautiful look.Just put the code snippets in between the the tags i mentioned above, while preparing a post.
Share your Views :
If you have any queries regarding this post so don't forget to leave a comment below and if you liked the idea then do consider sharing it.
Which look are you interested for code snippets ?
No comments:
Post a Comment