Monday, February 13, 2017

  •    Banner Image Rotation

  • 
    Put Anywhere You Like
    <script>
    var linkBanner1="http://dizoo.blogspot.com";
    var linkBanner2="http://kakikoki.blogspot.com";
    var linkBanner3="http://isoopo.blogspot.com";
    var imgBanner1="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZePCzjUfWQrFOS5KQ_A8ZGpLMRynxDIiceA1i00KEtpm_T1rIDSUoUgDrHscPcc4KEszBryuZ9_lQVXGu1GDby5gYIwkD2r9z02r4Ai0e0qAlLsaC-tAxsSx8Va-Jj91p4zbq_WPeow/s1600/dizoo.jpg";
    var imgBanner2="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiY9xwRb17KNvcnaCXQ3X-ILparde8YcBLlnMps4jWfGdBL-9Rh2EgqhUPPzWCYmKTcfBjWRhamzWCfuDlUJ-c6hOl60cfo12HPtMhI78LVe7me9TOYLYivziIO0SlvtKwMgXBwyaLopI/s1600/bnnrkako.jpg";
    var imgBanner3="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioglVSiQG1xDGJkuS6QSqfVMEwlEGOqqFv3AUqSKIa4p7e2IfMR0CkpoUz-eD1ayAvGeRayOsjDZqHvKZ-ss5MnuJPOf1-P93ym45Vk6ViA6jaa_rh_CKjQaexKIB6Pib-BLBP8tIFPZk/s1600/isoopo-bnnr.jpg";
    </script>
    <script>
    document.write("<a href="javascript:surfToSponsor();" title="Click here..."><img id="banner" src=""/></a>");
    var sponsor = 1;
    function surfToSponsor(){
    if (sponsor==1){window.location.href = linkBanner1;}
    if (sponsor==2){window.location.href = linkBanner2;}
    if (sponsor==3){window.location.href = linkBanner3;}
    }
    function changeSponsor(){
    if (++sponsor > 3){sponsor = 1;}
    if (sponsor==1){document.getElementById('banner').src = imgBanner1;}
    if (sponsor==2){document.getElementById('banner').src = imgBanner2;}
    if (sponsor==3){document.getElementById('banner').src = imgBanner3;}
    window.setTimeout('changeSponsor();',1500);
    }
    window.onLoad=window.setTimeout('changeSponsor();',1500); 
    </script>
    
    
    
    



  • DEMO : Look banner above



  •    Recent Posts Thumbnail With Navigation

  • 
    ADD a Gadget :
    <style scoped='' type='text/css'>
    /* Recent Post Navigasi */
    #recentpostnav{border:1px solid #585858;width:100%;margin:0 auto}
    #recentpostsae{margin:0}
    .recentpostel{background:#fff;display:block;border:1px solid #ddd;margin:5px 0;padding:10px;height:79px}
    .recentpostel img{background:#fff;padding:4px;float:left;height:70px;margin-right:8px;width:70px;border:1px solid #ddd}
    .recentpostel h6,.recentpostel h6 a{text-decoration:none;font-size:13px!important;font-weight:700!important;margin:0;color:#111}
    .recentpostel:hover{background-color:#fefefe}
    .recentpostel p{font-size:12px;text-align:left;color:#555;line-height:normal;margin:5px 0}
    #recentpostload{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX2s9yyG1w_BaghmgvcWjOV0FpcHX-AObJohrxLu5vVz4cVLAtRa7a40UAS2e2PhILH7WnTDMeZxdawFHMS-7gWLBqZ1DDEoX38zO_kpLZxMTfhUql6Rm-bK7YF4w7WNTt-AnmFY-0sKO_/s1600/loader.gif) 50% 50% no-repeat #fff;height:470px;border:1px solid #ddd}
    #recentpostnavfeed{border:1px solid #ddd;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0}
    #recentpostnavfeed:hover{background-color:#fefefe}
    #recentpostnavfeed a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
    #recentpostnavfeed span{padding:5px 10px}
    #recentpostnavfeed .next{float:right}
    #recentpostnavfeed .previous{float:left}
    #recentpostnavfeed .home{text-align:center}
    #recentpostnavfeed a:hover,#recentpostnavfeed span.noactived{color:transparant!important}
    </style>
    <script type='text/javascript'>
    //<![CDATA[
        var numfeed = 5;
        var startfeed = 0;
        var urlblog = "http://kukukiri.blogspot.com";
        var charac = 40;
        var urlprevious, urlnext;
    function arlinafeed(e,t){for(var n=e.split("<"),r=0;r<n.length;r++)-1!=n[r].indexOf(">")&&(n[r]=n[r].substring(n[r].indexOf(">")+1,n[r].length));return n=n.join(""),n=n.substring(0,t-1)}function showrecentpostsae(e){var t,n,r,a,i,s="";urlprevious="",urlnext="";for(var l=0;l<e.feed.link.length;l++)"previous"==e.feed.link[l].rel&&(urlprevious=e.feed.link[l].href),"next"==e.feed.link[l].rel&&(urlnext=e.feed.link[l].href);for(var d=0;d<numfeed&&d!=e.feed.entry.length;d++){t=e.feed.entry[d],n=t.title.$t;for(var l=0;l<t.link.length;l++)if("alternate"==t.link[l].rel){r=t.link[l].href;break}i="content"in t?t.content.$t:"summary"in t?t.summary.$t:"",a="media$thumbnail"in t?t.media$thumbnail.url:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7GDtKRTynfoj-RUjzD8qxehpvjjd1l_U5QSvekMmjHQmX7EFg_T7fdMcUx0A_kxOXK4box_MmYi0bX-nwpm09cuY_G0n5k2KQJwa__v3xlW64O0RqlWjC0CIdzjfeFqY1Br1Zg8x_QW-4/s1600/no-image.png",s+="<div class='recentpostel'>",s+="<a href='"+r+"' target='_blank'><img src='"+a+"' /></a>",s+="<h6><a href='"+r+"'>"+n+"</a></h6>",s+="<p>"+arlinafeed(i,charac)+"...</p>",s+="</div>"}document.getElementById("recentpostsae").innerHTML=s,s="",s+=urlprevious?"<a href='javascript:navigasifeed(-1);' class='previous'>Previous</a>":"<span class='noactived previous'>Previous</span>",s+=urlnext?"<a href='javascript:navigasifeed(1);' class='next'>Next</a>":"<span class='noactived next'>Next</span>",s+="<a href='javascript:navigasifeed(0);' class='home'>Home</a>",document.getElementById("recentpostnavfeed").innerHTML=s}function navigasifeed(e){var t,n;-1==e?(t=urlprevious.indexOf("?"),n=urlprevious.substring(t)):1==e?(t=urlnext.indexOf("?"),n=urlnext.substring(t)):n="?start-index=1&max-results="+numfeed+"&orderby=published&alt=json-in-script",n+="&callback=showrecentpostsae",incluirscript(n)}function incluirscript(e){1==startfeed&&removerscript(),document.getElementById("recentpostsae").innerHTML="<div id='recentpostload'></div>",document.getElementById("recentpostnavfeed").innerHTML="";var t=urlblog+"/feeds/posts/default"+e,n=document.createElement("script");n.setAttribute("type","text/javascript"),n.setAttribute("src",t),n.setAttribute("id","arlinalabel"),document.getElementsByTagName("head")[0].appendChild(n),startfeed=1}function removerscript(){var e=document.getElementById("arlinalabel"),t=e.parentNode;t.removeChild(e)}onload=function(){navigasifeed(0)};
    //]]>
    </script>
    <div id="recentpostsae"></div>
    <div id="recentpostnavfeed"></div>
    
    
    
    
    DEMO : look right Sidebar

  •    Popup Center With Timer Close

  • 
    Put the code below if not already installed
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>
    <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
    
    Add this Code anywhere you like
    <!-- div with Timer -->
    <style>
    #mozfblike{
    background: #1e5799; /* Old browsers */
    background: -moz-linear-gradient(-45deg,  #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    }
    </style>
    
    <div id="mozfblike" style="diplay:none;z-index:9999;position:fixed;left:50%;top:50%;width:250px;padding:10px 10px 10px 10px;border-radius:8px;transform: translate(-50%, -50%);">
    <div align="center" style="background-color:#fff;padding:2px;border:1px #000 solid;border-radius:8px;">
    
    <a href="http://VIDEOPOH.BLOGSPOT.COM"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilflugCgtwpVhhaNFK668cP1poTpsfySBE0hYWmCuOwhK289IkxWUm0HBsOp4rhXtBbxQSt8h9IBN3X-0JYboXMu7brgZhIKPjJ1y97WMlriGz0cFoOx4jgXCMlTSlgGgcJ3KTpH-r5GYM/s1600/POPUP-CLOSE-WITH-TIMER.jpg" /></a>
    
    <div align="center" style="font-family:Arial;font-size:12px;">This box will close in <span id="mozfbcounter" style="color:red;">30</span> second
    </div>
    </div>
    </div>
    
    
    
    
    DEMO : look right Sidebar

    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