Tampilkan postingan dengan label Cara Ngeblog. Tampilkan semua postingan
Tampilkan postingan dengan label Cara Ngeblog. Tampilkan semua postingan
1/19/2019

Meta Tag dari Google Untuk Google

View Article
Sebagian besar blogger atau pemilik situs web sudah banyak tau dan paham tentang meta tag, namun untuk yang belum paham tentang apa itu meta tag dan apa manfaatnya, berikut saya sampaikan pengertian meta tag.

Menurut google Meta tag atau Tag meta adalah
cara terbaik bagi webmaster (pemilik situs) dalam memberikan informasi mengenai situs mereka kepada mesin telusur. Tag meta dapat digunakan untuk memberikan informasi ke semua jenis klien, dan setiap sistem hanya memproses tag meta yang dipahaminya dan mengabaikan yang lain


Dari definisi Meta Tag menurut Google diatas bisa diambil kesimpulan bahwa Meta Tag merupakan hal yang penting dan harus ada dalam sebuah situs agar mesin telusur dapat mengambil informasi dari situs tersebut. Tetapi kemudian pertanyaannya adalah Informasi apa yang diambil oleh mesin telusur ? dan Meta Tag seperti apa yang dipahami oleh mesin telusur khusunya google ?

Menurut informasi yang saya baca dari google support bahwa Meta Tag yang dipahami oleh mesin telusur google adalah Meta Tag seperti dibawah ini:
  • <meta name="description" content="A description of the page" />
  • <title>The Title of the Page</title>
  • <meta name="robots" content="..., ..." /> , <meta name="googlebot" content="..., ...">
  • <meta name="google" content="nositelinkssearchbox" />
  • <meta name="google" content="notranslate" />
  • <meta name="google-site-verification" content="..." />
  • <meta http-equiv="Content-Type" content="...; charset=..." /><meta charset="...">
  • <meta http-equiv="refresh" content="...;url=..." />
  • <meta name="viewport" content="...">
Cara memasang Meta Tag diatas sangat mudah yaitu login ke bloger >> Tema >> Edit HTML lalu simpan kode Meta Tag diatas dibawah kode <head>. sehingga kodenya akan terlihat seperti ini:

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="A description of the page" />
<title>The Title of the Page</title>
<meta name="robots" content="..., ..." />
<meta name="googlebot" content="..., ...">
<meta name="google" content="nositelinkssearchbox" />
<meta name="google" content="notranslate" />
<meta name="google-site-verification" content="..." />
<meta http-equiv="Content-Type" content="...; charset=..." />
<meta charset="...">
<meta http-equiv="refresh" content="...;url=..." />
<meta name="viewport" content="...">
Kode lainnya
</head>
Sedangkan untuk keterangan lebih lengkap mengenai fungsi dari masing-masing Meta Tag diatas silahkan kunjungi support google karena kode-kode tersebut bersumber dari halaman support google tersebut.
1/18/2019

Cara Menghubungkan Blog Dengan Google Analytics

View Article
Jadi dalam postingan kali ini saya akan coba bahas bagaimana cara menghubungkan blog dengan google analytics. sebetulnya menghubungkan blog dengan google analytics itu soal teknis dan caranya sangat mudah, tetapi mungkin pertanyaannya adalah Apa manfaatnya menghubungkan blog dengan analitycs ? atau apa gunanya menghubungkan blog dengan google analytics ?

Oke, sebelum menjelaskan cara menghubungkan blog dengan google analytics, saya akan coba jawab terlebih dahulu pertanyaan tersebut diatas secara singkat saja. mulai dari pertanyaan pertama.


Apa Manfaat / Apa Gunanya Menghubungkan Blog Dengan Google Analytics ?

Pada intinya Google Analytics adalah sebuah tools atau lebih tepatnya fasilitas dari google (dalam kasus ini) bagi pemilik situs website termasuk blog yang bisa digunakan untuk mengetahui data statistic pengunjung secara real time seperti jumlah pengunjung dalam waktu sehari, seminggu, atau sebulan. Juga untuk mengetahui dari daerah mana pengunjung tersebut (demografi pengunjung), perangkat apa yang digunakan, perilaku pengunjung situs dan yang paling penting adalah keyword yang dicari pengunjung sehingga dia sampai di situs kita dan mungkin masih banyak lagi yang bisa digali dari Google Analytics.

Jadi berdasarkan pengertian google analytics diatas, bisa diambil kesimpulan bahwa manfaat menghubungkan Blog dengan Google Analytics adalah agar kita bisa mendapatkan informasi berupa data secara real time mengenai aktifitas situs, terutama keyword yang mengantarkan pengujung ke situs milik kita. Setidaknya itu manfaat yang bisa saya ambil dari menghubungkan blog dengan google analytics.

Jika sudah tau manfaatnya dan kamu ingin menghubungkan blog dengan google analytics ikuti langkah-langkahnya dibawah ini:

Cara Menghubungkan Blog Dengan Google Analytics

  • Pertama untuk yang belum punya akun google analytics silahkan daftar dan ikuti petunjuk cara daftar dibawah ini:
  • Buka situs google analytics Klik Daftar
  • Isikan data sesuai petunjuk kemudian klik get tracking ID seperti contoh gambar dibawah ini

  • Klik untuk memperjelas gambar
  • Lalu akan muncul Google Analytics term of service agreement, ckelis saja semua yang harus diceklis kemudian klik I Accept
  • Sekarang kamu akan melihat tracking ID analytics dan global site tag (gtag.js) milikmu, contohnya seperti gambar dibawah ini
  • Copy Tracking ID milikmu kemudian buka blogger
  • Pilih Setelan >> Lainnya kemudian dibagian bawah kamu akan melihat Google Analytics >> Id Property web Analytics
  • Paste Tracking ID kedalam kotak ID Property Web Analytics lalu Simpan Setelan
  • Setelah itu kembali lagi ke google analytics kemudian copy kode global site tag (gtag.js)
  • Kembali lagi Blogger >> Tema >> Edit HTML
  • Dengan menggunakan CTRL + F cari kode </head>
  • Paste kode kode global site tag (gtag.js) tepat diatas kode </head> dan Simpan
Nah sampai disitu berarti kita sudah berhasil menghubungkan Blog dengan Google Analytics.
12/26/2018

Cara menambahkan situs blogspot di menu situs adsense Nov 2018

View Article
Hallo Juragan Blogger selamat malam, dalam postingan kali ini saya akan coba berbagi tentang Cara Menambahkan Situs Blogspot di Setelan Situs Adsense Terbaru setelah ada pembaharuan peraturan dari pihak google adsense per tanggal 20 Nopember 2018.
Nah, ceritanya saya ini adalah seorang pemula yang beberapa waktu lalu disetujui menjadi publisher Adsense non hosted, jadi saat ini saya sedang berusaha membuat banyak blog yang nantinya akan saya templkan kode iklan.

Sebelum adanya pembaharuan peraturan, rasanya begitu mudah menambahkan situs di setelan situs adsense, kita semua sudah mengetahui caranya jadi tidak perlu saya bahas. Tetapi sejak ada aturan baru per tanggal 20 Nopember 2018 Sejak saat itu pula cara untuk menambahkan atau memonetisasi situs blog menjadi berbeda. Halaman "situs saya" yang dulunya ada di dalam menu "Akun" sekarang dipindahkan ke bagian luar sekolom dengan menu lain seperti: Beranda, Iklan, Laporan dll. Dan namanya juga berubah dari "situs saya" menjadi "situs".

Tadinya saya pikir mudah karena petunjuknya juga sudah ada disana, hanya tinggal menuliskan nama situs didalam kotak isian dan menyalin kode iklan kedalam HTML blog dan selesai, tetapi ternyata TIDAK! ada 2 masalah yang saya dapatkan:

1. Tidak bisa menambahkan situs domain .blogspot secara langsung disini. kolom dibawah ini hanya untuk situs non hosted seperti .com, .co.id, .xyz dan sebagainya.
klik untuk memperjelas gambar
2. Ketika mencoba mengaitkan blog dengan adsense melalui blog >> menu penghasilan /earning ternyata: "Blog anda belum memenuhi syarat Adsense"
klik untuk memperjelas gambar
Jika ada yang pernah mengalami masalah seperti yang saya alami diatas, berikut adalah solusinya saya sampaikan dalam bentuk format "Tanya Jawab"

  • Sebelum ditambahkan ke setelan situs apakah di blog tersebut sudah ditempatkan kode iklan?
  • Jika Ya, hapus semua kode iklan di dalam blog tersebut
  • Apakah blog tersebut sudah memiliki posting?
  • Jika belum memiliki, buatlah beberapa posting didalam blog tersebut
  • Apakah blog tersebut baru dibuat?
  • Jika baru dibuat tunggulah beberapa hari, jangan terlalu terburu buru
Jika pertanyaan diatas sudah Agan selesaikan, sekarang bukalah kembali Blog lalu pilih menu penghasilan / Earning. jika tidak menemukan menu Penghasilan / Earning bukalah menu Setelan / settings pilih Bahasa dan Pemformatan / language and formatting kemudian rubah setelan bahasa, misalnya tadinya Indonesia rubahlah ke English (united states) atau english (united kingdom) kemudian simpan setelan dan refresh halaman. Sekarang menu Penghasilan / Earning sudah muncul dan bukalah menu tersebut. tampilannya akan tampak seperti gambar dibawah ini:
klik untuk memperjalas gambar
Kalau sudah sampai ditahap ini, langkah-langkah selanjutnya adalah:
  • Klik Daftar ke Adsense
  • Kemudian kita akan diminta memasukkan alamat email, Masukkanlah alamat email yang terkait dengan akun adsense. INGAT! alamat email yang terkait dengan akun adsense.
  • Selanjutnya klik setjui pengaitan
  • Kemudian halaman akan dialihkan kembali ke blogger dengan keterangan:
  • Selamat!
    Widget AdSense telah ditambahkan ke template blog Anda.
    Tekan Lanjutkan untuk menyesuaikan setelan AdSense Anda
  • Selanjutnya klik Lanjutkan dan Agan akan masuk ke menu Penghasilan >> Setelan tampilan iklan adsense.
Sekarang cobalah Agan masuk ke Akun Adsense masing-masing lalu pergi ke Menu Situs, disana Agan akan melihat blog baru, blog yang baru saja kita kaitkan dengan adsense, dan coba lihat satus akan tertulis "menyiapkan..".

Masuk juga ke Menu Iklan >> Unit Iklan disana juga sudah ada 2 unit iklan yang masih berstatus baru. Cek juga tata letak blog disana sudah ada widget Adsense baru. Nah jika sudah seperti itu beratri kita sudah berhasil menambahkan situs blog domain blogspot baru kedalam menu situs adsense.

Selanjutnya tinggal tunggu saja sampai Blog menampilkan iklan, pengalaman saya paling lama 6 jam. Itulah Cara Menambahkan Situs Blogspot di Setelan Situs Adsense Terbaru Nov 2018.
12/24/2018

Cara Menghapus Situs di Setelan Situs Adsense Terbaru

View Article

Sejak tanggal 20 November 2018 Google memperbaharui manajemen situs didalam google adsense, sejak saat itu halaman "situs saya" yang dulunya ada di dalam menu "Akun" sekarang dipindahkan ke bagian luar sekolom dengan menu lain seperti: Beranda, Iklan, Laporan dll. Dan namanya juga berubah dari "situs saya" menjadi "situs".
klik untuk memperjelas gambar

Sejak saat itu pula cara untuk menambahkan atau memonetisasi situs blog dan menghapus situs blog menjadi berbeda, untuk cara menambahkan situs blog baru kedalam menu situs ini belum pernah saya coba karena saya tidak punya situs baru untuk ditambahkan, jadi kali ini saya hanya akan membahas cara menghapus situs didalam setelan situs adsense baru yang pernah saya lakukan.

Seperti dikethui sebelumnya bahwa dulu sebelum ada pembaharuan ini kita tidak bisa menghapus situs yang sudah kita tambahkan kedalam daftar situs, yang bisa kita lakukan hanya menonaktifkan tombol verifikasinya saja sementara nama situs nya masih tinggal disitu. Dengan adanya pembaharuan setelan situs oleh google, kita bisa benar benar menghapus dalam arti menghilangkan situs yang sudah kita tambahkan kedalam daftar situs. Adapun caranya adalah sebagai berikut:

Hapus Situs dari Setelan Grup Iklan Otomatis

Sebelum menghapus situs yang akan dihapus, pastikan terlebih dahulu bahwa situs tersebut tidak termasuk didalam daftar grup iklan otomatis, jika situs tersebut masuk kedalam daftar url grup iklan otomatis, situs tersebut tidak akan bisa dihapus, hapuslah dari daftar. cara menghapusnya sebagai berikut:
  • Masuk ke Menu Iklan >> Iklan Otomatis
  • Klik grup url yang terdapat situs yang akan dihapus kemudian
  • Kemudian klik edit grup URL (gambar pensil/pulpen abu-abu dibawah sebelah kanan kotak grup url)
  • Kemudian hilangkan ceklis situs yang akah dihapus dari grup iklan otomatis
  • klik untuk memperjelas gambar
  • lalu klik Next atau berikutnya dan simpan setelan url iklan otomatis

Cara Menghapus Situs di Setelan Situs Adsense Terbaru

Setelah situs yang akan dihapus sudah dikeluarkan dari daftar url iklan otomatis, cara untuk menghapusnya adalah sebagai berikut:
  • Masuk ke menu "situs"
  • Ceklist situs yang akan dihapus
  • kemudian klik hapus
  • dan sekarang situs tersebut sudah hilang dari daftar situs
  • klik untuk memperjelas gambar
Itulah cara menghapus Situs di menusitus adsense terbaru 2018.
12/22/2018

Begini Cara Memasang Tombol Subscribe Youtube di Blog

View Article
Memasang Tombol Subscribe Youtube di Blog - adalah salah satu cara alternatif untuk meningkatkan jumlah subscriber channel youtube, seperti kita ketahui bahwa untuk memonetisasi video di channel youtube saat ini sudah tidak mudah lagi seperti dulu.

Sejak ada peraturan baru dari Youtube pada bulan februari 2018 yang manyatakan bahwa untuk dapat memonetisasi video, channel tersebut harus setidaknya memiliki 4.000 jam tayang dan 1.000 pelanggan (subscriber) dalam 12 bulan terakhir. Setelah mendapatkan 4.000 jam tayang dan 1.000 subscriber channel tersebut tidak akan langsung menayangkan iklan, pihak youtube akan secara seksama meninjau apakah channel tersebut mematuhi pedoman komunitas dan persyaratan program partner youtube atau tidak.

Adanya peraturan tersebut merupakan hal baik untuk menjaga agar karya original creator youtube terhindar dari duplikasi, spam dll. Intinya agar youtube menjadi tempat yang sehat untuk membuat konten dan beriklan.



Hal tersebut diatas tentu saja membuat para creator youtube pemula harus bekerja keras dan bekerja cerdas untuk mencapai 4.000 jam tanyang dan 1.000 subscriber, dan salah satu cara untuk memperkenalkan channel youtube milik kita kepada semua orang adalah dengan memajang channel dan membuat tombol subscribe pada sebuah blog, apalagi jika blog dan channel youtube tersebut memiliki keterkaitan satu sama lain. Contohnya seperti channel youtube dan blog milik kawan saya, silahkan lihat contohnya disini: TOTAL ACCESS

Menurut pengalaman kawan saya tersebut, setalah memasang tombol subscriber di blog, jam tayang dan subscriber channel youtube-nya meningkat meskipun tidak signifikan dan sekarang saya sudah bisa melihat iklan di channel youtube tersebut. Dengan kata lain dia sudah melebihi 4.000 jam dan 1.000 subscriber. Mantap!

Lalu bagaimana cara memasang channel youtube dan tombol subscribe di BLog? Nah jika kamu tertarik silahkan ikuti langkah-langkahnya dibawah ini:

Cara Memasang Tombol Subscribe Youtube di Blog

Cara Memasang Tombol Subscribe Youtube di Blog sebetulnya sangat sederhana, kita hanya butuh ID Channel Youtube saja. Sudah tau kan ID Channel youtube Sobat masing masing, Jika masih ada yang belum tahu cara mengetahui ID channel youtube klik tombol dibawah ini tetapi syaratnya Agan harus sudah login ke akun google yang terkait dengan channel youtube
Disana Agan akan melihat informasi akun berupa ID Pengguna Youtube dan ID Channel Youtube, silahkan di copy ID channel Youtube tersebut
Klik untuk memperjelas
Nah, jika sudah mengetahui ID Channel Youtube dan sudah mengkopinya sekarang klik link dibawah ini untuk menuju ke google developer tempat membuat tombol subscribe
Paste Kode ID Channel youtube tadi dibagian Channel name or ID lihat keterangannya pada gambar dibawah
klik gambar untuk memperjelas

Nah jika setting tombol subscribe nya sudah selesai, dibawahnya kita akan melihat kode HTML untuk dipasang kedalam widget di Blog. Sekarang buka blog Agan kemudian masuk ke Tata Letak dan tambah gadget HTML dan paste kode HTML tombol youtube ke dalam HTML tadi, kemudian save dan lihat hasilnya. Nah begitulah cara membasang tombol sucscribe youtube di blog. mudah bukan?? tetapi jika tombolnya dirasa kurang rapih silahkan di otak atik sendiri ya.. jika butuh bantuan silahkan tulis di kolom komentar.
12/14/2018

Membuat Widget Blog Melayang Dengan 2 Cara

View Article
Membuat Widget Blog Melayang Ketika di Scroll - Materi ini sebetulnya sudah banyak sekali tersebar dan mungkin saya termasuk terlambat dalam menulis artikel ini, tetapi untuk melengkapi konten blog yang belum dilengkapi materi ini dan juga saya menawarkan dua alternatif atau dua cara untuk membuat widget blog melayang ketika di scroll, jadi siapa tau menjadi solusi buat Agan yang sudah muter muter keliling blog mencari cara membuat widget melayang tapi belum berhasil mudah mudahan di sini akan berhasil. Nah langsung aja ke pokok pembahasannya ya..



Manfaat Widget Melayang (Sticky) Di Sidebar Blog

Sebuah widget yang dimodifikasi sehingga melayang (sticky) saat di scroll dalam sebuah blog memang bermanfaat untuk mengisi ruang kosong dalam blog tersebut sehingga blog terlihat berisi, apalagi jika kebetulan blog tersebut memiliki postingan yang cukup panjang. Selain itu Sticky widget atau widget melayang akan memudahakan pengunjung dalam menelusuri konten didalam blog tanpa harus scroll balik ke bagian atas.

Mengetahui Identitas (ID) HTML Widget

Penting untuk diketahui sebelum membuat widget nya menjadi melayang adalah kita harus tau bahwa setiap widget HTML/Javascript yang kita buat, masing masing memiliki ID HTML. Nah ID HTML ini lah yang akan kita gunakan dalam script sehingga membuat widgetnya menjadi melayang. Lalu bagaimana cara mengetahui ID HTML Widget? Simak langkah-langkahnya dibawah ini:
  • Silahkan masuk ke Blogger >> Tatal letak (layout)
  • Cobalah membuka widget HTML/Javascript yang sudah ada dengan cara klik edit
  • Dalam contoh kasus ini saya akan membuka widget Recent post yang sudah ada
  • Buatlah tampilan layarnya menjadi full
  • Di Address bar paling ujung sebelah kanan kita akan melihat tulisan Widget ID seperti contoh gambar dibawah ini

Widget id Recent post saya adalah HTML96, itulah caranya mengetahui widget ID HTML/Javascript. Silahkan ingat widget ID HTML milik agan yang akan dibuat sticky atau melayang.

Membuat Widget Melayang (Sticky) Dengan 2 Cara

Setelah kita tentukan widget mana yang akan dibuat melayang dan kita ketahui ID nya, selanjutnya adalah membuat tampilan widgetnya melayang saat halaman di scroll kebawah sehingga ruang kosong didalam blog menjadi terisi dan blog terlihat padat.

Yang dimaksud dengan 2 cara disini adalah kita akan menggunakan 2 script yang berbeda, silahkan pilih mana yang menurut Agan berhasil

Cara 1

1. Buka dashboard blogger kemudian pilih Tema (Theme) >> Edit HTML
2. Dengan menggunakan Ctrl+F cari kode ]]></b:skin>
3. Simpan kode dibawah ini tepat diatas kode]]></b:skin>

.makesticking{background:none!important;position:fixed!important;top:25px;z-index:99;-webkit-transform:translateZ(0);}
#HTML96 .widget-content {padding:1;margin:auto;}

4. Kemudian tambahkan script dibawah ini tepat diatas kode </body>

<script type='text/javascript'>
//<![CDATA[
// Sticky Widget
function makemeSticky(e){function t(){var e=s.getBoundingClientRect();e.top<0?(n.className=a+" makesticking",n.style.width=i+"px"):n.className=a}var n=document.getElementById(e),s=document.createElement("div");n.parentNode.insertBefore(s,n);var i=n.offsetWidth,a=n.className+" makesticky";window.addEventListener("scroll",t,!1)}makemeSticky("HTML96");
//]]>
</script>


Cara 2

1. Lakukan langkah 1 s.d 3 di Cara 1
2. Copy kode dibawah ini tepat diatas kode </body>

<script type='text/javascript'>
$(document).ready(function() {
var stickyWidgetTop = $('#HTML4').offset().top;
var stickyWidget = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyWidgetTop) {
$('#HTML4').addClass('sticky');
} else {
$('#HTML4').removeClass('sticky');
}
};
stickyWidget();
$(window).scroll(function() {
stickyWidget();
});
});
</script>

Itulah dua cara untuk membuat widget di sidebar blog menjadi melayang (sticky), oh iya jangan lupa untuk mengganti widget id HTML96 diatas dengan widget id milik Agan masing-masing. Semoga berhasil dan terimakasih.
11/26/2018

Menyisipkan Related Post Ditengah Artikel Posting Blog

View Article
Membuat related post ditengah artikel adalah salah satu upaya untuk membuat pengunjung blog betah berlama lama mengunjungi blog kita. Tentu saja upaya ini dilakukan setelah kita bisa membuat konten berkualitas.

Related post yang akan dibahas dalam postingan kali ini adalah releted post sederhana sekali tetapi enak dilihat, cocok untuk template blog non AMP yang mengusung tema simpel, clear and clean dan related post seperti ini juga termasuk fast loading. contoh related post yang saya bahas disini yaitu seperti gambar dibawah ini:

Cara Membuat Related Post Simpel Ditengah Postingan Artikel Blog
  • pertama buka blog >> Tema >> Edit HTML >> cari kode </head> gunakan ctrl+F untuk mempermudah pencarian
  • Copy kode dibawah ini dan paste diatas kode </head>

  • <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script type='text/javascript'>
    //<![CDATA[
    var relatedSimply = new Array(); var relatedSimplyNum = 0; var relatedUrls = new Array(); function related_results_labels(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedSimply[relatedSimplyNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[relatedSimplyNum] = entry.link[k].href; relatedSimplyNum++; break;}}}} function removeRelatedDuplicates() { var tmp = new Array(0); var tmp2 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = relatedSimply[i];}} relatedSimply = tmp2; relatedUrls = tmp;} function contains(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false;} function printRelatedLabels() { var r = Math.floor((relatedSimply.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedSimply.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedSimply[r] + '</a></li>'); if (r < relatedSimply.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');}
    //]]>
    </script>
    </b:if>

  • Cari kode ]]></b:skin>
  • Tambahkan kode dibawah ini tepat diatas kode ]]></b:skin>

  • /* Related Post Ditengah Postingan*/
    .related-simplify{position:relative;padding:0;margin:15px auto;width:100%;}
    .related-simplify h4{background:#3498db;padding:8px 12px;margin:0;font-size:15px;font-weight:400;color:#fff;border:1px solid #2e88c5}
    .related-simplify ul{margin:0;padding:0}
    .related-simplify ul li{background:#f6f6f6;position:relative;list-style:none;padding:9px;margin:auto;line-height:1.4em;border:1px solid rgba(0,0,0,0.1);border-bottom:0;transition:all .3s}
    .related-simplify ul li:nth-child(odd){background:#fefefe}
    .related-simplify ul li:last-child{border-bottom:1px solid rgba(0,0,0,0.1)}
    .related-simplify ul li:before{content:'\f138';font-family:fontawesome;position:absolute;margin:0 9px 0 4px;color:#2ecc71;overflow:hidden;transition:all .3s}
    .related-simplify ul li:hover:before{content:'\f138';font-family:fontawesome;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}
    .related-simplify a{color:#0383d9;font-size:13px;margin:0 0 0 30px;}
    .related-simplify a:hover{color:#0383d9;text-decoration:underline}
    .related-simplify ul li:nth-child(n+4) {display:none;}
    @-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}
    @keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}

  • lalu langkah terakhir adalah cari kode <data:post.body/>
  • Ganti kode <data:post.body/> dengan kode dibawah ini: (Perhatian, kita akan menemukan beberapa kode <data:post.body/> kalo tidak salah ada 3 s,d 4 kode didalam template dan setiap template itu berbeda-beda jadi coba saja satu persatu mengganti kode <data:post.body/> dengan kode dibawah ini sampai berhasil.

  • <div expr:id='&quot;post1&quot; + data:post.id'/>
    <div class='related-simplify'>
    <b:if cond='data:post.labels'>
    <b:loop values='data:post.labels' var='label'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=3&quot;' type='text/javascript'/>
    </b:if>
    </b:loop>
    </b:if>
    <h4>Baca Juga</h4>
    <script type='text/javascript'>
    removeRelatedDuplicates();
    printRelatedLabels();
    </script>
    </div>
    <div expr:id='&quot;post2&quot; + data:post.id'><p><data:post.body/></p></div>
    <script type='text/javascript'>
    var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;);
    var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;);
    var s=obj1.innerHTML;
    var t=s.substr(0,s.length/2);
    var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);
    if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
    </script>

Begitulah cara membuat atau menyisipkan related post didalam postingan blog. kode-kode tersebut diatas bersumber dari www.arlinadzgn.com silahkan kunjungi blog nya untuk mendapatkan lebih banyak variasi related post ditengah postingan.
11/13/2018

Cara Memasang Contact Form Di Blog AMP

View Article
Salah satu sarana agar dapat berkomunikasi antara pemilik dan pengunjung Blog selain melalui kolom komentar adalah melalui contact form. Jika biasanya kolom komentar digunakan untuk berinteraksi, pengunjung bertanya kepada penulis terkait bahasan dalam sebuah posting tersebut maka untuk contact form ini sifatnya lebih umum, misalnya untuk urusan bisnis, pemasangan iklan dan sebagainya, dan pesan yang dikirim melalui contact form akan masuk melalui email milik si pemilik blog.

Oleh karena itu contact form memiliki peran yang lumayan penting dalam sebuah blog. Baik blog AMP atau Blog Non AMP seharusnya menyediakan contact form tersebut, tetapi memang cara membuat contact form di Blog AMP terasa lebih sulit dibandingkan dengan blog Non AMP. Terasa sulit mingkin karena tidak banyak orang yang membagi ilmu cara membuat contact form untuk blog AMP.

Sayapun merasa kesulitan mencari caranya, dan akhirnya setelah lama muter muter saya menemukan satu sumber yang bisa dipercaya yaitu kompiajaib.com miliknya mas Adhy Suryadi.

Dan akhirnya setelah belajar dari sana, saya bisa memasang contact form di blog milik saya ini, contohnya bisa Agan lihat melalui tombol di bawah ini:
Lalu bagaimana cara membuat contact form di blog AMP? dibawah ini adalah penjelasannya


Cara Membuat Contact Form Untuk Blog AMP
Sebelum masuk ke caranya pastikan dulu template blog Agan sudah memiliki 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 memiliki kode amp-iframe tersebut, salin kode diatas lalu simpan di bawah kode </style> atau di atas kode &lt;/head&gt;&lt;!--<head/>--&gt; Kalau sudah yakin ada lanjut ke langkah selanjutnya.

Khusus Untuk Yang Memakai Template Infinite AMP
Nah buat teman-teman yang menggunakan template infinite AMP dari teh Arlina seperti yang saya pakai ini, ada beberapa langkah yang harus dilakukan yaitu:
  • Buka Tema >> Edit HTML
  • Cari kode berikut ini : <script async='async' custom-element='amp-social-share' src='https://cdn.ampproject.org/v0/amp-social-share-0.1.js'/>
  • Nah tepat diatas kode tersebut ada kode tag conditional seperti ini: <b:if cond='data:blog.pageType == &quot;item&quot;'>



  • Hapuslah tag conditional tersebut beserta dengan tag penutupnya yaitu </b:if>
  • Kemudian Save Template

Cara Membuat Contact Form Untuk Blog AMP Lanjutan
  • Pertama-tama kita harus membuat Blog baru (di akun yang sama) khusus untuk contact form
  • Aktifkan setelan https blog baru tersebut
  • Kemudian masuk ke menu Template atau Theme lalu non aktifkan tampilan mobile theme-nya
  • Kemudian masuk ke menu Template atau Theme Edit HTML lalu hapus semua kode HTML blog tersebut dan ganti dengan kode khusus (template khusus) contact form dari kompiajaib.com, silahkan donlot melalui link dibawah ini
  • Selanjutnya buatlah halaman statis untuk contact form dan simpan kode HTML dibawah ini pada halaman statis contact form
  • <amp-iframe title="Contact"
    src="https://contactforminfohp.blogspot.com"
    height="400"
    layout="fixed-height"
    frameborder="0"
    sandbox="allow-forms allow-scripts allow-same-origin allow-modals allow-popups">
    <amp-img src="https://2.bp.blogspot.com/-rRo__E6FsPs/Ws7U-IT8KNI/AAAAAAAAw_Q/qCwa6vKHgTIB-ytesdA4FlKrXMRYt5NMACLcBGAs/s1600/placeholder.png"
    layout="fixed-height"
    height="400"
    width="auto"
    placeholder>
    </amp-img>
    </amp-iframe>
  • Jangan Lupa untuk mengganti https://contactforminfohp.blogspot.com dengan URL Bloc contact form yang tadi dibuat.
  • Terakhir adalah publikasikan halaman tersebut dan buatlah menu untuk memanggil halaman contact form
Nah sekarang Blog AMP kita sudah mempunyai halaman contact form. saya harap semoga penjelasannya bisa dimengerti dan berhasil diterapkan.