Toto Prayogo

Toto Prayogo

Pindahkan suatu elemen ke dalam konten

Seringnya konten berubah sedemikian rupa, bertambah tulisan dan elemen tertentu dalam konten HTML membuat kita semakin jeli dan terasa lebih ribet. Tapi sebenarnya tak masalah jika kita memiliki banyak waktu untuk proses editing itu semua.

Cara ini lebih banyak digunakan oleh para publisher untuk meletakkan iklan dalam konten mereka. Cara ini dimaksudkan agar ada selingan iklan dalm sebuah artikel. Yup, sederhana saja langkah ini tanpa perlu script yang membingungkan.
Langkah sederhana itu sebagai berikut.

Define Target

Definisikan kontenmu yang panjang tadi dalam sebuah elemen. misal menggunakan id content-target. Contok script nya sebagai berikut:

<div id="content-target">
  <!-- content area wit many text and others element -->
  ...
 </div>

Define Object

Bila sudah ada sebuah artikel yang menarik banyak pengunjung (reader), kita harus menyiapkan target yang akan dipindah atau menyisipkan elemen `iklan` tersebut dalam artikel. Misal menggunakan id ads-object. Sehingga menjadi seperti berikut ini.

<div id="ads-object">
  <!-- simple ads object here -->
 </div>


Create Functions

Silakan copy fungsi javascript berikut :

function insertAfter(addition,target) {
 var parent = target.parentNode;
 if (parent.lastChild == target) {
  parent.appendChild(addition);  
 } else {
  parent.insertBefore(addition,target.nextSibling);
 }
}
Dengan menggunakan script sederhana seperti tersebut akan memindahkan suatu elemen web ke elemen lain berdasarkan elemen tersebut. Kita hanya perlu memanggil fungsi tersebut agar skrip berjalan sesuai keinginan.


Call The Function

BIla semua sudah tersedia dalam satu halaman HTML, kita dapat langsung memanggilnya. Sebagai contoh pemanggilannya sebagi berikut:

var adscont = document.getElementById("ads-object");
var target = document.getElementById("content-target");
var linebreaks = target.getElementsByTagName("p");
if (linebreaks.length > 0) {
 insertAfter(adscont,linebreaks[1]);
}
Perhatikan pada var linebreaks, baris tersebut akan mencari tag nama p. Kamu dapat merubahnya sesuai keinginan dan menyesuaikan konten yang sudah ada jika p tersebut belum ada.
Dari hasil coding tersebut dihasilkan id="ads-object" akan muncul setelah paragraf kedua.

Terimakasih dan semoga membantu dan silakan kirim komentar untuk bertanya.
Jangan lupa untuk terus berkunjung ke totoprayogo.com

Comments