How To Add Demo, Download and Buy Button In Blogger Post

How To Add Demo, Download and Buy Button In Blogger Post

This Tutorial will show you how to add demo, download and buy button in Blogger post like WordPress so that your blog becomes SEO friendly and User friendly.

Also Read:



{tocify} $title={Table of Contents}

Installing Button Plugin

Step 1 - Downloading Code Files

Download zip file from the link given below and extract it to get four codes.

{getButton} $text={Download} $icon={download} $color={#FF0035}

Step 2

Open all the four codes in Notepad++.

Step 3 - Installing Button Feature

Go to your Blogger Dashboard.

Step 4

Go to 'Theme' section.

Step 5

Click on Drop Down button.

Step 6

Click on 'Edit HTML' Option.

Step 7

Once the HTML gets fully loaded, click once anywhere on the HTML.

Step 8

Press 'Ctrl' + 'F' buttons from your keyboard at the same time to get a search box.

Step 9 - Deleting Pre-Installed Button code

Search .button CSS code in the theme and delete the code.

Step 10 - Adding 1ˢᵗ code

Search </head> And copy the 1ˢᵗ code and paste it above </head>

Step 11 - Adding 2ⁿᵈ code

Search ]]></b:skin> And copy the 2ⁿᵈ code and paste it above ]]></b:skin>

Step 12 - Adding 3ʳᵈ code

Search main script And again Copy the 3ʳᵈ code and paste it above main script of the theme.

Note:
If you can't find main script, search copyright which shows Theme Developer Attribution that must be located at the footer of the Theme code.

If you get the text copyright, just scroll down slowly to find the main script.

OR 

If you can't find copyright, search </body> that must be located at the last of the Theme code.

If you get the text </body>, just scroll up slowly to find the main script.{alertInfo}

Step 13

Click on 'Save' theme button.

How To Add Demo, Download and Buy Button In Blogger Post

Adding Buttons in Blog

Step 1

Go Back to Blogger Dashboard.

Step 2

Go to 'Posts' section.

Step 3

Click on the Desired Post to add the Buttons.

Step 4

Make sure you are in the 'Compose' mode of the post.

Step 5

In the 4ᵗʰ code, there are four shorcodes. The 1ˢᵗ shorcode is for demo button, 2ⁿᵈ shortcode is for download button, 3ʳᵈ shortcode is for buy button with shopping cart icon and 4ᵗʰ shortcode is for buy button with mastercard icon. 

Copy the desired shortcode from the 4ᵗʰ code and paste it in your Desired place of the post.

Step 6 

Select the whole shortcode And make it a link.

Step 7

Click on 'Update' post button and View your blog.

Congrats! we have successfully added the Colorful Buttons in our blog.

Watch This Video to Learn Visually


Thanks for Visiting!

{getButton} $text={Follow us} $icon={link} $color={#2980b9}

Previous Post Next Post