Related Posts Blogger Support HTML5, HTTPS, dan Gambar Pihak Ketiga

Artikel Terkait Dukungan untuk HTML5, HTTPS, dan gambar pihak ketiga di Blogger . Blogger baru-baru ini diperluas untuk memasukkan perusahaan gambar blog. Sebelumnya gambar Blogger tidak muncul karena blok ISP karena deteksi spam, Blogger sekarang mengubah lokasi gambar dari domain bp.blogspot.com menjadi blogger.googleusercontent.com.

Masalahnya adalah URL Gambar Blogger yang baru tidak atau belum mendukung Blogger Thumbnail. Akibatnya, banyak blog yang tidak mendukung gambar pihak ketiga tidak muncul sebagai thumbnail di beranda, postingan unggulan, postingan terkait, dan widget Blogger lainnya yang menggunakan thumbnail Blogger.

Untuk itu, saya akan mencoba menyelesaikan masalah tersebut satu per satu.

Sekarang saya akan membagikan widget posting terkait. Widget ini dipengaruhi oleh penggunaan kode thumbnail oleh banyak blogger. Ini berarti bahwa jika gambar tersebut bukan thumbnail Blogger atau diunggah ke kiriman atau gambar yang tidak dihosting oleh Hosting Gambar BP Blogger, gambar kiriman yang bersangkutan akan kosong atau tidak ditampilkan. blogspot.com tidak digunakan.

Oleh karena itu widget related posts ini mendukung gambar yang dihosting di host selain bp.blogspot.com, seperti menyediakan gambar terbaru dari blogger, imgur, atau lainnya.

Ini sebenarnya menggunakan kode widget posting tertaut lama, tetapi saya telah mengubahnya menjadi HTML5 yang valid sehingga mendukung tag dari 2 kata atau lebih, mendukung HTTPS yang memperbaiki konten yang berantakan, dan CSS untuk menyesuaikan tampilan dan nuansa yang saya perbarui.

Posting tertaut ini menggunakan format kisi 2 baris dan 3 kolom. Jika Anda ingin mencobanya, gunakan kode di bawah ini.

Gunakan kode CSS di bawah ini.

 #related-posts .judul{margin:10px 0;font-size:20px;font-weight:500;padding:0;color:#333}

 #related-posts .related_item{margin:0 10px 10px 0;display:block;float:left;width:calc(33.333333% - 10px);height:auto;}

 #related-posts .related_items,#related-posts .related_item:nth-of-type(4n+0),#related-posts .related_item .clear{clear:both;}

 #related-posts .related_items{margin-right:-10px;}

 #related-posts .url_item{display:block;text-decoration:none;}

 #related-posts .img_item {display:block;margin-bottom:5px;padding:0;width:100%;height:auto;transition:all 400ms ease-in-out;}

 #related-posts .related_item:hover .img_item{opacity:.7;}

 #related-posts .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;}

 #related-posts .related_item:hover .title_item{color:#555;}

 @media screen and (max-width:425px){

 #related-posts .related_item{width:calc(50% - 10px);}

 #related-posts .related_item:nth-of-type(4n+0){clear:none;}

 #related-posts .related_item:nth-child(odd){clear:both;}

 }

 @media screen and (max-width:375px){

 #related-posts .related_item{width:100%;}

 #related-posts .related_items{margin-right:0;}

 #related-posts .related_item:nth-child(odd){clear:none;}

 }

Kemudian paste kode berikut di mana Anda ingin melihat posting terkait, biasanya di bawah posting.

Posting tertaut ini akan mengambil 8 posting terakhir, jika Anda ingin mengambil posting lama juga, ubah 8 yang disorot ke nomor yang Anda inginkan, misalnya 9999.

Widget posting tertaut di atas tidak mendukung pemuatan lambat gambar dari lazysizes.js. Jika blog Anda menggunakan gambar delay, silahkan ganti kode gambar yang ditandai dengan kode di bawah ini.

Jika blog Anda sebelumnya telah menggunakan posting tertaut, ganti kode pos lama yang ditautkan dengan kode pos yang sesuai ini.

Misalnya, lihat blog informasi .

Selamat mencoba dan saya harap ini membantu.