Hello again you guys! I've been extremely busy with work and my personal life this past week, so my motivation to write blog posts has unfortunately been way down, which stinks, because I've been trying to get on an actual blogging schedule. It's hard when you work days/nights/evenings/whenever and can't commit your time to anything permanently.
Anyway, as my Gimp 101/Blogger bliss series' kicked off, they've been my most popular posts to date, so I thought I would make another one. I didn't mention this one on my original Blogger Bliss because I just thought it up today, but I thought it would go nicely hand in hand with my share icons, which were widely well received.
Today, I wanted to talk about Bloglovin' and how you can change up the original counter and 'follow me on' buttons. Every blog and its dog has a Bloglovin' counter or share button, and they're all the basic ones that the website provides you with, but it's very simple to make your own.
Firstly, to access Bloglovin's original 'widgets', click here. They offer you two different colours for their counters: light pink and light blue, and they offer you two different sizes for their 'Follow me on Bloglovin'!' widgets. They also offer you some artist icons, which are pretty awesome too.
Firstly, let's look at the code for the widget. I've pasted it onto gimp, simplified it for the sake of this tutorial, and broken it up into the main elements of the code so that we can look at it in separate parts. Below is the code you would copy for one of the counter widgets. I've removed the sources for the image, removed my blog ID number, and removed the direct link to my Bloglovin' profile. These values are all different depending on who's copying the code, so they aren't important.
Secondly, we can ignore the top line. The script is what allows the counter to work, and we needn't worry about that. The class (second line) is what's defining the widget, the image source is the image for the widget, and following that (third line) is the link to your bloglovin' profile (where it will lead your readers when they click on the counter).
The last line is the other image element, and the name of your blog. The "alt=" in that part of the code means that when someone hovers over the counter, that is the text that will appear. It will automatically have the name of your blog filled in, but you can change that text to whatever you want, if you'd prefer.
The only parts of this code that we are going to concern ourselves with are the parts of the code following 'img-src='. These are the parts of the code that affect the image. Everything else will stay intact (mainly the counter). In every spot that I'd written 'IMAGE1', we will be adding our own image source. Easy as that!
*If you didn't understand any of that, that's fine, we can still keep going*
What I wanted to do in this blog post is show you how you can make your own bloglovin' counters and "follow me on" buttons. I analyzed the code a little bit in order to help you understand why it's easy to alter these types of things, but if you didn't get that part, it doesn't matter and we can still move forward. I find that the best way to help people is to show them how you do it first because understanding the process is the best way to learn.
To start off, find a good image hosting website. I use Tinypic because it's simple, you don't need an account to upload images, and it keeps the image URL short and sweet. When you upload an image to Tinypic, what it does is it gives you a direct link to the image. Once you upload, it'll actually provide you with four different image codes (because it's so generous) but we only need the very last one, the one that says "Direct Link for Layouts".
Yay! Fun part. Actually making the widget. First I thought we would conquer the counters. These are actually going to be the hardest ones because unlike the buttons, these are widgets and they have data. By that I mean that they aren't just an image and a link, they actually have embedded data as to how many followers you have on Bloglovin', so we need to alter the image around that number and be mindful of where it sits within the image.
Above I've provided a basic skeleton of what we're working with. I didn't change much; just the colour of the widget. What's great about these images is they're extremely small and therefore very pixelated, which makes it easy for us to grab the areas we want to work with and edit them easily.
Let's start off with basic ones. All I'm doing with these is I'm editing the colouring of the box that contains the counter. You can do this yourself very easily, and below I will provide the .xcf (gimp) file to download the template in order to do so.
*note: the link above is a direct download, meaning the file will download once you click. It is safe, not to worry.
Here are some of the counters I've created for you. I'm not providing the code to copy and paste because the code is different for everyone. If you click on these images, they will open in a new tab and you can then copy the direct link (what's in the URL) and paste them in the part of the code that I've specified above. Enjoy!
I hope you guys like my little 'premades', and if you decide to use them you need not credit me. They were easy to make (but annoying to properly place on this blog post...), and I'm providing you with a template to make your own so do with that what you please!
Next I thought we could do some "Follow me on Bloglovin'!" share icons. The ones they provide on their site... well, they're okay, but they're not the best. The source code for these are essentially (if not almost exactly) identical to the codes for the widgets, so refer back to my little explanation on that if you want, otherwise, we can just jump right into it.
Thanks for reading guys, I hope you enjoyed this post in my Blogger Bliss series! If you have any questions about what I've explained/offered here, comment them below and I'll answer your concern as soon as I see it.
I'd appreciate it if you linked back to my blog if you used any of my resources, I worked hard on making these (and stayed up way too late on a night I should have been asleep early).
Thank you to brand-cierge.com for the header stock image and bloglovin.com for the original resources.
Until next time, sunshine!
Aluminum is about 1/3 as dense as copper or metal and is malleable, ductile, and can be simply machined and forged. Aluminum is also be|can be} very stable in opposition to normal atmospheric corrosion. Our aluminum foil sheeting products are the industry commonplace for dependable, long lasting high quality and various usability. This alloy is half of} the softest aluminum alloys however has wonderful corrosion resistance and workability. high precision machining It has excessive electrical conductivity and the highest thermal conductivity. Due to its softness, it isn't used for high-strength or high-pressure applications.
ReplyDelete