Cara Bikin Widget Recent Post Slider By Label
Banyak juga teman blogger yang blog nya memakai Widget Rencent Post untuk memperindah blog yang mereka miliki. Meskipun bagi aku Widget tersebut jarang sekali bagi pengunjung untuk mengklik nya. Dengan alasan mungkin tidak terlalu penting. Memang kebanyak widget semacam ini hanya untuk memperindah dari segi tampilan nya saja.
Waktu kemarin aku juga sempat membahas tutorial Cara Memasang Recent Post By Label Di Halaman Statis. Dan pada kesempatan kali ini aku ingin mengembangkan tutorial Cara Bikin Widget Recent Post Slider By Label yang kalian ketahui Cara Membuat Widget Slider ini dapat kalian atur dengan label yang di ingin kan.
Manfaat dari Widget ini mungkin hanya sekedar untuk komplemen dalam sebuah template yang teman miliki. Bila kalian berminat untuk memasang nya di template sobat, ikuti langkah - langkah nya sebagai berikut.
Cara Bikin Widget Recent Post Slider By Label
Langkah Pertama- Silahkan kalian copy aba-aba di bawah ini dan letakan aba-aba tersebut di atas aba-aba </head> pada template kalian.
<style type="text/css"> /*<![CDATA[*/ /* Recent Posts Slider */ .flex-direction-nav a, .flex-direction-nav a:before { color: #f1f1f1; text-shadow: 1px 1px 0 #000; } @font-face { font-family: flexslider-icon; src: url(https://cdn.rawgit.com/woocommerce/FlexSlider/master/fonts/flexslider-icon.eot); src: url(https://cdn.rawgit.com/woocommerce/FlexSlider/master/fonts/flexslider-icon.eot?#iefix) format('embedded-opentype'), url(https://cdn.rawgit.com/woocommerce/FlexSlider/master/fonts/flexslider-icon.woff) format('woff'), url(https://cdn.rawgit.com/woocommerce/FlexSlider/master/fonts/flexslider-icon.ttf) format('truetype'), url(https://cdn.rawgit.com/woocommerce/FlexSlider/master/fonts/flexslider-icon.svg#flexslider-icon) format('svg'); font-weight: 400; font-style: normal } .flex-container a:hover, .flex-slider a:hover { outline: 0 } .flex-control-nav, .flex-direction-nav, .slides, .slides>li { margin: 0; padding: 0; list-style: none } .flex-pauseplay span { text-transform: capitalize } .flexslider { height: 480px; padding: 5px; margin: 5px; background: #f5f5f5; position: relative; zoom: 1; -webkit-box-shadow: 2px 2px 3px rgba(0, 0, 0, .08); -o-box-shadow: 2px 2px 3px rgba(0, 0, 0, .08); -ms-box-shadow: 2px 2px 3px rgba(0, 0, 0, .05); box-shadow: 2px 2px 3px rgba(0, 0, 0, .05) } .flexslider .slides>li { display: none; -webkit-backface-visibility: hidden } .flexslider .slides:after { content: "\0020"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0 } html[xmlns] .flexslider .slides { display: block } * html .flexslider .slides { height: 2% } .no-js .flexslider .slides>li:first-child { display: block } .flexslider .slides { zoom: 1 } .flexslider .slides img { width: 100%; display: block; height: 480px; -moz-user-select: none } .flex-viewport { max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease } .loading .flex-viewport { max-height: 300px } .carousel li { margin-right: 10px } .flex-direction-nav a { text-decoration: none; display: block; width: 40px; height: 40px; margin: -20px 0 0; position: absolute; top: 50%; z-index: 10; overflow: hidden; opacity: 0; cursor: pointer; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out } .flex-direction-nav a:before { font-family: flexslider-icon; font-size: 40px; display: inline-block; content: '\f001' } .flex-direction-nav a.flex-next:before { content: '\f002' } .flex-direction-nav .flex-prev { left: -60px } .flex-direction-nav .flex-next { right: -60px; text-align: right } .flexslider:hover .flex-direction-nav .flex-prev { opacity: .7; left: 15px; bottom: 10px } .flexslider:hover .flex-direction-nav .flex-prev:hover { opacity: 1 } .flexslider:hover .flex-direction-nav .flex-next { opacity: .7; right: 15px; bottom: 10px } .flexslider:hover .flex-direction-nav .flex-next:hover { opacity: 1 } .flex-direction-nav .flex-disabled { opacity: 0!important; filter: alpha(opacity=0); cursor: default; z-index: -1 } .flex-pauseplay a { display: block; width: 20px; height: 20px; position: absolute; bottom: 5px; left: 10px; opacity: .8; z-index: 10; overflow: hidden; cursor: pointer; color: #000 } .flex-pauseplay a:before { font-family: flexslider-icon; font-size: 20px; display: inline-block; content: '\f004' } .flex-pauseplay a:hover { opacity: 1 } .flex-pauseplay a.flex-play:before { content: '\f003' } .flex-control-nav { width: 100%; position: absolute; bottom: 20px; text-align: center } .flex-control-nav li { margin: 0 6px; display: inline-block; zoom: 1 } .flex-control-paging li a { width: 11px; height: 11px; display: block; background: #eee; background: rgba(238, 238, 238, .5); cursor: pointer; text-indent: -9999px; -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, .3); -moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, .3); -o-box-shadow: inset 0 0 3px rgba(0, 0, 0, .3); box-shadow: inset 0 0 3px rgba(0, 0, 0, .3); -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px } .flex-control-paging li a:hover { background: #FF1744; background: rgba(255, 23, 68, .7) } .flex-control-paging li a.flex-active { background: #fff; background: rgba(255, 255, 255, .9); cursor: default } .flex-control-thumbs { margin: 5px 0 0; position: static; overflow: hidden } .flex-control-thumbs li { width: 25%; float: left; margin: 0 } .flex-control-thumbs img { width: 100%; height: auto; display: block; opacity: .7; cursor: pointer; -moz-user-select: none; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease } .flex-control-thumbs img:hover { opacity: 1 } .flex-control-thumbs .flex-active { opacity: 1; cursor: default } .flexslider.loading:after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUrRsdHBU-TMEALwR6JssUupfFtPOV-mOnzm6UICfBwIFsfzl_97gqHFv2DmRZybVpGSVY9fONvXTjzAvA8qGgDx3n0HMMqsF1T5fknwPDPU-MCPN_o0jCLhS52oZmlVzQgNALBo19VP0/s1600/loadingbox.gif) center center no-repeat; background-color: rgba(255, 255, 255, .9); z-index: 9999 } .flexslider.loading ol, .flexslider.loading ul.flex-direction-nav, .loading .flex-caption { display: none } .flexslider a { text-decoration: none } .flex-caption { position: relative; padding-left: 15px; padding-right: 15px; height: auto; color: #fff; font-family: 'Open Sans', sans-serif; font-weight: 500; font-size: 35px; line-height: 1.2; text-align: center; text-shadow: 1px 2px 0 #666; margin: 0; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden } .flex-caption span { display: block; vertical-align: middle; height: auto } .flex-caption.overlayDark, .flex-caption.overlayLight { margin-bottom: -60px; bottom: 110px; position: absolute; width: 100%; z-index: 2; display: none } .flexslider ul.slides li.flex-active-slide .flex-caption.overlayLight { display: block; -webkit-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both } ul.slides li a { display: block; overflow: hidden; height: 480px; position: relative; } .flexslider ul { margin: 0!important; padding: 0!important; line-height: initial!important } .flexslider ul.flex-direction-nav li { margin: 0; padding: 0; line-height: initial } .flexslider ul.slides li { margin-bottom: 0!important; height: 480px; position: relative; } .flexslider ul li { margin-bottom: 0!important; } .flexslider .flex-viewport ul li .overlay { background: #000; opacity: .2; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1 } .flexslider img { padding: 0; border: none; -webkit-box-shadow: none; box-shadow: none } ul.flex-direction-nav, ul.flex-direction-nav li { position: static } .error { font-family: monospace, sans-serif } @-webkit-keyframes flip { 0% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out } 40% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out } 50% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 80% { -webkit-transform: perspective(400px) scale3d(.95, .95, .95); transform: perspective(400px) scale3d(.95, .95, .95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } } @keyframes flip { 0% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out } 40% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out } 50% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 80% { -webkit-transform: perspective(400px) scale3d(.95, .95, .95); transform: perspective(400px) scale3d(.95, .95, .95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } } @media screen and (max-width:1024px) { .flexslider { height: 100%; } } @media screen and (max-width:860px) { .flex-direction-nav .flex-prev { opacity: 1; left: 10px } .flex-direction-nav .flex-next { opacity: 1; right: 10px } } @media (max-width:414px) { .flexslider, ul.slides li a, .flexslider ul.slides li, .flexslider .slides img { height: 250px } .flex-caption { font-size: 18px; line-height: 20px; font-weight: 400 } .flex-direction-nav a { top: 93% } .flex-direction-nav a:before { font-size: 30px } .flex-direction-nav a { width: 25px; height: 25px } } @media (max-width:375px) { .flexslider, ul.slides li a, .flexslider ul.slides li, .flexslider .slides img { height: 200px } .flex-direction-nav a { top: 92% } .flex-direction-nav a:before { font-size: 20px } .flex-direction-nav a { width: 20px; height: 20px } } /*]]>*/ </style> Lalu copy lagi aba-aba di bawah ini dan letakan sempurna di bawah nya aba-aba yang di atas tadi.
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.0/jquery.flexslider-min.js"></script> LANGKAH KEDUA
- Silahkan teman copy aba-aba di bawah ini dan letakan aba-aba tersebut di atas aba-aba </body> pada template teman masing - masing.
<script type="text/javascript"> //<![CDATA[ !function(a){a.fn.BloggerDynamicSlider=function(b){var c=a.extend({blogURL:"",labelName:"TIPS BLOGGER",maxItem:10,showPostTitle:!0,postTitleStyle:"overlayLight",imageWidth:728,imageHeight:480,animation:"slide",controlNav:!0,directionNav:!0,pauseOnHover:!1,slideshowSpeed:7e3,animationSpeed:600,animationLoop:!0},b);return this.each(function(){var b=a(this),d=b.attr("id"),e=c.blogURL+"/feeds/posts/summary/"+(0==c.labelName.length?"":"-/"+c.labelName.replace(/\,(\s+)?/g,"/"))+"?max-results="+c.maxItem+"&orderby=published&alt=json-in-script";a.ajax({type:"GET",url:e,async:!1,contentType:"application/json",dataType:"jsonp",success:function(a){var f,g,h,i,j,k,l,m,n,o,p,q,r,e=a.feed.entry||[];for(f="",f+='<div class="flexslider loading" style="max-width:100%">',f+='<ul class="slides">',g=0;g<e.length;++g){for(i=e[g],j=i.title.$t,k=i.media$thumbnail?i.media$thumbnail.url:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHkhPPM5mC75BrdIQ2Cv4GEwZ4_vVJoV5t0oYT6pBnK5Y9WAr5WnG5sgHbuBpR3fL9z0elsRbwIz5JpCG0jSpGF2I4eGlxcI40Yg4qtirygpEt68N7J7EuK8yeeVfzMvpFw1d6VdFqnA8/s72-c/nothumb_large.png",l=k.replace("s72-c","w"+c.imageWidth).replace(/.*?:\/\//g , "//"),m=i.link||[],h=0;h<m.length&&"alternate"!=m[h].rel;++h);n=m[h].href,o='<img src="'+l+'" width="'+c.imageWidth+'" height="'+c.imageHeight+'"/>',p=c.showPostTitle?'<p class="flex-caption'+("default"==c.postTitleStyle?"":" "+c.postTitleStyle)+'"><span>'+j+"</span></p>":"",r='<div class="overlay"></div>',q='<a href="'+n+'" target="_blank">'+o+p+"</a>",f+="<li>"+q+r+"</li>"}f+="</ul></div>",f+='<style type="text/css">#'+d+" .flexslider.loading {min-height:"+c.imageHeight+"px !important;}</style>",b.append(f)},error:function(a,c,d){b.append('<div class="error"><p>No Result! Or Error Loading Feed</p></div')},complete:function(){a("#"+d+" .flexslider").flexslider({animation:c.animation,controlNav:c.controlNav,directionNav:c.directionNav,pauseOnHover:c.pauseOnHover,slideshowSpeed:c.slideshowSpeed,animationSpeed:c.animationSpeed,animationLoop:c.animationLoop});var b=a("#"+d+" .flexslider ul.slides li a img"),e=0;b.on("load",function(){if(e++,e==b.length-1){var c=a("#"+d+" .flexslider").data("flexslider");c.animating=!1,c.flexAnimate(0),a("#"+d+" .flexslider").removeClass("loading")}})}})})}}(jQuery); $(document).ready(function() { $("#slider1").BloggerDynamicSlider({ }); }); //]]> </script> LANGKAH KE TIGA
- Silahkan kalian copy aba-aba pemanggil nya di bawah ini kemudian letakan aba-aba tersebut di Widget Sidebar atau dapat juga di dalam template yang sekira nya kalian ingin meletakan di atas postingan halaman homepage maupun di bawah postingan. Atau dapat juga di widget banner. Yang niscaya sesuaikan dengan template teman masing - masing.
<div id="slider1"></div> LANGKAH TERAKHIR
Yang harus kalian Edit antara lain :
1. Pada aba-aba CSS yang di atas sengaja aku tidak kompres biar teman dapat lebih luas untuk mengedit sisi lebar tinggi maupun dari segi tampilan biar dapat sesuai dengan template teman masing - masing. Makara kalian tinggal sesuaikan saja.
2. Pada aba-aba yang di Langkah Ke Dua kalian lihat aba-aba yang aku tandai => TIPS BLOGGER. Silahkan kalian ganti dengan label yang kalian ingin kan.
3. Dan untuk aba-aba maxItem:10 kalian dapat ganti dengan jumlah yang kalian ingin kan.
Untuk beberapa template yang sudah aku coba terapkan dan hasil nya berbeda - beda dalam arti tidak full responsive. Makara bilamana kalian coba untuk menerapkan nya kemudian ukuran nya tidak sesuai dengan template sobat, harap di maklumi. Dan untuk Demo nya kalian dapat lihat pada blog ini kalau aku masih memakai nya, atau kalian dapat lihat pola pada gambar di atas.
Mungkin itu saja yang dapat aku bagi kan di tutorial kali ini, semoga artikel yang aku bagikan ini dapat bermanfaat buat teman blogger yang sedang mencari Cara Bikin Widget Recent Post Slider By Label. Bila ada yang ingin di tanyakan jangan sungkan untuk beri komentar yang sudah tersedia di bawah artikel ini. Selamat mencoba!
