{"id":366,"date":"2014-05-20T09:52:11","date_gmt":"2014-05-20T09:52:11","guid":{"rendered":"http:\/\/pixert.com\/blog\/?p=366"},"modified":"2014-05-27T10:45:18","modified_gmt":"2014-05-27T10:45:18","slug":"responsive-ads-google-adsense","status":"publish","type":"post","link":"https:\/\/pixert.com\/blog\/responsive-ads-google-adsense\/","title":{"rendered":"Responsive Ads with Google AdSense"},"content":{"rendered":"

We could show Google AdSense responsively in our website with Responsive Ad Unit, this means we\u00a0can control the size of the ads on our\u00a0page corresponding to screen resolution of the visitor’s device.\u00a0<\/span>The code of Responsive Ad Unit detects the size of the screen and serve the appropriate ad unit that will best fit.<\/p>\n

Generate Responsive AdSense Ad Unit<\/strong><\/p>\n

\"GAResponsiveAd1\"<\/a> \"GAResponsiveAd2\"<\/a><\/p>\n

Create Ad Unit. Login to Google AdSense Dashboard and go to My Ads<\/strong>\u00a0tabs. Click\u00a0New ad unit button.\u00a0<\/strong>Select Responsive ad unit (BETA)<\/strong> in Ad Size\u00a0dropdown field. You also could select \u00a0what type of Ad in Ad Type<\/strong> dropdown field. Done, save and get code to generate JavaScript code<\/p>\n

Responsive Ad Unit use Asynchronous\u00a0code, this means it should be load faster<\/p>\n

There are two mode for Responsive Ad Unit<\/p>\n

Smart sizing<\/strong>\u00a0– this mode\u00a0doesn\u2019t require us\u00a0to make any changes to your ad code.<\/p>\n

Advanced<\/strong>\u00a0– this mode requires \u00a0modifications to our\u00a0ad code. We\u00a0should only choose this mode if wewant to specify either an exact size via CSS or a general shape (horizontal, vertical, and\/or rectangle) that your ad unit should conform to. Advanced mode recommended for\u00a0horizontal Ads (Leaderboard, Banner)<\/p>\n

For Advanced code, we could use generated code or make modification to the code with data-ad-format variable,\u00a0for example<\/p>\n

\r\n<!-- Responsive Ad #2 -->\r\n<ins class="adsbygoogle responsive-ad-2"\r\nstyle="display:inline-block"\r\ndata-ad-client="ca-pub-1234"\r\ndata-ad-slot="5678"\u00a0data-ad-format="auto"><\/ins><script>(adsbygoogle = window.adsbygoogle || []).push({});<\/script><\/pre>\n
Set a general shape for esponsive ad unit by changing the value of data-ad-format<\/strong> to one of these values: “rectangle”, “vertical”, “horizontal”<\/strong> or any combination of these separated by a comma, e.g., “rectangle, horizontal”.<\/strong><\/p>\n
Additional Note: we might see yellow box in AdSense placement\u00a0when we first add Responsive Ad Unit, that means AdSense still loading. Don’t panic, however you could add following code to your site CSS\/Stylesheet file to hide yellow box<\/p>\n
ins {\r\nbackground: transparent;\r\ntext-decoration: none;\r\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"
We could show Google AdSense responsively in our website with Responsive Ad Unit, this means we\u00a0can control the size of the ads on our\u00a0page corresponding to screen resolution of the visitor’s device.\u00a0The code of Responsive Ad Unit detects the size of the screen and serve the appropriate ad unit that will best fit.<\/p>\n","protected":false},"author":1,"featured_media":367,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[54,136,5],"tags":[],"class_list":["post-366","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-code-snippet","category-web-design","category-wordpress"],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2014\/05\/GAResponsiveAd1.jpg?fit=650%2C126&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/p1pvi1-5U","jetpack-related-posts":[{"id":290,"url":"https:\/\/pixert.com\/blog\/override-css-property-right-to-left\/","url_meta":{"origin":366,"position":0},"title":"Override CSS property right to left","author":"Pixel Insert \/ Pixert","date":"March 4, 2013","format":false,"excerpt":"\u00a0 This case is an example on how to override CSS property right to left We have this AdSense banner floating on the right side of the screen. What if you want to change it to the left Recently, I installed Floating AdSense plugin for WordPress. It's very helpful to\u2026","rel":"","context":"In "Code Snippet"","block_context":{"text":"Code Snippet","link":"https:\/\/pixert.com\/blog\/category\/code-snippet\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":598,"url":"https:\/\/pixert.com\/blog\/google-search-with-a-plugin-wp-google-search\/","url_meta":{"origin":366,"position":1},"title":"Google Custom Search with a plugin, WP Google Search","author":"Pixel Insert \/ Pixert","date":"May 18, 2021","format":false,"excerpt":"I use Google Custom Search or also known as Google Programmable Search Engine on my WordPress blog. I used Google Hosted Search at that time, but when I got a notification from Google that I would not get Google AdSense sharing through Google Hosted Search, I have to change the\u2026","rel":"","context":"In "WordPress"","block_context":{"text":"WordPress","link":"https:\/\/pixert.com\/blog\/category\/wordpress\/"},"img":{"alt_text":"WP Google Search","src":"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2021\/05\/E1261131-FB6D-4940-95EB-6605A9CB686C.jpeg?fit=1200%2C405&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2021\/05\/E1261131-FB6D-4940-95EB-6605A9CB686C.jpeg?fit=1200%2C405&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2021\/05\/E1261131-FB6D-4940-95EB-6605A9CB686C.jpeg?fit=1200%2C405&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2021\/05\/E1261131-FB6D-4940-95EB-6605A9CB686C.jpeg?fit=1200%2C405&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2021\/05\/E1261131-FB6D-4940-95EB-6605A9CB686C.jpeg?fit=1200%2C405&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":355,"url":"https:\/\/pixert.com\/blog\/create-responsive-menu-with-wordpress-plugin\/","url_meta":{"origin":366,"position":2},"title":"Create Responsive Menu with WordPress Plugin","author":"Pixel Insert \/ Pixert","date":"March 29, 2014","format":false,"excerpt":"Responsive menu is a WordPress \u00a0plugin that creates a nice three-lined menu button or responsive menu when the site viewed on devices that users can click to bring a slide out menu, which is easily navigated .\u00a0 We don't need to code responsive menu to themes, \u00a0just install the plugin\u2026","rel":"","context":"In "WordPress"","block_context":{"text":"WordPress","link":"https:\/\/pixert.com\/blog\/category\/wordpress\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2014\/03\/responsivemenu.jpg?fit=640%2C592&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2014\/03\/responsivemenu.jpg?fit=640%2C592&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2014\/03\/responsivemenu.jpg?fit=640%2C592&ssl=1&resize=525%2C300 1.5x"},"classes":[]},{"id":300,"url":"https:\/\/pixert.com\/blog\/how-to-add-widgetized-custom-sidebars-wordpress-theme\/","url_meta":{"origin":366,"position":3},"title":"How to add widgetized and custom sidebars on WordPress theme","author":"Pixel Insert \/ Pixert","date":"April 13, 2013","format":false,"excerpt":"WordPress themes are usually come with Widgetized sidebars where you can drag and drop widgets. It's okay when we don't need more widgetized sidebars to the theme, but we probably think to add more when we think widgetized sidebar solution to your customization problem, for instance you want to add\u2026","rel":"","context":"In "Code Snippet"","block_context":{"text":"Code Snippet","link":"https:\/\/pixert.com\/blog\/category\/code-snippet\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2013\/04\/cs-newsidebar.jpg?fit=1200%2C822&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2013\/04\/cs-newsidebar.jpg?fit=1200%2C822&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2013\/04\/cs-newsidebar.jpg?fit=1200%2C822&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2013\/04\/cs-newsidebar.jpg?fit=1200%2C822&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2013\/04\/cs-newsidebar.jpg?fit=1200%2C822&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":351,"url":"https:\/\/pixert.com\/blog\/wordpress-code-editor-enhancement\/","url_meta":{"origin":366,"position":4},"title":"WordPress Code Editor Enhancement","author":"Pixel Insert \/ Pixert","date":"June 8, 2014","format":false,"excerpt":"WordPress code editor (WP-Admin > Appearance > Editor) does not yet have a good editor with syntax highlighting, line numbers etc.\u00a0Following plugins expand WordPress Code Editor from plain code editor to more sophisticated code editor with a lot of great features. These plugins allows administrator to edit code without accessing\u2026","rel":"","context":"In "WordPress"","block_context":{"text":"WordPress","link":"https:\/\/pixert.com\/blog\/category\/wordpress\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2014\/06\/wpeditor.jpg?fit=1051%2C907&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2014\/06\/wpeditor.jpg?fit=1051%2C907&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2014\/06\/wpeditor.jpg?fit=1051%2C907&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2014\/06\/wpeditor.jpg?fit=1051%2C907&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2014\/06\/wpeditor.jpg?fit=1051%2C907&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":289,"url":"https:\/\/pixert.com\/blog\/full-screen-background-on-wp-login-page\/","url_meta":{"origin":366,"position":5},"title":"Full Screen Background on WP Login Page","author":"Pixel Insert \/ Pixert","date":"March 5, 2013","format":false,"excerpt":"The following function add full screen background on WP Login page 1. Open functions.php in your theme directory 2. Add this function to functions.php [text] \/\/ LOGIN - full background function my_login_style() { ?>