Menambahkan Elemen HTML Ke Dalam Widget Blogger Dengan JavaScript
Wednesday, November 21, 20180 Comments
Menambahkan Elemen HTML Ke Dalam Widget Blogger Dengan JavaScript

Menambahkan Elemen HTML Ke Dalam Widget Blogger Dengan JavaScript

  • Eka Awaludin

  • A dreamer who trying to loves writing and blogwalking. Man of nature. The wrong man in the wrong time. Going with the flow. Penggemar CSS dan HTML.
Kali ini aku di buat kagum oleh JavaScript karena bisa melakukan inject HTML ke dalam widget Blogger yang aku pasang di blogku. Kenapa aku menggunakan JavaScript karena widget HTML tersebut tidak bisa di akses dari Edit HTML template. Sebelumnya aku menambahkan widget Profile di blogku dan aku agak susah memodifikasi widget Profile tersebut dengan CSS. Tapi setelah menambahkan elemen DIV dengan bantuan JavaScript widget Profile tersebut bisa di modifikasi.
Sebelum dan sesudah di modifikasi
Untuk penerapan nya gampang-gampang susah, kita cukup menerapkan kode JavaScript berikut ini di atas tag </body> di template kita.
Ini adalah kode CSS nya:
<!-- Widget Profile -->
<style type='text/css'>
.Profile .profile-img {
float: none;
}
.gpp, .profile-data {
text-align:center;
}
.gpp img {
border-radius:50%;
}
</style>
Dan ini adalah kode JavaScript nya:
<script type='text/javascript'>
$(document).ready(function(){
    $( ".Profile .profile-img" ).wrapAll( "<div class='gpp'/>" );
});
</script>
Jadi intinya disini adalah aku membungkus Sebuah elemen IMG dengan sebuah elemen DIV menggunakan JavaScript. Kode yang sebelum di tambahkan JavaScript di atas adalah:
<img alt="Foto saya" class="profile-img" src="//lh4.googleusercontent.com/-2o-2SMjCkr0/AAAAAAAAAAI/AAAAAAAAE1g/8HPuCBPOyuw/s80-c/photo.jpg" width="80" height="80">
Setelah di tambahkan elemen DIV menggunakan JavaScript kodenya jadi seperti di bawah ini:
<div class="gpp"><img alt="Foto saya" class="profile-img" src="//lh4.googleusercontent.com/-2o-2SMjCkr0/AAAAAAAAAAI/AAAAAAAAE1g/8HPuCBPOyuw/s80-c/photo.jpg" width="80" height="80"></div>
Masalahnya dengan memakai metode ini adalah loading widget yang agak berat dan terasa lambat. Aku gak tahu terlalu banyak tentang optimasi JavaScript karena jujur aku newbie banget untuk bahasa pemrograman ini. Okeh mungkin cukup sekian untuk tulisan kali ini, kita ketemu lagi di postingan-postingan berikutnya. Ciao!

Sumber
  • https://stackoverflow.com/questions/22131009/how-to-wrap-img-element-with-a-div-tag
No comments :

Post a Comment