5/5 (5)

Sebelumnya saya pernah membuat tutorial cara membuat sticky ads di plugins AMPforWP secara gratis dimana untuk mendapatkannya pengguna plugins harus membeli extensionnya terlebih dahulu yang seharga $30, kali ini saya juga akan membagikan tutorial untuk membuat Flyng Carpet Ads atau Parallax untuk pengguna plugins AMPforWP di wordpress secara gratis juga tanpa harus membeli extension dari pihak pengembang.

Untuk membuat flyng carpet tersebut anda cukut menambahkan sedikit kode pada bagian template AMP yang kita gunakan. Biasanya pada plugins AMPforWP disediakan 4 templates AMP secara gratis dan kita bisa memodifikasi template tersebut satu persatu untuk dapat meletakan flyng carpet ads pada themes gratisan dari plugins AMPforWP secara gratis

Baca juga  Cara Menghilangkan Auto Ads Adsense dibawah Footer

Berikut Cara Membuat Flyng Carpet Ads di AMPforWP

Pertama – tama kita buka terlebih dahulu menu setting AMPforWP lalu pilih Advance Settings kemudian pada bagian Enter HTML in Head tambahkan kode berikut

<script async="async" custom-element="amp-fx-flying-carpet" src="https://cdn.ampproject.org/v0/amp-fx-flying-carpet-0.1.js"></script>

setelah itu jangan lupa di save.

Lalu langkah selanjutnya adalah mengedit pada bagian themes untuk meletakan flyng carpet ads pada artikel di AMPforWP, sebelum memulai pilih themes yang anda gunakan pada plugins AMPforWP seperti contoh gambar dibawah saya menggunakan
themes design three

1. Flyng Carpet Google Adsense di AMPforWP

setelah anda memastikan menggunakan template tersebut lalu masuk ke Cpanel hosting kalian untuk mengedit file yang terletak folder plugins AMPforWP contoh seperti ini public_html/wp-content/plugins/accelerated-mobile-pages/templates/design-manager/design-3 (jika kalian menggunakan themes design three) jika anda menggunakan themes lainnya anda tinggal masuk ke folder themes anda yang tersedia di folder design-manager. Setelah masuk ke folder themes yang anda gunakan lalu buka functions.php setelah itu masukan kode dibawah ini

/*
 *  memasukan iklan di artikle content palembang.blog
 */
add_filter('the_content', 'cw_insert_post_ads');
function cw_insert_post_ads($content){
    if(is_single()){
        //ads code
        $adsCode = '<div>
<amp-fx-flying-carpet height="700px">
<amp-ad 
    layout="responsive"
    width=300
    height=600
    type="adsense"
    data-ad-client="ca-pub-xxxxxxxxx"
    data-ad-slot="xxxxxxxx">
  </amp-ad> 
</amp-fx-flying-carpet>  
<p></p>
<p></p>
</div>';
        
        //insert after / Tempatkan iklan setelah paragraf ke
        $insertAfter = 2;
        
        $closingP = '</p>';
        $contentBlock = explode($closingP, $content);
        foreach($contentBlock as $key => $con){
            if(trim($con)) {
                $contentBlock[$key] .= $closingP;
            }
            if(($key + 1) == $insertAfter){ 
                $contentBlock[$key] .= $adsCode;
            }
        }
        $content = implode('', $contentBlock);
    }
    return $content;    
}

Setelah itu pada bagian data-ad-client=”ca-pub-xxxxxxxxx” dan data-ad-slot=”xxxxxxxx” ganti dengan kode Google Adsense milik kalian lalu save dan cek apakah sudah terpasang dengan sempurna.

2. Flyng Carpet Ads Banner/html di AMPforWP

Sedangkan untuk memasang flyng carpet dengan menggunakan banner/html milik kalian hanya perlu mengubah kode diatas menjadi seperti dibawah ini.

/*
 *  memasukan iklan di artikle content palembang.blog
 */
add_filter('the_content', 'cw_insert_post_ads');
function cw_insert_post_ads($content){
    if(is_single()){
        //ads code
        $adsCode = '<div>
<amp-fx-flying-carpet height="700px">
<amp-ad>
    <a target="_blank"
  href="https://ampbyexample.com/amp_ads/banner_ad/">
  <amp-img src="https://ampbyexample.com/img/amp-300x250.jpg"
    width="300"
    height="250"
    alt="a4a image"></amp-img>
</a>
  </amp-ad> 
</amp-fx-flying-carpet>  
<p></p>
<p></p>
</div>';
        
        //insert after / Tempatkan iklan setelah paragraf ke
        $insertAfter = 2;
        
        $closingP = '</p>';
        $contentBlock = explode($closingP, $content);
        foreach($contentBlock as $key => $con){
            if(trim($con)) {
                $contentBlock[$key] .= $closingP;
            }
            if(($key + 1) == $insertAfter){ 
                $contentBlock[$key] .= $adsCode;
            }
        }
        $content = implode('', $contentBlock);
    }
    return $content;    
}
Baca juga  Memasang Sticky Ads Pada AMPforWP Secara Gratis

Pada bagian “https://ampbyexample.com/amp_ads/banner_ad/” ganti dengan target url iklan anda sedangkan pada bagian https://ampbyexample.com/img/amp-300×250.jpg anda dapat menggantinya dengan banner iklan anda, untuk bagian ukuran anda dapat menyesuaikan pada bagian width dan height serta untuk alt anda dapat memasukan alt image anda dan jika anda ingin membuat iklan terbuka di tab yang sama anda dapat menghapus kode target=”_blank”.

Demikianlah tutorial dari saya bagaimana memasang Flyng Carpet Ads / Parallax untuk Pada AMPforWP Secara Gratis.

Catatan :

  • Ganti setiap functions.php pada themes yang anda gunakan
  • Untuk ganti flyng carpet setelah paragraf ke berapa silakan ganti pada bagian $insertAfter = 2; (angka 2 adalah paragraf ke 2, anda bisa mengganti sesuka anda untuk posisi setelah paragraf ke berapa)
  • Silakan berkreasi untuk tampilan iklan karna ini termasuk Opensource Project

Mohon beri rating

LEAVE A REPLY

Please enter your comment!
Please enter your name here

17 − thirteen =