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 :

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

RADIO BUTTON SLIDER TO KEY FRAME SL...

BODY JS FILE LINK IN MAGENTO

CSS SYNTAX HIGHLIGHT CHANGE IN NOT...

GOOGLE CUSTOM SEARCH BOX
?
+
X
Recommended for you
Loading..
Related Post for SLIDING EFFECT POST SLIDER STYLE1
LABEL WIDGET RAINBOW/MULTI COLOUR STYLE ------------------------------------------------------------------------------------------------- FIRST ADD LABEL WIDGET AND SET LIST OPTION REPLACE YOUR B SKIN TAG WITH BELOā¦
WORD PRESS PARTS -------------------------------------------------------------------------------------------------------- Read More: ----------------------------------ā¦
AUTOMATION ANY WEBSITES ------------------------------------------------------------------------------------------------------ READ MORE: https://www.automationanywhere.com/webdataext?r=google&w=ā¦
SYNTAX HIGHLIGHTER ON LINE FOR BLOGGER ---------------------------------------------------------------------------------------------------------- READ MORE: http://fbgadgets.blogspot.co.uā¦
RECENT OR FEATURED POST SLIDER AFTER FOOTER ------------------------------------------------------------------------------------------------------------- COPY AND POST CODE READ MORE: http://fbgadgets.blogspot.co.uk/2ā¦
SEARCH BOX WITHOUT JAVA CODE ------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE <input id='input' name='q' placeholdeā¦
INSTALL WORD PRESS TEMPLATE Plugins are tools which provide additional functionality to your application. To install a plugin you generally just need to put the plugin file into your 'wp-content/plugins' diā¦
CONVERT FILE PATH TO A URL LINK -------------------------------------------------------------------------------------------------------- ANY LIST TO SCROLLER CODE: http://accordionslider.com/ http://anroots.ā¦
HOW TO GET MALWARE ADD POPUP WITHOUT SOFTWARE --------------------------------------------------------------------------------------------------------- STEP 1: GO TO WINDOW TASK MANAGER STEP 2: OPEN FILE LOCATION AND DEā¦
RECAPTCHA KEY CONTCAT FORM FOR BLOGGER ------------------------------------------------------------------------------------------------------------ COPY AND PASTE BELOW CODE READMORE: http://kontactr.com/ httpsā¦
BODY JS FILE LINK IN MAGENTO ------------------------------------------------------------------------------------------------------------- SEARCH IN GOOGLE file content software https://www.google.co.uk/sā¦
BLOG FILE HOSTING GOOGLE PROJECT WITH TORTOISE SVN SOFTWARE EDIT HTML PAGE IN GOOGLE - YouTube ā¶ 4:19 https://www.youtube.com/watch?v=Q4yfMqPFSYE 16 mins ago - Uploaded by SAVE MONEY http://fbgadgets.blogspot.co.uk/2016/09/ā¦
EDIT IMAGE IN NOTEPAD++ ---------------------------------------------------------------------------------------------------------------------- https://www.google.co.uk/search?q=edit+picture+in+noā¦
SYNTAX HIGHLIGHTER BLOGGER TEMPLATE ----------------------------------------------------------------------------------------------------------- READ MORE: http://fbgadgets.blogspot.co.uk/2014/08/syntax-highlā¦
FLICKITY SLIDER SCROLL WITH RADIO NEXT PREV BUTTON ----------------------------------------------------------------------------------------------------------- ReadMore: http://codepen.io/desandro/pen/bNLGNZ view-source:http://sā¦
Recommended Post Slide out for Blogger ---------------------------------------------------------------------------------------------------- RECOMMENDED POST SLIDE OUT FOR BLOG - YouTube ā¶ 2:50 https:/ā¦
INTENSO MAGENTO QUICK VIEW BUTTON ---------------------------------------------------------------------------------------------------------------- 6:01 REMOVE QUICK VIEW BUTTON IN MAGEā¦
White Space Remover /************************************BODY************************************/ body { background-color: #eee; font-family: Arial, Helvetica Neue, Helvetica, sans-serif; foā¦
RADIO BUTTON SLIDER TO KEY FRAME SLIDER ------------------------------------------------------------------------------------------------------------ Read More: https://codepen.io/macbobbitt_/pen/jmEBL https://codepeā¦
SEARCH BOX EXCELENCIA ----------------------------------------------------------------------------------------------------- FIND B SKIN TAG AND REPLACE WITH BELOW CODE ]]></b:skin> --ā¦
RELATED POST WIDGET LIST SHAPE ---------------------------------------------------------------------------------------------------------------- READ MORE: http://fbgadgets.blogspot.co.uk/2013/12/n-relate-posā¦
SYNTAX HIGHLIGHTER BLOGGER TEMPLATE ========================================================================= COPY AND PASTE BELOW CODE IN BLOGGER TEMPLATE http://fbgadgets.blogspot.co.uk/2014/08/syntax-hā¦
SYNTAX HIGHLIGHTER BLOGGER TEMPLATE --------------------------------------------------------------------------------------------------------- READ MORE: http://fbgadgets.blogspot.co.uk/2014/08/syntax-highlightā¦
WHITE SPACE REMOVER CODE --------------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE IN POST HTML SECTION COPY CODE ā¦
SEARCH YOUR VIDEO IN GOOGLE ----------------------------------------------------------------------------------------------- 1) CLICK SEAACH TOOLS TAB 2) CLICK 24 HOUR PAST OPTION ------------------------ā¦
HTML SYNTAX HIGHLIGHTER ----------------------------------------------------------------------------------------------------------------- CODE: -------------------------------------------------------ā¦
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.