search


Affiliate Links Notice

This website uses affiliate links as a means of generating revenue.

However, we do not recommend products and services that we believe will not be of interest to you.

We make it a point to recommend products and services that we like, and express our honest opinions about them regardless of an affiliate relationship with the products, goods, and services being recommended.

Zoya And Designs is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.com, Inc or its affiliates.

To know more about the use of affiliate links on this website please read our terms and conditions.


How To Style Your Own Click To Tweet Button For Your Blogger Blog

click to tweet box for your blogger blog

I'm a full-time graphic designer, which means that even in blogging I'm very particular about how I want things to look. I enjoy creating a visual identity for blogs, businesses and brands.

Last year, when I decided to start this blog I wanted to help new bloggers build their online presence, I wanted to offer affordable design services that don't burn a hole in my client's pocket.

After a lot of consideration, weighing the pros and cons I decided that my blog would be hosted on the blogger platform.

It's been quite some time that I've been seeing click to tweet boxes on a lot of blogs powered by self-hosted WordPress. I really love twitter, it's a fun and simple way of keeping up with all the things I love and so I quickly became interested in having a click to tweet box for my blog.

I searched and searched on Google but most of the results were for WordPress users. There was nothing for those on blogger!

I then turned to Facebook groups for help and was met with very off-topic replies, instead of offering me a solution people seemed more interested in convincing me that on blogger I don't own my content, that blogger is not at all customisable and that I can't monetise a blogger blog, all of which I know is not true.

And so I decided to make my own click to tweet box using HTML and CSS. I know there aren't a lot of plugins on Blogger, not many widgets either but that's because most of the things can be accomplished through coding.

Here's how you too can style your own click to tweet box for your blogger blog. I'm giving you a step-by-step detailed guide.




diy click to tweet box from html and css



Note: Always back-up your blog's template before you start to make any further changes to it.


How your click to tweet box will look


click to tweet box example


Using the instructions given below, this is what your box will look like. Don't worry, the colours and fonts can be matched to your branding. And I'll tell you how.


Installing the CSS


click theme in your blogger dashboard


Sign in to your blogger account and you'll be able to see your blog's dashboard. Now you want to click on "theme". 

click edit html

After clicking on the theme, you should be able to see a "Live on Blog" come up. Here you want to the "Edit HTML" button.

This will take you to the code section of your blog. Now click anywhere in the code section of your blog and then press Command + F (for Mac)  or CTRL + F (for PC) and a search box will pop up at the top right corner of the code section in your blogger blog.

search box


Now you need to type the following lines in this search box: 


]]></b:skin>

And then hit enter. This will bring up a highlighted text which says the same in your blog's code. Just above this code, paste the following code:

/* Click to tweet box CSS by http://www.zoyaanddesigns.com */ .ctt { background-color: #f3f3f3; padding: 25px; color: black; } .ctt a { color: black; font-size: 16px; } .ctt a.ctt-button { display: block; width: 107; float: right; background-color: black; color: white; padding: 5px; position: relative; right: -26px; top: 16px; text-transform: uppercase; text-align: center; font-family: "Monsterrat", sans-serif; } /* Click to tweet box CSS by http://www.zoyaanddesigns.com */

And save your theme. You have successfully installed your CSS all that's left now is to use the HTML code to go along with it.


Using HTML to go with the CSS you just installed 



<div class="ctt"> <a href="YOUR URL GOES HERE" target="_blank">YOUR TEXT GOES HERE</a> <a class="ctt-button" href="SAME URL GOES HERE" target="_blank"> CLICK TO TWEET</a></div>

Now copy this HTML and save it somewhere, I use Evernote (referral link) to save all my documents, you can use whatever suits you best.

Now you should go over to click to tweet and design your tweet, copy the link and paste the link where it says "YOUR URL GOES HERE" and the same link again at "SAME URL GOES HERE".

Put whatever text you like in the "YOUR TEXT GOES HERE" section.

After you're done putting in the URL and the text you should put the code that you have customised with your click to tweet link and your custom text in the HTML section of your blog post.

You can use it as often as you like, not only will it provide a break from all the text to your readers I'm sure it'll help you get a good amount of twitter engagement as well.


Features of this click to tweet box


  • This box is responsive, it will automatically adjust to your blog's responsive coding. 
  • Fonts and colours can be adjusted.
  • While a credit is appreciated it is not required (just don't remove the credits in the CSS code)


Customising this click to tweet box to match your blog's branding


I have kept the colours neutral so that they match almost any branding, but I understand that sometimes you just need things customised to suit your needs.

Here's how to edit the colours and fonts to suit your blog's needs:



/* Click to tweet box CSS by http://www.zoyaanddesigns.com */ .ctt { background-color: #f3f3f3; [edit this to change the background colour of your click to tweet box] padding: 25px; color: black; [edit this to change the colour of the font in your box] } .ctt a { color: black; font-size: 16px; } .ctt a.ctt-button { display: block; width: 107; float: right; background-color: black; [edit this to change the background colour of the click to tweet button] color: white; [edit this to change the background colour of the font in your click to tweet box's button] padding: 5px; position: relative; right: -26px; top: 16px; text-transform: uppercase; text-align: center; font-family: "Monsterrat", sans-serif; [edit this to change the font of your click to tweet button] } /* Click to tweet box CSS by http://www.zoyaanddesigns.com */

If you feel that all of this is just too much work and you don't have the time or energy to be able to do this yourself, you can hire me to do it for you.

The only requirement is that your blog must be hosted on blogger platform. In case your blog is on the WordPress platform please get in touch with me first so that I can see whether or not this is possible for your blog.



Hope you liked this tutorial, in case you run into a problem while installing this click to tweet box yourself then let me know through the comments section and I'll get back to you as soon as possible!

If you decide to purchase this service then you get lifetime support on it. No matter the problem, I'll look into it for you and help you fix it, including customisations to match your blog's branding.

Note: this service is only available for blogger blogs if you want something similar for your blog that is not hosted on blogger please get in touch with me first to see if this will work for you.




share

2 comments:

  1. Wow I admire you that you manage to do something when everybody else told you othervise. This will come in use when Ill start to tweet. Thanks a lot!

    ReplyDelete
    Replies
    1. Thank you for the compliment, if you get stuck, or need help, let me know :) I've always liked to challenge what people tell me I can't achieve :)

      Delete

Please consider clicking "Notify Me" checkbox so that you may be notified about the replies that have been left on your comment.

follow