Langsung ke konten utama

Entri yang Diunggulkan

CARA PEMBUATAN AKUN PADA E-KATALOG VERSI 6

Tutorial Membuat Widget Recent Post Slider

Widget ini merupakan salah satu widget yang banyak digunakan meski belum tersedia di blogger dan harus kita pasang secara manual dengan menggunakan kode JavaScript.

Widget ini memiliki desain yang responsive, jika Anda memiliki kemampuan atau paham dengan bahasa pemrograman CSS mungkin Anda bisa mengatur widget recent post ini agar sesuai dengan tampilan blog Anda.

Kalau pun tidak, widget recent post ini sudah di desain agar bisa digunakan secara umum oleh para blogger dan sangat cocok apabila digunakan pada bagian sidebar yang memiliki lebar kurang lebih 300px.




Bagi Anda yang tertarik untuk memasang widget recent post slider ini di sidebar blog, silahkan ikuti langkah-langkahnya di bawah ini.

1. Masuk ke Blogger.com
2. Klik Tata Letak > Tambahkan Gadget > pilih JavaScript/HTML
3. Silahkan Copy dan Paste kode di bawah ini.

<style scoped="" type="text/css"> ul.rcentside *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}ul.rcentside{font-size:11px}ul.rcentside,ul.rcentside li{margin:0;padding:0;list-style:none;position:relative}ul.rcentside{width:100%;height:500px}ul.rcentside li{height:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none}ul.rcentside li:nth-child(1),ul.rcentside li:nth-child(2),ul.rcentside li:nth-child(3),ul.rcentside li:nth-child(4){display:block}ul.rcentside img{border:0;width:100%;height:auto}ul.rcentside li:nth-child(1){width:100%;height:49.5%;margin:0 0 2px;left:0;top:0}ul.rcentside li:nth-child(2){left:0;top:50%}ul.rcentside li:nth-child(3){left:50.5%;top:50%}ul.rcentside li:nth-child(4){width:100%;left:0;top:75%}ul.rcentside .overlayx,ul.rcentside li{transition:all .4s ease-in-out}ul.rcentside .overlayx{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;opacity:.6;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi997wFzmP0NmRu2NcEe7KVA-QROwLh5GTnuHzA6A54NPTKT6EniQ3TFcDEdPIbVVfK6Icx-PROoTMid3nXmnGFc7_zoBqC17BM7rzkQhjNe5u3gXZKYKVEdx9SLlwiol0vD4VBz6yCVlY/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x}ul.rcentside .overlayx,ul.rcentside img{margin:3px}ul.rcentside li:nth-child(1) .overlayx{background-position:50% 25%}ul.rcentside .overlayx:hover{opacity:.1}ul.rcentside h4{position:absolute;bottom:10px;left:10px;right:10px;z-index:2;color:#fff;font-weight:700;margin:0;padding:10px;line-height:1.5em;font-weight:normal;overflow:hidden;transition:all .3s;font-size:1em}ul.rcentside li:hover h4{bottom:30px}ul.rcentside li:nth-child(1) h4,ul.rcentside li:nth-child(4) h4{font-size:150%}ul.rcentside .label_text{position:absolute;bottom:0;left:20px;z-index:2;color:#fff;font-size:90%;opacity:0;transition:all .3s}ul.rcentside li:hover .label_text{bottom:20px;opacity:1}ul.rcentside li:nth-child(2) .autname,ul.rcentside li:nth-child(3) .autname{display:none}.buttons{margin:5px 0 0}.buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative}.buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%}.buttons a.nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px} </style> <div id="featuredpostside"></div> <script type='text/javascript'> function FeaturedPostSide(a){(function(e){var h={blogURL:"",MaxPost:4,idcontaint:"",ImageSize:100,interval:10000,autoplay:false,loadingClass:"loadingxx",pBlank:"http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",MonthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],tagName:false};h=e.extend({},h,a);var g=e(h.idcontaint);var d=h.MaxPost*200;g.html('<div class="sliderx"><ul class="rcentside"></ul></div><div class="buttons"><a href="#" class="prevx">prev</a><a href="#" class="nextx">next</a></div>');var f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail" in s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.ImageSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.ImageSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.MonthNames[parseInt(p,10)-1];l+='<li><a target="_blank" href="'+q+'"><div class="overlayx"></div><img class="random" src="'+u+'"/><h4>'+k+'</h4></a><div class="label_text"><span class="date"><span class="dd">'+t+'</span> <span class="dm">'+v+'</span> <span class="dy">'+x+'</span></span> <span class="autname">'+m+"</span></div></li>"}e("ul",g).append(l).addClass(h.loadingClass)};var c=function(){e(h.idcontaint+" .nextx").click()};var b=function(){e.get((h.blogURL===""?window.location.protocol+"//"+window.location.host:h.blogURL)+"/feeds/posts/summary"+(h.tagName===false?"":"/-/"+h.tagName)+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",f,"jsonp");setTimeout(function(){e(h.idcontaint+" .prevx").click(function(){e(h.idcontaint+" .sliderx li:first").before(e(h.idcontaint+" .sliderx li:last"));return false});e(h.idcontaint+" .nextx").click(function(){e(h.idcontaint+" .sliderx li:last").after(e(h.idcontaint+" .sliderx li:first"));return false});if(h.autoplay){var i=h.interval;var j=setInterval(c,i);e(h.idcontaint+" .sliderx li:first").before(e(h.idcontaint+" .sliderx li:last"));e(h.idcontaint+" .sliderx").hover(function(){clearInterval(j)},function(){j=setInterval(c,i)})}e("ul",g).removeClass(h.loadingClass)},d)};e(document).ready(b)})(jQuery)}; //<![CDATA[ FeaturedPostSide({ blogURL: "http://www.sukrialmarosy.com/", MaxPost: 10, idcontaint: "#featuredpostside", ImageSize: 500, interval: 10000, autoplay: true, tagName: false, }); //]]> </script>

4. Klik Simpan.

Pengaturan Widget Recent Post

  • blogURL: "http://www.sukrialmarosy.com/", ganti dengan URL blog Anda.
  • MaxPost: 10, jumlah postingan yang tampil pada widget recent post.
  • ImageSize: 500, semakin besar nilainya gambar akan terlihat semakin jelas.
  • interval: 10000, waktu untuk pindah slide, 10000 adalah 10 detik.
  • autoplay: true, jika true slide akan pindah otomatis sesuai interval waktu, jika false slide tidak akan berpindah.
  • tagName: false, untuk menampilkan postingan sesuai label silahkan ganti false dengan nama label. Misalnya, nama label Blogger ubah menjadi tagName: "Blogger", harus menggunakan tanda kutip.

Komentar

Posting Komentar

Postingan populer dari blog ini

PANDUAN MENYUSUN HPS JASA KONSULTAN KONSTRUKSI UNTUK PEMULA

  PANDUAN MENYUSUN HPS JASA KONSULTAN KONSTRUKSI UNTUK PEMULA Penyusunan dan penetapan HPS bertujuan untuk menilai kewajaran harga penawaran dan/atau kewajaran harga satuan, dasar untuk menetapkan batas tertinggi penawaran yang sah dan dasar untuk menetapkan besaran nilai jaminan pelaksanaan bagi penawaran yang kurang dari 80% (delapan puluh persen) dari nilai HPS. Untuk menentukan besaran biaya pembangunan adalah salah satunya dari Peraturan Pemerintah nomor 16 Tahun 2021 tentang peraturan pelaksanaan undang-undang nomor 28 tahun 2002 tentang bangunan Gedung. Anggaran untuk pembangunan dituangkan dalam DIPA/DPA 1.     Perencanaan Teknis; 2.     Pelaksanaan konstruksi fisik; 3.     Manajemen konstruksi atau pengawasan konstruksi; dan 4.     Pengelolaan Kegiatan. File dapat diunduh pada: Peraturan Pemerintah nomor 16 Tahun 2021 tentang peraturan pelaksanaan undang-undang nomor 28 tahun 2002 tentang bangunan Gedung. Data/info...

Membuat Pre-test dan Post-test pada Pelatihan secara online melalui google form

Sebagai Fasilitator atau Trainer dalam mengajar perlu semaksimal mungkin untuk melakukan transfer pengetahuan. salah satu cara untuk mengetahui tingkat keberhasilan adalah melalui pre-test dan post-test.  Pada tulisan kali ini, akan kami sampaikan tutorial membuat pre-test dan post-test melalui google form.  Dengan menggunakan  pre-test dan post-test melalui google form, maka membuat lebih praktis dan nilai peserta langsung dapat direkap. Dapat dibuat analisa disoal mana yang paling banyak salah yang berarti belum dipahami peserta. Pre test diberikan dengan maksud untuk mengetahui apakah ada diantara peserta yang sudah mengetahui mengenai materi yang akan diajarkan. Pre test juga bisa di artikan sebagai kegiatan menguji tingkatan pengetahuan peserta terhadap materi yang akan disampaikan, kegiatan pre test dilakukan sebelum kegiatan pengajaran diberikan. Adapun manfaat dari diadakannya pree test adalah untuk mengetahui kemampuan awal peserta mengenai pelajaran...

PEMBAHASAN TRY OUT PELATIHAN KOMPETENSI PENGADAAN BARANG/JASA PEMERINTAH LEVEL 1

1. Salah satu tahapan perencanaan Pengadaan Barang/Jasa Pemerintah adalah identifikasi kebutuhan. Proses tersebut merupakan gambaran aktivitas dalam segmen rantai pasok .... A. Hulu B. Internal C. Hilir D. Eksternal Ulasan Jawaban: Alasan jawaban benar: Aktivitas utama dalam aktivitas hulu (upstream supply chain) adalah proses perencanaan, serta pencarian pemasok dan pengadaan barang/jasa Alasan jawaban salah: Pilihan jawaban (B) salah karena rantai pasok internal, aktivitas utama adalah manajemen produksi, penyimpanan dan pengendalian persediaan, serta manajemen pengendalian mutu. Aktivitas di rantai pasok ini lebih tepat adalah pelaksanaan kontrak Pilihan jawaban (C) salah karena rantai pasok hilir, Aktivitas utama adalah pada proses transportasi, distribusi, serah terima, dan layanan purna jual. Pilihan jawaban (D) salah karena dalam MRP tidak terdapat rantai pasok ekternal