Updated: How To Create a Random Banner Ad

I have got a fun tutorial for you to try this weekend on your blog! A while ago I did a tutorial on creating a header ad banner and judging from my Google Analytics it was very popular so I thought I’d turn it up a notch and making an updated version which changes on refresh! On the desktop version of this blog, TheFashionTechnologist you will see ad banner at the top of the page, if you refresh the page you will see another ad. I have three in a rotation, a Missguided, Topshop and Net-a-porter one.


If you would like your banner ad to change on refresh like this, add the following code to your theme (WordPress Only) functions file or if you are cool, to your custom functions plugin.



Then replace all the PASTE AD HERE with ad’s. If you use an affiliate network like rewardStyle then paste in the banner code in this space.


This random ad banner function has three ad’s in it, to add another simply paste in another:



When happy, open up the file where you would like your ad banner to show, for example to place it at the top of your blog then open header.php and just below the tag paste in the following (if you are struggling with where to paste it, see this tutorial!):


(uses inline styling)



That’s it! Pretty straight forward once you know how huh?

chloe-signature

How to create a post signature without a plugin

A lot of bloggers have a cool little post signature at the bottom of their blog posts, I do too! I usually paste it in every time which is so long and laborious. It’s quite naughty coming from me because I could have coded something along time ago but haven’t!


I put together this code snippet that I am using now which you can copy and use on your blog. What I have done is made a shortcode, a shortcode is an easy way to paste code into a blog post without pasting the actual code and it getting messy. Also it’s easier to remember and saves time.


I could have created a tutorial which creates the signature automatically at the bottom of a blog post, but if you are like me and have been pasting it in for ages, it will be duplicate signatures on old posts and in all honesty I can’t be asked going through all the old blog posts and deleting. However if you aren’t like me and a signature is new for you I shall make this tutorial for you soonish.


Okay so to the code!

Paste the following into your functions.php file which is in your theme. You can find this via FTP or if this is alien to you go to your theme editor from within WordPress backend and find it that way.


Replace INSERTURLOFSIGNATURE with the image url of your signature.


Cool, done? Awesome. Now you a ready to use your new shortcode. When you make your next blog post you can paste in the following, where you want your post signature to show:

When you preview your blog post this shortcode will be replaced your actual post signature.



BOOM!


chloe-signature

rewardStyle Banner

Screen Shot

You may have noticed we have taken down our Christmas import.io banner, today we have replaced it with a rewardStyle banner, which we will update regularly.

 

rewardStyle is a company that allows publishers to get the credit they deserve when advertising products. For example, if you use rewardStyle and a visitor to your blog clicks on an item and then goes ahead and buy the item of clothing you (the publisher) will gain some commission.

 

Let’s get started!

 

Continue reading

Adding an interactive Import.io Feed

Screen Shot

 

 

In this task I will be using import.io an application that has interested the team at chloédigital for some time and well we decided this week was the week and we had a little test of it, fell in love, created a christmas banner full of its data and well the rest is history. Import.io I approve!

 

Let’s get started!

 

Continue reading

#29 Widget with Tabs on Sidebar

sidebar widget

 

It is the second to last day!!

 

Today I will be showing you how to add another widget to your sidebar, in this case it will be stream of post’s which a user can select to read or share. At the moment our feed is set up to show the 30daysofcoding category, however after the 30daysofcoding is complete we will have a category showing exactly what Chloé and I are getting up to in the fashion technology world, whether it be an event we are attending, or a day spent coding. By completing this we will have a stronger level of engagement with our readers.

 

I have chosen to use tabs as in the future I will have this widget doing multiple other things with other tabs, but really it is an extra you may wish to just shown the live feed by itself.

 

Let’s get started!

Continue reading

#21 Dress up your Footer

Screen Shot

 

Nine tiny days to go! Can you believe it?! I definitely can’t. Today I will be showing you how to add a footer to every page on the blog, it will also contain a subscription box that shows on every page bar the stay updated page and a post page (as this page already has a subscription box underneath the post). It was a fairly easy day, some confusion did come when I realised the fixed footer in the post page (you know the one with the circles that pop-out?) would now be going over the footer which was not right, so that took a bit more time than I expected. However, I did manage to figure out the function to display the subscription box on every other page bar the post pages very easily so I still feel I am improving my coding knowledge.

 

Let’s get started!

 

Continue reading

#19 Make Your Blog Post Timestamp Relative Time Like Instagram

12 minutes ago

 

Today I have been coding in the Timberyard, it’s an internet cafe on Old Street in London that is definitely a firm favourite for chloédigital,with tea timed to perfection, and a tomato paste people could fight over it’s a nice setting to sit, eat and code away.

 

In this post I will be showing you how to add a time stamp that will tell your readers exactly how long ago an article was posted, just like how Instagram does! Why? It is a cool way for readers to see how active you are on your blog.

 

Let’s get started!!

 

Continue reading

#17 Hide Google Analytics for logged in users

Screen Shot

Another easy Sunday task, and this time it seriously helps you gain better data about your site!

 

Today we will be adding google analytics code, but with a difference. This google analytics code will only count users views if they are not logged into the blog, because we know you like to check up on your blog and make sure everything is how it should be but don’t don’t need to know that you have read your own blog and so for more accurate data adding in this section of code will help!

 

Continue reading

#15 News Sidebar Carousel

Screen Shot

 

I am so excited to show you this! For such a pretty little feature, that to the untrained eye might look as if it has taken a while to code… it only take a few steps! Yet afterwards you have something to make your blog stand out from the crowd!

 

Maybe you have two blogs and want to link them up in an aesthetically pleasing way? Or maybe you just want to give another blog the recognition it deserves! Either way you are supplying your readers with more of a reason to go on your blog and that’s what is important!

 

This also is only part one for this widget we will be showing you at a later date how to add in multiple blogs as well.

 

Let’s get started!

 

Continue reading