CSS3 Asynchronous Social Sharing Blogger Widget Lanjutan Untuk Meningkatkan Memuat Halaman [2019]
Saya ingin menanyakan satu pertanyaan kepada Anda, apa nilai kehilangan pengunjung karena loading situs web yang lambat? Apakah ini penting bagimu? Jika Anda benar-benar peduli tentang pemuatan situs Anda dan ingin meningkatkan pengalaman navigasi pengunjung, maka Anda harus melakukan upaya yang wajar untuk membuka kunci sejumlah besar kunjungan umum. Tidak hanya skrip tetapi gambar juga sama-sama dipengaruhi oleh pemuatan halaman.
Plugin Asynchronous Loading untuk Meningkatkan Kecepatan Muat Halaman dengan menggunakan Plugin dan Widget Blogger – Pelajari cara menggunakan CSS3 di widget daripada gambar sebenarnya di halaman Anda untuk
. Ini adalah praktik terbaik untuk aplikasi web yang lebih cepat dengan pengkodean CSS3 & HTML5. Pelajari cara meningkatkan waktu pemuatan halaman secara dramatis dengan menggunakan widget CSS3 yang sepenuhnya dioptimalkan. Kami telah melihat, dan ada banyak halaman yang menunjukkan plugin pemuatan asinkron untuk meningkatkan kecepatan pemuatan halaman, tetapi kita akan melihat tutorial baru tentang widget CSS3 yang hanya terdiri dari gambar yang dibangun oleh CSS itu sendiri, dan saya yakin ini akan membantu Anda untuk
.
oleh malas memuat skrip untuk membuat kecepatan halaman lebih cepat. Widget ini secara dramatis memperlambat pemuatan halaman Anda karena pengunduhan tambahan, beberapa permintaan dan pemuatan sinkron JavaScript yang menyebabkan penggunaan memori tinggi untuk browser. Tujuan dari posting ini adalah untuk mendapatkan tampilan halaman yang lebih tinggi, rasio pentalan yang lebih rendah & untuk mengoptimalkan situs Anda
.
. Widget ini sepenuhnya dibuat oleh CSS3; itu berarti semua gambar yang terkandung oleh widget ini dibuat hanya oleh CSS. Ya, itu benar, CSS dapat ditulis untuk mendapatkan gambar yang ingin Anda tampilkan di halaman alih-alih gambar yang sebenarnya seperti .jpg atau .png. Ketika Anda memasang widget pihak ketiga pada halaman Anda, itu akan meminta gambar untuk diunduh yang menyebabkan lebih banyak permintaan dan unduhan tambahan serta waktu, dan ini saling mempengaruhi pada pemuatan situs Anda. Tetapi widget ini TIDAK akan membuat permintaan gambar apa pun yang ditunjukkan olehnya atau menyebabkan unduhan, dan karenanya ini meningkatkan pemuatan situs Anda.
Di sini saya telah memberikan widget berlangganan E-mail dengan empat ikon CSS3 yang bukan gambar, yang benar-benar berbasis pengkodean CSS. Ubah teks berwarna biru sesuai informasi Anda dan instal widget ini di situs Anda.
#menump {align: center;}
#menump ul {list-style: none; bantalan: 0; margin: 0; overflow: disembunyikan; font: 0.875em / 1 Arial, sans-serif; }
#menump ul li {float: left; lebar: 46px; tinggi: 49px; padding-left: 20px; }
#menump ul li a {display: block; lebar: 45px; tinggi: 45px; overflow: disembunyikan; perbatasan: 1px solid transparan; garis-tinggi: 45px; teks-dekorasi: tidak ada; text-shadow: 0 -1px 0 rgba (0,0,0,0.5); -moz-border-radius: 5px; -webkit-border-radius: 5px; batas-radius: 5px; }
#menump ul li a: hover, #menump ul li a: fokus, #menump ul li a: aktif {opacity: 0.8; warna batas: # 000; }
/ * ———————————————— ————————————
– FACEBOOK
————————————————– ———————————- * /
.facebook a {
posisi: relatif;
warna perbatasan: # 3c5a98;
text-transform: huruf kecil;
indentasi teks: 24px;
spasi huruf: 10px;
font-weight: bold;
ukuran font: 40px;
garis-tinggi: 50px;
warna: #fff;
latar belakang: # 3c5a98;
/ * css3 * /
-moz-box-shadow: 0 0 4px rgba (0,0,0,0,4);
-webkit-box-shadow: 0 0 4px rgba (0,0,0,0,4);
box-shadow: 0 0 4px rgba (0,0,0,0,4); / * versi standar terakhir * /
}
/ * ———————————————— ————————————
– TWITTER
————————————————– ———————————- * /
.twitter a {
posisi: relatif;
warna perbatasan: # a8eaec;
text-transform: huruf kecil;
indentasi teks: 13px;
spasi huruf: 40px;
font: tebal 45px / 1 Tahoma, sans-serif;
garis-tinggi: 35px;
warna: # 6ac6df;
latar belakang: # daf6f7;
/ * css3 * /
text-shadow: 3px 3px 1px #fff, -3px -3px 1px #fff, 3px -3px 1px #fff, -3px 3px 1px #fff;
-moz-box-shadow: 0 0 4px rgba (0,0,0,0,4);
-webkit-box-shadow: 0 0 4px rgba (0,0,0,0,4);
box-shadow: 0 0 4px rgba (0,0,0,0,4); / * versi standar terakhir * /
/ * CATATAN: implementasi gradien webkit tidak sesuai spesifikasi * /
latar belakang: -webkit-gradient (linear, kiri atas, kiri bawah, dari (# dbf7f8), hingga (# 88e1e6));
latar belakang: -moz-linear-gradient (atas, # dbf7f8, # 88e1e6);
}
/ * ———————————————— ————————————
– RSS
————————————————– ———————————- * /
.rss a {
posisi: relatif;
lebar: 45px;
padding: 0 2px;
warna perbatasan: # ea6635;
text-transform: huruf kecil;
indentasi teks: -186px;
ukuran font: 30px;
font-weight: bold;
warna: #fff;
latar belakang: # e36443;
/ * css3 * /
/ * CATATAN: bayangan kotak saat ini tidak ada dalam modul CSS3. Mungkin muncul kembali dalam bentuk yang berbeda sama sekali * /
-moz-box-shadow: 0 0 4px rgba (0,0,0,0,4);
-webkit-box-shadow: 0 0 4px rgba (0,0,0,0,4);
box-shadow: 0 0 4px rgba (0,0,0,0,4); / * versi standar terakhir * /
/ * CATATAN: implementasi gradien webkit tidak sesuai spesifikasi * /
latar belakang: -webkit-gradient (linear, kiri atas, kiri bawah, dari (# f19242), hingga (# e36443));
latar belakang: -moz-linear-gradient (atas, # f19242, # e36443);
}
/ * buat lingkaran * /
.rss a: before {
konten: " 00a0";
posisi: absolut;
bawah: 4px;
kiri: 5px;
lebar: 9px;
tinggi: 9px;
latar belakang: #fff;
/ * css3 * /
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
batas-radius: 12px; / * versi standar terakhir * /
}
/ * buat dua busur * /
.rss a: after {
konten:" 00a0";
posisi: absolut;
bawah: 5px;
kiri: 5px;
lebar: 14px;
tinggi: 13px;
gaya perbatasan: dobel;
lebar-perbatasan: 24px 24px 0 0;
warna perbatasan: #fff;
/ * css3 * /
-moz-border-radius: 0 50px 0 0;
-webkit-border-top-right-radius: 50px;
border-radius: 0 50px 0 0; / * versi standar terakhir * /
}
/ * ———————————————— ————————————
– GOOGLE
————————————————– ———————————- * /
.google a {
posisi: relatif;
warna perbatasan: # 26478d;
text-transform: huruf kecil;
indentasi teks: 6px;
spasi huruf: 40px;
font: 71px / 21px Georgia, Times New Roman, Times, serif;
warna: #fff;
latar belakang: # 1e3c7f;
/ * css3 * /
-moz-box-shadow: 0 0 4px rgba (0,0,0,0,4);
-webkit-box-shadow: 0 0 4px rgba (0,0,0,0,4);
box-shadow: 0 0 4px rgba (0,0,0,0,4); / * versi standar terakhir * /
/ * CATATAN: implementasi gradien webkit tidak sesuai spesifikasi * /
latar belakang: -webkit-gradient (linear, kiri atas, kiri bawah, dari (# 447aec), hingga (# 1e3c7f));
latar belakang: -moz-linear-gradient (atas, # 447aec, # 1e3c7f);
}
# sidebar-berlangganan-kotak {
lebar: otomatis;
/ * border: 1px solid # b2b2b2; * /
latar belakang: # ececd9;
batas-radius: 10px;
padding-top: 25px;
padding-bottom: 1px;
}
.sidebar-subscribe-box-wrapper {
warna: # 000;
ukuran font: 11px;
padding: 1px 20px 10px;
perataan teks: tengah;
spasi huruf: normal;
text-transform: capitalize;
font-weight: normal;
}
.sidebar-subscribe-box-form {
jelas: keduanya;
display: blok;
margin: 10px 0} form.sidebar-berlangganan-kotak-form {jelas: keduanya; tampilan: blok; margin: 10px 0 0; lebar: otomatis}
.sidebar-subscribe-box-email-field {
-moz-border-radius: 4px; -webkit-border-radius: 4px;
border: 1px solid #ccc; border-radius: 4px; warna: # 444; margin: 0 0 15px; padding: 10px 40px; lebar: 68%}
.sidebar-berlangganan-kotak-email-tombol {
latar belakang: # 58524b;
perbatasan: 1px solid # 4a453e;
batas-radius: 4px;
box-shadow: 0 1px 0 rgba (255.255.255,0,3) inset, 0 1px 0 transparan;
warna: #fff;
kursor: pointer;
font-family: Droid Serif;
font-weight: 700; padding: 10px; text-shadow: 1px 1px 0 rgba (0,0,0, .4); transformasi teks: huruf besar; lebar: 100%}
.sidebar-subscribe-box-email-button: hover, .sidebar-subscribe-box-email-button: fokus {background: # D83F1D}
.sidebar-berlangganan-kotak-email-tombol: aktif {-moz-box-shadow: 0 1px 4px rgba (0,0,0,0.5) inset; -webkit-box-shadow: 0 1px 4px rgba (0,0 , 0,0.5) inset; kotak-bayangan: 0 1px 4px rgba (0,0,0,0.5) inset; garis besar: 0} iframe, objek, embed, iframe batas-perbatasan, objek perbatasan-perbatasan, .yt -batas embed, tabel {lebar: 100%} embed {batas-radius: 3px; -moz-box-shadow: 0 2px 4px rgba (0,0,0,0.2); – webkit-box-shadow: 0 2px 4px rgba (0,0,0,0.2); latar belakang: #FFF; perbatasan: 1px solid #ddd; bayangan kotak: 0 2px 4px rgba (0,0,0,0.2); margin: 0; bantalan: 4px 4px 4px }
# footer-section {border-top: 1px solid #aaa; box-shadow: inset 0 4px 6px -3px #aaa; font-family: cambria; ukuran font: 14px; tinggi: 100px; margin: 10px -30px 5px; padding: 0 30px; perataan teks: tengah; lebar: 100%}
a.social-icons {margin-right: 5px; tinggi: 45px; lebar: 45px;}
a.social-icons: hover {opacity: .7; filter: alpha (opacity = 70);}
Gunakan widget HTML ini dan lihat perbedaan dalam Kecepatan-Halaman dan YSlow.
![Pemutar Video Semua Format v1.6.5 [Premium] [Latest]](http://iunlocked.org/wp-content/uploads/2020/04/Video-Player-All-Format-v1.6.5-Premium-Latest.png)
