Cara membuat widget Featured Post Random support gambar eksternal

Featured Post merupakan sebuah widget yang berisi beberapa cuplikan post yang umumnya terletak di bagian atas tampilan blog, dan biasanya cuplikan post yang ditampilkan dipilih secara acak, tidak mengacu pada kategori tertentu.

Widget Featured Post random

Dikarenakan post yang tampil dipilih secara acak maka untuk membuat widget Featured Post ini diperlukan script Random Post.

Script yang digunakan pun harus mendukung gambar eksternal yang maksudnya yaitu gambar yang dihost di luar Blogger seperti misalnya di Flickr, Google Photo, Google Drive, ataupun di situs penyimpanan gambar lainnya.

Itu dikarenakan widget Featured Post biasanya mengutamakan gambar thumbnail dengan ukuran besar untuk ditampilkan sebagai cuplikan post di samping menampilkan judul, sehingga apabila gambar yang dihost di luar Blogger tidak muncul maka akan merusak tampilan Featured Post.

Mengenai hal itu, kamu tak usah khawatir karena script Random Post untuk widget Featured Post ini merupakan script spesial karena akan mampu menampilkan gambar eksternal.

Sebagai catatan

Dikarenakan Featured Post ini berada di atas tampilan blog, maka untuk memasangnya harus pada gadget yang berada di atas gadget Main, dan di bawah gadget yang berada di atas Main, yang mana biasanya itu adalah gadget Header ataupun gadget Navbar karena setiap template berbeda.

Sehingga apabila kamu belum memiliki kolom gadget di antara gadget atas dan Main maka Blogizty telah menyiapkan satu bundle kode HTML untuk membuat kolom gadget baru.

Tampilan widget Related Post random

Ada tiga tampilan widget Featured Post yang boleh kamu pilih, bila ingin mengganti tampilan, cukup ganti script CSS saja, sedangkan untuk script javascript hanya perlu mengubah jumlah post.

Untuk semua tampilan, masing-masing memiliki 3 style yang berbeda untuk 3 jenis lebar perangkat, yaitu perangkat desktop, tablet/phablet dan mobile smartphone, dan mobile phone ukuran kecil.

Hanya tampilan pada desktop saja yang memiliki style berbeda, sedangkan untuk tampilan pada tablet/phablet dan mobile smartphone, ketiganya sama yaitu menggunakan tampilan slider. Dan pada mobile phone layar kecil, itu menggunakan tampilan block atau grid vertical.

Masing-masing tampilan memiliki jumlah cuplikan post yang berbeda, dan ini bisa dengan mudah kamu atur pada variabel javascript yang dijelaskan di bagian bawah artikel.

Tampilan Featured Post Random pada perangkat desktop

Tampilan Featured Post Random pada perangkat tablet dan mobile

Widget ini hanya akan tampil di halaman depan saja atau homepage. Tidak di halaman lain seperti halaman posting, statis, bahkan halaman pratinjau dan halaman index. Sehingga ketika pengunjung membuka halaman berikutnya dari homepage, maka widget ini tidak akan muncul.

Script Featured Post random

Seperti yang telah dijelaskan di atas, apabila kamu belum memiliki kolom gadget, maka cukup salin kode HTML di bawah ini untuk ditempelkan di atas gadget Main di dalam template blog.

Script HTML untuk kolom gadget baru

Untuk lebih jelasnya, buka editor template. Kemudian cari kode pembuka untuk gadget Main, biasanya bentuknya seperti ini <div class='main-wrapper'>, kemudian tempelkan kode di bawah ini di atasnya.

<b:if cond='!data:view.isSingleItem and data:view.isHomepage'>
<div class='jellymagz-up'>
  <b:section class='magzup' id='magzup' showaddelements='yes'/>
  </div>
</b:if>

Script CSS untuk tampilan 1 Horizontal Grid - 3 post

Salin kode CSS di bawah ini untuk kemudian ditempelkan di atas atau sebelum tag </style> atau ]]></b:skin>.

/* FeaturedPostsRandomJellyBlogizty HorizontalGridImage */
#jelly-ran {display:flex;flex-wrap:nowrap;margin:0 10px}
#jelly-ran .rancontent {position:relative;flex:1 100%;margin:0 4px;border:1px solid rgba(0,0,0,.1)}
#jelly-ran .ranimage {position:relative;padding-top:66.66%;overflow:hidden}
#jelly-ran .rantitle {position:absolute;z-index:1;left:0;right:0;bottom:0;padding:8px 5px 15px 10px;background:rgba(0,0,0,.3)}
#jelly-ran .rantitle a {font-size:16px;color:#fff;font-weight:500}
#jelly-ran .ranimage img {position:absolute;top:0;left:0;bottom:0;right:0;width:100%;height:100%;object-fit:cover}
#jelly-ran .ranlabel {background:rgba(127,127,255,.75);position:absolute;z-index:1;left:10px;top:10px;padding:0 8px;border-radius:2px;text-transform:uppercase;box-shadow:0 0 1px rgba(0,0,0,.5);-webkit-box-shadow:0 0 1px rgba(0,0,0,.5);-moz-box-shadow:0 0 1px rgba(0,0,0,.5)}
#jelly-ran .ranlabel a {font-size:12px;color:#fff;font-weight:500}
#jelly-ran .ransnip {display:none}
@media (min-width:320px) and (max-width:800px){
#jelly-ran {max-width:800px;overflow:auto;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar}
#jelly-ran .rancontent {flex:0 0 auto;width:300px;height:auto;margin:0 8px 0 0}
::-webkit-scrollbar {width:0}
::-webkit-scrollbar-track {transparent}
::-webkit-scrollbar-thumb {width:0}}
@media (max-width:319px){
#jelly-ran {display:block}
#jelly-ran .rancontent {width:100%;margin:0 auto 20px;float:none;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}}
@media (max-width:250px){.jellymagz-up,#jelly-ran{display:none}}

Script CSS untuk tampilan 2 Metro - 4 post

/* FeaturedPostsRandomJellyBlogizty ImageMetro */
#jelly-ran {display:block;margin:0 10px}
#jelly-ran .rancontent {position:relative;width:23.8%;float:left;margin:.5%;display:inline-block;border:1px solid rgba(0,0,0,.1)}
#jelly-ran .ranimage {position:relative;padding-top:66.66%;overflow:hidden}
#jelly-ran .ranimage img {position:absolute;top:0;left:0;bottom:0;right:0;width:100%;height:100%;object-fit:cover}
#jelly-ran .rantitle {position:absolute;z-index:1;left:0;right:0;bottom:0;padding:10px 5px 15px 10px;background:rgba(0,0,0,.3)}
#jelly-ran .rantitle a {font-size:16px;color:#fff;font-weight:500}
#jelly-ran .ranlabel {background:rgba(127,127,255,.75);position:absolute;z-index:1;left:10px;top:10px;padding:1px 8px;border-radius:2px;font-size:12px;text-transform:uppercase;box-shadow:0 0 1px rgba(0,0,0,.5);-webkit-box-shadow:0 0 1px rgba(0,0,0,.5);-moz-box-shadow:0 0 1px rgba(0,0,0,.5)}
#jelly-ran .ranlabel a {color:#fff;font-weight:500}
#jelly-ran .ransnip {display:none}
@media (min-width:961px){
.jellymagz-up {margin-bottom:50px}
#jelly-ran .rancontent:nth-child(7) .ranimage {padding-top:33%}
#jelly-ran .rancontent:nth-child(4) {width:49.4%;}
#jelly-ran .rancontent:nth-child(7) {width:48.6%;}
#jelly-ran .rancontent {border:none;box-shadow:0 0 3px rgba(0,0,0,.15);-webkit-box-shadow:0 0 3px rgba(0,0,0,.15);-moz-box-shadow:0 0 3px rgba(0,0,0,.15)}}
@media (min-width:320px) and (max-width:960px){
#jelly-ran {max-width:960px;display:flex;flex-wrap:nowrap;overflow:auto;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar}
#jelly-ran .rancontent {flex:0 0 auto;width:300px;height:auto;margin:0 8px 0 0}
::-webkit-scrollbar {width:0}
::-webkit-scrollbar-track {transparent}
::-webkit-scrollbar-thumb {width:0}}
@media (max-width:319px){
#jelly-ran {display:block}
#jelly-ran .rancontent {width:100%;margin:0 auto 20px;float:none;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}}
@media (max-width:250px){.jellymagz-up,#jelly-ran{display:none}}

Script CSS untuk tampilan 3 Magazine - 5 post

/* FeaturedPostsRandomJellyBlogizty ImageMagazine */
#jelly-ran {display:block;margin:0 10px}
#jelly-ran .rancontent {position:relative;width:23.8%;float:left;margin:.52%;display:inline-block;border:1px solid rgba(0,0,0,.1)}
#jelly-ran .ranimage {position:relative;padding-top:66.66%;overflow:hidden}
#jelly-ran .ranimage img {position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;object-fit:cover}
#jelly-ran .rantitle {position:absolute;z-index:1;left:0;right:0;bottom:0;padding:10px 5px 15px 10px;background:rgba(0,0,0,.3)}
#jelly-ran .rantitle a {font-size:16px;color:#fff;font-weight:500}
#jelly-ran .ranlabel {background:rgba(127,127,255,.8);position:absolute;z-index:1;left:10px;top:10px;padding:1px 8px;border-radius:2px;font-size:12px;text-transform:uppercase;box-shadow:0 0 1px rgba(0,0,0,.5);-webkit-box-shadow:0 0 1px rgba(0,0,0,.5);-moz-box-shadow:0 0 1px rgba(0,0,0,.5)}
#jelly-ran .ranlabel a {color:#fff;font-weight:500}
#jelly-ran .ransnip {display:none}
@media (min-width:961px){
#jelly-ran .rancontent:nth-child(4) {width:49.25%}
#jelly-ran .rancontent {border:none;box-shadow:0 0 3px rgba(0,0,0,.15);-webkit-box-shadow:0 0 3px rgba(0,0,0,.15);-moz-box-shadow:0 0 3px rgba(0,0,0,.15)}}
@media (min-width:320px) and (max-width:960px){
#jelly-ran {max-width:960px;display:flex;flex-wrap:nowrap;overflow:auto;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar}
#jelly-ran .rancontent {flex:0 0 auto;width:300px;height:auto;margin:0 8px 0 0}
::-webkit-scrollbar {width:0}
::-webkit-scrollbar-track {transparent}
::-webkit-scrollbar-thumb {width:0}}
@media (max-width:319px){
#jelly-ran {display:block}
#jelly-ran .rancontent {width:100%;margin:0 auto 20px;float:none;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}}
@media (max-width:250px){.jellymagz-up,#jelly-ran{display:none}}

Setelah kamu selesai menempelkan script CSS, kemudian klik simpan. Lalu tutup editor HTML template untuk kemudian buka menu Tata Letak.

Script javascript Featured Post random

Pada menu Tata Letak, akan terdapat kolom gadget bernama magzup, kemudian pada kolom tersebut, klik Tambahkan Gadget, dan tempelkan script javascript di bawah ini.

Sedangkan untuk kolom judul, boleh diisi ataupun tidak. Namun, Blogizty menyarankan agar sebaiknya tidak diisi.

<!--FeaturedPostRandomJellyBlogizty Start-->
<div id='jelly-ran'>
<script>
//<![CDATA[
function jellyRandomPosts(json){var numPosts=json.feed.openSearch$totalResults.$t;var indexPosts=new Array();for(var b=0;b<json.feed.link.length;b++){if(json.feed.link[b].rel=='alternate'){var blogName=json.feed.link[b].href}};for(var i=0;i<numPosts;++i){indexPosts[i]=i}{indexPosts.sort(function(){return 0.5-Math.random()})}if(ranmax>numPosts){ranmax=numPosts}for(i=0;i<ranmax;++i){var entry=json.feed.entry[indexPosts[i]];var jelCat=entry.category[0].term;var jelTitle=entry.title.$t;if("content"in entry){var getSnip=entry.content.$t}else{if('summary'in entry){var getSnip=entry.summary.$t}else{var getSnip="";}};getSnip=getSnip.replace(/<\S[^>]*>/g,"");if(getSnip.length<ransnipchars){var jelSnip=getSnip}else{getSnip=getSnip.substring(0,ransnipchars);var space=getSnip.lastIndexOf(" ");jelSnip=getSnip.substring(0,space)+"&#133;";};for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){var jelUrl=entry.link[k].href;var jelImage;try{jelImage=entry['\x6d\x65\x64\x69\x61\x24\x74\x68\x75\x6d\x62\x6e\x61\x69\x6c']['\x75\x72\x6c']['\x72\x65\x70\x6c\x61\x63\x65'](/\/s72\-c\//,'\x2f\x73\x36\x30\x30\x2f');}catch(_0x61c481){v=entry['\x63\x6f\x6e\x74\x65\x6e\x74']['\x24\x74']['\x69\x6e\x64\x65\x78\x4f\x66']('\x3c\x69\x6d\x67'),b=entry['\x63\x6f\x6e\x74\x65\x6e\x74']['\x24\x74']['\x69\x6e\x64\x65\x78\x4f\x66']('\x73\x72\x63\x3d\x22',v),c=entry['\x63\x6f\x6e\x74\x65\x6e\x74']['\x24\x74']['\x69\x6e\x64\x65\x78\x4f\x66']('\x22',b+0x5),d=entry['\x63\x6f\x6e\x74\x65\x6e\x74']['\x24\x74']['\x73\x75\x62\x73\x74\x72'](b+0x5,c-b-0x5),v!=-0x1&&b!=-0x1&&c!=-0x1&&d!=''?jelImage=d:jelImage='\x68\x74\x74\x70\x73\x3a\x2f\x2f\x6c\x68\x33\x2e\x67\x6f\x6f\x67\x6c\x65\x75\x73\x65\x72\x63\x6f\x6e\x74\x65\x6e\x74\x2e\x63\x6f\x6d\x2f\x2d\x68\x4a\x5f\x45\x2d\x79\x36\x45\x71\x4c\x55\x2f\x58\x38\x74\x50\x34\x4e\x48\x49\x5f\x70\x49\x2f\x41\x41\x41\x41\x41\x41\x41\x41\x41\x42\x34\x2f\x4d\x63\x4d\x2d\x65\x70\x64\x45\x4c\x65\x63\x71\x33\x4e\x2d\x44\x75\x78\x73\x51\x54\x79\x65\x55\x6f\x30\x34\x4d\x48\x5f\x34\x41\x51\x43\x4c\x63\x42\x47\x41\x73\x59\x48\x51\x2f\x68\x37\x32\x30\x2f\x4a\x65\x6c\x6c\x79\x25\x32\x42\x47\x6c\x61\x73\x73\x25\x32\x42\x42\x6c\x6f\x67\x69\x7a\x74\x79\x25\x32\x42\x4e\x6f\x49\x6d\x61\x67\x65\x2e\x6a\x70\x67';}}};document['\x77\x72\x69\x74\x65']('\x3c\x64\x69\x76\x20\x63\x6c\x61\x73\x73\x3d\x22\x72\x61\x6e\x63\x6f\x6e\x74\x65\x6e\x74\x22\x3e\x3c\x64\x69\x76\x20\x63\x6c\x61\x73\x73\x3d\x22\x72\x61\x6e\x74\x69\x74\x6c\x65\x22\x3e\x3c\x61\x20\x68\x72\x65\x66\x3d\x22'+jelUrl+'\x22\x20\x72\x65\x6c\x3d\x22\x6e\x6f\x66\x6f\x6c\x6c\x6f\x77\x22\x3e'+jelTitle+'\x3c\x2f\x61\x3e\x3c\x2f\x64\x69\x76\x3e'),document['\x77\x72\x69\x74\x65']('\x3c\x73\x70\x61\x6e\x20\x63\x6c\x61\x73\x73\x3d\x22\x72\x61\x6e\x6c\x61\x62\x65\x6c\x22\x3e\x3c\x61\x20\x68\x72\x65\x66\x3d\x22'+blogName+'\x73\x65\x61\x72\x63\x68\x2f\x6c\x61\x62\x65\x6c\x2f'+jelCat+'\x22\x20\x72\x65\x6c\x3d\x22\x6e\x6f\x66\x6f\x6c\x6c\x6f\x77\x22\x3e'+jelCat+'\x3c\x2f\x61\x3e\x3c\x2f\x73\x70\x61\x6e\x3e'),document['\x77\x72\x69\x74\x65']('\x3c\x64\x69\x76\x20\x63\x6c\x61\x73\x73\x3d\x22\x72\x61\x6e\x69\x6d\x61\x67\x65\x22\x3e\x3c\x61\x20\x68\x72\x65\x66\x3d\x22'+jelUrl+'\x22\x20\x72\x65\x6c\x3d\x22\x6e\x6f\x66\x6f\x6c\x6c\x6f\x77\x22\x3e\x3c\x69\x6d\x67\x20\x61\x6c\x74\x3d\x22\x22\x20\x73\x72\x63\x3d\x22'+jelImage+'\x22\x2f\x3e\x3c\x2f\x61\x3e\x3c\x2f\x64\x69\x76\x3e'),document['\x77\x72\x69\x74\x65']('\x3c\x64\x69\x76\x20\x63\x6c\x61\x73\x73\x3d\x22\x72\x61\x6e\x73\x6e\x69\x70\x22\x3e'+jelSnip+'\x3c\x2f\x64\x69\x76\x3e'),document['\x77\x72\x69\x74\x65']('\x3c\x64\x69\x76\x20\x73\x74\x79\x6c\x65\x3d\x22\x63\x6c\x65\x61\x72\x3a\x62\x6f\x74\x68\x22\x3e\x3c\x2f\x64\x69\x76\x3e\x3c\x2f\x64\x69\x76\x3e');}}
//]]>
</script>
<script>
var ranmax = 5;
var ransnipchars = 0;
</script>
<script src='/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=jellyRandomPosts&amp;max-results=999999'></script>
<div style="clear:both"/>
</div>

Modifikasi script

Pada bagian bawah script javascript, terdapat dua variabel yang boleh kamu ubah nilainya, yang mana salah satunya berfungsi untuk menyesuaikan jumlah post dengan salah satu tampilan Featured Post, di antaranya yaitu :

• var ranmax = 5 ;

Variabel ini untuk menentukan jumlah post yang akan ditampilkan, ubah hanya nomornya saja.

Sebagai contoh, apabila kamu akan menampilkan Featured Post tampilan 1 yang memiliki 3 post, maka ubah nomor pada var ranmax menjadi 3.

• var ransnipchars = 0 ;

Untuk variabel ini tak perlu diubah, karena variabel ini fungsinya adalah untuk mengatur jumlah karakter post snippet, di mana pada tampilan-tampilan ini tidak diperlukan.

Sedangkan untuk script CSS, silakan atur sendiri. Apabila ada pertanyaan, silakan ajukan di kolom komentar. Blogizty akan berusaha untuk membantu.

©Blogizty