Langsung ke konten utama

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://1.bp.blogspot.com/-FtnGJHMcWH8/UIV3IE-aaJI/AAAAAAAAGHs/WvLypnWxg5A/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

PEMBAGIAN KATA DALAM BAHASA ARAB (Terjemah Mulakhos)

PEMBAGIAN KATA DALAM BAHASA ARAB Nahwu adalah kaidah yang digunakan untuk mengetahui jabatan setiap kata dalam suatu kalimat, mengetahui harakat akhir dan mengetahui tata cara meng-i’rab-nya.[1] Kata dalam Bahasa Arab terbagi menjadi 3 : 1.    Isim Isim adalah setiap kata yang menunjukkan   kepada manusia, hewan, tumbuhan, benda mati, tempat, waktu, sifat atau makna-makna yang tidak berkaitan dengan waktu. Contoh: رَجُلٌ, أَسَدٌ, زَهْرَةٌ, حَائِطٌ, القَاهِرَةُ, شَهْرٌ, نَظِيفٌ, اِسْتِقْلَالٌ (Seorang lelaki, singa, bunga, dinding, Kairo, bulan, bersih dan kemerdekaan). Yang membedakan isim dengan jenis kata yang lainnya adalah:[2]

Ilmu Shorof

Ilmu Shorof bagian dari Ilmu Nahwu, yang ditekankan kepada pembahasan bentuk kata dan keadaannya ketika mufrodnya. Ilmu sharaf adalah pengetahuan untuk menganalisa sebuah kata berbahasa Arab ketika dalam keadaan berdiri sendiri. Pembahasannya meliputi pembentukan kata serta aturan perubahannya menjadi kata-kata baru yang merupakan turunan dari sebuah kata berbahasa Arab. Dalam ilmu tata bahasa Indonesia disebut morfologi.  Jenis Tashrif Tashrif itu ada dua macam: Tashrif Ishtilahi(تَصْرِيْفٌ اِصْطِلاَحِيٌّ)ا, yaitu perubahan kata yang didasarkan pada perbedaan bentuk katanya seperti merubah sebuah kata kerja bentuk lampau menjadi kata kerja bentuk sedang, kata kerja bentuk perintah, kata kerja bentuk larangan, dan seterusnya. Tashrif Lughawi (تَصْرِيْفٌ لُغَوِيٌّ), yaitu perubahan yang didasarkan pada jumlah dan jenis pelakunya seperti perubahan sebuah kata benda tunggal menjadi kata benda berjumlah dua, menjadi kata benda jamak, dan sebagainya.

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 yang disampai