irnanto.com – Ada berbagai cara menambahkan konten pada blog secara otomatis. Konten yang ditambah bisa banyak ataupun sedikit. Kali ini saya akan memberikan sebuah trik bagaimana menambah konten di blog secara mudah dan otomatis. Cara menambah konten pada blog yang akan di bahas kali ini adalah menggunakan CSS sebagai atat untuk menampilkan atau menambahkan konten yang kita inginkan.
Isi konten yang di tambah bisa dari teks yang kita inputkan sendiri atau menambahkan otomatis dari sebuah atribut yang ada dalam blog. Penambahan konten pada CSS ada dua jenis yaitu setelah konten atau sebelum konten yang akan di tambahkan. Teknik menambah konten ini sangat ampuh jika digunakan untuk menambah konten dengan penambahan isi konten yang sama pada sebuah elemen tertentu atau attribut tertentu dari sebuah tag HTML.
Untuk menambahkan konten di blog yang akan kita gunakan adalah selector pseudo element yaitu :after dan :before untuk meletakkan isi konten pada setelah atau sebelum elemen atau konten yang akan di tambahkan. Selain selector pseudo element, kita juga akan menggunakan property pada CSS yaitu content. Propeti content ini berfungsi untuk meletakkan isi dari teks konten yang akan ditambahkan ke dalam blog atau lebih tepatnya elemen yang telah di tentukan.
Penggunaan :after di CSS
Penggunaan :after akan membuat perubahan (penambahan) pada konten yang akan ditambahkan dengan posisi setelah elemen selektor CSS. Struktur kode CSS :after hampir sama dengan struktur penulisan CSS pada umumnya yaitu selector:after{property : value; }. Untuk lebih jelasnya silahkan lihat source code CSS :after seperti dibawah ini
<!DOCTYPE html>
<html>
<head>
<style>
a:after{content: attr(class);}
b:after {content: ” :”;}
</style>
</head>
<body>
<p><a href=”http://irnanto.com” class=”com”>Irnanto.</a> contains free tutorials and references.</p>
<p><b>Note</b> IE8 supports the content property only if a !DOCTYPE is specified.</p>
</body>
</html>
menambahkan konten menggunakan css :after
Penggunaan :before di CSS
Penggunaan :before akan membuat perubahan (penambahan) pada konten yang akan ditambahkan dengan posisi sebelum elemen selektor CSS. Struktur kode CSS :before hampir sama dengan struktur kode CSS after, hanya saja penulisan after diganti dengan before seperti ini selector:before{property : value; }. Contoh source code CSS :before seperti dibawah ini.
<!DOCTYPE html>
<html>
<head>
<style>
a:before {content: ” (” attr(href) “)”;}
b:before {content: “Irnanto “;}
</style>
</head>
<body>
<p><a href=”http://irnanto.com” class=”com”>Irnanto.</a> contains free tutorials and references.</p>
<p><b>Note</b> IE8 supports the content property only if a !DOCTYPE is specified.</p>
</body>
</html>
Hasil perubahan pada elemen yang menggunakan CSS :before
Mungkin ada yang bertanya, apakah bisa digabungkan penggunaan CSS after dan before ?, iya, tentu saja bisa. Contoh penggunaan CSS after dan before secara bersamaan seperti di bawah ini.
<!DOCTYPE html>
<html>
<head>
<style>
a:before {content: ” (” attr(href) “)”;}
a:after{content: attr(class);}
b:after {content: ” :”;}
b:before {content: “Irnanto “;}
</style>
</head>
<body>
<p><a href=”http://irnanto.com” class=”com”>Irnanto.</a> adalah blog berbagi informasi yang menarik.</p>
<p><b>Note</b> IE8 hanya bisa menggunakan properti content hanya jika menggunakan !DOCTYPE .</p>
</body>
</html>
tambah konten menggunakan css after dan css before
Bagaimana ? mudah kan. Menambah Konten di Blog Menggunakan CSS bisa menjadi alternatif untuk memperbanyak isi dari sebuah artikel blog
Apa Ini Nyamuk Terbesar Di Dunia ?
cek nomor tracking JNE
Menampilkan nama hari, tanggal, bulan, dan tahun di java
kemeriahan acara blogger nusantara 2013
Berbagai pengalaman belanja di ebay
Cara Membuat Jam di Blog Dengan Mudah