Saturday, 31 August 2013
SLIDING EFFECT POST SLIDER STYLE1


---------------------------------------------------------------------------------------------
1- GO TO BLOG LAYOUT
2-ADD HTML /JAVA WIDGET
3- PASTE BELOW CODE IN THIS WIDGET
4-CHANGE BLOG ADDRESS
-----------------------------------------------------------------------------------------------------------
<style type="text/css">
ul.rcentside *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
ul.rcentside{font:normal normal 11px Verdana,Geneva,sans-serif}
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:100%}
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{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
ul.rcentside .overlayx{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv2V8akCpMyPD3vwNeSykMNaaiXg-rIutrU25fsNztcJftBPaeQIUusqUevZYdtxcwgfuaTjuLoee581BW169Lumrf6n6lj2AVRCR4HChQr49WcY7nhWU5HapyRaa_3bRbtb1mE38F5dg/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x}
ul.rcentside .overlayx,ul.rcentside img{border:4px solid #000000;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
ul.rcentside li:nth-child(1) .overlayx{background-position:50% 25%}
ul.rcentside .overlayx:hover{-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1}
ul.rcentside h4{position:absolute;bottom:30px;z-index:2;color:white;margin:0;width:100%;padding:0 10px;line-height:1.5em;font-family:Georgia,Times,"Times New Roman";font-weight:normal}
ul.rcentside li:nth-child(1) h4,ul.rcentside li:nth-child(4) h4{font-size:150%}
ul.rcentside .label_text{position:absolute;bottom:10px;left:10px;z-index:2;color:white;font-size:90%}
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 src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="https://googledrive.com/host/0B2BtMc5vQHtXTnI4R1B0T1dCUm8" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
FeaturedPostSide({
blogURL:"http://fbgadgets.blogspot.co.uk/",
MaxPost:30,
idcontaint:"#featuredpostside",
ImageSize:300,
interval:5000,
autoplay:true,
tagName:false
});
//]]>
</script>
------------------------------------------------------------------------------------------------------
READ MORE:
http://fbgadgets.blogspot.co.uk/2013/08/BlogFileHostingFiles.html
GOGGLE DRIVE HOSTING
1-SET SHARING OPTION PUBLIC
2-UPLOAD JAVA OR CSS FILE
3-CLICK SHARE BUTTON FOR PUBLIC
4- GET SHARING LINK
5- LIKE THIS
https://docs.google.com/file/d/0B2BtMc5vQHtXTnI4R1B0T1dCUm8/edit?usp=sharing
https://docs.google.com/file/d/0B2BtMc5vQHtXTnI4R1B0T1dCUm8/edit?usp=sharing
6- CHANGE RED MARKER LINE INTO https://googledrive.com/host
7- FINAL STEP ERASE/DELETE YELLOW MARKER LINE
8- LINK SHOWS LIKE THIS
https://googledrive.com/host/0B2BtMc5vQHtXTnI4R1B0T1dCUm8
8- LINK SHOWS LIKE THIS
https://googledrive.com/host/0B2BtMc5vQHtXTnI4R1B0T1dCUm8
--------------------------------------------------------------------------------------------------------
function FeaturedPostSide(a){(function(e){var h={blogURL:"",MaxPost:4,idcontaint:"",ImageSize:100,interval:5000,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)};
Related movie you might like to see :

RADIO BUTTON SLIDER TO KEY FRAME SL...

BODY JS FILE LINK IN MAGENTO

CSS SYNTAX HIGHLIGHT CHANGE IN NOT...

GOOGLE CUSTOM SEARCH BOX

RELATED POST WIDGET LIST WITHOUT TH...

FLASH PLAYER SWF FILE DOWNLOAD ARCH...

WHACK A RAT CSS GAME

CSS SLIDER WITHOUT JS

FLICKITY SLIDER SCROLL WITH RADIO N...

FLICKITY JS CSS SLIDER
?
+
X
Recommended for you
Loading..
Related Post for SLIDING EFFECT POST SLIDER STYLE1
BOOTSNIPP LOGIN SIGNUP FORM ----------------------------------------------------------------------------------------------------------- READ MORE: http://bootsnipp.com/tags/login http://bootsnipp.com/s…
FLASH PLAYER SWF FILE DOWNLOAD ARCHIVES ---------------------------------------------------------------------------------------------------------------- FLASH PLAYER DOWNLOAD FROM ARCHIVES https://helpx.adobe.com/fla…
Search Engine Optimization Toolkit UN USED CSS IN GOOGLE Free SEO Toolkit Start with the free download, review your website, and make changes fast. The SEO Toolkit with its detailed analysis and search engine friendly suggestion…
FLICKITY JS CSS SLIDER ----------------------------------------------------------------------------------------------------------------------- ReadMore: https://flickity.metafizzy.co/ NEED 1 CSS FIL…
ARROW BUTTON ------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE ---------------------------------------------…
RELATED POST WIDGET LIST WITHOUT THUMBNAIL ------------------------------------------------------------------------------------------------------- FIND HEAD </head> TAG AND PASTE BELOW CODE WHEN W…
FIREBUG LITE USE OFFLINE ------------------------------------------------------------------------------------------------------------- 1)GET CSS CODE BY COPY CSS SELECTOR OR GOOGLE INSPECT 2) OR GET CSS…
HTML CSS GREEN COMMENTS NOTEPAD++ ------------------------------------------------------------------------------------------------------------------------- READ MORE: https://www.youtube.com/watch?v=Abqwpg5mp_U…
GOOGLE CUSTOM SEARCH BOX ------------------------------------------------------------------------------------------------------------------ GOOGLE CUSTOM SEARCH BOX -----------------------------------…
FLICKITY SLIDER SCROLL WITH RADIO NEXT PREV BUTTON ----------------------------------------------------------------------------------------------------------- ReadMore: http://codepen.io/desandro/pen/bNLGNZ view-source:http://s…
WHACK A RAT CSS GAME ----------------------------------------------------------------------------------------------------------------- ReadMore: https://dzone.com/articles/css3-games-collection htt…
FLASH 8 DOWNLOAD DIRECT LINKS TO YOUR FILES ON GOOGLE DRIVE - YouTube ▶ 5:17 https://www.youtube.com/watch?v=ehue47G5ayc 14 hours ago - Uploaded by SAVE MONEY DIRECT LINKS&n…
Magento Hello World Module (Extension) -------------------------------------------------------------------------------------------------------------- READ MORE: http://inchoo.net/magento/programming-magento/magento-…
RADIO BUTTON SLIDER TO KEY FRAME SLIDER ------------------------------------------------------------------------------------------------------------ Read More: https://codepen.io/macbobbitt_/pen/jmEBL https://codepe…
Labels:
S
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment
Click to see the code!
To insert emoticon you must added at least one space before the code.