Pamula merupakan tema personal yang saya desain dengan beberapa referensi, Tema ini dibuat clean dan elegant untuk membuat lebeih fresh serta memaksimalkan fitur dari fungsi blogger agar dapat meminimalisir penggunaan javascript atau json blogger. Tema ini memiliki kecepatan super cepat seperti tema-tema yang saya share sebelumnya, tapi pada tema yang saya buat sekarang terus menggunakan fungsi javascript dan tidak ada jQuery di dalamnya. Kemungkinan kalian tidak akan paham karena terbiasa dengan jQuery. Pada tema ini kalian akan mendapatkan beberapa fitur menarik seperti : Kecepatan Loading Super Ngebut Dengan memiliki loading yang cepat pasti dapat membuat pengunjung menjadi lebih betah sebab tidak perlu cari Artikel serupa meskipun yang disebabkan oleh loading lambat. Saya sudah mencoba untuk mengetest kecepatan dengan bantuan dari GTmetrix dan Pagespeed. Untuk melihat hasilnya bisa cek gambar berikut: Kecepatan loading ini sudah saya test sendiri menggunak
Halo sobat Malestea pada kesempatan kali ini saya akan membagikan sebuah Tutorial untuk Blogger yaitu "Operator Gambar" adalah operator yang dapat membuat ulang ukuran dan rasio atau membuatnya responsif, operator gambar sudah sering dipakai untuk membuat gambar menjadi lebih jelas dan tajam dengan ukuran yang sudah ditentukan oleh pengembang. Perubahan ukuran ini akan diterapkan ke url gambar google biasanya terlihat dengan kode w- dan h- untuk pengaturan lebar dan tinggi gambar.
Sintaks
| Operator | Operand | Sintaks fungsional | Hasil |
|---|---|---|---|
| resizeImage | 2 atau 3 | resizeImage({image},{number},{string}) | image |
| resizeImage({image},{array[number]},{string}) | array[Object] | ||
| sourceSet | sourceSet({image},{array[number]},{string}) | string |
Catatan: Sintaks fungsional adalah alternatif yang dapat digunakan ketika sintaks standar berisi operator yang sama beberapa kali. Dalam konteks penggunaan operator gambar, alternatif ini terbukti lebih mudah diimplementasikan daripada sintaks default.
Gambar Yang di Dukung
Url gambar yang dihosting oleh Google melalui Blogger, Picasa, GooglePhotos dan thumbnail video YouTube dapat kita rubah ukuran dan rasionya. Operator menerapkan nilai baru ke parameter ini, meskipun jika ukuran dari gambar tersebut sudah memiliki rasio sendiri tapi kita bisa merubah kembali terkecuali jika rasio memang kecil bila dirubah maka akan terlihat blur.
Catatan: Operator juga dapat menggunakan string dan data eksplisit string berisi url gambar yang dihosting oleh penyedia layanan diatas.
Operator resizeImage
Operator resizeImage memiliki 2 sintak. Pertama memungkinkan untuk mengubah ukuran gambar dan kedua untuk menentukan resio dari gambar yang akan ditampilkan bisa berupa, landascape atau persegi. Biasanya operator gambar digunakan pada atribut src di tag img.
- Untuk dimensi bisa menggunakan seperti ini: "1:1","2:2","25:25",dll
- Untuk rasio bebas tapi kita gunakan ini dulu:"4:3","16:9","800:600",dll
Contoh Dengan Sintaks Default
<img expr:src='data:view.featuredImage resizeImage 600 resizeImage "4:3"'/>Contoh Dengan Sintaks Fungsional
<img expr:src='resizeImage(data:view.featuredImage,600, "4:3")'/>Contoh Dengan Nilai Eksplisit
Kita coba menggunakan nilai eksplisit dengan 2 kode diatas
Contoh Dengan Sintaks Default
<img expr:src='"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl4qyeADNASaOoLiJGsEtMmem8Nk6S3R4sA1jwCAjBHNFtt-lC7jyS6H7HnyK0RFvtbdwwS6eYDCNmRn7vezcYXhOsG7gL92wAsV96jRps8Y-SBRgg1vrNWlpayFWXwsR03QefVcNsPjmC/s1024/tampan-dan-berani.jpg" resizeImage 500 resizeImage "500:200"' />Contoh Dengan Sintaks Fungsional
<img expr:src='resizeImage("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl4qyeADNASaOoLiJGsEtMmem8Nk6S3R4sA1jwCAjBHNFtt-lC7jyS6H7HnyK0RFvtbdwwS6eYDCNmRn7vezcYXhOsG7gL92wAsV96jRps8Y-SBRgg1vrNWlpayFWXwsR03QefVcNsPjmC/s1024/tampan-dan-berani.jpg", 500, "500:200")'/>Gambar dengan ukuran 1024px telah diubah menjadi 500px dengan rasionya 500:200
Hasil rendering HTML akan menjadi:
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl4qyeADNASaOoLiJGsEtMmem8Nk6S3R4sA1jwCAjBHNFtt-lC7jyS6H7HnyK0RFvtbdwwS6eYDCNmRn7vezcYXhOsG7gL92wAsV96jRps8Y-SBRgg1vrNWlpayFWXwsR03QefVcNsPjmC/w500-h200-p-k-no-nu/tampan-dan-berani.jpg">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl4qyeADNASaOoLiJGsEtMmem8Nk6S3R4sA1jwCAjBHNFtt-lC7jyS6H7HnyK0RFvtbdwwS6eYDCNmRn7vezcYXhOsG7gL92wAsV96jRps8Y-SBRgg1vrNWlpayFWXwsR03QefVcNsPjmC/w500-h200-p-k-no-nu/tampan-dan-berani.jpg">Operator resizeImage Dengan Array
Seperti halnya diatas, hanya saja kita membuat dengan tambahan Array yang di dalamnya ada banyak ukuran untuk ditampilkan disetiap operasi dengan menggunakan fungsi loop.
Contoh Dengan Sintaks Default
<b:loop values='data:view.featuredImage resizeImage [50,75,100] resizeImage "16:9"' var='image'>
<img expr:src='data:image.url'/>
</b:loop>Contoh Dengan Sintaks Fungsional
<b:loop values='resizeImage(data:view.featuredImage, [50,75,100], "16:9")' var='image'>
<img expr:src='data:image.url'/>
</b:loop>Contoh Dengan Nilai Eksplisit
Unutk contoh sintaks default nya sudah saya bahas diatas bila ingin mencoba.
<b:loop values='resizeImage("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl4qyeADNASaOoLiJGsEtMmem8Nk6S3R4sA1jwCAjBHNFtt-lC7jyS6H7HnyK0RFvtbdwwS6eYDCNmRn7vezcYXhOsG7gL92wAsV96jRps8Y-SBRgg1vrNWlpayFWXwsR03QefVcNsPjmC/s1024/tampan-dan-berani.jpg", [50,75,100], "16:9")' var='image'>
<img expr:src='data:image.url'/>
</b:loop>Ukuran gambar yang semulanya 1024px akan menjadi 50px,75px dan 100px dengan rasionya 16:9. Ukuran tersebut akan menyesuaikan apa yang kita tambahkan di array jika lebih dari itu maka hasilnya pun lebih.
Hasil rendering HTML akan menjadi:
Operator sourceSet
Operator sourceSet sangat mirip dengan sintaks resizeImage menggunakan array. Bedanya untuk sourceSet nilai string akan dimasukkan ke dalam parameter srcset di dalam tag <img>. Operan pertama url gambar dan operan kedua adalah array. Sebagai contoh: [200,400,800,1600].
Hasil Operasi Array
URL_IMAGE_200px w200,
URL_IMAGE_400px w400,
URL_IMAGE_800px w800,
URL_IMAGE_1600px w1600Kode ini akan terlihat setelah kita menerapkan sourceSet pada tag img.
Contoh Dengan Nilai Default
<img expr:src='data:view.featuredImage' expr:srcset='data:view.featuredImage sourceSet [200,400,800,1600] sourceSet "16:9"'/>Contoh Dengan Nilai Fungsional
<img expr:src='data:view.featuredImage' expr:srcset='sourceSet(data:view.featuredImage, [200,400,800,1600], "16:9")'/>Contoh Dengan Nilai Eksplisit
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl4qyeADNASaOoLiJGsEtMmem8Nk6S3R4sA1jwCAjBHNFtt-lC7jyS6H7HnyK0RFvtbdwwS6eYDCNmRn7vezcYXhOsG7gL92wAsV96jRps8Y-SBRgg1vrNWlpayFWXwsR03QefVcNsPjmC/s1024/tampan-dan-berani.jpg' expr:srcset='sourceSet("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl4qyeADNASaOoLiJGsEtMmem8Nk6S3R4sA1jwCAjBHNFtt-lC7jyS6H7HnyK0RFvtbdwwS6eYDCNmRn7vezcYXhOsG7gL92wAsV96jRps8Y-SBRgg1vrNWlpayFWXwsR03QefVcNsPjmC/s1024/tampan-dan-berani.jpg", [200,400,800,1600], "16:9")'style='width: 100%;'/>Gambar yang ukuran nya 1024px telah diperbesar menjadi 100% dari lebar container atau box div. Atribut srcset memilih ukuran yang paling mendekati ukuran container.
Hasil rendering HTML akan menjadi:
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl4qyeADNASaOoLiJGsEtMmem8Nk6S3R4sA1jwCAjBHNFtt-lC7jyS6H7HnyK0RFvtbdwwS6eYDCNmRn7vezcYXhOsG7gL92wAsV96jRps8Y-SBRgg1vrNWlpayFWXwsR03QefVcNsPjmC/s1024/tampan-dan-berani.jpg" srcset="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl4qyeADNASaOoLiJGsEtMmem8Nk6S3R4sA1jwCAjBHNFtt-lC7jyS6H7HnyK0RFvtbdwwS6eYDCNmRn7vezcYXhOsG7gL92wAsV96jRps8Y-SBRgg1vrNWlpayFWXwsR03QefVcNsPjmC/w200-h112-p-k-no-nu/tampan-dan-berani.jpg 200w, https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl4qyeADNASaOoLiJGsEtMmem8Nk6S3R4sA1jwCAjBHNFtt-lC7jyS6H7HnyK0RFvtbdwwS6eYDCNmRn7vezcYXhOsG7gL92wAsV96jRps8Y-SBRgg1vrNWlpayFWXwsR03QefVcNsPjmC/w400-h225-p-k-no-nu/tampan-dan-berani.jpg 400w, https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl4qyeADNASaOoLiJGsEtMmem8Nk6S3R4sA1jwCAjBHNFtt-lC7jyS6H7HnyK0RFvtbdwwS6eYDCNmRn7vezcYXhOsG7gL92wAsV96jRps8Y-SBRgg1vrNWlpayFWXwsR03QefVcNsPjmC/w800-h450-p-k-no-nu/tampan-dan-berani.jpg 800w, https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl4qyeADNASaOoLiJGsEtMmem8Nk6S3R4sA1jwCAjBHNFtt-lC7jyS6H7HnyK0RFvtbdwwS6eYDCNmRn7vezcYXhOsG7gL92wAsV96jRps8Y-SBRgg1vrNWlpayFWXwsR03QefVcNsPjmC/w1600-h900-p-k-no-nu/tampan-dan-berani.jpg 1600w" style="width: 100%">Kalian bisa melihat kode diatas ada banyak yang merupakan array pada img, seperti diawal tadi dan ditampilkan pada sourceSet.
Sampai disini saja dulu dan artikel pada blog ini akan terus saya update Setiap Hari meskipun cuman Satu atau Dua saja tapi itu lebih baik daripada Tidak :#
Comments
Post a Comment
To insert a code use <i rel="pre">code_here</i>To insert a quote use <b rel="quote">your_qoute</b>To insert a picture use <i rel="image">url_image_here</i>To insert a video use <i rel="video">video</i>Tinggalkan komentar sesuai topik tulisan, komentar dengan link aktif tidak akan ditampilkan. Admin dan penulis blog mempunyai hak untuk menampilkan, menghapus, menandai spam, pada komentar yang dikirim.