Cara Membuat Widget Popular Post Blogger Dengan Efek Animasi 3D Cube
Popular post merupakan widget standar yang ada pada blog berbasis Google Blogspot. Widget popular post menampilkan informasi halaman artikel blog yang sering dilihat oleh pengunjung blog atau artikel blog yang memiliki pageview terbanyak. Dengan terpasangnya widget popular post pada blog maka pengunjung blog dapat mengetahui artikel mana yang paling populer di blog tersebut.
Secara default widget popular post biasanya mengikuti tampilan dari tema yang digunakan atau dalam bentuk tampilan list biasa. Pada artikel ini widget popular post akan dibuat menjadi tampilan animasi 3D cube seperti yang digunakan pada blog codeflare ini. Contoh tampilan bisa dilihat pada gambar di bawah ini.
Selain dari tampilan animasi 3D Cube yang unik, widget ini dapat memberikan daya tarik yang unik sehingga akan membuat blog menjadi semakin dinamis dan menarik. Tampilan animasi 3D Cube widget popular post ini juga bisa di render dengan baik pada browser mobile tanpa ada kendala, sehingga widget popular post dapat terlihat dengan unik pada berbagai perangkat modern.
Pemasangan widget popular post dengan tampilan animasi 3D Cube ini sangat mudah, tinggal copy-paste kode javascript, maka tampilan animasi 3D Cube sudah bisa digunakan. Buat anda yang tertarik dengan tampilan animasi 3D Cube widget popular post silakan disimak tutorialnya.
Secara default widget popular post biasanya mengikuti tampilan dari tema yang digunakan atau dalam bentuk tampilan list biasa. Pada artikel ini widget popular post akan dibuat menjadi tampilan animasi 3D cube seperti yang digunakan pada blog codeflare ini. Contoh tampilan bisa dilihat pada gambar di bawah ini.
Selain dari tampilan animasi 3D Cube yang unik, widget ini dapat memberikan daya tarik yang unik sehingga akan membuat blog menjadi semakin dinamis dan menarik. Tampilan animasi 3D Cube widget popular post ini juga bisa di render dengan baik pada browser mobile tanpa ada kendala, sehingga widget popular post dapat terlihat dengan unik pada berbagai perangkat modern.
Pemasangan widget popular post dengan tampilan animasi 3D Cube ini sangat mudah, tinggal copy-paste kode javascript, maka tampilan animasi 3D Cube sudah bisa digunakan. Buat anda yang tertarik dengan tampilan animasi 3D Cube widget popular post silakan disimak tutorialnya.
Informasi Singkat
3D rendering
3D rendering adalah proses grafik komputer 3D untuk mengubah model 3D menjadi gambar 2D di komputer. Render 3D dapat mencakup efek fotorealistik atau gaya non-fotorealistik.
Rendering methods
Rendering adalah proses terakhir untuk menciptakan gambar atau animasi 2D aktual dari adegan yang disiapkan. Ini dapat dibandingkan dengan mengambil foto atau merekam adegan setelah pengaturan selesai dalam kehidupan nyata. [1] Beberapa metode render yang berbeda, dan seringkali khusus, telah dikembangkan. Ini berkisar dari rendering wireframe jelas non-realistis melalui rendering berbasis poligon, untuk teknik yang lebih maju seperti: rendering scanline, ray tracing, atau radiositas. Rendering dapat berlangsung dari sepersekian detik hingga beberapa hari untuk satu gambar / bingkai. Secara umum, metode yang berbeda lebih cocok untuk rendering fotorealistik, atau rendering waktu nyata.
Real-time
Rendering untuk media interaktif, seperti game dan simulasi, dihitung dan ditampilkan secara waktu nyata, dengan laju sekitar 20 hingga 120 frame per detik. Dalam rendering real-time, tujuannya adalah untuk menunjukkan informasi sebanyak mungkin yang dapat diproses mata dalam sepersekian detik (alias "dalam satu bingkai": Dalam kasus animasi 30 frame per detik, bingkai meliputi satu per 30 detik).
Tujuan utama adalah untuk mencapai tingkat fotorealisme setinggi mungkin pada kecepatan rendering minimum yang dapat diterima (biasanya 24 frame per detik, karena itulah minimum yang perlu dilihat mata manusia untuk berhasil menciptakan ilusi gerakan). Faktanya, eksploitasi dapat diterapkan dengan cara mata 'memandang' dunia, dan sebagai hasilnya, gambar akhir yang disajikan tidak harus seperti dunia nyata, tetapi satu yang cukup dekat untuk ditoleransi oleh mata manusia.
Perangkat lunak rendering dapat mensimulasikan efek visual seperti suar lensa, kedalaman bidang, atau kekaburan gerakan. Ini adalah upaya untuk mensimulasikan fenomena visual yang dihasilkan dari karakteristik optik kamera dan mata manusia. Efek-efek ini dapat meminjamkan elemen realisme ke sebuah pemandangan, bahkan jika efeknya hanyalah sebuah artefak yang disimulasikan dari sebuah kamera. Ini adalah metode dasar yang digunakan dalam game, dunia interaktif dan VRML.
Peningkatan cepat dalam kekuatan pemrosesan komputer telah memungkinkan tingkat realisme yang semakin tinggi bahkan untuk rendering waktu nyata, termasuk teknik seperti rendering HDR. Render waktu-nyata seringkali poligonal dan dibantu oleh GPU komputer.
[Info lebih lanjut dapat dilihat pada situs wikipedia...]
Sumber : Wikipedia
3D rendering
3D rendering adalah proses grafik komputer 3D untuk mengubah model 3D menjadi gambar 2D di komputer. Render 3D dapat mencakup efek fotorealistik atau gaya non-fotorealistik.
Rendering methods
Rendering adalah proses terakhir untuk menciptakan gambar atau animasi 2D aktual dari adegan yang disiapkan. Ini dapat dibandingkan dengan mengambil foto atau merekam adegan setelah pengaturan selesai dalam kehidupan nyata. [1] Beberapa metode render yang berbeda, dan seringkali khusus, telah dikembangkan. Ini berkisar dari rendering wireframe jelas non-realistis melalui rendering berbasis poligon, untuk teknik yang lebih maju seperti: rendering scanline, ray tracing, atau radiositas. Rendering dapat berlangsung dari sepersekian detik hingga beberapa hari untuk satu gambar / bingkai. Secara umum, metode yang berbeda lebih cocok untuk rendering fotorealistik, atau rendering waktu nyata.
Real-time
Rendering untuk media interaktif, seperti game dan simulasi, dihitung dan ditampilkan secara waktu nyata, dengan laju sekitar 20 hingga 120 frame per detik. Dalam rendering real-time, tujuannya adalah untuk menunjukkan informasi sebanyak mungkin yang dapat diproses mata dalam sepersekian detik (alias "dalam satu bingkai": Dalam kasus animasi 30 frame per detik, bingkai meliputi satu per 30 detik).
Tujuan utama adalah untuk mencapai tingkat fotorealisme setinggi mungkin pada kecepatan rendering minimum yang dapat diterima (biasanya 24 frame per detik, karena itulah minimum yang perlu dilihat mata manusia untuk berhasil menciptakan ilusi gerakan). Faktanya, eksploitasi dapat diterapkan dengan cara mata 'memandang' dunia, dan sebagai hasilnya, gambar akhir yang disajikan tidak harus seperti dunia nyata, tetapi satu yang cukup dekat untuk ditoleransi oleh mata manusia.
Perangkat lunak rendering dapat mensimulasikan efek visual seperti suar lensa, kedalaman bidang, atau kekaburan gerakan. Ini adalah upaya untuk mensimulasikan fenomena visual yang dihasilkan dari karakteristik optik kamera dan mata manusia. Efek-efek ini dapat meminjamkan elemen realisme ke sebuah pemandangan, bahkan jika efeknya hanyalah sebuah artefak yang disimulasikan dari sebuah kamera. Ini adalah metode dasar yang digunakan dalam game, dunia interaktif dan VRML.
Peningkatan cepat dalam kekuatan pemrosesan komputer telah memungkinkan tingkat realisme yang semakin tinggi bahkan untuk rendering waktu nyata, termasuk teknik seperti rendering HDR. Render waktu-nyata seringkali poligonal dan dibantu oleh GPU komputer.
[Info lebih lanjut dapat dilihat pada situs wikipedia...]
Sumber : Wikipedia
Widget Popular Post Lainnya :
- √5 Tampilan Style Widget Popular Post Blogger
- Widget Popular Post Blogger Dengan Efek Animasi Slider
DAFTAR ISI
#1 Cara Pemasangan Widget Popular Post
Langkah pertama adalah dengan memasang widget popular post terlebih dahulu sebelum memasang kode javascript untuk tampilan animasi 3D Cube. Bagi yang sudah memasang widget popular post diblognya silakan disesuaikan pilihan konfigurasi dari widget popular post agar tampilan animasi 3D cube bisa berjalan dengan baik. Contoh konfigurasi bisa dilihat pada tutorial di bab ini.
Bagi anda yang belum memasang widget popular post silakan disimak tutorialnya langkah demi langkah, untuk mempermudah saya sertakan gambar dengan tampilan blogspot terbaru, bagi anda yang masih menggunakan tampilan blogspot lama caranya hampir sama tinggal disesuaikan aja.
Bagi anda yang belum memasang widget popular post silakan disimak tutorialnya langkah demi langkah, untuk mempermudah saya sertakan gambar dengan tampilan blogspot terbaru, bagi anda yang masih menggunakan tampilan blogspot lama caranya hampir sama tinggal disesuaikan aja.
- Silakan login dahulu ke blog Anda.
- Klik tombol Tema untuk masuk ke tema editor.
- Setelah masuk ke akun blog anda kemudian klik tombol Tata Letak untuk melihat konfigurasi tata letak template blog, kemudian pilih Tambahkan Widget untuk menampilkan pilihan widget box.
- Pilih widget Popular Post kemudian klik tambahkan untuk menampilkan kotak konfigurasi dari widget yang dipilih.
- Sesuaikan konfigurasi widget popular post seperti yang terlihat pada gambar di bawah ini.
- Selesai, kemudian klik tombol Simpan. Pastikan anda menaruh widget ini nantinya selalu di atas widget yang akan difungsikan untuk menaruh kode javascript animasi 3D cube.
#2 Cara Pemasangan Kode Javascript
Cara pemasangan kotak widget untuk menaruh kode javascript, caranya sama seperti cara di atas cuma pada pilihan widget silakan anda pilih HTML / Javascript. Setelah itu akan terlihat widget box yang berfungsi untuk menaruh kode HTML atau javascript. Silakan anda copy-paste kode di bawah ini dan masukan ke dalam widget box tersebut atau lebih mudahnya tinggal tekan tombol Add to Blogger yang ada di bawah code-box berikut ini.
- Pilih widget HTML/Javascript.
- Masukan kode script pada kotak widget, untuk judul widget dikosongkan saja.
<style type="text/css">
.popular-posts{
width:100%;
padding:10px !important;
box-sizing:border-box;
text-align:center;
}
.cube {
width:100%;
height:300px;
box-sizing:border-box;
display:inline-block;
}
#linksCube img {width:100%;height:100%;}
</style>
<script>
//<![CDATA[
(function(){var j=false;window.JQClass=function(){};JQClass.classes={};JQClass.extend=function extender(f){var g=this.prototype;j=true;var h=new this();j=false;for(var i in f){h[i]=typeof f[i]=='function'&&typeof g[i]=='function'?(function(d,e){return function(){var b=this._super;this._super=function(a){return g[d].apply(this,a||[])};var c=e.apply(this,arguments);this._super=b;return c}})(i,f[i]):f[i]}function JQClass(){if(!j&&this._init){this._init.apply(this,arguments)}}JQClass.prototype=h;JQClass.prototype.constructor=JQClass;JQClass.extend=extender;return JQClass}})();(function($){JQClass.classes.JQPlugin=JQClass.extend({name:'plugin',defaultOptions:{},regionalOptions:{},_getters:[],_getMarker:function(){return'is-'+this.name},_init:function(){$.extend(this.defaultOptions,(this.regionalOptions&&this.regionalOptions[''])||{});var c=camelCase(this.name);$[c]=this;$.fn[c]=function(a){var b=Array.prototype.slice.call(arguments,1);if($[c]._isNotChained(a,b)){return $[c][a].apply($[c],[this[0]].concat(b))}return this.each(function(){if(typeof a==='string'){if(a[0]==='_'||!$[c][a]){throw'Unknown method: '+a;}$[c][a].apply($[c],[this].concat(b))}else{$[c]._attach(this,a)}})}},setDefaults:function(a){$.extend(this.defaultOptions,a||{})},_isNotChained:function(a,b){if(a==='option'&&(b.length===0||(b.length===1&&typeof b[0]==='string'))){return true}return $.inArray(a,this._getters)>-1},_attach:function(a,b){a=$(a);if(a.hasClass(this._getMarker())){return}a.addClass(this._getMarker());b=$.extend({},this.defaultOptions,this._getMetadata(a),b||{});var c=$.extend({name:this.name,elem:a,options:b},this._instSettings(a,b));a.data(this.name,c);this._postAttach(a,c);this.option(a,b)},_instSettings:function(a,b){return{}},_postAttach:function(a,b){},_getMetadata:function(d){try{var f=d.data(this.name.toLowerCase())||'';f=f.replace(/'/g,'"');f=f.replace(/([a-zA-Z0-9]+):/g,function(a,b,i){var c=f.substring(0,i).match(/"/g);return(!c||c.length%2===0?'"'+b+'":':b+':')});f=$.parseJSON('{'+f+'}');for(var g in f){var h=f[g];if(typeof h==='string'&&h.match(/^new Date\((.*)\)$/)){f[g]=eval(h)}}return f}catch(e){return{}}},_getInst:function(a){return $(a).data(this.name)||{}},option:function(a,b,c){a=$(a);var d=a.data(this.name);if(!b||(typeof b==='string'&&c==null)){var e=(d||{}).options;return(e&&b?e[b]:e)}if(!a.hasClass(this._getMarker())){return}var e=b||{};if(typeof b==='string'){e={};e[b]=c}this._optionsChanged(a,d,e);$.extend(d.options,e)},_optionsChanged:function(a,b,c){},destroy:function(a){a=$(a);if(!a.hasClass(this._getMarker())){return}this._preDestroy(a,this._getInst(a));a.removeData(this.name).removeClass(this._getMarker())},_preDestroy:function(a,b){}});function camelCase(c){return c.replace(/-([a-z])/g,function(a,b){return b.toUpperCase()})}$.JQPlugin={createPlugin:function(a,b){if(typeof a==='object'){b=a;a='JQPlugin'}a=camelCase(a);var c=camelCase(b.name);JQClass.classes[c]=JQClass.classes[a].extend(b);new JQClass.classes[c]()}}})(jQuery);
(function($){var U='imagecube';var V=0;var W=1;var X=2;var Y=3;$.JQPlugin.createPlugin({name:U,defaultOptions:{direction:'random',randomSelection:['up','down','left','right'],speed:2000,easing:'linear',repeat:true,pause:2000,selection:'forward',shading:true,opacity:0.8,imagePath:'',full3D:true,segments:20,reduction:30,expansion:10,lineHeight:[0.0,1.25],letterSpacing:[-0.4,0.0],beforeRotate:null,afterRotate:null},_getters:['current','next'],_instSettings:function(a,b){return{_position:a.css('position')}},_postAttach:function(b,c){b.css({position:'relative'}).children().each(function(){var a=$(this);a.data(U,{display:a.css('display'),width:a.css('width'),height:a.css('height'),position:a.css('position'),lineHeight:a.css('lineHeight'),letterSpacing:a.css('letterSpacing')}).css({display:'block',width:b.css('width'),height:b.css('height'),position:'absolute',lineHeight:c.options.lineHeight[1],letterSpacing:c.options.letterSpacing[1]})}).not(':first').hide();this._prepareRotation(b)},_optionsChanged:function(a,b,c){$.extend(b.options,c);this._prepareRotation(a)},_prepareRotation:function(b){b=$(b);b.children('.imageCubeShading,.imageCubeFrom,.imageCubeTo').remove();var c=this._getInst(b[0]);c.current=b.children(':visible')[0];c.current=(c.current?c.current:b.children(':first')[0]);var d=function(a){return(!a.length?a:a.filter(':eq('+Math.floor(Math.random()*a.length)+')'))};c.next=(c.options.selection=='random'?d(b.children(':hidden')):(c.options.selection=='backward'?$(c.current).prev():$(c.current).next()));c.next=(c.next.length?c.next:(c.options.selection=='random'?c.current:(c.options.selection=='backward'?b.children(':last'):b.children(':first'))))[0];if(c.options.repeat&&!c._timer){var e=this;c._timer=setTimeout(function(){e.rotate(b)},c.options.pause)}},rotate:function(a,b,c){a=$(a);if(!a.hasClass(this._getMarker())){return}if(typeof b=='function'){c=b;b=null}this.stop(a,true);var d=this._getInst(a[0]);if(b!=null){b=(typeof b=='number'?a.children(':eq('+b+')'):$(b));if(a.children().filter(function(){return this===b[0]}).length>0){d.next=b}}var e=[d.current,d.next];if($.isFunction(d.options.beforeRotate)){d.options.beforeRotate.apply(a[0],e)}var f={};f[U]=1.0;a.attr(U,0.0).stop(true,true).animate(f,d.options.speed,d.options.easing,function(){if($.isFunction(d.options.afterRotate)){d.options.afterRotate.apply(a[0],e)}if(c){c.apply(a[0])}})},current:function(a){a=$(a);return(a.hasClass(this._getMarker())?this._getInst(a[0]).current:null)},next:function(a){a=$(a);return(a.hasClass(this._getMarker())?this._getInst(a[0]).next:null)},stop:function(a,b){a=$(a);if(!a.hasClass(this._getMarker())){return}var c=this._getInst(a[0]);if(c._timer){clearTimeout(c._timer);c._timer=null}if(!b){c.options.repeat=false}},start:function(a){this.option(a,{repeat:true})},_preDestroy:function(b,c){this.stop(b);var c=this._getInst(b[0]);b.stop().css({position:c._position}).children('.imageCubeShading,.imageCubeFrom,.imageCubeTo').remove();b.children().each(function(){var a=$(this);a.css(a.data(U)).removeData(U)}).show()},_prepareAnimation:function(d){d=$(d);var e=this._getInst(d[0]);var f={left:0,top:0};d.parents().each(function(){var a=$(this);if(a.css('position')=='fixed'){f.left-=a.offset().left;f.top-=a.offset().top;return false}});var g={width:d.width(),height:d.height()};var h=(e.options.direction!='random'?e.options.direction:e.options.randomSelection[Math.floor(Math.random()*e.options.randomSelection.length)]);h=Math.max(0,$.inArray(h,['up','down','left','right']));e._curDirection=h;var j=(h==V||h==W);var k=(h==X||h==Y);var l=(h==V||h==X);var m=(l?0:e.options.opacity);var n=$(e.current);var o=$(e.next);var q=[];var r=function(p){var b=[0,0,0,0];if(p.css('border')!=undefined){$.each(['Left','Right','Top','Bottom'],function(i,a){b[i]=p.css('border'+a+'Width');b[i]=parseFloat({thin:1,medium:3,thick:5}[b[i]]||b[i])})}return b};q[0]=r(n);q[1]=r(o);var s=[];s[0]=[parseFloat(n.css('padding-left')),parseFloat(n.css('padding-right')),parseFloat(n.css('padding-top')),parseFloat(n.css('padding-bottom'))];s[1]=[parseFloat(o.css('padding-left')),parseFloat(o.css('padding-right')),parseFloat(o.css('padding-top')),parseFloat(o.css('padding-bottom'))];var t=[];t[0]=($.support.boxModel?[q[0][0]+q[0][1]+s[0][0]+s[0][1],q[0][2]+q[0][3]+s[0][2]+s[0][3]]:[0,0]);t[1]=($.support.boxModel?[q[1][0]+q[1][1]+s[1][0]+s[1][1],q[1][2]+q[1][3]+s[1][2]+s[1][3]]:[0,0]);var u=[];u[0]={elem:n[0],props:{left:{start:f.left,end:f.left+(h==Y?g.width:0),units:'px'},width:{start:g.width-t[0][0],end:(j?g.width-t[0][0]:0),units:'px'},top:{start:f.top,end:f.top+(h==W?g.height:0),units:'px'},height:{start:g.height-t[0][1],end:(j?0:g.height-t[0][1]),units:'px'},paddingLeft:{start:s[0][0],end:(k?0:s[0][0]),units:'px'},paddingRight:{start:s[0][1],end:(k?0:s[0][1]),units:'px'},paddingTop:{start:s[0][2],end:(j?0:s[0][2]),units:'px'},paddingBottom:{start:s[0][3],end:(j?0:s[0][3]),units:'px'},borderLeftWidth:{start:q[0][0],end:(k?0:q[0][0]),units:'px'},borderRightWidth:{start:q[0][1],end:(k?0:q[0][1]),units:'px'},borderTopWidth:{start:q[0][2],end:(j?0:q[0][2]),units:'px'},borderBottomWidth:{start:q[0][3],end:(j?0:q[0][3]),units:'px'},lineHeight:{start:e.options.lineHeight[1],end:(j?e.options.lineHeight[0]:e.options.lineHeight[1]),units:'em'},letterSpacing:{start:e.options.letterSpacing[1],end:(j?e.options.letterSpacing[1]:e.options.letterSpacing[0]),units:'em'}}};u[1]={elem:o[0],props:{left:{start:f.left+(h==X?g.width:0),end:f.left,units:'px'},width:{start:(j?g.width-t[1][0]:0),end:g.width-t[1][0],units:'px'},top:{start:f.top+(h==V?g.height:0),end:f.top,units:'px'},height:{start:(j?0:g.height-t[1][1]),end:g.height-t[1][1],units:'px'},paddingLeft:{start:(k?0:s[1][0]),end:s[1][0],units:'px'},paddingRight:{start:(k?0:s[1][1]),end:s[1][1],units:'px'},paddingTop:{start:(j?0:s[1][2]),end:s[1][2],units:'px'},paddingBottom:{start:(j?0:s[1][3]),end:s[1][3],units:'px'},borderLeftWidth:{start:(k?0:q[1][0]),end:q[1][0],units:'px'},borderRightWidth:{start:(k?0:q[1][1]),end:q[1][1],units:'px'},borderTopWidth:{start:(j?0:q[1][2]),end:q[1][2],units:'px'},borderBottomWidth:{start:(j?0:q[1][3]),end:q[1][3],units:'px'},lineHeight:{start:(j?e.options.lineHeight[0]:e.options.lineHeight[1]),end:e.options.lineHeight[1],units:'em'},letterSpacing:{start:(j?e.options.letterSpacing[1]:e.options.letterSpacing[0]),end:e.options.letterSpacing[1],units:'em'}}};if(e.options.shading){var v=function(a,b,c){return{left:{start:a.left.start,end:a.left.end,units:'px'},width:{start:a.width.start,end:a.width.end,units:'px'},top:{start:a.top.start,end:a.top.end,units:'px'},height:{start:a.height.start,end:a.height.end,units:'px'},paddingLeft:{start:a.paddingLeft.start+a.borderLeftWidth.start,end:a.paddingLeft.end+a.borderLeftWidth.end,units:'px'},paddingRight:{start:a.paddingRight.start+a.borderRightWidth.start,end:a.paddingRight.end+a.borderRightWidth.end,units:'px'},paddingTop:{start:a.paddingTop.start+a.borderTopWidth.start,end:a.paddingTop.end+a.borderTopWidth.end,units:'px'},paddingBottom:{start:a.paddingBottom.start+a.borderBottomWidth.start,end:a.paddingBottom.end+a.borderBottomWidth.end,units:'px'},opacity:{start:b,end:c,units:''}}};u[2]={elem:$((!$.support.opacity?'<img src="'+e.options.imagePath+'imageCubeHigh.png"':'<div')+' class="imageCubeShading" style="background-color: white; opacity: '+m+'; z-index: 10; position: absolute;"'+(!$.support.opacity?'/>':'></div>'))[0],props:v(u[l?0:1].props,m,e.options.opacity-m)};u[3]={elem:$((!$.support.opacity?'<img src="'+e.options.imagePath+'imageCubeShad.png"':'<div')+' class="imageCubeShading" style="background-color: black; opacity: '+(e.options.opacity-m)+'; z-index: 10; position: absolute;"'+(!$.support.opacity?'/>':'></div>'))[0],props:v(u[l?1:0].props,e.options.opacity-m,m)}}if(e.options.full3D){for(var i=0;i<e.options.segments;i++){d.append(n.clone().addClass('imageCubeFrom').css({display:'block',position:'absolute',overflow:'hidden'}));if(e.options.shading){d.append($(u[l?2:3].elem).clone())}}for(var i=0;i<e.options.segments;i++){d.append(o.clone().addClass('imageCubeTo').css({display:'block',position:'absolute',width:0,overflow:'hidden'}));if(e.options.shading){d.append($(u[l?3:2].elem).clone())}}n.hide();o.css({width:g.width-t[1][0],height:g.height-t[1][1]})}else{var w=function(a){return{left:a.left.start+'px',width:a.width.start+'px',top:a.top.start+'px',height:a.height.start+'px',lineHeight:a.lineHeight.start+'em',padding:a.paddingTop.start+'px '+a.paddingRight.start+'px '+a.paddingBottom.start+'px '+a.paddingLeft.start+'px',borderLeftWidth:a.borderLeftWidth.start+'px',borderRightWidth:a.borderRightWidth.start+'px',borderTopWidth:a.borderTopWidth.start+'px',borderBottomWidth:a.borderBottomWidth.start+'px',letterSpacing:a.letterSpacing.start+'em',overflow:'hidden'}};n.css(w(u[0].props));o.css(w(u[1].props)).show();if(e.options.shading){d.append(u[2].elem).append(u[3].elem)}}for(var i=0;i<u.length;i++){for(var x in u[i].props){var y=u[i].props[x];y.diff=y.end-y.start}}return u},_drawFull3D:function(G,H,I){G=$(G);var J=G.data(U);if(!J.options.full3D){return false}var K=J._curDirection;var L=(K==V||K==W);var M=(K==V||K==X);var N=G.width();var O=G.height();if(N==0||O==0){return true}var P=(1-H)*(L?O:N);var Q=J.options.segments;var R=J.options.expansion*(1-Math.abs(2*P-(L?O:N))/(L?O:N));var S=J.options.reduction-(J.options.reduction*P/(L?O:N));var T=function(a,b,c,d,e,f,g,k,l,m,n,o){var p=[d-b,f-k];var w=Math.max(p[0],p[1]);var q=[l-c,g-e];var h=Math.max(q[0],q[1]);var r=(L?(p[0]-p[1])/(Q-1)/2:w/Q);var s=(L?h/Q:(q[0]-q[1])/(Q-1)/2);var t=n.paddingLeft[o]+n.paddingRight[o]+n.borderLeftWidth[o]+n.borderRightWidth[o];var u=n.paddingTop[o]+n.paddingBottom[o]+n.borderTopWidth[o]+n.borderBottomWidth[o];var v=Math.round(b);var x=Math.round(c);var y=v;var z=x;var i=0;for(var j=0;j<G[0].childNodes.length;j++){var A=G[0].childNodes[j];if(A.className!=a){continue}var B=Math.round(b+(i+1)*r);var C=Math.round(c+(i+1)*s);var D=p[0]-(L?2*i*r:0);var E=q[0]-(L?0:2*i*s);A.style.left=(L?y:b)+'px';A.style.top=(L?c:z)+'px';A.style.width=Math.max(0,D-t)+'px';A.style.height=Math.max(0,E-u)+'px';A.style.letterSpacing=(L?D/w*(J.options.letterSpacing[1]-J.options.letterSpacing[0])+J.options.letterSpacing[0]:H*n.letterSpacing.diff+n.letterSpacing.start)+n.letterSpacing.units;A.style.lineHeight=(!L?E/h*(J.options.lineHeight[1]-J.options.lineHeight[0])+J.options.lineHeight[0]:H*n.lineHeight.diff+n.lineHeight.start)+n.lineHeight.units;A.style.clip='rect('+(!L?'auto':(z-x)+'px')+','+(L?'auto':(B-v)+'px')+','+(!L?'auto':(C-x)+'px')+','+(L?'auto':(y-v)+'px')+')';if(J.options.shading){var F=A.nextSibling;F.style.left=y+'px';F.style.top=z+'px';F.style.width=(L?p[0]-2*i*r:B-y)+'px';F.style.height=(L?C-z:q[0]-2*i*s)+'px';F.style.opacity=m;if(!$.support.opacity){F.style.filter='alpha(opacity='+(m*100)+')'}}y=B;z=C;i++}};T('imageCubeFrom',[S,-R,0,N-P][K],[0,O-P,S,-R][K],[N-S,N+R,P,N][K],[0,O-P,-R,S][K],[N+R,N-S,P,N][K],[P,O,O+R,O-S][K],[-R,S,0,N-P][K],[P,O,O-S,O+R][K],(!J.options.shading?0:(M?H:1-H)*I[2].props.opacity.diff+I[2].props.opacity.start),I[0].props,'start');T('imageCubeTo',[-R,J.options.reduction-S,P,0][K],[P,0,-R,J.options.reduction-S][K],[N+R,N-(J.options.reduction-S),N,N-P][K],[P,0,J.options.reduction-S,-R][K],[N-(J.options.reduction-S),N+R,N,N-P][K],[O,O-P,O-(J.options.reduction-S),O+R][K],[J.options.reduction-S,-R,P,0][K],[O,O-P,O+R,O-(J.options.reduction-S)][K],(!J.options.shading?0:(M?H:1-H)*I[3].props.opacity.diff+I[3].props.opacity.start),I[1].props,'end');return true}});$.fx.step[U]=function(a){if(!a.stepProps){a.start=0.0;a.end=1.0;a.stepProps=$.imagecube._prepareAnimation(a.elem);var b=a.stepProps[0].elem;a.saveCSS={borderLeftWidth:b.style.borderLeftWidth,borderRightWidth:b.style.borderRightWidth,borderTopWidth:b.style.borderTopWidth,borderBottomWidth:b.style.borderBottomWidth,padding:b.style.padding}}if(!$.imagecube._drawFull3D(a.elem,a.pos,a.stepProps)){for(var i=0;i<a.stepProps.length;i++){var c=a.stepProps[i];for(var d in c.props){var e=c.props[d];c.elem.style[d]=(a.pos*e.diff+e.start)+e.units;if(!$.support.opacity&&d=='opacity'){c.elem.style.filter='alpha(opacity='+((a.pos*e.diff+e.start)*100)+')'}}}}if(a.pos==1){$(a.stepProps[0].elem).hide().css(a.saveCSS);$(a.stepProps[1].elem).show();$.imagecube._prepareRotation(a.elem)}}})(jQuery);
//]]>
</script>
<script type="text/javascript" charset="utf-8">
//<![CDATA[
$(function () {
$('.popular-posts ul').abupopularcube();
});
(function ($) {
$.fn.abupopularcube = function () {
var a = [];
$list = $('.popular-posts ul');
a.push('<div id="linksCube" class="cube repeatingCube">');
$(this).find('li').each(function () {
a.push($(this).find('.item-thumbnail').html())
});
a.push('</div>');
$list.replaceWith(a.join(''));
var b = $('.popular-posts').find("img");
b.removeAttr("width");
b.removeAttr("height");
var c = $('.popular-posts').find("a");
c.attr("target", "");
$('.popular-posts').find("img").attr('src', function (i, e) {
return e.replace("s72-c", "s300")
})
}
})(jQuery);
$(function () {$('#linksCube').imagecube()});
//]]>
</script>
.popular-posts{
width:100%;
padding:10px !important;
box-sizing:border-box;
text-align:center;
}
.cube {
width:100%;
height:300px;
box-sizing:border-box;
display:inline-block;
}
#linksCube img {width:100%;height:100%;}
</style>
<script>
//<![CDATA[
(function(){var j=false;window.JQClass=function(){};JQClass.classes={};JQClass.extend=function extender(f){var g=this.prototype;j=true;var h=new this();j=false;for(var i in f){h[i]=typeof f[i]=='function'&&typeof g[i]=='function'?(function(d,e){return function(){var b=this._super;this._super=function(a){return g[d].apply(this,a||[])};var c=e.apply(this,arguments);this._super=b;return c}})(i,f[i]):f[i]}function JQClass(){if(!j&&this._init){this._init.apply(this,arguments)}}JQClass.prototype=h;JQClass.prototype.constructor=JQClass;JQClass.extend=extender;return JQClass}})();(function($){JQClass.classes.JQPlugin=JQClass.extend({name:'plugin',defaultOptions:{},regionalOptions:{},_getters:[],_getMarker:function(){return'is-'+this.name},_init:function(){$.extend(this.defaultOptions,(this.regionalOptions&&this.regionalOptions[''])||{});var c=camelCase(this.name);$[c]=this;$.fn[c]=function(a){var b=Array.prototype.slice.call(arguments,1);if($[c]._isNotChained(a,b)){return $[c][a].apply($[c],[this[0]].concat(b))}return this.each(function(){if(typeof a==='string'){if(a[0]==='_'||!$[c][a]){throw'Unknown method: '+a;}$[c][a].apply($[c],[this].concat(b))}else{$[c]._attach(this,a)}})}},setDefaults:function(a){$.extend(this.defaultOptions,a||{})},_isNotChained:function(a,b){if(a==='option'&&(b.length===0||(b.length===1&&typeof b[0]==='string'))){return true}return $.inArray(a,this._getters)>-1},_attach:function(a,b){a=$(a);if(a.hasClass(this._getMarker())){return}a.addClass(this._getMarker());b=$.extend({},this.defaultOptions,this._getMetadata(a),b||{});var c=$.extend({name:this.name,elem:a,options:b},this._instSettings(a,b));a.data(this.name,c);this._postAttach(a,c);this.option(a,b)},_instSettings:function(a,b){return{}},_postAttach:function(a,b){},_getMetadata:function(d){try{var f=d.data(this.name.toLowerCase())||'';f=f.replace(/'/g,'"');f=f.replace(/([a-zA-Z0-9]+):/g,function(a,b,i){var c=f.substring(0,i).match(/"/g);return(!c||c.length%2===0?'"'+b+'":':b+':')});f=$.parseJSON('{'+f+'}');for(var g in f){var h=f[g];if(typeof h==='string'&&h.match(/^new Date\((.*)\)$/)){f[g]=eval(h)}}return f}catch(e){return{}}},_getInst:function(a){return $(a).data(this.name)||{}},option:function(a,b,c){a=$(a);var d=a.data(this.name);if(!b||(typeof b==='string'&&c==null)){var e=(d||{}).options;return(e&&b?e[b]:e)}if(!a.hasClass(this._getMarker())){return}var e=b||{};if(typeof b==='string'){e={};e[b]=c}this._optionsChanged(a,d,e);$.extend(d.options,e)},_optionsChanged:function(a,b,c){},destroy:function(a){a=$(a);if(!a.hasClass(this._getMarker())){return}this._preDestroy(a,this._getInst(a));a.removeData(this.name).removeClass(this._getMarker())},_preDestroy:function(a,b){}});function camelCase(c){return c.replace(/-([a-z])/g,function(a,b){return b.toUpperCase()})}$.JQPlugin={createPlugin:function(a,b){if(typeof a==='object'){b=a;a='JQPlugin'}a=camelCase(a);var c=camelCase(b.name);JQClass.classes[c]=JQClass.classes[a].extend(b);new JQClass.classes[c]()}}})(jQuery);
(function($){var U='imagecube';var V=0;var W=1;var X=2;var Y=3;$.JQPlugin.createPlugin({name:U,defaultOptions:{direction:'random',randomSelection:['up','down','left','right'],speed:2000,easing:'linear',repeat:true,pause:2000,selection:'forward',shading:true,opacity:0.8,imagePath:'',full3D:true,segments:20,reduction:30,expansion:10,lineHeight:[0.0,1.25],letterSpacing:[-0.4,0.0],beforeRotate:null,afterRotate:null},_getters:['current','next'],_instSettings:function(a,b){return{_position:a.css('position')}},_postAttach:function(b,c){b.css({position:'relative'}).children().each(function(){var a=$(this);a.data(U,{display:a.css('display'),width:a.css('width'),height:a.css('height'),position:a.css('position'),lineHeight:a.css('lineHeight'),letterSpacing:a.css('letterSpacing')}).css({display:'block',width:b.css('width'),height:b.css('height'),position:'absolute',lineHeight:c.options.lineHeight[1],letterSpacing:c.options.letterSpacing[1]})}).not(':first').hide();this._prepareRotation(b)},_optionsChanged:function(a,b,c){$.extend(b.options,c);this._prepareRotation(a)},_prepareRotation:function(b){b=$(b);b.children('.imageCubeShading,.imageCubeFrom,.imageCubeTo').remove();var c=this._getInst(b[0]);c.current=b.children(':visible')[0];c.current=(c.current?c.current:b.children(':first')[0]);var d=function(a){return(!a.length?a:a.filter(':eq('+Math.floor(Math.random()*a.length)+')'))};c.next=(c.options.selection=='random'?d(b.children(':hidden')):(c.options.selection=='backward'?$(c.current).prev():$(c.current).next()));c.next=(c.next.length?c.next:(c.options.selection=='random'?c.current:(c.options.selection=='backward'?b.children(':last'):b.children(':first'))))[0];if(c.options.repeat&&!c._timer){var e=this;c._timer=setTimeout(function(){e.rotate(b)},c.options.pause)}},rotate:function(a,b,c){a=$(a);if(!a.hasClass(this._getMarker())){return}if(typeof b=='function'){c=b;b=null}this.stop(a,true);var d=this._getInst(a[0]);if(b!=null){b=(typeof b=='number'?a.children(':eq('+b+')'):$(b));if(a.children().filter(function(){return this===b[0]}).length>0){d.next=b}}var e=[d.current,d.next];if($.isFunction(d.options.beforeRotate)){d.options.beforeRotate.apply(a[0],e)}var f={};f[U]=1.0;a.attr(U,0.0).stop(true,true).animate(f,d.options.speed,d.options.easing,function(){if($.isFunction(d.options.afterRotate)){d.options.afterRotate.apply(a[0],e)}if(c){c.apply(a[0])}})},current:function(a){a=$(a);return(a.hasClass(this._getMarker())?this._getInst(a[0]).current:null)},next:function(a){a=$(a);return(a.hasClass(this._getMarker())?this._getInst(a[0]).next:null)},stop:function(a,b){a=$(a);if(!a.hasClass(this._getMarker())){return}var c=this._getInst(a[0]);if(c._timer){clearTimeout(c._timer);c._timer=null}if(!b){c.options.repeat=false}},start:function(a){this.option(a,{repeat:true})},_preDestroy:function(b,c){this.stop(b);var c=this._getInst(b[0]);b.stop().css({position:c._position}).children('.imageCubeShading,.imageCubeFrom,.imageCubeTo').remove();b.children().each(function(){var a=$(this);a.css(a.data(U)).removeData(U)}).show()},_prepareAnimation:function(d){d=$(d);var e=this._getInst(d[0]);var f={left:0,top:0};d.parents().each(function(){var a=$(this);if(a.css('position')=='fixed'){f.left-=a.offset().left;f.top-=a.offset().top;return false}});var g={width:d.width(),height:d.height()};var h=(e.options.direction!='random'?e.options.direction:e.options.randomSelection[Math.floor(Math.random()*e.options.randomSelection.length)]);h=Math.max(0,$.inArray(h,['up','down','left','right']));e._curDirection=h;var j=(h==V||h==W);var k=(h==X||h==Y);var l=(h==V||h==X);var m=(l?0:e.options.opacity);var n=$(e.current);var o=$(e.next);var q=[];var r=function(p){var b=[0,0,0,0];if(p.css('border')!=undefined){$.each(['Left','Right','Top','Bottom'],function(i,a){b[i]=p.css('border'+a+'Width');b[i]=parseFloat({thin:1,medium:3,thick:5}[b[i]]||b[i])})}return b};q[0]=r(n);q[1]=r(o);var s=[];s[0]=[parseFloat(n.css('padding-left')),parseFloat(n.css('padding-right')),parseFloat(n.css('padding-top')),parseFloat(n.css('padding-bottom'))];s[1]=[parseFloat(o.css('padding-left')),parseFloat(o.css('padding-right')),parseFloat(o.css('padding-top')),parseFloat(o.css('padding-bottom'))];var t=[];t[0]=($.support.boxModel?[q[0][0]+q[0][1]+s[0][0]+s[0][1],q[0][2]+q[0][3]+s[0][2]+s[0][3]]:[0,0]);t[1]=($.support.boxModel?[q[1][0]+q[1][1]+s[1][0]+s[1][1],q[1][2]+q[1][3]+s[1][2]+s[1][3]]:[0,0]);var u=[];u[0]={elem:n[0],props:{left:{start:f.left,end:f.left+(h==Y?g.width:0),units:'px'},width:{start:g.width-t[0][0],end:(j?g.width-t[0][0]:0),units:'px'},top:{start:f.top,end:f.top+(h==W?g.height:0),units:'px'},height:{start:g.height-t[0][1],end:(j?0:g.height-t[0][1]),units:'px'},paddingLeft:{start:s[0][0],end:(k?0:s[0][0]),units:'px'},paddingRight:{start:s[0][1],end:(k?0:s[0][1]),units:'px'},paddingTop:{start:s[0][2],end:(j?0:s[0][2]),units:'px'},paddingBottom:{start:s[0][3],end:(j?0:s[0][3]),units:'px'},borderLeftWidth:{start:q[0][0],end:(k?0:q[0][0]),units:'px'},borderRightWidth:{start:q[0][1],end:(k?0:q[0][1]),units:'px'},borderTopWidth:{start:q[0][2],end:(j?0:q[0][2]),units:'px'},borderBottomWidth:{start:q[0][3],end:(j?0:q[0][3]),units:'px'},lineHeight:{start:e.options.lineHeight[1],end:(j?e.options.lineHeight[0]:e.options.lineHeight[1]),units:'em'},letterSpacing:{start:e.options.letterSpacing[1],end:(j?e.options.letterSpacing[1]:e.options.letterSpacing[0]),units:'em'}}};u[1]={elem:o[0],props:{left:{start:f.left+(h==X?g.width:0),end:f.left,units:'px'},width:{start:(j?g.width-t[1][0]:0),end:g.width-t[1][0],units:'px'},top:{start:f.top+(h==V?g.height:0),end:f.top,units:'px'},height:{start:(j?0:g.height-t[1][1]),end:g.height-t[1][1],units:'px'},paddingLeft:{start:(k?0:s[1][0]),end:s[1][0],units:'px'},paddingRight:{start:(k?0:s[1][1]),end:s[1][1],units:'px'},paddingTop:{start:(j?0:s[1][2]),end:s[1][2],units:'px'},paddingBottom:{start:(j?0:s[1][3]),end:s[1][3],units:'px'},borderLeftWidth:{start:(k?0:q[1][0]),end:q[1][0],units:'px'},borderRightWidth:{start:(k?0:q[1][1]),end:q[1][1],units:'px'},borderTopWidth:{start:(j?0:q[1][2]),end:q[1][2],units:'px'},borderBottomWidth:{start:(j?0:q[1][3]),end:q[1][3],units:'px'},lineHeight:{start:(j?e.options.lineHeight[0]:e.options.lineHeight[1]),end:e.options.lineHeight[1],units:'em'},letterSpacing:{start:(j?e.options.letterSpacing[1]:e.options.letterSpacing[0]),end:e.options.letterSpacing[1],units:'em'}}};if(e.options.shading){var v=function(a,b,c){return{left:{start:a.left.start,end:a.left.end,units:'px'},width:{start:a.width.start,end:a.width.end,units:'px'},top:{start:a.top.start,end:a.top.end,units:'px'},height:{start:a.height.start,end:a.height.end,units:'px'},paddingLeft:{start:a.paddingLeft.start+a.borderLeftWidth.start,end:a.paddingLeft.end+a.borderLeftWidth.end,units:'px'},paddingRight:{start:a.paddingRight.start+a.borderRightWidth.start,end:a.paddingRight.end+a.borderRightWidth.end,units:'px'},paddingTop:{start:a.paddingTop.start+a.borderTopWidth.start,end:a.paddingTop.end+a.borderTopWidth.end,units:'px'},paddingBottom:{start:a.paddingBottom.start+a.borderBottomWidth.start,end:a.paddingBottom.end+a.borderBottomWidth.end,units:'px'},opacity:{start:b,end:c,units:''}}};u[2]={elem:$((!$.support.opacity?'<img src="'+e.options.imagePath+'imageCubeHigh.png"':'<div')+' class="imageCubeShading" style="background-color: white; opacity: '+m+'; z-index: 10; position: absolute;"'+(!$.support.opacity?'/>':'></div>'))[0],props:v(u[l?0:1].props,m,e.options.opacity-m)};u[3]={elem:$((!$.support.opacity?'<img src="'+e.options.imagePath+'imageCubeShad.png"':'<div')+' class="imageCubeShading" style="background-color: black; opacity: '+(e.options.opacity-m)+'; z-index: 10; position: absolute;"'+(!$.support.opacity?'/>':'></div>'))[0],props:v(u[l?1:0].props,e.options.opacity-m,m)}}if(e.options.full3D){for(var i=0;i<e.options.segments;i++){d.append(n.clone().addClass('imageCubeFrom').css({display:'block',position:'absolute',overflow:'hidden'}));if(e.options.shading){d.append($(u[l?2:3].elem).clone())}}for(var i=0;i<e.options.segments;i++){d.append(o.clone().addClass('imageCubeTo').css({display:'block',position:'absolute',width:0,overflow:'hidden'}));if(e.options.shading){d.append($(u[l?3:2].elem).clone())}}n.hide();o.css({width:g.width-t[1][0],height:g.height-t[1][1]})}else{var w=function(a){return{left:a.left.start+'px',width:a.width.start+'px',top:a.top.start+'px',height:a.height.start+'px',lineHeight:a.lineHeight.start+'em',padding:a.paddingTop.start+'px '+a.paddingRight.start+'px '+a.paddingBottom.start+'px '+a.paddingLeft.start+'px',borderLeftWidth:a.borderLeftWidth.start+'px',borderRightWidth:a.borderRightWidth.start+'px',borderTopWidth:a.borderTopWidth.start+'px',borderBottomWidth:a.borderBottomWidth.start+'px',letterSpacing:a.letterSpacing.start+'em',overflow:'hidden'}};n.css(w(u[0].props));o.css(w(u[1].props)).show();if(e.options.shading){d.append(u[2].elem).append(u[3].elem)}}for(var i=0;i<u.length;i++){for(var x in u[i].props){var y=u[i].props[x];y.diff=y.end-y.start}}return u},_drawFull3D:function(G,H,I){G=$(G);var J=G.data(U);if(!J.options.full3D){return false}var K=J._curDirection;var L=(K==V||K==W);var M=(K==V||K==X);var N=G.width();var O=G.height();if(N==0||O==0){return true}var P=(1-H)*(L?O:N);var Q=J.options.segments;var R=J.options.expansion*(1-Math.abs(2*P-(L?O:N))/(L?O:N));var S=J.options.reduction-(J.options.reduction*P/(L?O:N));var T=function(a,b,c,d,e,f,g,k,l,m,n,o){var p=[d-b,f-k];var w=Math.max(p[0],p[1]);var q=[l-c,g-e];var h=Math.max(q[0],q[1]);var r=(L?(p[0]-p[1])/(Q-1)/2:w/Q);var s=(L?h/Q:(q[0]-q[1])/(Q-1)/2);var t=n.paddingLeft[o]+n.paddingRight[o]+n.borderLeftWidth[o]+n.borderRightWidth[o];var u=n.paddingTop[o]+n.paddingBottom[o]+n.borderTopWidth[o]+n.borderBottomWidth[o];var v=Math.round(b);var x=Math.round(c);var y=v;var z=x;var i=0;for(var j=0;j<G[0].childNodes.length;j++){var A=G[0].childNodes[j];if(A.className!=a){continue}var B=Math.round(b+(i+1)*r);var C=Math.round(c+(i+1)*s);var D=p[0]-(L?2*i*r:0);var E=q[0]-(L?0:2*i*s);A.style.left=(L?y:b)+'px';A.style.top=(L?c:z)+'px';A.style.width=Math.max(0,D-t)+'px';A.style.height=Math.max(0,E-u)+'px';A.style.letterSpacing=(L?D/w*(J.options.letterSpacing[1]-J.options.letterSpacing[0])+J.options.letterSpacing[0]:H*n.letterSpacing.diff+n.letterSpacing.start)+n.letterSpacing.units;A.style.lineHeight=(!L?E/h*(J.options.lineHeight[1]-J.options.lineHeight[0])+J.options.lineHeight[0]:H*n.lineHeight.diff+n.lineHeight.start)+n.lineHeight.units;A.style.clip='rect('+(!L?'auto':(z-x)+'px')+','+(L?'auto':(B-v)+'px')+','+(!L?'auto':(C-x)+'px')+','+(L?'auto':(y-v)+'px')+')';if(J.options.shading){var F=A.nextSibling;F.style.left=y+'px';F.style.top=z+'px';F.style.width=(L?p[0]-2*i*r:B-y)+'px';F.style.height=(L?C-z:q[0]-2*i*s)+'px';F.style.opacity=m;if(!$.support.opacity){F.style.filter='alpha(opacity='+(m*100)+')'}}y=B;z=C;i++}};T('imageCubeFrom',[S,-R,0,N-P][K],[0,O-P,S,-R][K],[N-S,N+R,P,N][K],[0,O-P,-R,S][K],[N+R,N-S,P,N][K],[P,O,O+R,O-S][K],[-R,S,0,N-P][K],[P,O,O-S,O+R][K],(!J.options.shading?0:(M?H:1-H)*I[2].props.opacity.diff+I[2].props.opacity.start),I[0].props,'start');T('imageCubeTo',[-R,J.options.reduction-S,P,0][K],[P,0,-R,J.options.reduction-S][K],[N+R,N-(J.options.reduction-S),N,N-P][K],[P,0,J.options.reduction-S,-R][K],[N-(J.options.reduction-S),N+R,N,N-P][K],[O,O-P,O-(J.options.reduction-S),O+R][K],[J.options.reduction-S,-R,P,0][K],[O,O-P,O+R,O-(J.options.reduction-S)][K],(!J.options.shading?0:(M?H:1-H)*I[3].props.opacity.diff+I[3].props.opacity.start),I[1].props,'end');return true}});$.fx.step[U]=function(a){if(!a.stepProps){a.start=0.0;a.end=1.0;a.stepProps=$.imagecube._prepareAnimation(a.elem);var b=a.stepProps[0].elem;a.saveCSS={borderLeftWidth:b.style.borderLeftWidth,borderRightWidth:b.style.borderRightWidth,borderTopWidth:b.style.borderTopWidth,borderBottomWidth:b.style.borderBottomWidth,padding:b.style.padding}}if(!$.imagecube._drawFull3D(a.elem,a.pos,a.stepProps)){for(var i=0;i<a.stepProps.length;i++){var c=a.stepProps[i];for(var d in c.props){var e=c.props[d];c.elem.style[d]=(a.pos*e.diff+e.start)+e.units;if(!$.support.opacity&&d=='opacity'){c.elem.style.filter='alpha(opacity='+((a.pos*e.diff+e.start)*100)+')'}}}}if(a.pos==1){$(a.stepProps[0].elem).hide().css(a.saveCSS);$(a.stepProps[1].elem).show();$.imagecube._prepareRotation(a.elem)}}})(jQuery);
//]]>
</script>
<script type="text/javascript" charset="utf-8">
//<![CDATA[
$(function () {
$('.popular-posts ul').abupopularcube();
});
(function ($) {
$.fn.abupopularcube = function () {
var a = [];
$list = $('.popular-posts ul');
a.push('<div id="linksCube" class="cube repeatingCube">');
$(this).find('li').each(function () {
a.push($(this).find('.item-thumbnail').html())
});
a.push('</div>');
$list.replaceWith(a.join(''));
var b = $('.popular-posts').find("img");
b.removeAttr("width");
b.removeAttr("height");
var c = $('.popular-posts').find("a");
c.attr("target", "");
$('.popular-posts').find("img").attr('src', function (i, e) {
return e.replace("s72-c", "s300")
})
}
})(jQuery);
$(function () {$('#linksCube').imagecube()});
//]]>
</script>
Ingat ! posisi widget popular post harus berada di atas posisi dari kotak widget yang digunakan untuk menaruh kode script efek animasi 3D cube. Fungsinya agar kode HTML dari widget popular post di render terlebih dahulu oleh browser baru setelah itu merender kode scriptnya.
Posisi widget popular post tidak harus sama dengan yang ada di gambar yang penting adalah posisi widget box HTML/Javascript yang di gunakan sebagai tempat untuk menaruh kode script efek animasi 3D cube harus berada di posisi bawah dari widget popular post.
Tenang mas bro dan mba sis, ga usah panik lihat kode script di atas karena konfigurasi script sudah disesuaikan otomatis untuk langsung bisa digunakan. Apabila ada penyesuaian maka cukup dari kode CSS (style) saja yang di sesuaikan pengaturannya. Kode style juga sebenarnya sudah diatur sedemikian rupa agar bisa langsung diterapkan tanpa ada masalah, tapi dikarenakan penggunaan template blog memiliki konfigurasi style yang berbeda-beda maka kemungkinan widget popular post dengan efek animasi 3D cube ini tidak berjalan dengan semestinya pasti ada.
Biasanya permasalahan yang timbul adalah pada tampilan widget untuk itu anda cukup mengatur kode stylenya saja agar bisa disesuaikan dengan template blog yang anda gunakan. Jika masih ada kendala dalam menerapkan widget popular post dengan efek animasi 3D cube ini, silakan anda tanyakan di kotak komentar.
Bagi anda yang mahir dengan kode HTML, CSS dan Javascript silakan anda modifikasi lagi agar tampilannya bisa lebih unik lagi dan jangan lupa untuk di share di artikel ini agar kita semua bisa saling belajar dan membuat komunitas blog yang positif.
Posisi widget popular post tidak harus sama dengan yang ada di gambar yang penting adalah posisi widget box HTML/Javascript yang di gunakan sebagai tempat untuk menaruh kode script efek animasi 3D cube harus berada di posisi bawah dari widget popular post.
Tenang mas bro dan mba sis, ga usah panik lihat kode script di atas karena konfigurasi script sudah disesuaikan otomatis untuk langsung bisa digunakan. Apabila ada penyesuaian maka cukup dari kode CSS (style) saja yang di sesuaikan pengaturannya. Kode style juga sebenarnya sudah diatur sedemikian rupa agar bisa langsung diterapkan tanpa ada masalah, tapi dikarenakan penggunaan template blog memiliki konfigurasi style yang berbeda-beda maka kemungkinan widget popular post dengan efek animasi 3D cube ini tidak berjalan dengan semestinya pasti ada.
Biasanya permasalahan yang timbul adalah pada tampilan widget untuk itu anda cukup mengatur kode stylenya saja agar bisa disesuaikan dengan template blog yang anda gunakan. Jika masih ada kendala dalam menerapkan widget popular post dengan efek animasi 3D cube ini, silakan anda tanyakan di kotak komentar.
Bagi anda yang mahir dengan kode HTML, CSS dan Javascript silakan anda modifikasi lagi agar tampilannya bisa lebih unik lagi dan jangan lupa untuk di share di artikel ini agar kita semua bisa saling belajar dan membuat komunitas blog yang positif.
Demikian artikel blog tentang Popular Post 3D Cube Animation Blog Widget terima kasih sudah berkunjung, jangan lupa Like, Share dan Subscribe, untuk pertanyaan, kritik ataupun saran silakan ditulis pada kotak komentar di bawah. Apabila ada kata-kata yang kurang berkenan atau informasi yang kurang akurat, harap dimaklumi. Akhir kata Semoga Bermanfaat.
Keyword
blog, blogger, blogspot, widget, popular, post, posts, effect, efek, 3D, animation, animated, animasi, cube, kubus, berputar, rotasi, 360, derajat, otomatis, box, code, kode, html, css, javascript, jquery, cara, how-to, membuat, buat, tampilan, menampilkan, unik, menarik, simple, mudah, custom, kustom, modifikasi, modif, keren
Incoming Search Term
Cara baru membuat popular post dengan efek animasi 3D cube, cara membuat tampilan unik popular post untuk blogger, widget blog membuat 3D tampilan popular post, Efek 3D widget popular post blog, popular post blogspot dengan animasi berputar 3D, cara pasang widget popular post pada halaman blog, tutorial membuat efek 3D widget popular post pada blogger, cara mudah membuat tampilan 3D dengan kode html css javascript, animasi 3D kubus buat widget popular posts, pasang animasi 3D blogspot, gambar 3D popular post blogger, 3D animated popular post blog, how to make 3d animation effect for blog, kode javascript animated 3D cube, fix error 3D animation effect, update script 3D animation cube popular post, random popular post in 3D, 3D rotation 360 degree blogger, popular post unik menarik keren super premium blog blogger blogspot, widget style popular post keren berwarna pada halaman blog, widget blogspot popular posts responsif warna warni, cara merubah widget default blog dengan css dan javascript menjadi tampilan 3D kubus mantab, Efek 3D popular post blog
About CodeFlare
![[+] Codeflare Backlink Editor To Create Anchor Text With Keyword](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXC9KPkhkaNh3A4Wy-XX1I2kSj2rB2qXjmLIQktDvCxyPdUINtltp2Ih9iLVpEyb-0tYBaLGQb52bIszHmT9_etJT-awZy9IcxsBPfvQHJs7K7BI6bxz0rgcILCFxAhuL0CNbqYaS9DvELwWieNdZscUv-_8lhmqeMjcWmIRH3X38nOkbgkYK6dfySxg/s72-c/backlink%20editor.jpg)
Sepertinya saya mulai tertarik untuk membuat blog dan mempelajari java script..
ReplyDeleteCool post