How To Make Your Google Adsense Responsive In WordPress

Recently, I had an issue with google Adsense on how to make it responsive in all devices. Since I am starting to earn money on Adsense, I don’t want to remove it so dig in and luckily found the documentation from Google Adsense resource.

This tutorial basically cover how I interprent the tutorial provided by Google Adsense. I believed it will work on all ad units including display ads, in feed ads, in-article ads and even in link ads. 

Step 1: Insert a Custom class on your adsense script

Insert a custom class after the adsbygoogle class so we can overwrite the style of our ads. Kindly check the before and after below to see the difference.

BEFORE:


< ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-4299086769596754" data-ad-slot="6478502035">

AFTER:

< script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
< ins class="adsbygoogle responsive-adbanner" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-4299086769596754" data-full-width-responsive="true" data-ad-slot="6478502035">

< script>
(adsbygoogle = window.adsbygoogle || []).push({});

Now, copy/paste the code on theme options or style.css. Basically, this code will tell the browser to adjust the width of the adsense once it reach the declared viewport. The other css code generally normalize the styling and removing any scrolling styles on your adsense.

@media(max-width:23.436em){
.adsbygoogle.responsive-adbanner {
width:22em;
}}
@media(max-width:64.436em){
.adsbygoogle.responsive-adbanner {
width:63em;
}}
.adsbygoogle.responsive-adbanner {
width:95%;
overflow: hidden;
padding:0;
margin: 2rem 0;
}

If you don’t want to use custom css, adding a inline-style on the script will work but for best practices, it’s highly recommended to keep your code DRY (Don’t Repeat Yourself).

How To Animate Your Menu Button on Divi or Extra – Bouncing Menu Tutorial

Normally, The animation feature from Elegant Themes only works for individual pages and posts when a visual or Divi builder is enabled and dynamic elements like footer, menu don’t have this feature.  On my v-tutorial, I am going to add a bouncing animation on our custom button located on menu (by the way, I’m using Extra theme).

Why You Should Consider Adding Animation On your Divi Menu?

Adding an animation on your CTA like button is a very interesting strategy to improve your user experience (UX).

Back to the scenario, make sure you define a custom css where you want to hook the animation. On my example, my class name for this is .acuity-embed-button.

Copy/Paste the code below on Extra or Divi > Theme Options > Custom CSS. You can use an animation generator like Animista.io but make to keep it dry as possible, remove those redundant codes that can hurt your CPU.

.acuity-embed-button { // Kindly rename the class accordingly. 
animation: bouncing 0.5s both;
}@keyframes bouncing {
0% {
transform: translatey(-45px);
-webkit-transform: translatey(-45px);
-webkit-animation-timing-function:ease-in;
animation-timing-function:ease-in;
opacity:1;
}82%{
-webkit-transform: translatey(-6px);
transform: translatey(-6px);
}90%{
-webkit-transform: translatey(-4px);
transform: translatey(-4px);
-webkit-animation-timing-function:ease-out;
animation-timing-function:ease-out;
}25%, 75%, 88%, 100%{
-webkit-transform: translatey(-0px);
transform: translatey(0px);}}

Why -moz, -ms, -o and -webkit are important?

Prefixes are significance for compatibility purposes. Some search engines like IE, Opera, and Firefox cannot run your CSS if their perspective prefixes are not declared on your code.

 

Wp All Imports Guide: How To Fix The Wrong Media File Name During the Migration

Are you having an issue on images file name updating to its current year? In this guide, I will reveal the trick on how to fix the media file when importing items of your custom post fields using WP All Imports and WP All Exports Plugin.

Step 1:  Install A WP All Export On Your Official Site To Export  The Custom Post Fields

You need to install the WP All Export plugin on your official site to export the custom fields on by one.

  1. Go to All Export > New Export > Select a specific post type
  2. Follow the wizard until you finish the process
  3. Make sure you choose the bundle option when exporting to use general settings.

exporting custom fields using wp all exports plugin

Step 1:  Install A WP All Import On The Staging Site To Import The .zip file.

  1. Go to All Import > New Import > Click the upload file
  2. Follow the wizard until you finish the process
  3. On Step 4, add the PHP code (download the source file) under the Custom Functions Editor.

How Online Filipino Freelancer Get Approved On Credit Card Application

Applying for a credit card in the Philippines is a bit hard especially when you are working online due to some legality papers that you need to comply. In this blog, I will share with you how did I get approved on my credit card application even though I don’t have enough documents.

Disclaimer: I’m not an expert, all of the suggestion below is just based on my experience

Actually, it isn’t my first time to have a credit card because I was able to acquire my first BPI credit card last 2012 however I would not consider it as an application because the bank itself offered me the credit card. And since I was too young at that moment, I did not maintain a good credit score. It short, I’m spending more than I am earning.

So fast forward, I switched to BDO because BPI has a limitation in overseas transactions, this was the time when BPI cards don’t have any visa or MasterCard trademark. As I remember, they only have bancNet and EPS trademark that’s why it’s very inconvenient to use it when you are traveling outside the Philippines.

Anyway, back on the scenario. 4 years after I switched to BDO, I was able to get the point why having a credit card is an advantage over carrying cash like:

Rebates, Deal and Promos  – who doesn’t want rebates and freebies?  If you have BDO credit card, you can download their BDO Deals app to check some promos. Example: you can get 8% rebate if you use a VISA credit card either on your online or in-store purchase

bdo credit card rebates

 

I was waiting on BDO to offer me a credit card just like BPI but unfortunately, it never happens even though I’m earning 6 digits though they gave me a rewards card. My conclusion is because I always withdraw my funds every time there’s a remittance coming.

The Process Of Applying BDO Credit Card Online

Visit the BDO credit card application page then choose what card you are applying for. In my case, an agent called 3 days after I applied online and these are the questions that you need to be careful of:

Are you renting, living with parents or you owned a house?

I owned a house but my mom is living with me after my dad died. 

Do you have a car? If yes, is it mortgage?

I have two cars, one is under my name but the other one is still in mortgage

Do you have a dependency? Yes, my son

I think the questions above is the getting to know-process, they want to evaluate you if you’re really good managing your expenses.

Do you have an Office Phone Number? Provided mine. It’s really a plus point if you have a landline number.  Because this will prove your identity.

How much is your gross annual income?

I provided her my monthly salary then she just multiplied it by 12

What card I am interested?

Since I’m not sure what credit card I really like, she suggested me a Platinum card since I was able to hit the minimum gross annual income.

Are you employed, self-employed or have a business? 

I’m employed but at the same time, I’m also self-employed. Honestly, I’m working online as a website developer that’s why I’m uncertain where should I categorize myself. I have clients both local and international and I don’t have any payslips however my income automatically credits on my BDO Kabayan savings.

After that, an agent says. I think you are categorized as entrepreneur ma’am so here’s the only following proof we need:

  • Bank Statement for 6 months
  • 2 Valid IDs (Provided my passport & Philhealth)
  • TIN Number – this is free, just visit nearest BIR and ask for the TIN number
  • SSS Number – this is FREE as well same with TIN Number 🙂
  • Business Permit – I told her that I don’t have a business permit since most of my clients are abroad. I haven’t legalized it but I’ve been doing this stuff for almost 6 years.  It doesn’t make sense for me for now to get a business permit since it’s virtual but sooner I might compile some permits once I need Filipino manpower. 

After that, she provided me an email address ending with @bdo.com.ph to send the requirements. Then she asked how long I can comply with those requirements and when is the best time to call me back for the secondary interview. I told her that I can comply it today then she can call me back after 2 days same time 1 pm. Since she asking for 6 months statement, I need to go to the bank physically to ask for it.

After 2 days, she called me back and said that the application is already in progress. I can check the status on their website by putting my SS number

I was able to get the result from them after 14 days that my credit card is APPROVED but it was not PLATINUM. I only acquired BDO GOLD VISA and BDO GOLD MASTERCARD. I think because even though my gross annual income is more than the minimum annual require for PLATINUM, I still did not pass the metrics because sometimes my bank balance is close to 0. Yayks.. For sure, freelancers can also relate. Gasto pa more!

Here’s one of my sneak peek. On my conclusion, the 36.02 pesos drag me down to get a Platinum card. My suggestion is if you really want to have Diamond or Platinum card, do not let your bank statement down to 5 digits, you should keep savings on your bank.

example of bank statement I passed to bdo for credit card application

 

 

How To Put A Divi Module Inside The Divi Tab Layout

Putting a Divi module inside the tab menu is not available by default in Divi but in this blog, I will reveal the trick for you.

Add a tab module

add tab module in Divi

 

Create a sample post. As an example, I would like to put a blurb module inside the tab module. Let’s do the magic!

Configure your blurb and finalize the elements. Once done, it’s time to get the shortcode.

1. Hover the Builder button > right click to inspect the elements and remove the et_pb_hidden inside the class name.
trick to get the divi shortcode

2.
step 2 in getting the divi module shortcode

As an example, here’s the final shortcode for your blurb.

module

 

Result:

w

Menu 1

 

Now, you can put that shortcode on your tab module. Feel free to add classes to style your tab module or tab container e.g using grid classes inside the blurb module