well
immidiately login to your blogger account and search for
]]> </ b: skin> or </ style>
and paste the following code above this ]]> </ b: skin> or </ style>
/ * CSS Responsive Slider Recent Post * /
#featuredpost {margin: 15px auto;}
#slides * {- moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box}
#slides ul, # slides li {padding: 0; margin: 0; list-style: none; position: relative}
#slides ul {height: 320px}
#slides li {width: 50%; height: 100%; position: absolute; display: none}
#slides li: nth-child (1), #slides li: nth-child (2), #slides li: nth-child (3), #slides li: nth-child (4), #slides li: nth- child (5) {display: block}
#slides li: nth-child (1) {left: 0; top: 0}
#slides li: nth-child (2) {left: 50%; width: 25%; height: 50%}
#slides li: nth-child (3) {left: 75%; width: 25%; height: 50%}
#slides li: nth-child (4) {left: 50%; top: 50%; width: 25%; height: 50%}
#slides li: nth-child (5) {left: 75%; top: 50%; width: 25%; height: 50%}
#slides li: nth-child (1) h4 {overflow: hidden; font-size: 25px; bottom: 0; color: #fafafa; width: 100%;
padding: 10px 10px 10px 90px; text-align: left; text-transform: uppercase; background: RGBA (0,0,0,0.3);
height: 90px; font-family: & # 39; & # 39 ;; Oswald text-shadow: 2px 2px 0 RGBA (0,0,0,0.2); line-height: 32px; left: 0;}
#slides li: nth-child (1) .label_text {font-size: 30px; display: block; bottom: 10px; left: 10px;
padding: 0; font-family: & # 39; & # 39 ;; Oswald box-shadow: 3px 5px 0 RGBA (0,0,0,0.2);}
#slides li: nth-child (1) span.dd {display: block; font-size: 30px; padding: 12px 15px;
background: # ff6553; margin: 0;}
#slides li: nth-child (1) span.dm {display: block; font-size: 14px; background: # 333; color: # fff;
padding: 5px 21px; text-transform: uppercase; margin: 0;}
#slides li: nth-child (1) span.dy, #slides li: nth-child (1) span.autname {display: none;}
#slides a {display: block; width: 100%; height: 100%; overflow: hidden}
#slides rotate (0); - webkit-transform: scale (1.0) rotate (0); - ms-transform: scale (1.0) rotate (0); transform: scale (1.0) rotate (0); transition: all 0.6s linear ;}
#slides li a: hover img {-moz-transform: scale (1.1) rotate (1deg); - webkit-transform: scale (1.1) rotate (1deg); - ms-transform: scale (1.1) rotate (1deg); transform: scale (1.1) rotate (1deg); transition: all 0.3s linear;}
#slides 40%; background-repeat: repeat-x;}
#slides h4 {position: absolute; bottom: 40px; margin: 0; font-size: 13px; font-family: & # 39; Oswald & # 39 ;;
left: 10px; padding: 5px 10px; color: # f9f9f9; z-index: 3; line-height: 20px; font-weight: normal;
background: RGBA (41,41,41,0.7); text-align: left; text-transform: uppercase; margin-right: 10px;}
#slides .label_text {font-size: 12px; color: # fff; bottom: 10px; z-index: 3; left: 10px;
position: absolute; background: RGBA (255,101,83,0.8); padding: 3px 6px; font-family: & # 39; Oswald & # 39 ;;
text-transform: uppercase;}
#slides li: nth-child (2) .autname, # slides li: nth-child (3) .autname, # slides li: nth-child (4) .autname, # slides li: nth-child (5). autname {display: none;}
#slides .overlayx, # slides li {transition: all .4s ease-in-out}
#slides li: nth-child (1) .overlayx {display: none;}
#slides li: hover .overlayx {opacity: 0.1}
media only screen and (max-width: 800px) {
#slides li: nth-child (1) h4 {font-size: 18px; line-height: 24px;}}
media only screen and (max-width: 600px) {
#slides ul {height: 600px}
#slides li: nth-child (1) {width: 100%; height: 50%}
#slides li: nth-child (2) {top: 50%; height: 25%; left: 0; width: 50%}
#slides li: nth-child (3) {left: 50%; top: 50%; width: 50%; height: 25%}
#slides li: nth-child (4) {left: 0; top: 75%; height: 25%; width: 100%}
#slides li: nth-child (5) {display: none;}}
media only screen and (max-width: 480px) {
#slides li: nth-child (1) h4 {font-size: 13px; line-height: 16px;}}In the CSS above I used the font Oswald, please change and adjust to the theme of your blog.
2. Copy and paste the code below just above the </ body>
<Script type = "text / javascript" src = "https://arlina-design.googlecode.com/svn/slider-post.js"> </ script>
<Script type = 'text / javascript'>
// <! [CDATA [
$ (Document) .ready (function () {
FeaturedPost ({
blogURL: "URL-BLOG-YOU",
MaxPost: 8,
idcontaint: "# featuredpost"
Imagesize: 500,
interval: 10000,
autoplay: true,
TagName: false
});
});
//]]>
</ Script>Replace paper -YOUR BLOG URL to your blog url.
3. Copy and paste the code below anywhere freely. Can before the content-wrapperor under menu-wrapper
<Div id = "featuredpost"> </ div>4. Finally save the template and see the results.
If you want to bring up this slider recent post only in the main page only, please wrap HTML code with a special conditional tag main page. Examples:
<B: if cond = 'data: the blog.url == Data: blog.homepageUrl'>
<Div id = "featuredpost"> </ div>
</ B: if>Learn more about the application of conditional tags Can you see here Multiple Functions Conditional Tag On Widget And if anyone feels difficulties with its implementation, here I've been providing practical version. You just copy all the code below into the Layout> Add Gadget> HTML / JavaScript and paste all the code there > Save
<Style>
/ * CSS Slider Recent Post * /
#slides * {- moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box}
#slides ul, # slides li {padding: 0; margin: 0; list-style: none; position: relative}
#slides ul {height: 320px}
#slides li {width: 50%; height: 100%; position: absolute; display: none}
#slides li: nth-child (1), #slides li: nth-child (2), #slides li: nth-child (3), #slides li: nth-child (4), #slides li: nth- child (5) {display: block}
#slides li: nth-child (1) {left: 0; top: 0}
#slides li: nth-child (2) {left: 50%; width: 25%; height: 50%}
#slides li: nth-child (3) {left: 75%; width: 25%; height: 50%}
#slides li: nth-child (4) {left: 50%; top: 50%; width: 25%; height: 50%}
#slides li: nth-child (5) {left: 75%; top: 50%; width: 25%; height: 50%}
#slides li: nth-child (1) h4 {overflow: hidden; font-size: 25px; bottom: 0; color: #fafafa; width: 100%;
padding: 10px 10px 10px 90px; text-align: left; text-transform: uppercase; background: RGBA (0,0,0,0.3);
height: 90px; font-family: 'Oswald'; text-shadow: 2px 2px 0 RGBA (0,0,0,0.2); line-height: 32px; left: 0;}
#slides li: nth-child (1) .label_text {font-size: 30px; display: block; bottom: 10px; left: 10px;
padding: 0; font-family: 'Oswald'; box-shadow: 3px 5px 0 RGBA (0,0,0,0.2);}
#slides li: nth-child (1) span.dd {display: block; font-size: 30px; padding: 12px 15px;
background: # ff6553; margin: 0;}
#slides li: nth-child (1) span.dm {display: block; font-size: 14px; background: # 333; color: # fff;
padding: 5px 21px; text-transform: uppercase; margin: 0;}
#slides li: nth-child (1) span.dy, #slides li: nth-child (1) span.autname {display: none;}
#slides a {display: block; width: 100%; height: 100%; overflow: hidden}
#slides rotate (0); - webkit-transform: scale (1.0) rotate (0); - ms-transform: scale (1.0) rotate (0); transform: scale (1.0) rotate (0); transition: all 0.6s linear ;}
#slides li a: hover img {-moz-transform: scale (1.1) rotate (1deg); - webkit-transform: scale (1.1) rotate (1deg); - ms-transform: scale (1.1) rotate (1deg); transform: scale (1.1) rotate (1deg); transition: all 0.3s linear;}
#slides 40%; background-repeat: repeat-x;}
#slides h4 {position: absolute; bottom: 40px; margin: 0; font-size: 13px; font-family: 'Oswald';
left: 10px; padding: 5px 10px; color: # f9f9f9; z-index: 3; line-height: 20px; font-weight: normal;
background: RGBA (41,41,41,0.7); text-align: left; text-transform: uppercase; margin-right: 10px;}
#slides .label_text {font-size: 12px; color: # fff; bottom: 10px; z-index: 3; left: 10px;
position: absolute; background: RGBA (255,101,83,0.8); padding: 3px 6px; font-family: 'Oswald';
text-transform: uppercase;}
#slides li: nth-child (2) .autname, # slides li: nth-child (3) .autname, # slides li: nth-child (4) .autname, # slides li: nth-child (5). autname {display: none;}
#slides .overlayx, # slides li {transition: all .4s ease-in-out}
#slides li: nth-child (1) .overlayx {display: none;}
#slides li: hover .overlayx {opacity: 0.1}
media only screen and (max-width: 800px) {
#slides li: nth-child (1) h4 {font-size: 18px; line-height: 24px;}}
media only screen and (max-width: 600px) {
#slides ul {height: 600px}
#slides li: nth-child (1) {width: 100%; height: 50%}
#slides li: nth-child (2) {top: 50%; height: 25%; left: 0; width: 50%}
#slides li: nth-child (3) {left: 50%; top: 50%; width: 50%; height: 25%}
#slides li: nth-child (4) {left: 0; top: 75%; height: 25%; width: 100%}
#slides li: nth-child (5) {display: none;}}
media only screen and (max-width: 480px) {
#slides li: nth-child (1) h4 {font-size: 13px; line-height: 16px;}}
</ Style>
<Div id = "featuredpost"> </ div>
<Script type = "text / javascript" src = "https://arlina-design.googlecode.com/svn/slider-post.js"> </ script>
<Script type = 'text / javascript'>
// <! [CDATA [
$ (Document) .ready (function () {
FeaturedPost ({
blogURL: "URL-BLOG-YOU",
MaxPost: 8,
idcontaint: "# featuredpost"
Imagesize: 500,
interval: 10000,
autoplay: true,
TagName: false
});
});
//]]>
</ Script>For application, save it just above the widget Post Blog in Layout.
If you want to bring up this slider recent post only in the main page only, please wrap the widget with a special conditional tag main page. Example: Click Templates> Open edit HTML> Suppose your slider widget code is # HTML4
<B: widget id = 'HTML4' locked = 'false' title = '' type = 'HTML'>
<B: includable id = 'main'>
<! - Only display the title if it is non-empty ->
<B: if cond = 'data: the title! = & Quot; & quot;'>
<H2 class = 'title'> <data: title /> </ h2>
</ B: if>
<Div class = 'widget-content ">
<Data: content />
</ Div>
</ B: includable>
</ B: widget>Add tags conditional on the widget to be like this:
<B: widget id = 'HTML4' locked = 'false' title = '' type = 'HTML'>
<B: includable id = 'main'>
<B: if cond = 'data: the blog.url == Data: blog.homepageUrl'>
<! - Only display the title if it is non-empty ->
<B: if cond = 'data: the title! = & Quot; & quot;'>
<H2 class = 'title'> <data: title /> </ h2>
</ B: if>
<Div class = 'widget-content ">
<Data: content />
</ Div>
</ B: if>
</ B: includable>
</ B: widget>Specification:
- MaxPost: The number of all the posts that will appear in the list
- Imagesize: The maximum size of the images (The bigger the size the more apparent density pixel image that will appear, but the more time it takes to load the page)
- Interval: Time needed when the post moves (Example: 10000 which means 10 seconds)
- Autoplay: (True) Post will switch automatically, (False) Post will not switch automatically.
Quite so, and good luck.