Widget sidebar adalah bagian halaman blog yang yang mempunyai tempat tersendiri berupa kotak memenjang kesamping maupun memenjang kebawah untuk tampilan desktop dan akan tersusun kebawah apabila kita membuka sebuah blog dalam versi mobile.
Dengan memanfaatkan sidebar sebagai objek penempatan slider, maka saya coba bagikan Cara Menambahkan Widget Slider Recent Post Pada Sidebar Blog untuk merubah tampilan recent post menjadi slider sehingga akan membuat tampilannya unik dan menarik.
Jika anda tertarik untuk menerapkan recent post dengan tampilan slider pada sidebar, maka letakkan CSS/style dibawah ini sebelum kode </head>.
/* CSS Slider */
ul.rcentside * {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box
}
ul.rcentside {
font-size: 11px;
}
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: auto
}
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 {
transition: all .4s ease-in-out
}
ul.rcentside .overlayx {
width: 100%;
height: 100%;
position: absolute;
z-index: 2;
left: 0;
top: 0;
opacity: .6;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiqpkNNpot-5idy56EI46ekiEj0FbfOiCswyORmyrSJYSsQh2WFsnnigvWkFGtgnYNfgydibO3UckCPmI-GEHuMU_PgfStNsfSQVlZYN3h7r_5TPO6x_TselHffbcjVx2bsW19fBBjl7U/s1600/linebg-fade.png);
background-position: 50% 50%;
background-repeat: repeat-x
}
ul.rcentside .overlayx,
ul.rcentside img {
margin: 3px;
}
ul.rcentside li:nth-child(1) .overlayx {
background-position: 50% 25%
}
ul.rcentside .overlayx:hover {
opacity: .1
}
ul.rcentside h4 {
position: absolute;
bottom: 10px;
left: 10px;
right: 10px;
z-index: 2;
color: #fff;
font-weight: 700;
margin: 0;
padding: 10px;
line-height: 1.5em;
font-weight: normal;
overflow: hidden;
transition: all .3s;
}
ul.rcentside li:hover h4 {
bottom: 30px;
}
ul.rcentside li:nth-child(1) h4,
ul.rcentside li:nth-child(4) h4 {
font-size: 150%
}
ul.rcentside .label_text {
position: absolute;
bottom: 0;
left: 20px;
z-index: 2;
color: #fff;
font-size: 90%;
opacity: 0;
transition: all .3s;
}
ul.rcentside li:hover .label_text {
bottom: 20px;
opacity: 1;
}
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
}
Lalu script slider-nya diletakkan sebelum kode </body>, dibawah ini kodenya.
<script type='text/javascript'>
//<![CDATA[
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)};
// Content Slide
FeaturedPostSide({
blogURL: "https://www.skindezign.com/",
MaxPost: 8,
idcontaint: "#featuredpostside",
ImageSize: 300,
interval: 5000,
autoplay: true,
tagName: false
});
//]]>
</script>
Pada teks box https://www.skindezign.com ganti dengan url blog anda.
Pada teks box 8 adalah jumlah posting yang akan ditampilkan pada slider.
Pada teks box 300 adalah kualitas image/gambar yang akan ditampilkan.
Pada teks box 5000 adalah kecepatan pergantian antar image/gambar slider.
Pada teks box true adalah slider aktif, jika ingin di nonaktifkan maka ganti dengan false.
Pada teks box false bisa diganti dengan judul label apabila hanya ingi menampilkan label posting tertentu, contoh penulisan dengan menggunakan label SEO menjadi "SEO".
Bagian terakhir adalah menempatkan kode berikut pada sidebar dengan masuk ke Tata Letak> Tambah Gadget>.
<div id="featuredpostside"></div>
Kemudian anda tinggal lihat hasilnya dengan membuka blog anda.
Apabila anda ingin praktis untuk menempatkan kode-kode diatas maka anda tinggal meletakkan semua kode tersebut dalam dalam gadget, dibawah ini adalah gabungan dari kode diatas.
/* CSS Slider */
ul.rcentside * {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box
}
ul.rcentside {
font-size: 11px;
}
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: auto
}
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 {
transition: all .4s ease-in-out
}
ul.rcentside .overlayx {
width: 100%;
height: 100%;
position: absolute;
z-index: 2;
left: 0;
top: 0;
opacity: .6;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiqpkNNpot-5idy56EI46ekiEj0FbfOiCswyORmyrSJYSsQh2WFsnnigvWkFGtgnYNfgydibO3UckCPmI-GEHuMU_PgfStNsfSQVlZYN3h7r_5TPO6x_TselHffbcjVx2bsW19fBBjl7U/s1600/linebg-fade.png);
background-position: 50% 50%;
background-repeat: repeat-x
}
ul.rcentside .overlayx,
ul.rcentside img {
margin: 3px;
}
ul.rcentside li:nth-child(1) .overlayx {
background-position: 50% 25%
}
ul.rcentside .overlayx:hover {
opacity: .1
}
ul.rcentside h4 {
position: absolute;
bottom: 10px;
left: 10px;
right: 10px;
z-index: 2;
color: #fff;
font-weight: 700;
margin: 0;
padding: 10px;
line-height: 1.5em;
font-weight: normal;
overflow: hidden;
transition: all .3s;
}
ul.rcentside li:hover h4 {
bottom: 30px;
}
ul.rcentside li:nth-child(1) h4,
ul.rcentside li:nth-child(4) h4 {
font-size: 150%
}
ul.rcentside .label_text {
position: absolute;
bottom: 0;
left: 20px;
z-index: 2;
color: #fff;
font-size: 90%;
opacity: 0;
transition: all .3s;
}
ul.rcentside li:hover .label_text {
bottom: 20px;
opacity: 1;
}
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
}
<script type='text/javascript'>
//<![CDATA[
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)};
// Content Slide
FeaturedPostSide({
blogURL: "https://www.skindezign.com/",
MaxPost: 8,
idcontaint: "#featuredpostside",
ImageSize: 300,
interval: 5000,
autoplay: true,
tagName: false
});
//]]>
</script>
<div id="featuredpostside"></div>
Demikian tutorial tantang cara Cara Menambahkan Widget Slider Recent Post Pada Sidebar Blog saya tunggu komentar, kritik, keluhan dan juga saran dari anda, kerena dengan begitu berarti keberadaan saya sudah dianggap bagian dari teman-teman semua, terima kasih.
Show Parser Hide Parser