Cara Alternatif Membuat Related Posts Matched Content Ads

---

Cara Membuat Related Posts Matched Content Ads atau artikel terkait otomatis dengan menampilkan iklan berdasarkan konten yang sesuai. Matched Content Ads pada dasarnya merupakan fitur eksklusif yang dimiliki oleh Google AdSense dan secara eksklusif hanya dapat digunakan pada situs atau blog tertentu yang sudah terdaftar di Google Adsense dan telah memenuhi standar kualifikasi untuk bisa menampilkan fitur Matched Content Ads. Jadi apabila situs atau blog anda walaupun sudah resmi terdaftar di Google Adsense namun belum tentu fitur Matched Content Ads bisa anda terapkan pada situs atau blog anda.

Apa itu Google AdSense Matched Content ?
Google AdSense Matched Content adalah unit iklan asli yang memungkinkan anda untuk menampilkan widget konten terkait atau postingan artikel terkait dari situs web atau blog anda. Widget ini juga memiliki opsi untuk bisa dimemonetisasi menggunakan iklan yang relevan untuk ditampilkan di samping posting terkait atau related posts di situs web atau blog anda.

Fitur Google AdSense Matched Content ini akan memberikan anda kemudahan dalam menampilkan postingan artikel terkait yang relevan di blog anda dengan mudah, hal ini bertujuan agar pengunjung bisa terkait pada blog anda karena tertarik dengan postingan anda lainnya.

Biasanya fitur Related Posts ini secara umum ditempatkan dibawah single artikel, dan dengan adanya fitur Matched Content ini anda bisa memonetisasi untuk bisa menghasilkan uang dari situs atau blog dan biarkan Google yang mengatur dimana iklan akan dimunculkan beserta dengan postingan terkait anda. Matched Content atau Konten Yang Sesuai adalah alat rekomendasi gratis yang menawarkan cara mudah untuk mempromosikan konten anda kepada pengunjung situs. Matched Content ini fungsinya hampir mirip dengan Related Post. Perbedaannya adalah Matched Content itu pemberian dari Google Adsense sedangkan Related Posts adalah widget settingan pribadi.

Standar Kualifikasi Fitur Matched Content Ads
Beberapa hal penting yang perlu diperhatikan agar bisa membuka fitur Matched Content Ads yang ada di Google Adsense.

1. Jumlah Trafik
Beberapa blogger banyak menyebutkan bahwa untuk mendapatkan fitur ini kita harus memiliki jumlah trafik yang besar setiap harinya. Bahkan angka yang disebutkan berkisar " Puluhan Ribu " PV ( Page View ). Ini tentu saja sangat berat terutama untuk blogger baru yang belum terkenal tentu tidak bisa terlalu berharap untuk mendapatkan fitur istimewa ini dari Google Adsense.

2. Jumlah Artikel
Cara mendapatkan Matched Content Ads selanjutnya adalah masalah jumlah artikel dalam satu blog. anda harus memiliki artikel yang memadai sehingga fitur ini bisa dibuka dan digunakan serta dapat dimanfaatkan semaksimal mungkin untuk bisa meningkatkan PV (Page View) dari blog yang anda kelola. Beberapa artikel blogger mengatakan syarat minimum agar fitur Matched Content Ads bisa dibuka adalah dengan memiliki jumlah artikel minimum sebanyak 200 artikel.

3. Situs Dimonetisasi Secara Optimal
Dalam halaman resminya Google menyebutkan bahwa untuk mendapatkan fitur ini situs harus dimonetisasi secara optimal. Optimal disini bukan berarti menampilkan iklan sebanyak banyaknya apalagi sekarang ini penempatan iklan Google Adsense sudah tidak dibatasi lagi.

Optimal berarti anda menempatkan iklan sesuai dengan TOS Google tanpa melanggar apapun yang tidak diperbolehkan. Cara mengoptimalkan monetisasi situs ini pun bisa bermacam macam. Diantaranya adalah :

• Eksperimen penempatan iklan
• Eksperimen jenis dan ukuran iklan

4. Konsisten Menulis Artikel
Sebenarnya ini tidak disebutkan dalam halaman resmi Google mengenai Matched Content Ads atau Konten Yang Sesuai. Namun menurut admin update artikel secara rutin ini sangat penting dengan alasan untuk memberikan update kepada pembaca setia blog anda dan juga agar Google menganggap blog anda masih aktif dan di monetisasi secara optimal.

Cara Memasang Matched Content Didalam Blog
Cara pemasangan Matched Content Ads sama dengan pemasangan widget modifikasi related posts yang ada pada pembahasan tutorial di dalam artikel ini, maka dari itu untuk cara pemasangan pembahasannya digabung menjadi satu. Ok mas bro dan mba sis bagi yang tertarik silakan disimak terus tutorialnya.

Pada pembahasan kali ini admin tidak akan berbicara panjang lebar tentang Google Adsense Matched Content Ads namun pembahasan lebih ke arah tutorial untuk Widget Modifikasi Related Posts dengan tampilan menyerupai Matched Content Ads yang full responsive dengan animasi slide up di Blogger. Tutorial yang admin buat pada artikel ini bertujuan agar para blogger bisa memiliki widget Matched Content Ads hasil modifikasi dari widget related posts. Jadi walaupun situs atau blog anda tidak menggunakan provider iklan dari Google Adsense, maka tampilan dari fitur Matched Content Ads yang ada pada Google Adsense tersebut masih bisa dapat digunakan.

Bagi anda yang belum bisa menggunakan fitur Google Adsense Matched Content ataupun anda yang tidak menggunakan publisher Google adsense, jangan khawatir dan gundah gulana karena admin memiliki solusi praktis agar fitur Matched Content Ads dapat digunakan secara global tanpa harus menggunakan Google Adsense.

Cara yang admin maksudkan adalah... yup sesuai dengan judulnya Membuat Related Posts Matched Content Ads, konsepnya adalah memodifikasi widget Related Posts sedemikian rupa hingga fungsi dan manfaatnya bisa mirip dengan Google Adsense Matched Content. Widget modifikasi related posts ini bisa dikolaborasikan dengan hampir semua ads provider termasuk Google Adsense itu sendiri. Harap diperhatikan juga untuk mengkolaborasikan dengan Google Adsense anda harus ekstra hati-hati karena takutnya pas sedang uji coba widget anda tidak sengaja meng-klik iklan adsense anda sendiri yang dapat berakibat akun adsense anda tersuspend atau terkena banned.

Widget Modifikasi Related Posts
Widget Related Posts atau jika diterjemahkan dalam Bahasa Indonesia adalah Widget Artikel Terkait, merupakan artikel-artikel blog yang masih memiliki hubungan dengan artikel yang sedang dibaca oleh pengunjung. Related Posts juga merupakan sebuah custom widget pada blogger yang akan menambah daya tarik sekaligus mempermudah pengunjung blog untuk menemukan artikel yang berkaitan dengan artikel yang sedang dibacanya.

Bagi pengguna Blogger, fitur ini sudah tidak asing lagi bahkan fitur wajib yang harus dipasang pada blog. Related Post sengaja dipasang untuk memudahkan navigasi pengunjung yang ingin membaca artikel yang berhubungan dengan artikel yang sedang dibaca. Dengan semakin banyak jumlah artikel yang dibaca, akan meningkatkan page view blog tersebut. Banyaknya page view pada posting blog merupakan poin yang baik bagi blog tersebut di mata mesin pencari.

Fungsi dari Related Post ini juga merupakan salah satu teknik untuk menambah pageview halaman, sesuai dengan posting artikel yang terkait dengan label secara otomatis.

Widget Related Post memiliki banyak versi mulai dari tampilan yang sederhana hingga memiliki tampilan yang serba animasi. Versi yang lain bahkan menggabungkan teknik animasi tampilan slide show dan tombol backward dan forward. Karena widget Related Posts ini sifatnya custom maka dalam artikel ini widget related posts dimodifikasi menjadi versi Widget Related Posts Matched Content Ads yang bisa digunakan pada platform blogspot.

Widget Related Posts yang admin bagikan merupakan versi dengan tampilan horizontal yang dikombinasikan dengan animasi hover slide up sehingga terlihat modern dan kekinian. Boleh dibilang versi Related posts ini sangat ciamik dengan waktu loading yang cepat dan tampilan yang atraktif. Widget related posts versi codeflare ini juga sudah full otomatis untuk mengenali keterkaitan dari artikel yang berhubungan, jadi misalkan terdapat artikel yang belum memiliki keterkaitan (belum banyak) maka widget Related Posts ini akan menyesuaikan secara otomatis dengan menampilkan Recent Posts (artikel terbaru). Selain itu widget Related Posts ini sudah mendukung fitur Full Responsive artinya bisa terlihat disemua perangkat pengguna dengan baik.

Berikut contoh Related Posts dengan tambahan modifikasi Matched Content Ads, seperti yang terlihat dibawah ini.

Informasi Singkat

---

Konten yang cocok adalah layanan rekomendasi gratis yang menawarkan cara sederhana untuk mempromosikan konten anda kepada pengunjung situs anda. Dengan menawarkan pembaca anda lebih banyak konten yang relevan dengan mereka, anda dapat meningkatkan tampilan halaman situs anda, waktu yang dihabiskan di situs anda, loyalitas pembaca, tayangan iklan dan akhirnya pendapatan iklan.

Rekomendasi konten yang cocok didasarkan pada kesamaan topik dan dipersonalisasi untuk pembaca. Eksperimen kami menunjukkan bahwa rata-rata rekomendasi Konten yang Cocok meningkatkan jumlah halaman yang dilihat oleh 9% dan waktu yang dihabiskan di situs sebesar 10%.

Dengan unit konten yang Cocok, anda memilih halaman yang anda inginkan rekomendasi muncul, kemudian AdSense mempromosikan artikel di situs anda yang paling relevan bagi pembaca halaman tersebut.

Beberapa hal penting yang perlu diketahui tentang unit konten yang Cocok:

• Mereka membawa konten yang relevan menjadi perhatian pengguna anda, yang dapat membantu meningkatkan tampilan halaman dan waktu yang dihabiskan di situs web anda.
• anda dapat menempatkan unit konten yang Cocok pada halaman mana saja di situs yang memenuhi syarat anda.
• Rekomendasi ada di dalam situs, misalnya, jika anda memiliki dua situs web abc.co.uk dan xyz.co.uk, maka rekomendasi yang kami hasilkan untuk setiap situs akan bersifat internal ke situs tersebut. Perhatikan bahwa kami hanya menghasilkan rekomendasi dari halaman yang memiliki iklan Google atau unit konten yang Cocok pada mereka.
• Unit-unit ini berfungsi pada ponsel, tablet, dan desktop.
• Untuk situs di mana sebagian besar artikel tidak memiliki gambar, unit konten yang cocok akan ditampilkan dalam format hanya teks.
• Kebijakan program AdSense masih berlaku untuk halaman yang berisi unit konten yang Cocok.
• Mereka tidak memenuhi syarat untuk digunakan dalam percobaan.

---

Sumber : Google Support

Kode Generator Widget

Kode Generator Widget adalah tool untuk mempersingkat sekaligus mempercepat settingan kode widget yang akan digunakan. Bagi anda yang tertarik untuk memasang widget Related Posts Matched Content Ads ini silakan anda menggunakan kode generator di bawah ini untuk mengenerate kode sehingga mempercepat proses pemasangan kode widget.

Initial Data Setup
Blog URL	Auto Manual
Widget Placement
Element ID
Ads Configuration
Widget Posts View	Only Images Images and Content
Ads Position	Default Random Even Odd Manual
Ads Provider	Google Adsense URL Shortener Other Ads Provider Ads Image Link
Ads Account Data	Adsense Publisher ID Adsense Slot Number Ads Class Ads Code Input
Posts Configuration
Post Content	Post Box View
Content Label
Loading Text
Tooltip Text
Content Text Limit
Header Title	Enable Title Disable Title
Read-more Symbol
Read-more Tooltip
Image Blank URL
Background Color
Widget Render	On Load Render On Complete Render
Unlock Full Version Code
Unlock Code
Generate Code
Show Code Preview Add To Blogger
Widget Code
Copy to clipboard Copy code

script code here...

KETERANGAN :

Blog URL

Merupakan setting untuk URL nama domain yang akan anda gunakan, pada settingan ini terdapat dua pilihan yaitu pilihan menggunakan nama domain otomatis dan pilihan untuk input nama domain manual.

• Opsi Auto Langsung menggunakan nama domain secara otomatis sesuai dengan lokasi domain dari widget yang terpasang.
• Opsi Manual Opsi ini dapat digunakan apabila lokasi URL domain dari widget yang akan digunakan berbeda lokasi dari URL domain konten artikel atau bisa juga digunakan apabila konten artikel yang anda miliki pada blog anda dengan kategori (tags) yang masih sedikit sehingga agar tampilan dari widget dan juga monetisasi blog bisa maksimal maka anda bisa mengakalinya dengan menggunakan URL domain yang lain.
  
  Contoh Blog URL : https://yourblog.blogspot.com
  
  Silakan anda ganti tulisan yourblog dengan nama blog yang anda gunakan.

Widget Placement

Merupakan opsi untuk posisi widget dalam halaman blog, secara default posisi widget ditaruh diatas elemen #comments sesuai dengan input teks yang tertera dan jika opsi input Element ID tidak ditentukan (dikosongkan).

Apabila ingin ditaruh pada posisi lainnya silakan anda isi input Widget Placement dengan posisi elemen ID yang akan diletakan. Harap diingat posisi akan diletakan di atas dari elemen ID yang ditentukan.

Penggunaan tanda # untuk menandakan elemen tersebut memiliki atribut ID yang unik (satu-satunya) sedangkan tanda . menandakan elemen tersebut adalah elemen yang memiliki atribut CLASS dari kode HTML. Info lebih lanjut mengenai atribut ID dan CLASS bisa anda searching di Google.

Element ID

Merupakan opsi untuk posisi widget yang kondisional artinya posisi dari widget bisa diletakan dimana saja dalam halaman blog, jika tidak ditentukan (dikosongkan) maka widget secara default akan menggunakan variabel Widget Placement untuk penempatan posisi.

Widget Posts View

Merupakan opsi untuk pilihan apakah widget hanya menggunakan gambar saja atau digabungkan dengan judul dan penggalan konten artikel.

• Opsi Only Images Opsi ini dapat anda gunakan jika anda ingin menyamarkan iklan sebagai postingan artikel sehingga memiliki kesempatan besar pengunjung blog anda meng-klik iklan tersebut. Apabila opsi ini diaktifkan maka secara otomatis animasi slider juga akan di non-aktifkan.
• Opsi Images and Content Opsi ini dapat digunakan jika anda ingin membedakan mana yang iklan mana yang asli artikel terkait. Jika anda menggunakan provider Google Adsense, ada baiknya anda menggunakan opsi ini. Pastikan setingan tipe iklan pada google adsense menggunakan opsi responsive dan bertipe square.

Ads Position

Merupakan opsi untuk tampilan iklan, secara default opsi tampilan iklan adalah Random

• Default
  
  • Random
    Posisi iklan akan ditampilkan secara acak pada widget related posts.
  • Even
    Posisi iklan ditampilkan pada kotak hitungan genap.
  • Odd
    Posisi iklan ditampilkan pada kotak hitungan ganjil.
• Manual
  Penempatan posisi iklan akan ditampilkan sesuai dengan urutan nomor kotak yang anda tentukan. Jika dikosongkan maka iklan akan ditampilkan pada semua kotak dari widget tersebut. Hitungan indeks kotak dimulai dari angka 0 (nol) sampai batas post content yang anda tentukan.
  
  Contoh : Jika anda menentukan post content berjumlah sembilan (9) dan hanya ingin menampilkan iklan pada indeks kotak nomor 1, 4 dan 7 maka silakan anda tuliskan pada kotak input tersebut sesuai dengan indeks kotak yang ingin anda tampilkan 1,4,7. Contoh ilustrasi denga setingan maxpost 9 dan menggunakan tampilan 3 kotak per baris.
  
  
  |[0] [1] [2]|
  |[3] [4] [5]|
  |[6] [7] [8]|
  

Ads Provider

Merupakan opsi untuk menentukan provider iklan yang akan anda gunakan pada widget Related Posts Matched Content Ads ini.

• Google Adsense
  Gunakan opsi ini jika anda ingin menampilkan iklan menggunakan provider dari Google Adsense. Biasanya iklan google adsense tidak tampil ketika pertama kali menggunakan widget ini. Iklan google adsense yang tidak tampil bisa disebabkan oleh beberapa faktor, antara lain :
  
  • Settingan unit iklan pada google adsense belum di set untuk fitur responsive dengan dimensi square.
  • Salah memasukan input kode Slot Iklan.
  • Situs atau blog anda belum disetujui sebagai publisher google adsense.
  • Iklan google adsense butuh waktu untuk penyesuaian setidaknya 1 hari sampai seminggu agar iklan google adsense bisa terlihat dan tertampil dengan baik pada widget ini. Jadi jangan kaget apabila setelah memasang widget ini iklan google adsense tidak terlihat pada box view widget related posts ini.
• URL Shortener
  Gunakan opsi ini jika anda ingin menampilkan iklan menggunakan provider adfly, openlink dan sebagainya.
• Other Ads Provider
  Gunakan opsi ini jika anda ingin menampilkan iklan menggunakan provider seperti yllix, bidvertizer dan lain sebagainya. Pastikan provider jasa iklan memiliki opsi untuk menampilkan iklan dengan dimensi lebar kotak antara 120 px sampai 200px dan mendukung fitur responsif.
• Google Ads Image Link
  Gunakan opsi ini jika anda ingin menampilkan iklan menggunakan provider seperti safelink, link referal, iklan pribadi dan sebagainya.

Ads Account Data

Merupakan opsi untuk spesifikasi iklan dan juga data iklan yang diberikan oleh provider jasa iklan agar iklan bisa tertampil pada widget ini.

• Google Adsense
  
  • Adsense Publisher ID
    Silakan anda masukan user ID anda untuk publisher google adsense. Contoh user ID adsense seperti yang tertera pada input teks tersebut.
  • Adsense Slot Number
    Merupakan kode slot iklan google adsense. Kode ini terdapat pada masing-masing unit iklan google adsense dan kode slot iklan merupakan kode unik jadi kode slot antar unit iklan berbeda antara satu dengan yang lainnya.
    
    Contoh pengisian :
    Jika hanya ingin menampilkan 1 iklan maka anda cukup menulis satu kode slot iklan.
    
    
    Jika ingin menampilkan lebih dari 1 slot iklan maka anda dapat menulis kode slot iklan seperti berikut ini. Misalkan untuk 3 slot unit iklan.
    
    
    Nomor kode slot iklan di atas hanya untuk contoh silakan anda gunakan kode slot iklan sendiri yang terdapat pada unit iklan yang ada di akun google adsense anda.
• URL Shortener
  URL Shortener hanyalah tautan pengalih jadi tidak ada tampilan iklan melainkan tautan (link) dari artikel terkait akan diberi pengalihan sementara sebelum menuju tautan asli dari konten artikel yang terkait. Misalkan jika anda menggunakan provider adf.ly maka link artikel terkait yang asli akan diganti dengan tautan dari adf.ly sehingga jika pengunjung menekan tombol tautan artikel sementara maka tautan tersebut akan membuka halaman pengalihan adf.ly sementara yang berisi iklan kemudian setelah beberapa waktu tautan asli artikel terkait tersebut akan dimunculkan.
  
  Karena tidak ada tampilan iklan yang ditampilkan maka widget related posts matched content ads ini akan terlihat natural bagi pengunjung blog namun tautannya sudah dimodifikasi sesuai jumlah yang ditentukan. URL Shortener ini memiliki higher rate (kemungkinan tinggi) untuk iklan dilihat oleh pengunjung blog sehingga dapat dengan mudah mendapatkan hasil yang cepat dari iklan URL Shortener.
  • URL Shortener ID
    Kode unik ID dari akun URL Shortener. Kode ini bisa anda temukan biasanya pada bagian tool atau bagian referal.
  • Ads Slot
    Fungsinya untuk menentukan berapa jumlah iklan yang akan ditampilkan pada kotak related posts. Jika dikosongkan maka semua tautan artikel terkait akan diganti dengan tautan URL Shortener. Silakan anda isi jika memilih menampilkan URL Shortener, input nilainya mulai dari 1 sampai jumlah post content yang anda tentukan.
• Other Ads Provider
  Merupakan pilihan untuk layanan jasa iklan lainnya, seperti : yllix, bidvertiser dan lain sebagainya.
  • Tombol Ads Class
    Merupakan tombol untuk menambahkan kode slot iklan yang akan digunakan.
  • Ads Code Input
    Merupakan kotak input untuk menaruh kode unit iklan. Silakan anda taruh kode unit iklan diantara elemen <div>, untuk menaruh kode unit iklan lainnya silakan anda tekan tombol Ads Class kemudian letakan kode unit iklan tersebut diantara elemen <div>.
• Ads Image Link
  Merupakan pilihan jika anda ingin memasang iklan dari sponsor pribadi atau iklan anda sendiri. Pada opsi ini cukup mudah anda tinggal memasukan link URL gambar yang akan digunakan kemudian masukan juga link untuk tujuannya. Contoh penulisan input seperti yang terlihat pada input box.

Post Content

Merupakan opsi untuk menentukan banyaknya related post yang akan ditampilkan, sedangkan box view adalah opsi untuk menentukan banyaknya related post dalam satu baris.

Content Label

Merupakan opsi untuk pilihan related post yang ditampilkan, jika dikosongkan maka related post yang ditampilkan berdasarkan label tag dari artikel yang sedang dikunjungi oleh pengunjung blog. Apabila related post yang ingin di tampilkan berbeda dari label yang ada maka silakan anda masukan input untuk label tag spesifik yang ingin ditampilkan.

Loading Text

Merupakan opsi untuk menentukan text loading yang akan digunakan, anda bisa menempatkan text, elemen gambar atau elemen html lainnya untuk menampilkan pesan loading...

Tooltip Text

Merupakan opsi apakah ingin menampilkan tooltip untuk anchor link yang ada pada widget ini.

Content Text Limit

Merupakan opsi untuk menentukan jumlah limit untuk penggalan text konten artikel. Jika tampilan penggalan text konten artikel dirasa kurang banyak silakan anda masukan nilai input pada kotak input tersebut.

Header Title

Merupakan opsi untuk menentukan apakah ingin menampilkan header titla atau tidak.

Readmore Symbol

Merupakan opsi untuk tampilan gambar symbol Readmore, anda bisa menggantinya dengan elemen gambar atau elemen symbol fontawesome.

Readmore Tooltip

Merupakan opsi dari text tooltip yang akan digunakan.

Image Blank URL

Merupakan opsi dari URL gambar default yang akan digunakan, fungsinya adalah untuk menampilkan gambar default apabila gambar dari konten artikel tidak bisa ditampilkan karena ada kesalahan error.

Background Color

Merupakan opsi untuk menentukan warna latar belakang yang akan digunakan. Bisa menggunakan format hex, rgb, rgba, hsl dan color name.

Widget Render

Merupakan opsi untuk menentukan apakah script di render langsung atau menunggu semua dokumen html selesai di render.

Unlock Code

Merupakan opsi untuk menghilangkan atribut credit yang terpasang secara otomatis.

Cara Pemasangan Manual

PERINGATAN

Perhatian ! sebelum melakukan perubahan pada kode HTML template blog, sebaiknya anda melakukan backup kode HTML template blog terlebih dahulu, dikarenakan untuk menghindari hal-hal yang tidak diinginkan. Apabila terjadi kesalahan prosedur dalam melakukan perubahan kode HTML template blog, maka anda dapat melakukan proses perbaikan dengan cepat dan mudah.

Pada Bab ini merupakan cara manual untuk pemasangan widget modifikasi related posts apabila anda tidak menggunakan kode generator di atas. Kode widget bisa dipasang langsung pada kode template blog atau di dalam halaman artikel (mode edit HTML). Pastikan juga anda sudah memasang framework JQuery pada template blog anda.

Kode widget Related Post secara default akan mengacu pada elemen komentar (#comments) sehingga apabila tidak ada kostumisasi lebih lanjut maka Related Post akan terlihat di atas elemen komentar (#comments). Cara kostumisasi lebih lanjut ada pada bab selanjutnya, namun dipastikan dahulu anda sudah memasang kode CSS dan Javascript di bawah ini.

Cara Pemasangan Kode CSS dan Javascript :

• Silakan login dahulu ke blog anda.


• Klik tombol Tema untuk masuk ke tema editor.
  
  
  


• Klik tombol Edit Tema untuk menampilkan kode HTML Template Blog.
  
  
  


• Geser scrollbar ke posisi paling bawah.
  
  
  


• Letakan kode yang didapatkan dari generator kode tepat diatas kode </body>.
  
  
  
  
  
  KETERANGAN
  Kode CSS bisa juga diletakan didalam CSS Skin Code atau diatas kode </Head> atau bisa juga di dalam postingan artikel dan kotak widget.
  
  Elemen-elemen pada kode CSS bisa anda sesuaikan lagi agar bisa sesuai dengan template blog yang anda gunakan, seperti elemen warna latar, margin, padding, dimensi gambar dan elemen lainnya.

Kustomisasi Widget

Widget Related Post pada settingan awal akan ditampilkan di atas elemen komentar dan tentunya letak dari tampilan tersebut masih bisa disesuaikan sesuai dengan kebutuhan anda. Cara untuk merubah lokasi dari tampilan widget Related Post ini yaitu dengan merubah nilai containerIds yang terdapat pada script di atas.

Cara kedua untuk merubah lokasi tampilan yaitu dengan menempatkan elemen spesifik di dalam kode HTML template blog anda. Berikut elemen kode spesifik yang bisa anda tempatkan dimana saja di dalam kode HTML blog anda.

<div id='related_posts'></div>

Kode HTML di atas bisa anda tempatkan di mana saja pada kode HTML blog, bisa di dalam kotak widget, di dalam postingan artikel atau di lokasi footer blog. Bisa juga digabungkan dengan efek float dan animasi JQuery yang bisa anda sesuaikan sendiri.

Baiklah semoga informasi kali ini bisa memberikan manfaat bagi pembaca artikel blog CodeFLare. Sampai bertemu lagi di postingan artikel berikutnya.

Keyword

Cara, Pemasangan, Memasang, Membuat, Artikel, Terkait, Related, Article, Post, Automatic, Responsive, Blog, Blogger, Blogspot, Responsif, Otomatis, Link, Page, View, Animasi, Script, CSS, JavaScript, JQuery, Widget, Custom, Recent, Code, Adsense, Matched, Content, Ads, Advertise, Iklan, Pasang

Incoming Search Term

Cara Memasang Widget Related Post, Cara Menggunakan Related Post, Cara Membuat Related Otomatis, Animasi Slide Up Related Post Blogger, CSS Slide Up Related Post, Cara Pasang Related Post Di Blogger, Related Post Super Keren dan Menarik, Widget Related Post Terbaru 2020, Kode Script Related Post Blogspot, Related Post Simple, Cara Mudah Memasang Related Post Content, Artikel Related Post, Related Posts Matched Content Ads Google Adsense, Modified Widget Related Posts Adsvertise Match By Article Content Blog Blogger Blogspot, Cara lain membuat adsense matched content, Cara unik pasang matched content ads, Memasang matched content selain dari google adsense, Matched content ads blog menggunakan widget recent posts atau related posts

//<![CDATA[ /* -- Ajax Related Post or Recent Post || codeflare blogspot -- */ function relatedPostsWidget(a){ (function(e) { var f = { /* Start Initial Variabel */ blogURL:'', containerIds:'#comments', containerSelector:'#related_posts', /* Initial Ads Config */ onlyImages:false, adsPosition:'random', adsPublisher:'adsense', /* ------------------------------------------------ */ /* Use only for adsense */ adsPubID:'ca-123456789', adsSlot:['12345','6789'], /* Use Other Ads Publisher */ adsDataClass:'.adsDataClass', /* Use Image Ads Publisher */ adsImgUrl:['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCAxKWRepnLnVvJZ1xM_Hf5F7g79-2mAjxmINkRqILarOfJ0xrhNwY0xI_0khgV0MCk-zdHzq8Fg2192W6aOLhr2wHJgAfu6DImUZgKYznoFGlgj_PlWgPQ_t919WCdRi5Moxz5BNs9-w/s1600/ads.jpg'], adsImgLink:['https://goraps.com/fullpage.php?section=General&pub=133317&ga=g'], /* Use Image Adf.ly Publisher */ adsFlyRedID:'822497', adsFlySlot:'5', /* ------------------------------------------------ */ /* Recent Posts Config */ maxPosts:9,maxTags:9,maxPostsPerTag:9, boxView:4, tags:null, loadingText:'Loading...', relevantTip:'', MonthNames:["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], rlt_summary:100, showTitle:true, readMoretext:' <i class="fa fa-plus-square" aria-hidden="true"></i>', readMoreTitle:'Click to read more !', rlpBlank:'', rlt_thumb:200, postScoreClass:'', ShowDate:true, bgColor:'#0083da', onLoad:false, unlockkey:'' /*keycode*/ }; /* End Initial Variabel */ f = e.extend({}, f, a); var k = 0, b = null, g = null; if(!$(f.containerSelector).length){ $(f.containerIds).before('<div id="'+(f.containerSelector).substring(1)+'"></div>'); } var c = function(x, r){ k++; if(x.feed.entry){ for(var w = 0; w < x.feed.entry.length; w++) { var m = x.feed.entry[w]; var o, p, C, q, B, n, t, A, v, y, z = ""; for(var u = 0, s = m.link.length; u < s; u++) { if(m.link[u].rel == "alternate") { z = m.link[u].href; break; }} o = ("content" in m) ? m.content.$t : ("summary" in m) ? m.summary.$t : ""; var l = /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi; q = e("<div></div>").append(o.replace(l, "")); B = q.find("img"); if("media$thumbnail" in m) { p = m.media$thumbnail.url.replace(/=s[0-9]+\-c/g, "=s" + f.rlt_thumb); p = p.replace(/\/s[0-9]+\-c/g, "/s" + f.rlt_thumb); } else { if(B.length != 0) { p = B[0].src } else { p = f.rlpBlank }} o = o.replace(/<\S[^>]*>/g, ""); if(o.length > f.rlt_summary) { o = o.substring(0, f.rlt_summary) } C = m.title.$t; y = m.published.$t.substring(0, 10); n = y.substring(0, 4); t = y.substring(5, 7); A = y.substring(8, 10); v = f.MonthNames[parseInt(t, 10) - 1]; if(location.href.toLowerCase() != z.toLowerCase()) { i(z, C, p, o, n, A, v) }}} if(k >= f.tags.length) { g.attr("class", ""); e("#related-posts-loadingtext", b).remove(); if(f.maxPosts > 0) { e("li:gt(" + (f.maxPosts - 1) + ")", g).remove() }}}; var ad=0;var arand=[];var ardata=[]; if(f.adsPublisher.toLowerCase()=='adsense'){ if(f.adsSlot.length>f.maxPosts){var lno=f.maxPosts;}else{var lno=f.adsSlot.length;} for(var ar=0;ar < lno;ar++){arand[ar]=Math.floor(Math.random(Math.random())*f.maxPosts);} } if(f.adsPublisher.toLowerCase()=='adsdata'){ for(var ar=0;ar < $(f.adsDataClass).length;ar++){ arand[ar]=Math.floor(Math.random(Math.random())*f.maxPosts); ardata.push($(f.adsDataClass).eq(ar).html()); } $(f.adsDataClass).remove(); } if(f.adsPublisher.toLowerCase()=='adslink'){ for(var ar=0;ar < f.adsImgUrl.length;ar++){arand[ar]=Math.floor(Math.random(Math.random())*f.maxPosts);} } if(f.adsPublisher.toLowerCase()=='adsfly'){ if(f.adsFlySlot==''){var adf=f.maxPosts} else if(f.adsFlySlot.toLowerCase()=='half'){var adf=f.maxPosts/2} else if(parseInt(f.adsFlySlot)<=f.maxPosts&&parseInt(f.adsFlySlot)>0){var adf=parseInt(f.adsFlySlot);} else {var adf=3;} for(var ar=0;ar < adf;ar++){arand[ar]=Math.floor(Math.random(Math.random())*f.maxPosts);} } var i = function(q, u, w, m, y, v, x){ var r = e("li", g); for(var p = 0, l = r.length; p < l; p++){ var t = e("a", r.eq(p)); var s = j(t); if(t.attr("href") == q){ h(t, ++s); for(var o = p - 1; o >= 0; o--){ var n = e("a", r.eq(o)); if(j(n) > s) { if(p - o > 1) { r.eq(o).after(r.eq(p)); }return}} if(p > 0) { r.eq(0).before(r.eq(p)); }return}} if(f.onlyImages==true){ var con='<li><div class="inner"><a class="titleRelatedPost" href="' + q + '" title="' + (f.relevantTip ? f.relevantTip.replace("\d", 1) : u) + '"><span class="imageRPalt"><img alt="' + u + '" src="' + w + '"/></span><strong>' + u + '</strong></a><p>' + m + '<a title="' + (f.readMoreTitle?f.readMoreTitle:u) + '" href="' + q + '">' + (f.readMoretext ? f.readMoretext : " (...)") + '</a>' + (f.ShowDate === true ? '<span class="datealt"><strong>' + v + '</strong><span>' + x + '</span><span>' + y + '</span></span>' : '') + '</p></div></li>'; }else{ var con='<li><div class="inner"><a class="titleRelatedPost" href="' + q + '" title="' + (f.relevantTip ? f.relevantTip.replace("\d", 1) : "") + '"><span class="imageRP"><img alt="' + u + '" src="' + w + '"/></span><strong>' + u + '</strong></a><p>' + m + '<a title="' + (f.readMoreTitle?f.readMoreTitle:u) + '" href="' + q + '">' + (f.readMoretext ? f.readMoretext : " (...)") + '</a>' + (f.ShowDate === true ? '<span class="date"><strong>' + v + '</strong><span>' + x + '</span><span>' + y + '</span></span>' : '') + '</p></div></li>'; } if(f.adsPublisher.toLowerCase()=='adsense'){ var cads='<li><div class="innerads"><ins class="adsbygoogle" style="display:block;box-sizing:border-box;min-width:100%;min-height:100%;" data-ad-client="'+f.adsPubID+'" data-ad-slot="'+f.adsSlot[ad]+'" data-ad-format="auto" data-full-width-responsive="true"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});<\/script>'+ (f.ShowDate === true ? '<span class="date"><strong>' + v + '</strong><span>' + x + '</span><span>' + y + '</span></span>' : '') +'</div></li>'; } if(f.adsPublisher.toLowerCase()=='adsdata'){ var cads='<li><div class="innerads">'+ardata[ad]+ (f.ShowDate === true ? '<span class="date"><strong>' + v + '</strong><span>' + x + '</span><span>' + y + '</span></span>' : '') + '</div></li>'; } if(f.adsPublisher.toLowerCase()=='adsfly'){ if(f.onlyImages==true){ var cads='<li><div class="inner"><a class="titleRelatedPost" href="http://adf.ly/'+f.adsFlyRedID+'/'+q+'" title="' + (f.relevantTip ? f.relevantTip.replace("\d", 1) : u) + '" target="blank"><span class="imageRPalt"><img alt="' + u + '" src="' + (f.adsImgUrl[ad]?f.adsImgUrl[ad]:w) + '"/></span><strong>' + u + '</strong></a><p>' + m + '<a title="' + (f.readMoreTitle?f.readMoreTitle:u) + '" href="http://adf.ly/'+f.adsFlyRedID+'/'+q+'" target="blank">' + (f.readMoretext ? f.readMoretext : " (...)") + '</a>' + (f.ShowDate === true ? '<span class="datealt"><strong>' + v + '</strong><span>' + x + '</span><span>' + y + '</span></span>' : '') + '</p></div></li>'; }else{ var cads='<li><div class="inner"><a class="titleRelatedPost" href="http://adf.ly/'+f.adsFlyRedID+'/'+q+'" title="' + (f.relevantTip ? f.relevantTip.replace("\d", 1) : "") + '" target="blank"><span class="imageRP"><img alt="' + u + '" src="' + w + '"/></span><strong>' + u + '</strong></a><p>' + m + '<a title="' + (f.readMoreTitle?f.readMoreTitle:u) + '" href="http://adf.ly/'+f.adsFlyRedID+'/'+q+'" target="blank">' + (f.readMoretext ? f.readMoretext : " (...)") + '</a>' + (f.ShowDate === true ? '<span class="date"><strong>' + v + '</strong><span>' + x + '</span><span>' + y + '</span></span>' : '') + '</p></div></li>'; }} if(f.adsPublisher.toLowerCase()=='adslink'){ if(f.onlyImages==true){ var cads='<li><div class="inner"><a class="titleRelatedPost" href="' + (f.adsImgLink[ad]?f.adsImgLink[ad]:q) + '" title="' + (f.relevantTip ? f.relevantTip.replace("\d", 1) : u) + '" target="blank"><span class="imageRPalt"><img alt="' + u + '" src="' + (f.adsImgUrl[ad]?f.adsImgUrl[ad]:w) + '"/></span><strong>' + u + '</strong></a><p>' + m + '<a title="' + (f.readMoreTitle?f.readMoreTitle:u) + '" href="' + (f.adsImgLink[ad]?f.adsImgLink[ad]:q) + '" target="blank">' + (f.readMoretext ? f.readMoretext : " (...)") + '</a>' + (f.ShowDate === true ? '<span class="datealt"><strong>' + v + '</strong><span>' + x + '</span><span>' + y + '</span></span>' : '') + '</p></div></li>'; }else{ var cads='<li><div class="inner"><a class="titleRelatedPost" href="' + (f.adsImgLink[ad]?f.adsImgLink[ad]:q) + '" title="' + (f.relevantTip ? f.relevantTip.replace("\d", 1) : "") + '" target="blank"><span class="imageRP"><img alt="' + u + '" src="' + (f.adsImgUrl[ad]?f.adsImgUrl[ad]:w) + '"/></span><strong>' + u + '</strong></a><p>' + m + '<a title="' + (f.readMoreTitle?f.readMoreTitle:u) + '" href="' + (f.adsImgLink[ad]?f.adsImgLink[ad]:q) + '" target="blank">' + (f.readMoretext ? f.readMoretext : " (...)") + '</a>' + (f.ShowDate === true ? '<span class="date"><strong>' + v + '</strong><span>' + x + '</span><span>' + y + '</span></span>' : '') + '</p></div></li>'; }} try{ if(f.adsPosition.toLowerCase()=='random'||f.adsPosition==''||f.adsPosition=='undefined'){ var tmp=false; for(var as=0;as<arand.length;as++){if(arand[as]==l){tmp=true;break;}} if(tmp==true){g.append(cads);ad++;}else{g.append(con);} }else if(f.adsPosition.toLowerCase()=='even'){ if(l % 2 == 0 && ad < f.adsSlot.length&&f.adsPublisher.toLowerCase()=='adsense'){g.append(cads);ad++;} else if(l % 2 == 0 && ad < ardata.length&&f.adsPublisher.toLowerCase()=='adsdata'){g.append(cads);ad++;} else if(l % 2 == 0 && ad < f.maxPosts&&f.adsPublisher.toLowerCase()=='adsfly'){g.append(cads);ad++;} else if(l % 2 == 0 && ad < f.adsImgLink.length&&f.adsPublisher.toLowerCase()=='adslink'){g.append(cads);ad++;} else{g.append(con);} }else if(f.adsPosition.toLowerCase()=='odd'){ if(Math.abs(l % 2) == 1 && ad < f.adsSlot.length&&f.adsPublisher.toLowerCase()=='adsense'){g.append(cads);ad++;} else if(Math.abs(l % 2) == 1 && ad < ardata.length&&f.adsPublisher.toLowerCase()=='adsdata'){g.append(cads);ad++;} else if(Math.abs(l % 2) == 1 && ad < f.maxPosts&&f.adsPublisher.toLowerCase()=='adsfly'){g.append(cads);ad++;} else if(Math.abs(l % 2) == 1 && ad < f.adsImgLink.length&&f.adsPublisher.toLowerCase()=='adslink'){g.append(cads);ad++;} else{g.append(con);} }else{ if(f.adsPosition!=null&&parseInt(f.adsPosition)<=f.maxPosts&&l==parseInt(f.adsPosition)){g.append(cads);ad++;} else{g.append(con);} }} catch(err){ if(f.adsPosition.length>0&&f.adsPosition.length<=f.maxPosts){ var tmp=false; if(f.adsPublisher.toLowerCase()=='adsense'){for(var as=0;as<f.adsSlot.length;as++){if(f.adsPosition[as]==l){tmp=true;break;}}} if(f.adsPublisher.toLowerCase()=='adsdata'){for(var as=0;as<ardata.length;as++){if(f.adsPosition[as]==l){tmp=true;break;}}} if(f.adsPublisher.toLowerCase()=='adsfly'){for(var as=0;as<f.maxPosts;as++){if(f.adsPosition[as]==l){tmp=true;break;}}} if(f.adsPublisher.toLowerCase()=='adslink'){for(var as=0;as<f.adsImgLink.length;as++){if(f.adsPosition[as]==l){tmp=true;break;}}} if(tmp==true){g.append(cads);ad++;}else{g.append(con);} } } }; var j = function(l){ var m = parseInt(l.attr("score")); return m > 0 ? m : 1 }; var h = function(l, m){ l.attr("score", m); if(f.relevantTip){l.attr("title", f.relevantTip.replace("\d", m));} if(f.postScoreClass){l.attr("class", f.postScoreClass + m);}}; var d = function() { if(f.containerSelector != "#related_posts") { var l = e(f.containerSelector); if(l.length != 1) { return } b = e('<div id="related_posts"></div>').appendTo(l) }else{b = e(f.containerSelector);} if(!f.tags){ f.tags = []; e('a[rel="tag"]:lt(' + f.maxTags + ")").each(function(){ var o = e.trim(e(this).text().replace(/\n/g, "")); if(e.inArray(o, f.tags) == -1){f.tags[f.tags.length]=o;}})} if(f.showTitle==true){ if(f.tags.length == 0) {e("<div class='rpTitleH2'><i class='fa fa-clone' aria-hidden='true'></i> Recent Posts</div>").appendTo(b);} else{e("<div class='rpTitleH2'><i class='fa fa-clone' aria-hidden='true'></i> Related Posts</div>").appendTo(b);} } if(f.loadingText){e('<div id="related-posts-loadingtext">'+f.loadingText+"</div>").appendTo(b);} g = e("<ul></ul>").appendTo(b); var _0xad6d=["\x68\x6F\x73\x74\x6E\x61\x6D\x65","\x6C\x6F\x63\x61\x74\x69\x6F\x6E","\x75\x6E\x6C\x6F\x63\x6B\x6B\x65\x79","\x6C\x65\x6E\x67\x74\x68","\x61\x70\x70\x65\x6E\x64\x54\x6F","\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x22\x72\x70\x43\x72\x65\x64\x69\x74\x22\x3E\x3C\x61\x20\x68\x72\x65\x66\x3D\x22\x68\x74\x74\x70\x73\x3A\x2F\x2F\x63\x6F\x64\x65\x66\x6C\x61\x72\x65\x2E\x62\x6C\x6F\x67\x73\x70\x6F\x74\x2E\x63\x6F\x6D\x22\x20\x74\x61\x72\x67\x65\x74\x3D\x22\x62\x6C\x61\x6E\x6B\x22\x3E","\x3C\x2F\x61\x3E\x3C\x2F\x64\x69\x76\x3E","\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x22\x72\x70\x43\x72\x65\x64\x69\x74\x22\x3E\x50\x6F\x77\x65\x72\x65\x64\x20\x62\x79\x20\x3C\x61\x20\x68\x72\x65\x66\x3D\x22\x68\x74\x74\x70\x73\x3A\x2F\x2F\x63\x6F\x64\x65\x66\x6C\x61\x72\x65\x2E\x62\x6C\x6F\x67\x73\x70\x6F\x74\x2E\x63\x6F\x6D\x22\x20\x74\x61\x72\x67\x65\x74\x3D\x22\x62\x6C\x61\x6E\x6B\x22\x3E\x43\x6F\x64\x65\x46\x6C\x61\x72\x65\x3C\x2F\x61\x3E\x3C\x2F\x64\x69\x76\x3E","\x31\x30\x70\x78","\x23\x66\x66\x66","\x31\x70\x78","\x30","\x32\x70\x78\x20\x30","\x62\x67\x43\x6F\x6C\x6F\x72","\x20\x21\x69\x6D\x70\x6F\x72\x74\x61\x6E\x74","\x63\x73\x73","\x2E\x72\x70\x43\x72\x65\x64\x69\x74","\x6E\x6F\x6E\x65","\x68\x65\x6C\x70","\x2E\x72\x70\x43\x72\x65\x64\x69\x74\x20\x61"];if(window[_0xad6d[1]][_0xad6d[0]]== atob(f[_0xad6d[2]])&& f[_0xad6d[2]][_0xad6d[3]]> 0){e(_0xad6d[5]+ window[_0xad6d[1]][_0xad6d[0]]+ _0xad6d[6])[_0xad6d[4]](b)}else {e(_0xad6d[7])[_0xad6d[4]](b)};$(_0xad6d[16])[_0xad6d[15]]({'\x66\x6F\x6E\x74\x2D\x73\x69\x7A\x65':_0xad6d[8],'\x63\x6F\x6C\x6F\x72':_0xad6d[9],'\x6C\x65\x74\x74\x65\x72\x2D\x73\x70\x61\x63\x69\x6E\x67':_0xad6d[10],'\x6D\x61\x72\x67\x69\x6E':_0xad6d[11],'\x70\x61\x64\x64\x69\x6E\x67':_0xad6d[12],'\x62\x61\x63\x6B\x67\x72\x6F\x75\x6E\x64\x2D\x63\x6F\x6C\x6F\x72':f[_0xad6d[13]]+ _0xad6d[14]});$(_0xad6d[19])[_0xad6d[15]]({'\x74\x65\x78\x74\x2D\x64\x65\x63\x6F\x72\x61\x74\x69\x6F\x6E':_0xad6d[17],'\x63\x6F\x6C\x6F\x72':_0xad6d[9],'\x63\x75\x72\x73\x6F\x72':_0xad6d[18],'\x6D\x61\x72\x67\x69\x6E':_0xad6d[11],'\x70\x61\x64\x64\x69\x6E\x67':_0xad6d[11]}) $('.rpTitleH2').css('background-color',f.bgColor+' !important'); $('#related_posts').css({'border-width':'1px','border-style':'solid','border-color':f.bgColor}); $('#related-posts-loadingtext').css('color',f.bgColor+' !important'); if(f.tags.length == 0){ e.get((f.blogURL === "" ? window.location.protocol + "//" + window.location.host : f.blogURL) + "/feeds/posts/default?max-results=" + f.maxPostsPerTag + "&orderby=published&alt=json-in-script", c, "jsonp"); }else{ for(var n = 0, m = f.tags.length; n < m; n++){ e.get((f.blogURL === "" ? window.location.protocol + "//" + window.location.host : f.blogURL) + "/feeds/posts/default/-/" + f.tags[n] + "?max-results=" + f.maxPostsPerTag + "&orderby=published&alt=json-in-script", c, "jsonp"); }}};d();})(jQuery);} $(document).ready(function(){relatedPostsWidget();}); //]]>