Blog Posting Acak Mendukung HTML5, HTTPS, dan Gambar Pihak ke-3 – Beberapa hari yang lalu, saya membagikan alat pengeposan terkait blogger yang mendukung HTML5, HTTPS, dan gambar yang dihosting pihak ke-3. Dan hari ini saya akan membagikan alat posting acak yang mendukung HTML5, HTTPS, dan gambar yang dihosting pihak ketiga dan posting terkait.
Saya memodifikasi posting acak ini dari ikon widget Posting Terkait sebelumnya, yang menampilkan beberapa posting secara acak dari semua posting blog dalam tampilan kisi dua kolom.
Jadi alat ini mendukung posting gambar dari hosting pihak ketiga seperti imigor dll. dan membuatnya lebih mudah daripada zip yang sesuai.
Untuk demo, lihat entri blog Alat Pilihan Editor di bilah sisi.
Jika Anda ingin mencobanya, ikuti langkah-langkah di bawah ini
Salin dan simpan kode CSS berikut dengan gaya blog Anda.
#randomposts{padding:10px 10px 0}
#randomposts .random_item{margin:0 10px 10px 0;display:block;float:left;width:calc(50% - 10px);height:auto;}
#randomposts .random_items,#randomposts .random_item:nth-child(odd),#randomposts .random_item .clear{clear:both;}
#randomposts .random_items{margin-right:-10px;}
#randomposts .url_item{display:block;text-decoration:none;}
#randomposts .img_item {display:block;margin-bottom:5px;padding:0;width:100%;height:auto;transition:all 400ms ease-in-out;}
#randomposts .random_item:hover .img_item{opacity:.7;}
#randomposts .title_item{display:block;padding-right:10px;text-align:left;margin:0;color:#000;font-weight:400;line-height:1.1;transition:all 400ms ease-in-out;}
#randomposts .random_item:hover .title_item{color:#555;}
Kemudian simpan kode berikut di sidebar Javascript/HTML.
Perhatikan tanda angka 6 yang merupakan sebutan dari nomor postingan yang muncul di postingan acak ini.
Alat posting acak yang disebutkan di atas mendukung gambar lazyload lazysizes.js. Jika blog Anda tidak menggunakan gambar malas, edit token gambar dengan kode di bawah ini.
Apakah itu mudah?
Jika ada yang kurang dipahami bisa kita diskusikan di kolom komentar.
Tidak ada komentar:
Posting Komentar