Blogger Shortcodes and Page Markups v2.0

Exciting news! The cool features made by Sora Blogging Tips have gotten even better and will be included in all the new blogger templates we're bringing out! These fresh updates give you the power to add buttons, alerts, contact forms, and code boxes, and tweak the layout with ease.

 

And guess what? These functions work just like before, but now they're even simpler and more intuitive to use in your blogger template. Isn't that awesome? Get ready to make your blog shine brighter than ever! 🚀

 

How To Setup These Blogger Features?

Drop Caps

Just head over to your blog posts section and click on "Edit" for the post you want to change or hit "Add New" to start fresh. Then, switch to the HTML area of the post editor. Now, here comes the fun part: add the following code right at the beginning.

 

<span class="firstcharacter">L</span>

 

Typography

 

Just hop on over to your blog posts section, and you'll see an option to either edit an existing post or create a brand new one. Once you're in the editor, simply highlight any text you want to jazz up and click on the tools provided above the editor. It's like giving your words a little makeover! Take a look at the image below for a clearer idea.

 

 

There are mainly 9 options that you can use to create awesome-looking typography.

1.    Text Size

2.    Text Heading Style

3.    Bold

4.    Italic

5.    Underline

6.    Strikethrough

7.    Text color

8.    Text Highlighter

9.    Link

 

Blockquote

 

If you want to tweak your blog posts, just hop over to your blog section. You can either spruce up your existing posts by hitting the "Edit" button or pour your thoughts into a fresh one by adding a new post. Once you're in the editing zone, simply pick out the text you want to give a personal touch to and hit the "blockquote" option floating above your editor. Easy peasy! Just take a peek at the image below for a little visual guidance.

 

Bullet And Lists

Access your blog Posts > click Edit on any of your posts or add a new post. then select any text you want to customize and click on the bullets and lists option available above your post editor. check the below image for preference.

1.1 - Post Buttons

Shortcode: {getButton} $text={Button Text} $icon={Icon Name} $color={Hex Color}
Available Icons: preview, download, link, cart, share, info

Icon and Color are not required.

Example:

 

1.2 - Alert Boxes

Shortcodes: {alertSuccess}, {alertInfo}, {alertWarning}, {alertError}

Write whatever you want and add the shortcode, then select all the desired text including the shortcode, and add the Quote Text style.

Example:

1.3 - Bordered Table

Access your blog Posts > click Edit on any of your posts or add a new post. then switch to the HTML area of the post editor and add the below coding anywhere you want to make the table appear.

 

<table>

   <thead>

      <tr>

         <th>Firstname</th>

         <th>Lastname</th>

         <th>Email</th>

      </tr>

   </thead>

   <tbody>

      <tr>

         <td>John</td>

         <td>Doe</td>

         <td>[email protected]</td>

      </tr>

      <tr>

         <td>Mary</td>

         <td>Moe</td>

         <td>[email protected]</td>

      </tr>

      <tr>

         <td>July</td>

         <td>Dooley</td>

         <td>[email protected]</td>

      </tr>

   </tbody>

</table>

 

Change details with your own text.

 

1.4 - Contact Form

Shortcode: {contactForm}

Add the shortcode in the desired area, then select the shortcode and add the Bold style.

Example:

 

1.5 - Code Box

Shortcode: {codeBox}

Add the Code and add the shortcode, Then select all the desired codes including the shortcode, and add the Quote Text style.

Example:

 

1.6 - Contact Form

Shortcodes: {fullWidth}, {leftSidebar}, {rightSidebar}

Add the shortcode at the end of the content, Then select the shortcode and add the Bold style.

Example: