We'll pick each type of formatting options one by one to avoid any confusion or overlapping. Though you're of course free to try them in any order.
Formatting of Code Snippets
The reason to present code presentation style is the very first section is its consistent use in other sections. And, if you're running a technology blog where you frequently share code snippets with the visitors, you're surely going to love this feature.We can generally embed code in two different types within a blog post, i.e., inline and independent code blocks. Let's see examples of both of them.
This is an inline code example
<html class="no-js"> demonstrating direct embedding of short snippets right within the text.To use it within your blog posts, make sure to surround (enclose) the code snippet within the
<code> </code> tags. If you're embedding HTML or XML code (whether inline or as a block), do not forget to convert it into an escaped format.And, here's how an independent code block looks like.
<div class="animation-demo">
<div class="shape"></div>
</div>
Simple, minimal, and clutter-free! Isn't it so? To create an independent code block, you need to enclose it between the nested
<pre><code> tags as shown below.
<pre><code>
/* Write your code snippet here. */
</code></pre>
You can see how simple it is to highlight your code snippets within the posts. Let's move ahead and find out other styling options available at our disposal.
Highlighting and Presentation of Text Blocks
While writing long-form, we often want to highlight a section of text to draw reader's attention. It's a simple yet effective strategy to make the content—more scannable.This template offers two different options for the same. Let's check out both the content boxes. The first one is generally used to highlight normal but important content.
This template has a blazing-fast code base and is ideal for content-heavy blogs. Try it and see the difference!
To use this gray box, use the
.note CSS class with the <p> tag. An example of the same is shown below. See how easy it is.
<p class="note">
Write your text here...
<p>
Similarly, there's another content box which is comparatively much louder than the first one and is generally used to draw immediate attention of the reader. Here's an example.
Blogger template's SEO settings are quite easy to configure.
And, for this one, add the
.alert class to the <p> tag. Here's how to do it.
<p class="alert">
Write your text here...
<p>
You can freely use both these content boxes in your blog posts—whenever required. Just make sure to not overdo it as it may make the post, too loud.
Styling and Alignment of Blog Post Images
Now, this one is my favorite and I am dead sure you'll be delighted as well. Newbies often struggle to properly align and style the images used in a blog post.Before we move ahead, two important things need to be emphasized. It's image size and its optimization.
- Image resizing - The images need to be in a proper size. For this very template, the maximum recommended image width is 655 pixels.
Though one can use a larger image, I'll advise them against going over the recommended width. You can easily reduce the width (if needed), once you have the recommended size. - Image optimization - Once you have the image with the right dimensions, compress it to make sure your blog posts load faster—even on slow connections.
With these two important image usage concepts at our hands, let's move forward and tame various image management routines—like a pro!
First, we'll center-align an image of the recommended width. Here's a sample image.
Now, because an image with the recommended width covers the entire width of the post content area, we cannot visualize, if this photo is actually centered or not.
To confirm that our image alignment system is indeed working correctly, let's reduce the size of this image and then center-align it.
Yay, it works! But, how do we do it? It's no rocket science. All you need to do is to add the
align="center" attribute to the <img> tag. A sample is shown below.
<img align="center" src="..." alt="..." />
So, a single attribute addition is all we need to do various types of image alignments in a blog post. Let's move forward.
The image on the left is obviously left-aligned. To achieve this alignment, use the align="left" attribute for the <img> tag.Make sure to resize the image to the right proportions before attempting such alignments. If you're using a full-width image, a right or left alignment will not be possible. Note: On smaller devices, left or right-aligned images will be automatically center-aligned for better reading experience.
Yes, you've guessed it right. For aligning this image to the right, I've added align="right" attribute to the <img> tag.Images with no definite boundary and having the same background color as the content section looks great when they're aligned to the left or right. I generally prefer left-aligned images and recommend the same for you too. And, if possible, give preference to full-width or center-aligned images.
Simple alignment doesn't cut the ice. How about adding a custom frame or a border to an image? This template offers two frame options for the images.
The first one is a standard frame and the second one is a thin frame. Here's a demo of both the frames.
This is a standard size frame and can be easily added to an image by using a CSS class
class="frame" attribute for the <img> tag. And, here's the next one.This is a thin frame. To use it, add the CSS class
class="thin_frame" to the <img> tag.Isn't it easy? So, this finishes the demo of various styling options available with this custom template. Make use of them to create evergreen content for your readers.
Just a test comment!
ReplyDeleteThis is exactly what I am looking for, except I would like the side bar to be "sticky". How would I customize it? Also, once I instal my template, can i use a "GUI" version of it for making posts? I'm new to all of this. Please explain. Thank you.
ReplyDeleteYes, you can create posts in either mode.
DeleteUnfortunately, the sidebar isn't sticky and making it so requires changes in the entire layout, which isn't possible right away.
May be in future, I release a sticky sidebar version.
hello sir, thank you so much for your tutorial, may i use this as base template?
ReplyDeleteYes of course you can use it.
DeleteJust add the <!--more--> tag in the blog post wherever you want to create a read more breakpoint.
ReplyDelete