Tampilkan postingan dengan label AMP. Tampilkan semua postingan
Tampilkan postingan dengan label AMP. Tampilkan semua postingan
8/20/2019

Cara Pasang Anti Copas di Blog Valid AMP

View Article

Cara Pasang Anti Copas


Copas atau copy paste dalam hal ini adalah kegiatan melakukan duplikat konten dengan cara mengambil isi artikel pada suatu blog untuk diterbitkan pada blog yang lainnya. Nah dengan demikian artinya akan ada dua artikel yang sama persis namun berada pada dua blog yang berbeda. Lalu apa pengaruhnya?

Mungkin bagi blog-blog besar yang cengkraman SEO-nya sudah kuat tertancap di mesin pencari, hal ini tidak begitu berarti karena biasanya meskipun konten artikelnya di copas sana sini tidak akan merubah posisi blog tersebut di mesin pencari.

Namun bagi blog pemula yang masih "pedekate" dengan mesin pencari, kegiatan copas ini sangat bisa membuat degdegan ya karena posisi SEO di mesin pencari juga belum begitu kuat. Nyeseknya lagi kalau blog hasil copas tersebut posisi di search engine malah lebih bagus dari blog aslinya. Sedih kan.

Temans Pemula, artikel pada sebuah blog itu juga merupakan konten yang dihasilkan dengan pemikiran, tenaga, dan waktu. Sesama blogger sebaiknya saling menghargai atas hal tersebut ya, jadi jangan asal copas sana sini untuk mengisi konten pada blog. Ndak baik lho.


Cara Pasang Anti Copas


Nah jika temans Pemula ingin melindungi artikel-artikel yang ada pada blog agar tidak di copas atau istilah lainnya adalah dicuri, maka hal yang bisa dilakukan adalah dengan memasang anti copas pada blog.

Jika sebelumnya cara ini biasa diterapkan pada blog berplatform Blogger non AMP dan banyak yang menggunakannya, lalu bagaimana jika ingin menerapkan anti copas pada blog valid AMP? Jika ingin membangun blog valid AMP bisa menggunakan template valid AMP disini ya.

Baiklah Temans jika saat ini kamu menggunakan blog valid AMP kamu juga bisa memproteksi blog kamu agar artikel-artikelnya tidak bisa di copas ke blog lain. Caranya hampir mirip dengan yang non AMP, dan langkah yang perlu dilakukan adalah sebagai berikut :
  • Masuk ke dashboard blogger
  • Pilih tema
  • Cari kode </style> atau juga bisa menggunakan ctrl + f agar lebih mudah dan cepat
  • Setelah ketemu, taruh kode berikut ini tepat diatasnya :


  • /* Pasang Anti Copas CaraPemula*/
    .post-body {-webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all */ -ms-user-select: none; /* IE 10+ */ user-select: none; /* Likely future */ }
  • Jangan lupa simpan tema ya

Selesai...

Nah jika semua tahap diatas sudah dilakukan, kini saatnya untuk melakukan uji coba apakah cara pasang anti copas pada blog valid AMP ini berhasil atau tidak. Caranya adalah dengan melakukan blok di area tulisan artikel. Jika tidak bisa di blok, maka blog kamu sudah aman. Selamat mencoba.
7/27/2019

Cara Mudah Membuat Spoiler Keren Di Blog Valid AMP

View Article

Jika sobat ingin membungkus bagian tertentu di dalam sebuah artikel baik berupa teks, gambar, video atau apa saja yang ingin sobat sembunyikan dengan fungsi tombol untuk menampilkannya, maka salah satu cara yang memang sangat efektif untuk digunakan adalah memasang Spoiler di blog sobat.

Tekhnik penggunaan spoiler sangat berguna apabila sobat menulis sebuah artikel yang panjang dengan di sisipi beberapa penjelasan penting, gambar maupun video. Karena postingan blog yang panjang dengan beberapa gambar maupun video akan menambah beban loading saat laman artikel di buka.

Keberadaan spoiler di sebuah artikel atau laman blog juga akan memberikan artikel kita lebih rapi dan memudahkan pengunjung blog untuk menyorot bagian-bagian penting yang sudah kita bungkus dan tandai dengan tombol spoiler.

Untuk memasang spoiler di blog Non Amp kita bisa mengkombinasikan css dan jquery untuk membuat tampilan spoiler keren dan pastinya sudah banyak kita temukan tutorial yang membahas tentang spoiler di blog Non Amp.

Jika sebelumnya sobat menggunakan template non amp pastinya pemasangan spoiler ini sangat mudah bukan? Beda halnya jika kita menggunakan template Amp. Karena jika kita menggunakan spoiler dengan mengkombinasikan css skaligus javascript, maka pastinya akan membuat laman blog kita tidak lagi valid amp.

Jika sobat ingin membuat dan memasang spoiler di blog amp dan valid amp, maka cara ampuh yang dapat sobat gunakan adalah dengan memanfaatkan js amp-accordion yang memang sudah disediakan untuk laman amp.

Cara Membuat Spoiler Di Blog Valid AMP

Langkah awal yang harus dilakukan adalah simpan js amp-accordion berikut setelah kode </head>

<script async='async' custom-element='amp-accordion' src='https://cdn.ampproject.org/v0/amp-accordion-0.1.js'/>

Selanjutnya silahkan simpan kode CSS Spoiler berikut di dalam tag <style amp-custom>

.spoiler-amp{margin:10px 0}

.spoiler-amp h4.spoiler-button{color:#444;font-size:14px;font-weight:bold;outline:none;margin:0;line-height:1.5em;border-radius:50px;padding:8px 30px;-moz-border-radius:50px}

.spoiler-amp h4.spoiler-button:before{content:"";position:absolute;left:15px;top:50%;margin-top:-7px;border:7px solid;border-color:transparent transparent transparent #444}

.spoiler-amp h4.spoiler-button:after{content:"\0002B";position:absolute;font-size:20px;line-height:20px;top:50%;margin-top:-10px;text-align:right;right:15px}

.spoiler-amp section[expanded] h4.spoiler-button:after{content:"\02013"}

amp-accordion section{margin:10px 0}

.spoiler-amp amp-accordion div.isi{height:auto;margin:20px 10px;padding:0 0 0 20px;border-left:3px dotted #f0f0f0}

Jika warna spoiler kurang sesuai dengan selera, sobat bisa mengaturnya pada bagian css diatas

Kemudian jika js amp-accordion dan CSS Spoiler sudah terpasang. Maka selanjutnya tinggal cara bagaimana menerapkannya saat kita menulis artikel baik di halaman postingan maupun halaman statis.

Untuk menggunakan spoiler di postingan silahkan gunakan kode berikut pada tab HTML:

<div class="spoiler-amp">

<amp-accordion animate>

<section>

<h4 class='spoiler-button'>Contoh Spoiler Teks</h4> /* Judul Spoiler */

<div class="isi">

Masukkan teks di sini.... /* Masukkan teks, gambar, atau video */

</div>

</section>

</amp-accordion>

</div>

HTML atau code diatas digunakan apabila sobat memasang satu spoiler saja.

Dan apabila sobat ingin menggunakan lebih dari satu spoiler bersusun, silahkan tambahkan expand-single-section pada bagian <amp-accordion animate>

Berikut contoh penerapannya

<div class="spoiler-amp">

<amp-accordion animate expand-single-section>

<section>

<h4 class='spoiler-button'>Contoh Spoiler Teks</h4>

<div class="isi">

Masukkan teks di sini....

</div>

</section>



<section>

<h4 class='spoiler-button'>Contoh Spoiler Teks</h4>

<div class="isi">

Masukkan teks di sini....

</div>

</section>



<section>

<h4 class='spoiler-button'>Contoh Spoiler Teks</h4>

<div class="isi">

Masukkan teks di sini....

</div>

</section>

</amp-accordion>

</div>
Note
Kode animate pada <amp-accordion> berfungsi untuk memperhalus transisi saat spoiler dibuka.
Kode expand-single-section berfungsi untuk menutup spoiler yang sedang terbuka saat membuka spoiler lainnya.
Silahkan Parse terlebih dahulu jika sobat ingin menyisipkan kode html dan lainnya di dalam spoiler.

Dan untuk melihat hasilnya bisa sobat cek dibawah ini.


Dan itulah tutorial singkat tentang bagaimana cara membuat dan memasang spoiler di blog valid amp menggunakan amp-accordion yang dapat saya bagikan kali ini.

Jika ada pertanyaan tentang spoiler di blog valid Amp ini, sobat bisa meninggalkan komentar di dibawah ini. Selamat Mencoba dan Semoga bermanfaat.


Referensi :
https://tipscodeshare.blogspot.com/2016/11/spoiler-blogger-accelerated-mobile-pages.html
https://www.idnxmus.com/2018/10/spoiler-di-blog-amp.html
6/28/2019

Cara Buat Komentar Disqus Buka Tutup Blog AMP

View Article
Cara buat komentar Disqus buka tutup untuk blog AMP sebagai salah satu cara untuk mengurangi beban blog ketika diakses. Jadi dengan demikian akan menjadikan blog lebih ringan dan cepat ketika dibuka.

Komentar Disqus


Kolom komentar dalam sebuah blog penting arti kehadirannya karena dapat berfungsi sebagai interaksi terhadap sesama pengunjung blog dan juga kepada pemilik blog.

Misalnya saja ada pengunjung blog yang setelah membaca salah satu artikel mungkin ada poin-poin tertentu yang tidak paham, maka dengan memanfaatkan kolom komentar bisa mengajukan pertanyaan kepada pemilik blog.



Pada platform Blogspot memang sudah menyediakan fitur kolom komentar secara default, namun banyak teman2 Blogger yang ahli dalam bidang template Blogger menambahkan fitur komentar lainnya seperti komentar Facebook dan juga komentar Disqus. Atau bahkan hanya memasang komentar disqus saja pada blognya.

Diantara kelebihan dari komentar Disqus adalah dapat diatur siapa saja yang bisa meninggalkan komentar, artinya bisa mencegah anonymouse untuk nimbrung berkomentar pada postingan kamu. Disqus juga bisa edit komentar dari pengunjung. Disqus juga bisa memproteksi komentar yang mengandung link.

Bagi pengunjung yang ingin meninggalkan komentar pada sebuah blog bisa login dengan menggunakan akun Disqus itu sendiri maupun juga dengan akun media sosial populer lainnya. Jadi lebih memudahkan pengunjung untuk meninggalkan sebuah komentar. Atau bagi yang suka dengan komentar dengan emoticon, Disqus juga bisa lho.

Komentar Disqus Buka Tutup


Tertarik untuk memasang komentar Disqus di blog AMP kamu? Namun khawatir akan membuat loading blog menjadi lebih lambat. Jika demikian kamu bisa mencoba membuat komentar Disqus dengan model buka tutup. Bagaimana caranya ya? Selesaikan membaca artikel ini ya temans.

Baiklah biar tidak menambah rasa penasaran, temans yang masih Pemula juga bisa melakukannya sendiri, berikut cara membuat komentar Disqus buka tutup untuk blog AMP yaitu :

Pertama silahkan cek di template Blogger yang saat ini dipakai, apakah sudah terdapat kode amp-iframe seperti dibawah ini :


<script async='async' custom-element='amp-iframe' src='https://cdn.ampproject.org/v0/amp-iframe-0.1.js'/>

Jika belum, kamu bisa menambahkan kode tersebut sebelum kode &lt;/head&gt;&lt;!--<head/>--&gt;

Jika langkah diatas sudah dilakukan, selanjutnya adalah menambahkan kode CSS seperti dibawah ini pada bagian AMP-Custom, untuk memudahkan pencarian kamu bisa menggunakan CTRL+F dan ketikkan amp-custom :


*{-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}

.disqus{margin:0 -8px;padding:0 0 20px;font-family:Roboto,sans-serif;}

.disclaimer_box{width:100%;padding:2px;background:linear-gradient(60deg,#f79533,#f37055,#ef4e7b,#a166ab,#5073b8,#1098ad,#07b39b,#6fba82);border-radius:6px;}

.disclaimer_box .content{background:#fff;padding:8px 12px;font-size:95%;border-radius:4px;box-shadow:0 0 0 3px rgba(255,255,255,.3)}

.disclaimer_box .content p{margin:0;padding:0}

.buka-komen,.tutup-komen{font-family:Roboto,sans-serif;background-color:#11589D;color:#fff;font-size:16px;line-height:1.3em;padding:5px 7px;display:block;min-width:54px;text-align:center;font-weight:500;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;-webkit-transition:all 218ms;-moz-transition:all 218ms;-o-transition:all 218ms;transition:all 218ms;-webkit-user-select:none;-moz-user-select:none;}

.buka-komen{margin:20px 0;cursor:pointer;}

.tutup-komen{margin:20px 0 0;cursor:pointer;}

  • Selanjutnya adalah mencari kode seperti dibawah ini :
<b:includable id='comments' var='post'>

Atau yang seperti ini :

<b:includable id='comments' var='post'>...</b:includable>
  • Kemudian copy kode dibawah ini dan paste-kan dibawah kode diatas :


  • <b:includable id='disquscomments' var='post'>

    <b:if cond='data:blog.pageType == &quot;item&quot;'>

    <div id='open-comment'/>

    <div class='disclaimer_box'>

      <div class='content'>

        <b>Comment Policy:</b> Silahkan tinggalkan komentar yang sesuai dengan topik pada postingan halaman ini. Komentar yang berisi tautan aktif tidak akan ditampilkan.

      </div>

    </div>

    <div aria-label='Buka Komentar' class='buka-komen' id='buka-komen' on='tap:komen.show,tutup-komen.show,buka-komen.hide,open-comment.scrollTo(&quot;position&quot;=&quot;top&quot;)' role='button' tabindex='0'>Buka Komentar</div>

    <div aria-label='Tutup Komentar' class='tutup-komen' hidden='' id='tutup-komen' on='tap:komen.hide,tutup-komen.hide,buka-komen.show,close-comment.scrollTo(&quot;position&quot;=&quot;top&quot;)' role='button' tabindex='0'>Tutup Komentar</div>

    </b:if>

                 <div class='disqus' hidden='' id='komen'>

    <amp-iframe expr:src='&quot;https://cdn.rawgit.com/Arlina-Design/redvision/c265155f/disqus_amp.html?shortname=cara-pemula&amp;fontBodyFamily=sans-serif&amp;fontLinkColor=11589D&amp;canonicalurl=&quot; + data:blog.canonicalUrl + &quot;&amp;title=&quot; + data:blog.pageName' frameborder='0' height='300' layout='responsive' resizable='resizable' sandbox='allow-forms allow-scripts allow-same-origin allow-modals allow-popups' width='600'>

    <div aria-label='Disqus Comments' overflow='' role='button' tabindex='0'/>

    </amp-iframe>

                  </div>

                </b:includable>



    Gantilah shortname cara-pemula dengan shortname disqus milik kamu sendiri ya. Oiya sampai disini belum selesai ya Temans, masih ada beberapa langkah lagi untuk menyelesaikannya.
    • Selanjutnya yaitu mencari kode seperti dibawah ini :

    <b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' data='post' name='comments'/>
    • Kemudian menggantinya dengan kode berikut ini :

    <b:include cond='data:blog.pageType == &quot;item&quot;' data='post' name='disquscomments'/>

    Nah agar ketika kolom komentar ditutup dan layar akan menampilkan artikel terkait, maka kamu bisa menambahkan kode berikut :

    <div id='close-comment'/>

    di atas kode related post / artikel terkait. Selesai.

    Nah Temans, silahkan simpan template Blogger kamu dan cek pada postingan apakah kolom komentar Disqus sudah model buka tutup atau belum. Jika sudah berarti kamu sudah berhasil membuatnya. Selamat mencoba.

    *)Credit kode KompiAjaib
    6/11/2019

    Cara Mudah Pasang Widget Popular Post Valid AMP

    View Article
    Cara Mudah Pasang Widget Popular Post Valid AMP. Pada sebuah blog atau website biasanya akan menampilkan artikel-artikel mana saja yang sering dibaca, yang dirangkum dalam sebuah widget. Widget tersebut secara default adalah Widget Popular Post, namun dalam penamaan dapat dirubah sesuai selera pemilik blog atau website.

    Artikel populer, artikel teratas, sering dibaca, adalah beberapa contoh saja penamaan atas widget popular post tersebut. Atau mungkin temans mempunyai penamaan unik tersendiri?

    Pentingnya Widget Popular Post


    Dengan menampilkan widget popular post dapat memudahkan para pengunjung dalam menemukan topik atau artikel yang sedang dicarinya. Pengunjung juga dapat melihat artikel mana saja yang sedang tren di blog tersebut.

    Dengan demikian pengunjung tidak perlu bersusah-susah menyelami artikel demi artikel untuk menemukan artikel yang sering dibaca, karena sudah ada navigasi blog yang memudahkannya yaitu widget popular post.

    Seperti halnya widget recent post, kehadiran widget popular post ini diharapkan dapat menurunkan tingkat bounce rate karena pengunjung akan terus berada pada blog tersebut.

    Oleh karena itu, bagi temans belum pasang widget ini sangat dianjurkan untuk segera memasang pada blog ya. Pada platform Blogger sudah ada widget popular post bawaan, jadi tidak perlu ribet dan repot kan. Oiya, silahkan baca juga cara pasang auto ads pada blog AMP.



    Cara Pasang Widget Popular Post Valid AMP


    Mungkin diantara temans sekalian ada yang tidak sreg dengan widget popular post bawaan dari Blogger dan ingin membuat tampilan yang berbeda. Kabar baiknya adalah pada artikel kali ini kita akan membuat widget tersebut dengan tampilan yang berbeda, tentunya lebih keren doong ya hehehe.

    Bagaimana jika menggunakan template AMP Blogger? Bagi pengguna template valid AMP bisa segera mengadopsi langkah-langkah seperti dibawah ini :

    • Jika pada blog kamu belum ada widget popular post, maka kamu dapat mnambahkannya terlebih dahulu. Caranya adalah pada menu Layout -> Add widget -> Popular post


    • Kemudian masuk ke menu Theme dan klik Edit
    • Tambahkan kode CSS berikut ini pada template Blogger pada bagian amp-custom


    /* CSS Popular Post AMP */

    .PopularPosts ul{background:#fff;list-style:none;margin:0;padding:5px 5px 10px;overflow:hidden;border-radius:0 0 5px 5px;border-top:none;}

    .PopularPosts li,.PopularPosts li amp-img,.PopularPosts li a,.PopularPosts li a amp-img {margin:0;padding:0;list-style:none;border:none;background:none;outline:none;}

    .PopularPosts ul {margin:0;list-style:none;color:#64707a;}

    .PopularPosts ul li amp-img {display: flex;align-items:center;display:block;width:auto;height:100%}

    .PopularPosts ul li .item-thumbnail {display:block;margin:0 0 0 10px;width:65px;height:65px;border:1px solid #f5f5f5;overflow:hidden;float:right;border-radius:5px ;background-position:center;transition:all 0.5s ease-out}

    .PopularPosts ul li .item-thumbnail:hover{-webkit-filter:brightness(0.4);transition:all 0.5s ease-out}

    .PopularPosts ul li {background-color:#fff;margin:0;padding:10px 0;padding-right:5px;position:relative;border-bottom:1px solid #f5f5f5;transition:all .3s;display:block;min-height:67px}

    .PopularPosts ul li:first-child {border-top:none;}

    .PopularPosts ul li:last-child {border-bottom:none;}

    .PopularPosts ul li a:hover {color:#4285f4;}

    .PopularPosts ul li .item-title a, .PopularPosts ul li a {color:#000;transition:all .3s;display:block;height:100%;}

    .PopularPosts .widget-content ul li:hover a,.PopularPosts .widget-content ul li a:hover{color:#4285f4;}

    .PopularPosts .item-snippet{display:none}

    .profile-img{display:inline;opacity:1;margin:0 6px 3px 0;}

    .PopularPosts .item-title {padding-bottom:.2em;padding:0 5px;}


    • Selanjutnya adalah temukan widget popular post tadi pada Theme dan kemudian ganti semua kode widgetnya dengan kode di bawah ini :


    <b:widget id="PopularPosts1" locked="false" title="Trending" type="PopularPosts" version="1">

            <b:widget-settings>

              <b:widget-setting name="numItemsToShow">8</b:widget-setting>

              <b:widget-setting name="showThumbnails">true</b:widget-setting>

              <b:widget-setting name="showSnippets">false</b:widget-setting>

              <b:widget-setting name="timeRange">LAST_MONTH</b:widget-setting>

            </b:widget-settings>

            <b:includable id="main">

      <b:if cond="data:title"><h3>

    <data:title></data:title></h3>

    </b:if>

      <div class="widget-content popular-posts">

    <ul>

          <b:loop values="data:posts" var="post">

    <li>

            <b:if cond="data:showThumbnails == &quot;false&quot;">

              <b:if cond="data:showSnippets == &quot;false&quot;">

                <!-- (1) No snippet/thumbnail -->

                <a expr:href="data:post.href" href="https://www.blogger.com/null"><data:post .title=""></data:post></a>

              <b:else>

                <!-- (2) Show only snippets -->

                <div class="item-title">

    <a expr:href="data:post.href" expr:title="data:post.title" href="https://www.blogger.com/null"><data:post .title=""></data:post></a></div>

    <div class="item-snippet">

    <data:post .snippet=""></data:post></div>

    </b:else></b:if>

            <b:else>

              <b:if cond="data:showSnippets == &quot;false&quot;">

                <!-- (3) Show only thumbnails -->

                <div class="item-thumbnail-only">

    <b:if cond="data:post.thumbnail">

                    </b:if><br />

    <div class="item-thumbnail">

    <a expr:href="data:post.href" href="https://www.blogger.com/null" target="_blank">

                        <amp-img expr:alt="data:post.title" expr:height="data:thumbnailSize" expr:src="data:post.thumbnail" expr:title="data:post.title" expr:width="data:thumbnailSize">

                      </amp-img></a>

                    </div>

    <div class="item-title">

    <a expr:href="data:post.href" expr:title="data:post.title" href="https://www.blogger.com/null"><data:post .title=""></data:post></a></div>

    </div>

    <div class="clear">

    <b:else>

                <!-- (4) Show snippets and thumbnails -->

                </b:else><br />

    <div class="item-content">

    <b:if cond="data:post.thumbnail">

                    </b:if><br />

    <div class="item-thumbnail">

    <a expr:href="data:post.href" href="https://www.blogger.com/null" target="_blank">

                        <amp-img expr:alt="data:post.title" expr:height="data:thumbnailSize" expr:src="data:post.thumbnail" expr:title="data:post.title" expr:width="data:thumbnailSize">

                      </amp-img></a>

                    </div>

    <div class="item-title">

    <a expr:href="data:post.href" expr:title="data:post.title" href="https://www.blogger.com/null"><data:post .title=""></data:post></a></div>

    <div class="item-snippet">

    <data:post .snippet=""></data:post></div>

    </div>

    <div class="clear">

    </div>

    </div>

    </b:if>

            </b:else></b:if>

          </li>

    </b:loop>

        </ul>

    </div>

    </b:includable>

          </b:widget>


    • Kemudian simpan
    • Silahkan cek hasilnya.


    *) Catatan : Jika terdapat error atau blog menjadi tidak valid AMP, silahkan cek kembali dan temukan kode berikut ini, dan hapus kode tersebut :


    <b:include name='quickedit'/>


    Dengan demikian kini blog kamu sudah mempunyai Widget Popular Post yang valid AMP. Semoga pengunjung blog kamu akan terus naik dan betah berada di blog kamu ya temans. Semoga bermanfaat.
    4/08/2019

    Bagaimana AMP Membantu & Menghambat SEO?

    View Article

    Apa itu AMP?


    AMP (diucapkan AMP bukan "amp") adalah singkatan dari Accelerated Mobile Pages (B.Indonesia: Halaman Seluler yang Dipercepat). Gagasan utama penciptaan AMP dirancang supaya dapat memuat halaman dengan secepat "kilat" (cek ikonnya) ketika dibuka di perangkat seluler. Kerangka kerja open-source gratis ini memungkinkan kita untuk membangun halaman yang berfungsi seperti versi singkat dari halaman utama website/blog, tanpa ada unsur-unsur lain yang memengaruhi waktu pemuatan. Ketika halaman web standar memiliki alternatif AMP yang tersedia, tautan ke versi AMP ditempatkan pada halaman melalui tag HTML, dan inilah yang disajikan untuk pengguna perangkat seluler.

    Kerangka kerja AMP memungkinkan pengembang untuk membangun halaman menggunakan tiga elemen inti; AMP HTML, AMP JavaScript dan AMP Cache. AMP HTML adalah HTML yang telah diperluas dengan properti AMP khusus. Sebagian besar HTML yang digunakan pada halaman AMP adalah HTML standar. Namun, ada beberapa tag khusus AMP yang memungkinkan peningkatan kinerja. AMP JavaScript adalah pustaka JavaScript yang memungkinkan rendering cepat halaman-halaman HTML AMP. Memastikan optimasi seperti mencegah JavaScript pihak ketiga memblokir rendering halaman dan menjaganya agar tidak keluar dari jalur kritis. AMP Cache adalah jaringan pengiriman konten khusus untuk dokumen AMP. Sebagian besar halaman AMP disajikan melalui Google AMP Cache yang menyimpan dokumen AMP yang valid dan sumber dayanya serta memberikan hasil pencariannya di perangkat seluler, memberikan pengalaman pengguna seluler yang lebih cepat.

    Siapa yang mendukung AMP?


    Meskipun sangat didukung oleh Google, proyek AMP tidak dimiliki oleh perusahaan raksasa pencarian Google. Faktanya, situs web AMP Project mencantumkan lebih dari 160 platform iklan dan 15 CMS yang mendukungnya. Mesin pencari lainnya, seperti Bing, Yahoo, dan "Baidu" (search engine di Jepang), terhubung dengan proyek AMP, ini menunjukkan bahwa halaman AMP tidak hanya menguntungkan Google, tetapi mesin pencari lainnya juga. Pada bulan September 2018, Bing bahkan mengumumkan cache AMP-nya sendiri dengan tujuan memberikan pengalaman seluler yang lebih cepat bagi pengguna Bing.

    CMS seperti Drupal dan WordPress memiliki fungsi AMP yang terintegrasi di dalamnya, dengan AMP diaktifkan sebagai default di semua halaman yang dibuat di situs WordPress.com. Jelas ada serapan teknologi yang tinggi dan terus berkembang, dan para pemain besar di industri ini juga ingin mendukungnya.

    Untuk apa AMP dirancang?


    Tujuan AMP ketika diumumkan kembali pada tahun 2015 adalah untuk meningkatkan kinerja internet pada perangkat seluler. Pada intinya, AMP berfokus pada mengoptimalkan halaman web untuk pemuatan cepat pada perangkat seluler dengan menawarkan konten melalui halaman yang ringan. Tentu saja sesuai dengan tujuan pencarian nyata Google untuk menjadikan web tempat yang lebih mudah diakses dan menyenangkan bagi pengguna perangkat seluler.

    Bagaimana AMP membantu SEO?


    1. Manfaat utama AMP adalah kecepatan - Jika situs web kita saat ini dibuka sangat lambat oleh pengguna pada koneksi seluler 3G, maka kita akan melihat peningkatan instan dalam kecepatan waktu pemuatan melalui penggunaan AMP. Google mengumumkan pada Juli 2018 bahwa "Pembaruan Algoritma Kecepatan Seluler" diluncurkan untuk semua pengguna di perangkat seluler. Pembaruan untuk algoritma kecepatan ini berarti laman web yang sangat lamban mungkin terhalang dalam hasil pencarian. Meskipun memiliki pengaruh dalam peringkat adalah kecil, kecepatan memuat halaman dapat memiliki implikasi lain pada kinerja halaman. Penelitian terkini tentang kecepatan web oleh Google; menyarankan bahwa ketika kecepatan pemuatan suatu halaman meningkat dari 1s ke 5s, laju pentalan meningkat sebesar 90%. Karena itu, jika situs kita terbuka cukup cepat maka memicu Pembaruan Algoritma Kecepatan, dan laman seluler yang dipercepat akan menyenangkan pengguna web kita, serta keuntungannya adalah penjualan produk atau pendapatan kita meningkat.
    2. Kinerja server juga ditingkatkan melalui penggunaan AMP - Jika menerima banyak lalu lintas dari perangkat seluler ke situs web kita, maka laman AMP dapat mengurangi size pada server kita.
    3. Mendapatkan akses ke fitur pencarian khusus AMP - Ada tempat khusus di hasil pencarian Google yang disediakan untuk halaman AMP saja. Jika seorang penerbit berita maka gunakan template AMP untuk mengirimkan berita, sehingga kita dapat mengakses berita yang berada di bagian atas hasil pencarian di Google mobile.
    4. AMP Stories - Diperkenalkan pada awal 2018 dengan tujuan untuk menghasilkan lebih banyak keterlibatan dengan pengguna. Google AMP Stories adalah format konten yang dirancang untuk memberi penerbit opsi menceritakan sesuatu dengan cara terbaru. Formatnya adalah pengalaman yang bisa digesek, kaya gambar yang memberikan konten dengan cepat dalam potongan-potongan. AMP Stories, meskipun tidak digunakan secara luas seperti yang dipikirkan sebelumnya, memiliki potensi untuk meningkatkan visibilitas mesin pencari dengan contoh-contoh awal dari Google yang menampilkan konten Stories langsung di SERPs.
    5. Ikon "kilat" AMP dalam SERPS menunjukkan bahwa halaman valid AMP - Diperkirakan dapat meningkatkan rasio klik per tayang halaman karena pengguna akan memilih halaman AMP daripada hasil HTML standar, dengan mengetahui ikon itu akan mengurangi beban perangkat seluler mereka.
    6. Peningkatan tingkat konversi di situs e-commerce, sebagai salah satu manfaat menggunakan template AMP - Pada tahun 2017 Akamai Technologies merilis laporan yang mengklaim keterlambatan 100-milidetik dalam waktu pemuatan situs web dapat mengurangi tingkat konversi sebanyak 7% dan 53% pengunjung situs web seluler akan meninggalkan suatu halaman jika butuh lebih dari 3 detik untuk dimuat. Meskipun bukan manfaat langsung untuk SEO, peningkatan tingkat konversi adalah Harga Mati banyak pemasar digital, dan oleh karena itu setiap keunggulan yang dapat diperoleh dalam meningkatkan pengunjung adalah teknik yang sangat berharga.
    7. Membantu kepatuhan GDPR adalah manfaat yang mengejutkan dari penggunaan AMP - Sekali lagi, sementara tidak secara langsung membantu optimasi mesin pencari dari sebuah situs web, mematuhi hukum Eropa adalah kewajiban setiap pemasar digital yang perlu dilaksanakan. Komponen baru dalam AMP memungkinkan penerbit untuk mengimplementasikan kontrol pengguna, yang dapat menentukan apakah pengguna harus diminta untuk berinteraksi, mengetahui keputusan pengguna, dan membuat pengaturan pengguna tersedia untuk halaman AMP, sehingga pemilik web dapat mengatur halaman sebagaimana mestinya.

    Bagaimana AMP menghambat SEO?


    1. Branding terhambat melalui penggunaan URL khusus Google - Frustrasi besar yang diperoleh banyak orang dalam menggunakan template AMP adalah bahwa domain mereka sendiri tidak ditampilkan dalam hasil pencarian. Karena sebagian besar halaman dilayani melalui cache Google sendiri, itu adalah Google cache AMP URL yang ditampilkan dalam hasil pencarian daripada domain situs web sendiri. Pada bulan November 2018 Google membuka pratinjau pengembangan tentang perbaikan masalah ini.
    2. "Ikon kilat" AMP tidak diakui secara luas seperti yang diharapkan oleh penerbit digital - AMP meningkatkan rasio klik-tayang dari SERP, namun hanya berfungsi jika pengguna menyadari bahwa simbol kilat AMP seharusnya memberikan pengalaman pengguna yang lebih baik. Banyak harapan mengingat AMP belum dipublikasikan secara luas di luar arena pemasaran digital. Tanpa mendidik pencari tentang manfaat halaman AMP dan cara menemukan mereka dalam hasil pencarian, naif jika menganggap pengguna akan terbiasa dengan AMP.
    3. Keberhasilan halaman AMP sulit dilacak karena platform ini tidak secara otomatis bekerja di luar kotak dengan Google Analytics - Ada kebutuhan khusus untuk mengonfigurasi halaman AMP supaya dilacak di samping domain utama, di Google Analytics. Mungkin salah satu kendala terbesar untuk kampanye SEO yang efektif adalah tidak dapat melacak kinerja. Meskipun dimungkinkan untuk menghubungkan halaman AMP agar dilacak di Google Analytics (Google bahkan memberikan panduan pengembang tentang cara melakukan ini), banyak penerbit tidak tahu bahwa mereka perlu melakukan ini dan mungkin menderita dari penurunan lalu lintas yang tidak dapat dijelaskan ke mereka setelah menerapkan AMP. Dengan begitu, halaman AMP akan benar-benar merugikan kampanye SEO.
    4. Fungsionalitas situs web tidak optimal karena perpustakaan JavaScript yang terbatas - Pengenalan terbaru dari komponen amp-bind telah mengatasi ini sedikit dengan memungkinkan pengembang web untuk menambahkan interaktivitas khusus di luar komponen AMP yang sudah dapat diakses. Misalnya, pada halaman e-commerce amp-bind dapat mengaktifkan opsi pemfilteran dan penyortiran yang lebih kompleks serta mengubah antarmuka pengguna jika suatu produk kehabisan stok. Secara keseluruhan, berdasarkan sifat AMP yang mengurangi kode khusus, halaman AMP kemungkinan akan menghasilkan pengalaman pengguna yang berbeda dengan halaman situs utama. Ini dapat membingungkan bagi pengguna yang mengakses situs ini di beberapa perangkat dan juga membuatnya sulit untuk mengimplementasikan fitur-fitur jazzier yang digunakan situs web.
    5. Tindakan keras Google pada halaman-halaman teaser AMP bulan Februari 2018 secara khusus menargetkan situs web yang mencoba "mengakali" kelemahan AMP - Penerbit menerima manfaat dengan ditampilkan kontennya dalam ceruk berita di bagian atas hasil pencarian Google dengan menggunakan halaman teaser AMP yang berisi sebagian isi dari artikel di dalamnya, tetapi mengharuskan pengguna untuk mengklik ke halaman HTML standar untuk melihat sisanya. Jika Google menentukan bahwa halaman AMP tidak mengandung konten yang sama dengan halaman standar, maka halaman tersebut akan mengarahkan pengguna ke halaman standar, artinya halaman tersebut tidak akan lagi muncul di posisi carousel yang diidamkan. Penerbit yang melanggar kebijakan Google ini akan menerima pemberitahuan tindakan manual di Google Search Console.
    6. Salah satu kendala terbesar untuk SEO yang membawa halaman AMP adalah menguras uang dan sumber daya - Bagi sebagian orang, implementasi AMP tidaklah sulit, tetapi ketika memfaktorkan CMS yang dikenal kompleksitasnya (tidak menyebut nama), maka kita perlu melihat secara serius pada tim pengembangan yang diinginkan untuk implementasi AMP pada situs kita. Ada banyak plugin yang mengklaim dapat dengan mudah membuat halaman AMP, tetapi saya selalu ragu dalam mempercayai plug-in pihak ketiga untuk melakukan sesuatu. Biasanya saya minta pengembang yang sangat terampil dan terpercaya untuk menerapkannya.

    Kesimpulan


    Jadi, secara ringkas, AMP memiliki banyak hal positif, tetapi apakah situs web kita akan menerima bobot penuh dari hal itu? Benar-benar perlu melakukan analisis biaya dan manfaat. Bagi penerbit yang ingin menjadi pesaing dalam industri "berita" yang sangat kompetitif, tampil di ceruk bagian atas hasil pencarian mungkin cukup bermanfaat untuk menjamin penerapannya. Namun, jika alasan kita memilih AMP hanya untuk meningkatkan kecepatan muat halaman web, waktu dan sumber daya mungkin lebih baik digunakan untuk mengoptimalkan kecepatan semua halaman website/blog.

    AMP yang diimplementasikan dengan baik masih memiliki kelemahan, dan seberapa banyak kita mengandalkan fungsionalitas untuk mengonversi pengunjung, akan berdampak pada; apakah membuat peralihan yang layak untuk kita? Saya ulangi kembali, jika menginginkan peningkatan kecepatan yang dapat diperoleh pada template AMP, saya lebih merekomendasikan jika kita menggunakan waktu dan sumber daya pengembangan untuk meningkatkan pengalaman pengguna di keseluruhan halaman via ponsel dan desktop tanpa perlu membuat halaman AMP.
    2/04/2019

    Cara Memasang Artikel Terkait Otomatis di Dalam Postingan Blog

    View Article

    Cara Memasang Artikel Terkait Otomatis di Dalam Postingan Blog - Related Post atau Artikel terkait di dalam postingan atau artikel blog ini memiliki peranan yang cukup penting terhadap blog kita. Karena dengan memasang related post atau artikel terkait otomatis di dalam postingan blog kita akan mendapatkan manfaat yang akan sangat terasa bagi blog kita.

    Manfaat yang akan di dapatkan ketika kita memasang atau membuat artikel terkait di dalam postingan blog yang kita tulis akan menarik dan memudahkan pengunjung blog untuk membaca artikel lainnya yang otomatis di tampilkan di dalam postingan blog berdasarkan label atau kategori artikel yang sedang dibacanya.

    Dengan adanya related post yang otomatis di tampilkan di tengah artikel ini akan meningkatkan kualitas kualitas internal link blog kita. Dan hal ini akan cukup membantu untuk menurunkan bounce rate blog sobat. Karena tidak sedikit yang mengatakan bahwa salah satu tekhnik ataupun cara menurunkan bounce rate blog adalah dengan memasang internal link di dalam postingan atau artikel blog.

    Cara Membuat atau Memasang Artikel Terkait Otomatis di tengah artikel blog ini saya dapatkan dari blog igniel.com dan naminakiky.com/ yang kemudian saya padukan agar tampilan dari related post (baca juga) atau artikel terkait ini lebih menarik untuk di lihat dan mudah untuk dipasang atau diterapkan di blog sobat.

    Untuk melihat hasil dan tampilan dari related post di dalam postingan blog ini, silahkan cek melalui link demo berikut:

    Demo

    Memasang Related Post di Tengah Artikel Blog Non AMP

    Untuk sobat yang menggunakan blog non amp dan ingin memasang artikel terkait di tengah postingan yang saya bagikan kali ini, silahkan ikuti tutorial singkatnya berikut ini :

    Pertama, silahkan login Blogger - Template - Edit HTML

    Kemudian letakkan CSS berikut sebelum kode ]]></b:skin> atau </style>

    .relatedPhw {display:inline-block;background:#fff;position:relative;padding:0;margin:36px auto 26px auto;width:100%;box-shadow:0 0 20px -5px rgba(0,0,0,0.3);transition:all 0.3s cubic-bezier(.25,.8,.25,1);border-top:2px solid #2B0C93;border-radius:30px;}

    .relatedPhw .judul {background:#2B0C93;padding:4px 15px;position:absolute;margin:0;font-size:15px;color:#fff;top:-14px;left:2.8%;box-shadow:0 1px 3px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.17);border-radius:30px;}

    .relatedPhw ul {margin:0;padding:0}

    .relatedPhw ul li {position:relative;list-style:none;padding:0;margin:auto;line-height:1.4em;transition:all .3s}

    .relatedPhw a{display:block;color:#2B0C93;font-size:15px;padding:5px 15px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}

    .relatedPhw ul li:first-child {padding-top:0px;}

    .relatedPhw ul li:last-child {padding-bottom:0px ; border:0px }

    .relatedPhw ul li:first-child a{margin:15px auto 0 auto;}

    .relatedPhw ul li:first-child a:hover,.relatedPhw a:hover{color:#000;padding-left:18px}

    Sobat juga bisa mengotak-atik tampilan related post ini dengan mengedit kode css diatas

    Terakhir silahkan simpan kode berikut setelah kode <data:post.body/>. Jika di template yang sobat gunakan terdapat beberapa kode <data:post.body/>, silahkan sobat coba satu persatu setelah kode <data:post.body/>.

    <b:if cond='data:view.isPost'>

    <script> //<![CDATA[

    // Related Posts Middle by Pehawe.Me

    var jumlah = 4;

    eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('c b=["G","H","I","$t","y","J","K","L","z","M","N","<A>","O",\'<B><a z="\',\'" y="\',\'">\',"</a></B>","</A>"];c d=n o;c p=0;c e=n o;q P(v){c r=0;h(;r<v[b[2]][b[1]][b[0]];r++){c k=v[b[2]][b[1]][r];d[p]=k[b[4]][b[3]];c l=0;h(;l<k[b[5]][b[0]];l++){s(k[b[5]][l][b[6]]==b[7]){e[p]=k[b[5]][l][b[8]];p++;Q}}}}q R(){c g=n o(0);c m=n o(0);c i=0;h(;i<e[b[0]];i++){s(!C(g,e[i])){g[b[0]]+=1;g[g[b[0]]-1]=e[i];m[b[0]]+=1;m[m[b[0]]-1]=d[i]}}d=m;e=g}q C(w,D){c j=0;h(;j<w[b[0]];j++){s(w[j]==D){E S}}E T}q U(){c f=F[b[10]]((d[b[0]]-1)*F[b[9]]());c u=0;x[b[12]](b[11]);h(;u<d[b[0]]&&u<V;){x[b[12]](b[13]+e[f]+b[14]+d[f]+b[W]+d[f]+b[X]);s(f<d[b[0]]-1){f++}Y{f=0}u++}x[b[12]](b[Z])}',62,67,'|||||||||||_0x22c4|var|relatedTitles|relatedUrls|indexLookupKey|value|for|||payload|id|errorsCopy|new|Array|relatedTitlesNum|function|signedTransactionsCounter|if||_0x6c56x6|canCreateDiscussions|lookIn|document|title|href|ul|li|contains|forWhat|return|Math|length|entry|feed|link|rel|alternate|random|floor|write|related_results_labels|break|removeRelatedDuplicates|true|false|ignielBacaJuga|jumlah|15|16|else|17|||||'.split('|'),0,{}))

    //]]></script>

    <div class='relatedPhw'>

    <b:if cond='data:post.labels'>

    <b:loop values='data:post.labels' var='label'>

    <b:if cond='data:view.isPost'>

    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&
    amp;callback=related_results_labels&amp;max-results=100&quot;'/>

    </b:if>

    </b:loop>

    </b:if>

    <span class='judul'><span>Baca Juga</span></span>

    <script> //<![CDATA[

    eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('Z(z(p,a,c,k,e,r){e=z(c){A c.K(a)};B(!\'\'.E(/^/,N)){D(c--)r[e(c)]=k[c]||e(c);k=[z(e){A r[e]}];e=z(){A\'\\\\w+\'};c=1};D(c--)B(k[c])p=p.E(M L(\'\\\\b\'+e(c)+\'\\\\b\',\'g\'),k[c]);A p}(\'j a=["k","l",".f-g m, .f-g p","n","o","q","r","s","t","u"];v();(w(){e d=h[a[1]](a[0])[0];i(d){e b=h[a[3]](a[2]);e c=x(b[a[4]]/2);i(b[c][a[5]]==a[6]){b[c][a[8]][a[7]](d,b[c])}y{b[c][a[8]][a[7]](d,b[c][a[9]])}}})();\',C,C,\'||||||||||O|Q|R|J|F|I|H|G|B|Y|14|11|13|16|15||12|P|U|T|S|V|z|W|10\'.X(\'|\'),0,{}))',62,69,'|||||||||||||||||||||||||||||||||||function|return|if|35|while|replace|let|document|body|post|artistTrack|toString|RegExp|new|String|_0x9301||nextIdLookup|indexLookupKey|nextSibling|parentNode|insertBefore|ignielBacaJuga|parseInt|split|var|eval|else|getElementsByClassName|nodeName|br|relatedPhw|length|querySelectorAll'.split('|'),0,{}))

    //]]> </script>

    </div>

    </b:if>

    Baca Juga: Cara Mempercepat Loading Gambar Blog

    Memasang Related Post di Tengah Artikel Blog AMP

    Untuk yang sudah menggunakan template AMP pada tampilan mobile, sobat juga bisa memasang related post ini khusus tampilan dekstop saja agar supaya template kita tetap valid AMP pada tampilan seluler

    Untuk yang ingin mencoba memasang artikel terkait ini silahkan simpan css berikut di dalam style amp-custom template blog AMP sobat.

    .relatedPhw {display:inline-block;background:#fff;position:relative;padding:0;margin:36px auto 26px auto;width:100%;box-shadow:0 0 20px -5px rgba(0,0,0,0.3);transition:all 0.3s cubic-bezier(.25,.8,.25,1);border-top:2px solid #2B0C93;border-radius:30px;}

    .relatedPhw .judul {background:#2B0C93;padding:4px 15px;position:absolute;margin:0;font-size:15px;color:#fff;top:-14px;left:2.8%;box-shadow:0 1px 3px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.17);border-radius:30px;}

    .relatedPhw ul {margin:0;padding:0}

    .relatedPhw ul li {position:relative;list-style:none;padding:0;margin:auto;line-height:1.4em;transition:all .3s}

    .relatedPhw a{display:block;color:#2B0C93;font-size:15px;padding:5px 15px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}

    .relatedPhw ul li:first-child {padding-top:0px;}

    .relatedPhw ul li:last-child {padding-bottom:0px ; border:0px }

    .relatedPhw ul li:first-child a{margin:15px auto 0 auto;}

    .relatedPhw ul li:first-child a:hover,.relatedPhw a:hover{color:#000;padding-left:18px}

    Sobat juga bisa mengotak-atik tampilan related post ini dengan mengedit kode css diatas

    Kemudian simpan kode berikut setelah kode <data:post.body/>

    <b:if cond='data:view.isPost and data:blog.isMobileRequest == &quot;false&quot;'>

    <script> //<![CDATA[

    // Related Posts Middle by Pehawe.info

    var jumlah = 4;

    eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('c b=["G","H","I","$t","y","J","K","L","z","M","N","<A>","O",\'<B><a z="\',\'" y="\',\'">\',"</a></B>","</A>"];c d=n o;c p=0;c e=n o;q P(v){c r=0;h(;r<v[b[2]][b[1]][b[0]];r++){c k=v[b[2]][b[1]][r];d[p]=k[b[4]][b[3]];c l=0;h(;l<k[b[5]][b[0]];l++){s(k[b[5]][l][b[6]]==b[7]){e[p]=k[b[5]][l][b[8]];p++;Q}}}}q R(){c g=n o(0);c m=n o(0);c i=0;h(;i<e[b[0]];i++){s(!C(g,e[i])){g[b[0]]+=1;g[g[b[0]]-1]=e[i];m[b[0]]+=1;m[m[b[0]]-1]=d[i]}}d=m;e=g}q C(w,D){c j=0;h(;j<w[b[0]];j++){s(w[j]==D){E S}}E T}q U(){c f=F[b[10]]((d[b[0]]-1)*F[b[9]]());c u=0;x[b[12]](b[11]);h(;u<d[b[0]]&&u<V;){x[b[12]](b[13]+e[f]+b[14]+d[f]+b[W]+d[f]+b[X]);s(f<d[b[0]]-1){f++}Y{f=0}u++}x[b[12]](b[Z])}',62,67,'|||||||||||_0x22c4|var|relatedTitles|relatedUrls|indexLookupKey|value|for|||payload|id|errorsCopy|new|Array|relatedTitlesNum|function|signedTransactionsCounter|if||_0x6c56x6|canCreateDiscussions|lookIn|document|title|href|ul|li|contains|forWhat|return|Math|length|entry|feed|link|rel|alternate|random|floor|write|related_results_labels|break|removeRelatedDuplicates|true|false|ignielBacaJuga|jumlah|15|16|else|17|||||'.split('|'),0,{}))

    //]]></script>

    <div class='relatedPhw'>

    <b:if cond='data:post.labels'>

    <b:loop values='data:post.labels' var='label'>

    <b:if cond='data:view.isPost'>

    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=100&quot;'/>

    </b:if>

    </b:loop>

    </b:if>

    <span class='judul'><span>Baca Juga</span></span>

    <script> //<![CDATA[

    eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('Z(z(p,a,c,k,e,r){e=z(c){A c.K(a)};B(!\'\'.E(/^/,N)){D(c--)r[e(c)]=k[c]||e(c);k=[z(e){A r[e]}];e=z(){A\'\\\\w+\'};c=1};D(c--)B(k[c])p=p.E(M L(\'\\\\b\'+e(c)+\'\\\\b\',\'g\'),k[c]);A p}(\'j a=["k","l",".f-g m, .f-g p","n","o","q","r","s","t","u"];v();(w(){e d=h[a[1]](a[0])[0];i(d){e b=h[a[3]](a[2]);e c=x(b[a[4]]/2);i(b[c][a[5]]==a[6]){b[c][a[8]][a[7]](d,b[c])}y{b[c][a[8]][a[7]](d,b[c][a[9]])}}})();\',C,C,\'||||||||||O|Q|R|J|F|I|H|G|B|Y|14|11|13|16|15||12|P|U|T|S|V|z|W|10\'.X(\'|\'),0,{}))',62,69,'|||||||||||||||||||||||||||||||||||function|return|if|35|while|replace|let|document|body|post|artistTrack|toString|RegExp|new|String|_0x9301||nextIdLookup|indexLookupKey|nextSibling|parentNode|insertBefore|ignielBacaJuga|parseInt|split|var|eval|else|getElementsByClassName|nodeName|br|relatedPhw|length|querySelectorAll'.split('|'),0,{}))

    //]]> </script>

    </div>

    </b:if>

    Tag kondisional yang ditandai diatas berfungsi untuk menampikan related post ini pada postingan blog tampilan dekstop saja. Agar supaya ketika blog di akses melalui seluler (AMP) tidak error.

    Baca Juga: Cara Membuat Sitemap (Daftar ISI) Seo Responsive di Blog

    Akhir kata dari saya semoga tutorial Cara Mmbuat atau Memasang Artikel Terkait atau Related yang Otomatis muncul di Dalam Postingan atau artikel Blog ini bermanfaat. Selamat mencoba

    2/03/2019

    Cara Memasang Iklan Adsense Otomatis di Tengah Postingan

    View Article

    Cara Memasang Iklan Adsense Otomatis di Tengah Postingan Blogger - Dengan memasang kode unit iklan adsense di tengah postingan atau artikel blog akan membantu kita untuk mendapatkan sedikit tambahan penghasilan baik dari hasil klik maupun hasil tayang dari iklan adsesnse yang kita pasang di tengah artikel blog kita.

    Untuk dapat menampilkan iklan adsense di tengah postingan atau artikel yang kita buat, kita bisa menggunakan Javascript dengan tag div sebagai pemanggil unit adsense yang sudah kita sebelumnya. Atau kita juga bisa juga menyematkannya langsung saat kita menulis artikel. Akan tetapi cara ini tidak dianjurkan, karena hal tersebut akan mempersulit kita di kemudian hari.

    Jika sobat pengguna blogger baik yang menggunakan blog AMP dan Non Amp dan sudah menjadi publiser adsense ingin menampilkan iklan ditengah artikel/postingan blogger atau jika kalian sudah mencoba menampilkan iklan adsense di tengah artikel namun tidak berhaasil, maka pada kesempatan kali ini saya akan membagikan sebuah tutorial bagaimana cara membuat iklan otomatis ditengah artikel dan solusi tepat untuk menampilkan iklan otomatis ditengah artikel atau postingan blogger AMP dan Non AMP.

    Baca Juga : Membuat Iklan Adsense di Sidebar Blog AMP HTML

    Berbagai cara dan upaya dilakukan oleh para publisher Adsense termasuk saya untuk menampilkan iklan Adsense otomatis di tengah artikel. Kenapa di tengah artikel/postingan blogger? Karena artikel merupakan halaman yang paling banyak di buka oleh pengunjung dan biasanya menarik perhatian pengunjung untuk mengelus unit iklan yang tampil di tengah postingan, maka ini dianggap sebagai tempat paling strategis untuk menampilkan iklan Adsense otomatis.

    Untuk menyimpan dan menampilkan iklan diatas dan dibawah artikel atau postingan secara otomatis memang cukup mudah untuk di terapkan, baik pada template Amp maupun Non AMP. Namun untuk menampilkan iklan di tengah artikel perlu bantuan khusus dengan memanfaatkan javascript, dan seperti yang sudah kita ketahui bahwa untuk pengguna AMP HTML diharamkan menggunakan external (custom) javascript terkecuali script yang sudah disediakan oleh amp-project.

    Lalu bagaimana caranya untuk menampilkan iklan di tengah artikel tanpa bantuan javascript?

    Seperti sudah kita ketahui, Google Adsense sebenarnya sudah menyediakan unit auto ads yang dapat menampilkan iklan di tempat-tempat strategis secara otomatis. Dan salah satu keunggulan dari auto ads adalah dapat menampilkan iklan di antara paragraf di dalam artikel atau postingan.

    Dan untuk tutorial bagaimna cara mengaktifkan dan menyimpan iklan auto ads di blog bisa disimak pada tutorial sebelumnya. Silahkan ek di Cara Mengaktifkan Iklan Otomatis/Auto Ads Google Adsense

    Jika kalian sudah menggunakan atau mengaktifkan fitur auto ads dan tidak menemukan iklan adsense muncul di tengah postingan atau artikel yang sudah kalian publish. Silahkan simak kupasannya berikut :

    Pertanyaan itu banyak datang dari para publisher yang menggunakan platform Blogger. Karena sepertinya auto ads ini enggan menyisipkan atau menampilkan iklan otomatis di dalam postingan Blogger meskipun jumlah kata dari postingan tersebut panjang menjuntai.

    Lantas apa yang menjadi penyebab auto ads sampai enggan menyisipkan iklan di dalam artikel Blogger?

    Yang jadi penyebab auto ads tidak menyisipkan iklan di dalam artikel atau postingan Blogger adalah karena paragraf di postingan Blogger tidak jelas.

    Dalam kode HTML, penulisan paragraf diwakili dengan tag p seperti contoh berikut ini.

    <p>Ini adalah contoh penulisan paragraf dengan kode HTML.</p>

    Sementara di Blogger, paragraf menggunakan tag div atau bahkan cukup dengan menggunakan line break dengan kode <br /> dua kali.

    Nah, oleh karena itu untuk menampilkan iklan otomatis yang dihasilkan dari auto ads adsense ini, kita harus menggunakan tag p untuk membuat paragraf di dalam postingan Blogger.

    Sebagai contoh penggunaan tag p untuk paragraf Blogger adalah sebagai berikut, ditulis di dalam mode HTML bukan Compose.


    <p>Ini contoh paragraf di dalam postingan yang ditulis di mode HTML</p>

    <p>Ini adalah paragraf kedua..............</p>

    <p>Ini adalah paragraf ketiga..............</p>

    <p>Ini adalah paragraf lainnya..............</p>

    Untuk itu diperlukan pemahaman dasar HTML, khususnya untuk penulisan tag p atau div dan lainnya.

    Cara Memasang iklan Adsense Otomatis di Tengah Artikel atau Postingan Blogger ini sudah saya terapkan di blog pehawe ini, dan iklan yang di tampilkan ditengah postingan juga akan semakin banyak apabila postingan yang kita tulis memiliki paragraf yang bisa di bilang cukup banyak

    Baca Juga : Cara Membuat Iklan Link Tautan Adsense Dengan Banyak Tombol

    Jika sudah menggunakan cara ini namun auto ads tetap tidak muncul di dalam postingan blog, biasanya hal ini disebabkan karena postingan yang kita buat masih kurang panjang atau bisa juga karena terlalu banyak unit iklan adsense yang terpasang.

    Semoga Cara Memasang iklan Adsense Otomatis di Tengah Artikel / Postingan Blogger ini bisa menjadi solusi bagi yang masih kebingunan bagaimana cara untuk menampilkan iklan di dalam postingan AMP dan Non AMP.

    Cara Mengaktifkan Iklan Otomatis/Auto Ads Google Adsense

    View Article

    Dengan mengaktifkan fitur auto ads google adsense di blog, kita tidak perlu lagi repot-repot untuk membuat unit dan menyimpan kode iklan baru di blog kita. Karena secara otomatis auto ads yang kita pasang di blog akan menampilkan iklan secara otomatis di blog baik di halaman beranda blog maupun halaman post/artikel blog kita.

    Format iklan Auto Ads dikatakan sebagai iklan cerdas, karena dengan iklan auto ads ini akan secara otomatis muncul pada area-area tertentu menggunakan metode google untuk membuat keputusan penempatan iklan pada posisi terbaik. Dan yang paling menarik disini adalah kita hanya perlu menambahkan satu potong kode saja ke dalam template yang kita gunakan, dan sisanya google akan mengurus sisanya.


    Auto Ads Google Adsense

    Dengan Mengaktifkan format iklan Auto Ads, kita hanya perlu menyimpan satu kode iklan saja pada blog.
    1. Dengan Auto Ads kita tidak perlu menghapus kode iklan AdSense yang sudah terpasang sebelumnya, karena Auto Ads akan secara otomatis mendeteksi iklan tersebut dan menempatkan lebih banyak iklan yang sesuai di tempat/space kosong lainnya.
    2. Auto Ads secara otomatis sudah mencakup iklan Anchor dan Vignette dan masih banyak lagi format tambahan seperti Text and Display, In-feed dan Ads content ads.
    3. Auto Ads secara otomatis melakukan migrasi pada pengguna yang menggunakan iklan Page Level Ads tanpa perlu menambahkan kode ke halaman mereka.
    4. Auto Ads memberikan Anda pilihan untuk memilih halaman dimana Anda tidak ingin menerapkan Auto Ads seperti pada halaman hasil pencarian dan halaman lainnya.
    5. Auto Ads ini juga sudah support blog yang menggunakan template AMP.


    Baca Juga : Membuat Iklan Adsense di Sidebar Blog AMP HTML

    Cara Memasang Auto Ads di Blog Non AMP

    1. Login ke akun Google Adsense - Klik menu My Ads - Kemudian klik Auto Ads
    2. Kemdudian pada step selanjutnya, silahkan klik Get Started untuk memulai mengaktifkan dan mengatur auto ads.
    3. Selanjutnya pada halaman Pengaturan Umumu atau Global Setting silahkan pilih format iklan yang nantinya akan di tampilkan secara otomatis, dan jangan lupa untuk mencentang “Automatically Get New Format”, hal ini bertujuan agar Auto Ads menampilkan format iklan baru di blog kita jika Google AdSense membuat format iklan baru lagi nantinya. Jika sudah selesai, silahkan klik tombol “Save”.
    4. Selanjutnya silahkan klik tombol “Setup Auto Ads” dan Silahkan copy kode iklan auto ads yang di tampilkan setelah kalian menekan tombol save tadi.
    5. Jika sudah menyalin kode auto ads tadi, selanjutnya silahkan simpan kode iklan auto ads tersebut sebelum kode </head>
    6. Atau, silahkan langsung salin kode berikut dan letakkan sebelum kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;


    <b:if cond='data:blog.pageType not in {&quot;static_page&quot;,&quot;error_page&quot;} and not data:blog.searchQuery'>

    <script async='async' src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'></script>

    <script>

      (adsbygoogle = window.adsbygoogle || []).push({

        google_ad_client: 'ca-pub-123456789',

        enable_page_level_ads: true

      });

    </script>

    Kode di atas tidak akan ditampilkan di halaman static, halaman error, dan halaman pencarian blog.
    Silahkan ganti 123456789 dengan data-ad-client adsense sobat.


    Cara Memasang Auto Ads di Blog AMP

    1. Login Google Adsense - Klik menu My Ads - Pilih Auto Ads
    2. Pada laman Auto Ads, silahkan klik tab Auto Ads for AMP
    3. Selanjutnya silahkan hidupkan Turn on text display ad format dan centang pada Automatic get new format
    4. Kemudian silahkan simpan kode berikut dan letakkan sebelum kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;.


    <b:if cond='data:blog.pageType not in {&quot;static_page&quot;,&quot;error_page&quot;} and not data:blog.searchQuery'>


    <script async='async' custom-element="amp-auto-ads" src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js"></script>


    </b:if>

    Kode di atas tidak akan ditampilkan di halaman static, halaman error, dan halaman pencarian blog.

    Kemudian simpan kode berikut sebelum kode </body>


    <b:if cond='data:blog.pageType not in {&quot;static_page&quot;,&quot;error_page&quot;} and not data:blog.searchQuery'>


    <amp-auto-ads type="adsense" data-ad-client="ca-pub-1234567890"></amp-auto-ads>


    </b:if>

    Silahkan sesuaikan kode yang ditandai sesuai dengan kode data-ad-client Adsense Anda. Kode iklan di atas tidak akan ditampilkan di halaman static, halaman error, dan halaman pencarian blog.

    Baca Juga : Cara Membuat Iklan Otomatis di Tengah Artikel Blog

    Demikian tutorial singkat bagaimana cara mengaktifkan dan menyimpan auto ads adsense yang dapat saya tuliskan pada kesempatan kali ini, semoga bermanfaat.