Sunday, January 29, 2017

  •    Coloring Cloud Label
  • ADD above ]]></b:skin>
    
    This for Fewer number of labels
    
    /* Sidebar Label Cloud */
    .sidebar .cloud-label-widget-content {margin:0; padding-left:20px!important;}
    .sidebar .label-size a {color:#fff!important;background:#222;padding:8px 22px;margin:0 3px 3px 0;float:left;display:block;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    -webkit-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
    }
    .sidebar .label-size-1 a {background:#FF8000}
    .sidebar .label-size-2 a {background:#D7DF01}
    .sidebar .label-size-3 a {background:#B40404}
    .sidebar .label-size-4 a {background:#298A08}
    .sidebar .label-size-5 a {background:#084B8A}
    .label-size-1 a:hover, .label-size-2 a:hover, .label-size-3 a:hover, .label-size-4 a:hover, .label-size-5 a:hover {
    background:#2288bb; color:#fff; text-decoration:none}
    .sidebar .label-size span {
    background:#2288bb;
    color:#fff;
    padding:8px 22px;
    margin:0 0 3px;
    clear:both;
    float:left;
    }
    .sidebar .label-size {
    position:relative;
    text-transform: uppercase;
    text-decoration:none;
    font-size:16px;
    font-family:'Oswald', sans-serif;
    color:#fff;
    }
    .sidebar .label-size a, .sidebar .label-size a:visited {color:#fff;text-decoration: none;}
    
    
    
    This is for Many number of labels
    
    /* Sidebar Label Cloud */
    .cloud-label-widget-content {text-align: left;} .label-size {background: #83B4D8;display: block;float: left;margin: 0 3px 3px 0;color: #fff;font-family: Oswald, Arial, Sans-Serif;font-size: 11px;text-transform: uppercase;} .label-size:nth-child(1) {background: #F86D9E;} .label-size:nth-child(2) {background: #37C371;} .label-size:nth-child(3) {background: #10BBEA;} .label-size:nth-child(4) {background: #25CBFE;} .label-size:nth-child(5) {background: #963690;} .label-size:nth-child(6) {background: #A3195C;} .label-size:nth-child(7) {background: #545454;} .label-size:nth-child(8) {background: #F2A15F;} .label-size:nth-child(9) {background: #00FF80;} .label-size:nth-child(10) {background: #B7860B;} .label-size:nth-child(11) {background: #99CC33;} .label-size:nth-child(12) {background: #FFFF3D;} .label-size:nth-child(13) {background: #3FDECF;} .label-size:nth-child(14) {background: #FF2F0A;} .label-size:nth-child(15) {background: #E9DB58;} .label-size:nth-child(16) {background: #42FFBD;} .label-size:nth-child(17) {background: #6899ED;} .label-size:nth-child(18) {background: #FF52AE;} .label-size:nth-child(19) {background: #8DBC2F;} .label-size:nth-child(20) {background: #80FF00;} .label-size a, .label-size span { display: inline-block; color: #fff !important; padding: 4px 10px; font-weight: bold; } .label-size:hover { background: #222; } .label-count { white-space: nowrap; padding-right: 3px; margin-left: -3px; background: #333; color: #fff ; } .label-size:hover .label-count, .label-size:focus+.label-count { background-color: #FF6BFF; }
    
    
    
    
    DEMO : look right Sidebar

  •    Recent Post Thubmnail GRID Horizontal
  • ADD on You want
    
    
    <style>
    
    /* CSS Recent Post thumbnail */
    
    .recent-gallery {padding:10;clear:both;}
    
    .recent-gallery:after {content:"";display:table;clear:both;}
    
    .recent-gallery .gallerytem{display:inline-block;position:relative;margin:6px 0;overflow:hidden;}
    
    .recent-gallery .gallerytem a{position:relative;float:left;margin:0 6px;text-decoration:none}
    
    .recent-gallery .gallerytem .ptitle{background:rgba(0,0,0,.7);display:block;clear:left;font-size:10px;line-height:1.3em;position:absolute;text-align:left;bottom:3px;left:3px;right:3px;top:3px;color:#fff;padding:5px;word-wrap:break-word;overflow:hidden;visibility:hidden;opacity:0;backface-visibility:hidden;transition:all .2s}
    
    .recent-gallery .gallerytem:hover .ptitle{visibility:visible;opacity:1}
    
    .recent-gallery a img{background:#fdfdfd;float:left;padding:0px;border:1px solid #e3e3e3;transition:all .3s}
    
    .recent-gallery a:hover img {border-color:#bbb;}
    
    </style>
    
    <script type='text/javascript'>
    
    //<![CDATA[
    
    // Recent Post Gallery
    
    function arlinagrid(a){for(var t=a.feed.entry||[],e=['<div class="recent-gallery">'],i=0;i<t.length;++i){for(var l=t[i],r=l.title.$t,n=l.media$thumbnail?l.media$thumbnail.url:"http://2.bp.blogspot.com/-4fCf53FqYKM/Vccsy7apoZI/AAAAAAAAK4o/XJkv3RkC0pw/s1600/default%2Bimage.png",s=n.replace("s72-c","s"+arlina_thumbs+"-c"),h=l.link||[],c=0;c<h.length&&"alternate"!=h[c].rel;++c);var d=h[c].href,m='<img src="'+s+'" width="'+arlina_thumbs+'" height="'+arlina_thumbs+'"/>',p=arlina_title?'<span class="ptitle">'+r+"</span>":"",g='<a href="'+d+'" target="_blank" title="'+r+'">'+m+p+"</a>";e.push('<div class="gallerytem">',g,"</div>")}e.push("</div>"),document.write(e.join(""))}
    
    //]]>
    
    </script>
    
    <script>
    
    var arlina_thumbs = 110;
    
    var arlina_title = false;
    
    </script>
    
    <script src="http://videopoh.blogspot.com/feeds/posts/summary?max-results=12&amp;alt=json-in-script&amp;callback=arlinagrid"></script>
    
    
    
    DEMO : look right Sidebar

    Saturday, January 28, 2017

  •    Background Video
  • ADD Above ]]></b:skin>

    video#bgvid {
    position: fixed;
    left: 50%;
    top: 0;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 0;
    background: url(http://semalt.com/video/semalt.jpg) no-repeat;
    background-size: cover;
    }

    video#bgvid { transition: 1s opacity; }
    .stopfade { opacity: .5; }



    ADD Below <body>

    <video autoplay loop poster="http://semalt.com/video/semalt.jpg" id="bgvid">
    <source src="http://semalt.com/video/semalt-v.mp4" type="video/mp4; codecs='H.264'">
    <source src="http://semalt.com/video/semalt-v.webm" type="video/webm">
    </video>




    DEMO : Look Background this Pages

  •    Posts Script widget Code
  • ADD on Your Post
    
    
    <pre  style="font-family:arial;font-size:12px;border:1px dashed #CCCCCC;width:99%;height:auto;overflow:auto;background:#f0f0f0;;background-image:URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN3Kk1eFNMR_yYlnJ9ffkau28Zfe0tYvwvhA4-biSXi82wrSnp3NWhpeLEk_oOSjqjWanhNiT5evIlYwnypeLF3gp7iLRDP_0ttzXJx_jymhnXQSqqgBhLqru2lIzvWcmjztW1Z8ep85oU/s320/codebg.gif);padding:0px;color:#000000;text-align:left;line-height:20px;"><code style="color:#000000;word-wrap:normal;">
    
    
    
    ......... code here..............
    
    
    </code></pre>
    
    
    
    DEMO : like this web code post

  •    Recent Posts Ticker Scroll Up Thumbnail
  • ADD on a Gadget
    
    <style>img.recent_thumb {padding:1px;width:55px;height:55px;border:0;float:right;margin:0 0 5px 10px;}.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}.recent_posts_with_thumbs a {text-decoration:none;}.recent_posts_with_thumbs strong {font-size:10px;}</style>
    
    
    <script style='text/javascript'>
    eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\b'+e(c)+'\b','g'),k[c])}}return p}('(2($){$.G.F=2(e){4 f={g:H,u:I,w:3,q:'',v:k,t:r};4 e=$.K(f,e);x=2(a,b,c){h(c)o;4 d=a.1('9');7=d.1('6:7').E(k);d.L({p:'-='+b+'C'},e.g,2(){$(5).1('6:7').z();$(5).i('p','A')});h(e.q=='B'){d.1('6:7').D(e.g);d.1('6:y').J().M(e.g)}7.U(d)};o 5.j(2(){4 a=$(5);4 b=0;4 c=e.t;a.i({S:'O',s:'T'}).1('9').i({s:'P',n:0,l:0}).1('6').i({n:0,l:0});a.1('9').1('6').j(2(){h($(5).8()>b){b=$(5).8()}});a.1('9').1('6').j(2(){$(5).8(b)});a.8(b*e.w);4 d=V(2(){x(a,b,c)},e.u);h(e.v){a.m("N",2(){c=k}).m("R",2(){c=r})}})}})(Q);',58,58,'|children|function||var|this|li|first|height|ul|||||||speed|if|css|each|true|padding|bind|margin|return|top|animation|false|position|isPaused|pause|mousePause|showItems|moveUp|last|remove|0px|fade|px|fadeOut|clone|vTicker|fn|700|2000|hide|extend|animate|fadeIn|mouseenter|hidden|absolute|jQuery|mouseleave|overflow|relative|appendTo|setInterval'.split('|'),0,{}))
    </script>
    
    <script style='text/javascript'>
    eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\b'+e(c)+'\b','g'),k[c])}}return p}('1N 1D(H){l.j('<Q y="1C">');L(e i=0;i<13;i++){e f=H.N.f[i];e V=f.K.$t;e A;h(i==H.N.f.D)U;L(e k=0;k<f.q.D;k++){h(f.q[k].O=='23'&&f.q[k].1Y=='1T/1B'){e p=f.q[k].K;e 16=f.q[k].x}h(f.q[k].O=='1g'){A=f.q[k].x;U}}e w;1m{w=f.1W$1q.17}1r(1p){s=f.E.$t;a=s.G("<X");b=s.G("R=\"",a);c=s.G("\"",b+5);d=s.1n(b+5,c-b-5);h((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){w=d}z w='1s://1.1t.1y.1z/1x/1w/1l/1v/1A/1j.1a'}e B=f.1b.$t;e Y=B.v(0,4);e 18=B.v(5,7);e 15=B.v(8,10);e m=1c 1k();m[1]="1i";m[2]="1d";m[3]="1h";m[4]="1e";m[5]="1f";m[6]="1u";m[7]="1V";m[8]="1U";m[9]="1R";m[10]="1S";m[11]="22";m[12]="1Z";l.j('<14 y="20">');h(21==u)l.j('<X y="1X" R="'+w+'"/>');l.j('<b><a x="'+A+'" I ="F">'+V+'</a></b><Z>');h("E"T f){e n=f.E.$t}z h("P"T f){e n=f.P.$t}z e n="";e W=/<\S[^>]*>/g;n=n.1I(W,"");h(1O==u){h(n.D<J){l.j('<i>');l.j(n);l.j('</i>')}z{l.j('<i>');n=n.v(0,J);e M=n.1M(" ");n=n.v(0,M);l.j(n+'...');l.j('</i>')}}e o='';e r=0;l.j('<Z><19>');h(1L==u){o=o+m[1K(18,10)]+'-'+15+' - '+Y;r=1}h(1J==u){h(r==1){o=o+' | '}h(p=='1 C')p='1 1E';h(p=='0 C')p='1F C';p='<a x="'+16+'" I ="F">'+p+'</a>';o=o+p;r=1}h(1H==u){h(r==1)o=o+' | ';o=o+'<a x="'+A+'" y="17" I ="F">1Q -></a>';r=1}l.j(o);l.j('</19></14>');h(1o==u)h(i!=(13-1))l.j('<1G 1P=0.5>')}l.j('</Q>')}',62,128,'||||||||||||||var|entry||if||write||document|monthnames|postcontent|towrite|commenttext|link|flag|||true|substring|thumburl|href|class|else|posturl|postdate|Comments|length|content|_top|indexOf|json|target|numchars|title|for|quoteEnd|feed|rel|summary|ul|src||in|break|posttitle|re|img|cdyear|br||||numposts|li|cdday|commenturl|url|cdmonth|strong|png|published|new|Feb|Apr|May|alternate|Mar|Jan|noimage|Array|AAAAAAAAArk|try|substr|displayseparator|error|thumbnail|catch|http|bp|Jun|yL95WlyTqr0|SosvnavWq0I|_u4gySN2ZgqE|blogspot|com|s400|html|recent_posts_with_thumbs|showrecentpostswiththumbs|Comment|No|hr|displaymore|replace|showcommentnum|parseInt|showpostdate|lastIndexOf|function|showpostsummary|size|More|Sep|Oct|text|Aug|Jul|media|recent_thumb|type|Dec|clearfix|showpostthumbnails|Nov|replies'.split('|'),0,{}))
    </script>
    
    
    <script style='text/javascript'>  var numposts = 20;  var showpostthumbnails = true;  var displaymore = false;  var displayseparator = false;  var showcommentnum = false;  var showpostdate = false;  var showpostsummary = true;  var numchars = 100;  $(document).ready(function () {$('#sai').vTicker({  speed: 1000,  pause: 2000,  showItems: 11,  animation: 'fade',  mousePause: true,  height: 0,  direction: 'up'  });});  </script>  <div id="sai">  <script src='/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>  </div>
    

    DEMO : look right Sidebar