Selamat datang di GayaNgeblog

close
Cara pasang share addthis di blog AMP

Untuk memasang widget diblog AMP agak sulit dan cukup ribet, saya browsing di Google dan akhirnya ketemu juga, dan sengaja untuk pemasangan share AddThis saya buatkan artikelnya biar tidak lupa, pemasangan share AddThis seperti yang GayaNgeblog bikin di bawah post article. Ok Begini cara pemasangan widget share AddThis di template AMP GayaNgeblog karya kompiajaib dengan nama kompidesignV2 :

  • Pertama daftar dulu di www.addthis.com, jika anda sudah daftar login saja.

  • Ke dua klik menu Tool, dan klik tombol Add New Tool di kanan atas lalu pilih Share Buttons dan pilih yang jenis Inline (berderet ke samping). Jika Anda sudah pernah membuatnya berarti Anda tinggal klik pada tool tersebut pilih Get Code,
    Setelah klik Get Code lihat alamat websitenya yang ada di browser, kalau punya GayaNgeblog seperti di bawah ini
    https://www.addthis.com/dashboard#gallery/pub/ra-5b0ec116915c4528/get-the-code/pco/shin/widgetId/xh76

  • Langkah ke tiga cari (Ctrl+F) kode </head> dan copas kode dibawah ini di atasnya
    
          <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script async='async' custom-element='amp-addthis' src='https://cdn.ampproject.org/v0/amp-addthis-0.1.js'/>
    </b:if>

  • Langkah ke empat cari kode amp-custom dan copas code ini dibawahnya gabungkan dengan css yang lainnya
    
         .shareAddThis{margin:0;height:53px;overflow:hidden;}
    .shareAddThis amp-addthis iframe{margin-top:0;margin-left:-8px;}
    @media screen and (max-width:640px){.shareAddThis{height:98px;}}

  • Langkah ke lima cari (Ctrl+F) kode
    <b:includable id='shareButtons' var='post'>
    dan simpan kode sebagai berikut di bawahnya kode tadi
    
    <b:includable id='shareAddThis' var='post'>
    <div class='shareAddThis'>
    <amp-addthis data-pub-id='ra-5b0ec116915c4528' data-widget-id='xh76' expr:data-share-media='data:post.firstImageUrl' expr:data-share-title='&quot;Check out this article: &quot; + data:post.title + &quot; - &quot; + data:post.url' height='126' layout='flex-item'>
    </amp-addthis>
    </div>
    </b:includable>

    Ganti 5b0ec116915c4528dan xh76 dengan kode AddThis anda, codenya bisa dilihat seperti langkah ke dua
  • Langkah terakhir cari kode
    
        <b:if cond='data:blog.pageType == &quot;item&quot; or data:blog.pageType == &quot;static_page&quot;'>
    <data:post.body/>
    </b:if>
    dan simpan kode di bawah ini, dibawahnya
    
          <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <b:include data='post' name='shareAddThis'/>
    </b:if>

    Saya sendiri menyimpan kode dibawah posting artikel, jika anda ingin menempatkan di atas posting artikel silahkan

Itulah cara pemasangan widget tool share AddThis di template AMP milik GayaNgeblog
Reaksi:

You Might Also Like:

Komentar anda sangat beguna untuk blog ini, silahkan tinggalkan komentar anda yang sesuai dengan artikel ini, gunakanlah isi komentar dengan yang baik dan bermanfaat, semua komentar yang tercantum akan ditinjau kembali
BUKA KOLOM KOMENTAR TUTUP KOMENTAR

This website uses cookies to ensure you get the best experience on our website. More Info