Memo hari ini , saya akan memberikan sebuah widget/gadget slider yang saya kloning dari recent post yang ada di internet kemudian saya gabungkan dengan slider dari tympanus.net. Slider recent post ini cocok sekali jika kita pasang di footer. Tapi semua terserah sobat semua mau dipasang dimana pun.
Untuk di Google sendiri , jarang sekali slider widget seperti ini. Walaupun ada, hanya alakadarnya saja.Tidak seperti hasil kloningan saya ini. Yang sudah lumayan ini hehehehe...
Sebenarnya cukup lama saya juga membuat ini sampai jadi seperti ini. Karena selain keterbatasan skil saya dalam hal kode. Jatuh bangun dalam membuat slider sampai sampai nyaris putus asa , sempat tidak saya sentuh selama berbulan bulan. Namun akhirnya jadi juga bisa sampai seperti ini. walaupun tidak sempurna . Lumayan, Slider recent post ini selain untuk menambah navigasii juga untuk untuk menambah keindahan blog juga agar blog tidak terlalu ramai dengan widget yang bisa merusak pemandangan dan keindahan blog.
Oke langsung saja .
Saya angggap sobat sudah mengerti saja, karena blogger pasti sudah terbiasa dengan bagaimana cara memasang widget.
Pasang kode dibawah ini di html/script java pada tata letak.
<script type="text/javascript">
function showlatestpostswiththumbs(t){document.write('<ul id="carousel" class="elastislide-list">');for(var e=0;e<posts_no;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(h){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizNV8gGELIKTmRAnurrx4DyGA5ffChyphenhyphenJ5QL-1VBLnwo0a3_1r7qoTpFE0zIKmohmicnBegRp-_ZMdTgvwluia8UOdedODo_NPd2Gfu-5QGFP63eDe4677xp2thJQBXdHclbX73bHDypADP/s1600/no-thumb.png"}var p=n.published.$t,f=p.substring(0,4),g=p.substring(5,7),v=p.substring(8,10),w=new Array;if(w[1]="Jan",w[2]="Feb",w[3]="Mar",w[4]="Apr",w[5]="May",w[6]="Jun",w[7]="Jul",w[8]="Aug",w[9]="Sep",w[10]="Oct",w[11]="Nov",w[12]="Dec",document.write('<li>'),1==showpoststhumbs&&document.write('<div class="item"><figure class="effect-comro"><a href="'+r+'"><img class="recent-post-thumb" src="'+u+'"/></a>'),document.write('<figcaption><h4><a href="'+r+'" target ="_top">'+i+"</a></h4></figcaption></figure></div>"),"content"in n)var A=n.content.$t;else if("summary"in n)var A=n.summary.$t;else var A="";var k=/<\S[^>]*>/g;if(A=A.replace(k,""),1==post_summary)if(A.length<summary_chars)document.write(A);else{A=A.substring(0,summary_chars);var y=A.lastIndexOf(" ");A=A.substring(0,y),document.write(A+"...")}var _="",$=0;document.write('<br><div class="recent-posts-details">'),1==posts_date&&(_=_+w[parseInt(g,10)]+" "+v+" "+f,$=1),1==readmorelink&&(1==$&&(_+=" | "),_=_+'<a href="'+r+'" class="url" target ="_top">Read more</a>',$=1),1==showcommentslink&&(1==$&&(_+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target ="_top">'+l+"</a>",_+=l,$=1),document.write(_),document.write("</div>"),document.write("</li>")}document.write("</ul>")}
</script>
<script type="text/javascript">
var posts_no = 20;
var showpoststhumbs = true;
var readmorelink = false;
var showcommentslink = false;
var posts_date = false;
var post_summary = false;
var summary_chars = 22;
</script>
<script src="/feeds/posts/default?orderby=updated&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<style type="text/css">
/* Elastislide Style */
.elastislide-list {
list-style-type: none;
display: none;
}
.no-js .elastislide-list {
display: block;
}
.elastislide-carousel ul li {
min-width: 20px; /* minimum width of the image (min width + border) */
}
.elastislide-wrapper {
position: relative;
background-color: #fffffc;
margin: 0 auto;
min-height: 60px;
-webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.2);
box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.2);
}
.elastislide-wrapper.elastislide-loading {
background-image: url(../images/loading.gif);
background-repeat: no-repeat;
background-position: center center;
}
.elastislide-horizontal {
padding: 30px 40px;
}
.elastislide-carousel {
overflow: hidden;
position: relative;
}
.elastislide-carousel ul {
position: relative;
display: block;
list-style-type: none;
padding: 0;
margin: 0;
-webkit-backface-visibility: hidden;
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
-ms-transform: translateX(0px);
-o-transform: translateX(0px);
transform: translateX(0px);
}
.elastislide-horizontal ul {
white-space: nowrap;
}
.elastislide-carousel ul li {
margin: 0;
-webkit-backface-visibility: hidden;
width:160px;
height:275px;
word-break: break-word; /* Samsung browser */
word-wrap: break-word; /* IE 11 */
overflow-wrap: anywhere;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
.elastislide-horizontal ul li {
height: 100%;
display: inline-block;
}
.elastislide-vertical ul li {
display: block;
width:160px;
height:275px;
}
.elastislide-carousel ul li a {
display: inline-block;
width: 100%;
font:$(widget.title.font);
color:$(widget.title.color);
}
.elastislide-carousel ul li a img {
display: block;
border: 2px solid white;
max-width: 100%;
width:160px;
height:160px;
padding:3px;
margin:4px;
font:$(widget.title.font);
color:$(widget.title.color);
}
/* Navigation Arrows */
.elastislide-wrapper nav span {
position: absolute;
background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0qVxPNhCjCnrHr1FnzH_cgme1GVbsBbuLgH8I1iKzw3ZevhmkMJduIYSXiWxPS_EaSMqUm6KTD8gtGPE-5PHXJKLKAnVEbfN0-pozVFIige8Qc9MDI_vKClJ-2XBOlJynSe1puIM7-qfD/s36/nav.png) no-repeat 3px 3px;
width: 23px;
height: 23px;
border-radius: 50%;
text-indent: -9000px;
cursor: pointer;
opacity: 0.8;
}
.elastislide-wrapper nav span:hover {
opacity: 1.0
}
.elastislide-horizontal nav span {
top: 50%;
left: 10px;
margin-top: -11px;
}
.elastislide-horizontal nav span.elastislide-next {
right: 10px;
left: auto;
background-position: 4px -17px;
}
/* Custom Elastislide Styling */
.demo-3 .elastislide-horizontal {
background-color: #fff;
padding: 30px 60px;
}
.no-touch .demo-3 .elastislide-horizontal {
opacity: 0.8;
-webkit-transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
-ms-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
}
.no-touch .demo-3 .elastislide-horizontal:hover {
opacity: 1;
}
.demo-3 .elastislide-wrapper nav span {
background-color: #000;
}
.demo-3 .elastislide-carousel ul li a{
padding: 0 10px;
word-break: break-word; /* Samsung browser */
word-wrap: break-word; /* IE 11 */
overflow-wrap: anywhere;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
.demo-3 .elastislide-carousel ul li a img {
border-radius: 10px;
border: none;
}
/* Common style */
.item figure {
position: relative;
float: left;
overflow: hidden;
margin: 0px;
min-width: 170px;
min-height: 170px;
max-width: 170px;
max-height: 170px;
width: 100%;
background:#4C4C4C;
text-align: center;
cursor: pointer;
}
.item figure img {
position: relative;
display: block;
min-height:; 100%;height: 170px;
max-width:; 100%;width: 170px;
opacity: 1;background:;white;
margin: 4px;
}
.item figure figcaption {
padding: .2em;margin:1em;
color: #fff;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.item figure figcaption::before,
.item figure figcaption::after {
pointer-events: none;
}
.item figure figcaption,
.item figure figcaption > a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Individual effects */
/*---------------*/
/***** comro *****/
/*---------------*/
figure.effect-comro figcaption {
top: 6.3em;left:0em;
bottom: 0;
padding: 0px 12px 0px 0px;
margin: 0px;
width:170px;
height:70px;
background-image: linear-gradient(to bottom, rgba(1,0,0,0),
rgba(1,0,0,1));
color:#ddd;
overflow-y:;scroll;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
font:$(widget.title.font);
color:$(widget.title.color);
}
figure.effect-comro figcaption h4 {
margin-top:20px;
padding:0 0 0 5px;
width:165px!important;
height:45px;
font-family:calibri;
font-size:8px;
overflow:hidden;
font-color:#fff;
word-break: break-word; /* Samsung browser */
word-wrap: break-word; /* IE 11 */
overflow-wrap: anywhere;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
figure.effect-comro:hover figcaption {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
figure.effect-comro img { opacity:1;
-webkit-transition: opacity 0.45s, -webkit-transform 0.45s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale(1.9);
transform: scale(1.09);
left:-3px;top:-5px;
}
figure.effect-comro:hover img {
-webkit-transition: opacity 0.45s, -webkit-transform 0.45s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
@media (max-width:600px) {
/* Common style */
.item figure {
position: relative;
float: left;
overflow: hidden;
left: 0px;
min-width: 125px;
min-height: 125px;
max-width: 125px;
max-height: 125px;
width: 100%;
height:100%;
background:#4C4C4C;
text-align: center;
cursor: pointer;
}
.item figure img {
position: relative;
display: block;
max-height: 125px;
height: 100%;
max-width: 125px;
width: 100%;
opacity: 1;
}
.item figure figcaption {
padding: .2em;
margin:1em;
color: #fff;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.item figure figcaption,
.item figure figcaption > a {
position: absolute;
top: 0;
left:2px;
width: 100%;
height: 100%;
}
/* Individual effects */
/*---------------*/
/***** comro *****/
/*---------------*/
figure.effect-comro figcaption {
top: 5.3em;left:0em;
bottom: 0;
padding: 0px 12px 0px 0px;
margin: 0px;
width:125px;
height:40px;
background-image: linear-gradient(to bottom, rgba(1,0,0,0),
rgba(1,0,0,1));
color:#ddd;
overflow-y:;scroll;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
font:$(widget.title.font);
color:$(widget.title.color);
}
figure.effect-comro figcaption h4 {
margin-top:20px;
padding:0 0 0 5px;
width:125px!important;
height:45px;
font-family:calibri;
font-size:10px;
overflow:hidden;
font-color:#fff;
word-break: break-word; /* Samsung browser */
word-wrap: break-word; /* IE 11 */
overflow-wrap: anywhere;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
figure.effect-comro:hover figcaption {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
figure.effect-comro img { opacity:1;
-webkit-transition: opacity 0.45s, -webkit-transform 0.45s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale(1.9);
transform: scale(1.09);
left:-3px;top:-5px;
}
figure.effect-comro:hover img {
-webkit-transition: opacity 0.45s, -webkit-transform 0.45s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<script src="https://cdn.jsdelivr.net/gh/roddians/Menu-Responsive@main/modernizr.custom.17475.js"></script>
<script src="https://cdn.jsdelivr.net/gh/roddians/Menu-Responsive@main/jquery.elastislide.js"></script>
<script src="https://cdn.jsdelivr.net/gh/roddians/Menu-Responsive@main/jquerypp.custom.js"></script>
<script type="text/javascript">
$( '#carousel' ).elastislide( {
minItems : 2
} );
</script>
Setelah itu sobat save dan lihat hasilnya.Sobat juga bisa merubah recent post ini menjadi Latest post [post terbaru] .
Caranya .
cari kode dibawah:
<script src="/feeds/posts/default?orderby=updated&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
Lalu ganti updated menjadi published.
Bedanya apa?
Updated : semua postingan baru akan muncul dan postingan lama yang diperbaharui/diedit akan muncul di widget ini setelah diterbitkan.
Sedangkan
Published : Adalah postingan terbaru yang benar-benar baru di posting.
Baik sekian dulu memo hari ini semoga suka.
Wassalam.
Komentar ini telah dihapus oleh pengarang.
BalasHapusPAnjing banget..
BalasHapusBeneran ini bisa?!?!
Komentar ini telah dihapus oleh pengarang.
BalasHapus