Cara Membuat Responsive Widget Recent Post Slider Di Blog

Oleh Unknown

Share this on :

Tweet

Cara Membuat Responsive Widget Recent Post Slider Di Blog - Baiklah sobat blogger semuanya untuk kali ini Seoscore hadir dengan artikel yang berjudul tentang cara membuat recent post widget yang bisa anda pasang di blog anda masing-masing.

Nah untuk anda yang senang untuk mempercantik dan memperindah tampilan blog anda mungkin recent post slider ini cocok untuk anda pasang di blog anda masing-masing.Apalagi tampilannya yang responsive dijamin sesuai dengan tampilan blog yang sedang mengejar trafik visitor dari mobile.Sekaligus widget recent post ini tidak memberatkan blog anda.

Baiklah untuk sobat yang ingin membuat recent post ini di blog sobat silahkan terapkan dan ikuti cara memasang nya dibawah ini.

Cara Membuat Widget Recent Post Slider

1. Masuk ke akun blogger
2. Masuk ke menu Tata letak > Tambah Widget > HTML/Javascript
3. Copy dan pastekan kode dibawah ini kedalam kotak HTML atau template blog sobat.

<style>
#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;Oswald&#39;;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;Oswald&#39;;box-shadow:5px 3px 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 
img{display:block;width:100%;height:auto;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0)
 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 
.overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://2.bp.blogspot.com/-0haO2Mfkjjk/VDgZww2tfEI/AAAAAAAAHAk/zhu3INYSkHA/s1600/fade.png);background-position:50%
 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;}}
</style>
<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:"http://www.seocips.com/",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:500,
interval:10000,
autoplay:true,
tagName:false
});
});
//]]>
</script>
<div id="featuredpost"></div>

Nah sekarang sobat sudah berhasil membuat widget recent post slider di blog,mungkin hanya ini cara membuat / memasang widget recent post slider responsive yang bisa saya berikan untuk sobat semua semoga artikel saya ini bermanfaat untuk sobat semua.

Tag : Widget