Animated Featured Posts Slider Widget For Blogger

Blogger Slider sering merupakan widget yang berkaitan dengan blogger yang mungkin menampilkan posting terbaru Anda dalam blog Anda inginkan mendapatkan antarmuka yang hebat dan menakjubkan. Ini revisi golf widget secara rutin selain ada tidak ada kualifikasi untuk mengedit widget tertentu dan membangun gambar, judul dan juga deskripsi berulang kali. Anda hanya harus menambahkan URL Anda dengan semua blog saat ini dan setup Anda mungkin akan lengkap.

Sekarang ada beberapa satu hanya tersedia dan tidak fitur yang ok untuk bekerja dengan mereka karena Anda perlu diwaspadai waktu pembukaan Anda sendiri juga jadi berpikir cermat sebelum menggunakan kode di web Anda yang akan membuat waktu pembukaan Anda tinggi konsekuensi SEO buruk. Tapi ini yang pertama adalah ringan dan memiliki untuk sekelompok melibatkan kode. Semua adalah sebagai berikut Anda Anda juga tidak perlu memukul salah URL orang. Sekarang melakukannya dan pakaian kode untuk bekerja dengannya.

CLICK HERE TO SEE DEMO

Fitur:

1.) Pure JavaScript JQuery Ditambahkan.
2.) JQuery Berkas Ditambahkan.
3.) CSS Ditambahkan.
4.) Sederhana Dan Cepat Loading Code.
5.) Bisa Bekerja Dengan Any Browser.
6.) Bekerja Dengan Setiap Blogger Domain.
7.) Bisa Set The Post Hitung Too.
8.) Gaya Dalam Desain.
9.) Memuat Icon.
10.) Pilih Gambar, Text, Judul.

Cara Tambah Di Blogspot?

1.) Pergi Untuk Anda www.blogger.com
2.) Buka Keinginan Anda "Blog".
3.) Pergi Untuk "Layout".
4.) Klik "Add A Gadget" Di mana Anda Ingin Tambah Ini.
5.) Sekarang Gulir Untuk "HTML-JAVASCRIPT"
6.) Klik "+" Icon Tambah Ini.
7.) Sekarang "Copy" The bawah Kode Dan "Paste" It To Ada.
8.) Tinggalkan The "Judul" Empty.
9.) Klik "Simpan", Sekarang Anda Apakah Selesai.

 CSS:

<style type="text/css">
ul.abt-sidebar-slider *{
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
ul.abt-sidebar-slider{
font:normal normal 11px embria
}
ul.abt-sidebar-slider,ul.abt-sidebar-slider li{
margin:0;
padding:0;
list-style:none;
position:relative
}
ul.abt-sidebar-slider{
width:100%;
height:400px
}
ul.abt-sidebar-slider li{
height:24.5%;
position:absolute;
padding:0;
width:49.5%;
float:left;
overflow:hidden;
display:none
}
ul.abt-sidebar-slider li:nth-child(1),ul.abt-sidebar-slider li:nth-child(2),ul.abt-sidebar-slider li:nth-child(3),ul.abt-sidebar-slider li:nth-child(4){
display:block
}
ul.abt-sidebar-slider img{
border:0;
width:100%;
height:100%} ul.abt-sidebar-slider li:nth-child(1){width:100%;
height:49.5%;
margin:0 0 2px;
left:0;top:0
}
ul.abt-sidebar-slider li:nth-child(2){left:0;top:50%}
ul.abt-sidebar-slider li:nth-child(3){left:50.5%;top:50%}
ul.abt-sidebar-slider li:nth-child(4){width:100%;left:0;top:75%}
ul.abt-sidebar-slider .overlayx,ul.abt-sidebar-slider li{
-webkit-transition:all .4s ease-in-out;
-moz-transition:all .4s ease-in-out;
-o-transition:all .4s ease-in-out;
-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out
}
ul.abt-sidebar-slider .overlayx{
width:100%;
height:100%;
position:absolute;
z-index:2;
left:0;
top:0;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi20GT-7CJSbL6kfBtt0RZbyy4dXcD73tM4y-st2lxEQYxAJxlPWMr6HwrzJeAAl5YHC00PxnKMZukuvWvI2Au7PbO0tkM6nJnaEE_fPQGMYsZkV0QKcp6ZWkENVbJGFe3M6AIpRcHjPCc/s1600/linebg-fade.png);
background-position:50% 50%;
background-repeat:repeat-x
}
ul.abt-sidebar-slider .overlayx,ul.abt-sidebar-slider img{
border:4px solid black;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px
}
ul.abt-sidebar-slider li:nth-child(1) .overlayx{
background-position:50% 25%
}
ul.abt-sidebar-slider .overlayx:hover{
-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";
filter:alpha(opacity=10);-khtml-opacity:0.1;
-moz-opacity:0.1;opacity:0.1
}
ul.abt-sidebar-slider h4{
position:absolute;
bottom:30px;
z-index:2;
color:white;
margin:0;
width:100%;
padding:0 10px;
line-height:1.5em;
font:embria;
font-weight:normal
}
ul.abt-sidebar-slider li:nth-child(1) h4,ul.abt-sidebar-slider li:nth-child(4) h4{
font-size:150%
}
ul.abt-sidebar-slider .label_text{
position:absolute;
bottom:10px;
left:10px;
z-index:2;
color:white;
font-size:90%}
ul.abt-sidebar-slider li:nth-child(2) .autname,ul.abt-sidebar-slider 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
}
</style>

HTML:

<div id="featuredpostside" style="width:300px"></div>

JQuery:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
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="abt-sidebar-slider"></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)
};
</script>
<script type='text/javascript'>
FeaturedPostSide({
blogURL:"http://www.netzspot.blogspot.com",
MaxPost:4,
idcontaint:"#featuredpostside",
ImageSize:300,
interval:6000,
autoplay:true,
tagName:false
});
</script>

kustomisasi:

1.) Mengedit HTML Anda & CSS Per Kebutuhan Anda. Juga Ubah URL Blog Anda. Sisanya JavaScript Apakah Ok Untuk Umum Kami. Jika Anda Apakah Pro, Kemudian Anda Bisa Lakukan Setiap Thing.

 Kata-kata terakhir:

Itu saja yang kami punya. Jika Anda memiliki masalah dengan kode ini pada template blogger Anda maka jangan ragu untuk menghubungi kami dengan penjelasan lengkap tentang masalah Anda. Kami akan menjawab Anda waktu memungkinkan untuk kita. Jangan lupa untuk berbagi dengan teman-teman Anda sehingga mereka juga dapat mengambil manfaat dari itu dan meninggalkan umpan balik berharga Anda di formulir komentar di bawah ini. Senang blogging, jumpa di artikel berikutnya ...