Blog Button Text Box Tutorial

Blog Button Text Box Tutorial

I have gotten a request for a tutorial on how to do the text box with the code for your button underneath the blog button (do you understand me? Hopefully you understand me). So without further ado, here it is!
  **I am still using Windows, Google Chrome, and Blogger as a platform. Again, you may not be able to follow this easily if youre using something different.
  **I am basing this on my tutorial on how to make a blog button, which can be found here.
  **I will do a tutorial on another platform if requested.

Once you have your button, youre going to want to share it, right?

First off, you can put it in the sidebar. Go into your dashboard, and click the "Layout" tab. Click "Add a Gadget" where you want it to be, then scroll down till you see this nifty little thing.

It should open up a box like this.

This is the coding you shall need to put into the content box.

<img src="YourButtonImageURL" alt="YourSiteTitle" /><div style="width: 123px; height: 125px; overflow: auto; border: 1px solid #666666;">&lt;a href=&#34;YourSiteURL&#34; target=&#34;_blank&#34;&gt;&lt;img src=&#34;YourButtonImageURL&#34; alt=&#34;YourSiteTitle&#34; width=&#34;125&#34; height=&#34;125&#34; /&gt;&lt;/a&gt;</div>

Confused? Yeah, me too (dont ask XD). Here is how I think it all fits together:

<img src="..." ~ This is where you tell the code where to get the image from.

alt="..." ~ This is where you tell the code what to say if the image is invalid. So it will show a little mini textbox with your blog name, if the picture isnt working.

<div style="..." ~ This is where you tell the code what to make the little text box look like, and what to say in it.
                             The numbers in blue ~ these change the width and height of the box. Play around with these.

Replace the bold bits with your own.

For example, mine would look like this:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZLlC2cJtKJmdJ8lBeR30DMY_VOP6nHXA9GXU8LTBnN9LrLk_xDPf59afMCwpmjLslVdCCNJeHw_DivHbg7QZLjZbm59At8Tu7a7W94wmP9HRZ1_i_BOpK3uvtZMePwTmCtEJBxrTRqRCR/h120/Blog+Button.jpg" alt="ThisBlogDoesNotEvenExist" /><div style="width: 123px; height: 125px; overflow: auto; border: 1px solid #666666;">&lt;a href=&#34;http://thisblogdoesnotevenexist.blogspot.com.au/&#34; target=&#34;_blank&#34;&gt;&lt;img src=&#34;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZLlC2cJtKJmdJ8lBeR30DMY_VOP6nHXA9GXU8LTBnN9LrLk_xDPf59afMCwpmjLslVdCCNJeHw_DivHbg7QZLjZbm59At8Tu7a7W94wmP9HRZ1_i_BOpK3uvtZMePwTmCtEJBxrTRqRCR/h120/Blog+Button.jpg" alt="ThisBlogDoesNotEvenExist&#34; alt=&#34;ThisBlogDoesNotEvenExist&#34; width=&#34;125&#34; height=&#34;125&#34; /&gt;&lt;/a&gt;</div>

Make sure that the quotes (") are straight. If theyre curved, just type them in again.

Yeaaah, its a handful, I know.

Alright, just paste that into the contents box, click save, and you should be good to go!

If you want to put it in a post, or a page, all you have to do is paste the code into the HTML tab up the top left corner:

I hope this tutorial helped! Thank you to the amazing Niranjana (is that what I call you?) from Drowning in This Sunlight for the request!