Fully Automated Slider for Sidebar of Blogger ~ Blogstorial

Jadi hari ini saya posting sebuah widget yang saya pribadi suka terlalu banyak. Anda dapat menambahkan slider ini ke Sidebar Anda. Anda hanya perlu melakukan 1 kali kustomisasi seperti widget sebelumnya. Hal ini sepenuhnya otomatis Anda hanya perlu memasukkan URL blog Anda dan slider akan terus mengupdate tulisan.

Widget ini agak berbeda. Kami biasanya menggunakan Sidebar untuk menambahkan widget seperti Popular Posts, Label, Seperti kotak dll tapi kali ini kita akan menambahkan slider untuk sidebar. Widget ini berisi sejumlah efek termasuk efek Hover, efek transisi dll Anda dapat mengubah jumlah slide yang akan ditampilkan. Anda dapat mengubah tulisan yang ditampilkan untuk label yaitu spesifik jika Anda ingin menunjukkan hanya dari label tertentu Anda dapat dengan mengubah pengaturan.

Menambahkan HTML / CSS / JS

Pergi ke Blog Judul → Tata Letak → Tambah Widget → HTML / JavaScript. Tambahkan kode di bawah ini diberikan dan Simpan.


<style scoped="" 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 Verdana,Geneva,sans-serif}

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:500px}

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/AVvXsEhXZdYXKXnaeLfik6uSa5au9tUri3m_wQIRhpF3UhIGAwYKie8xTifKQdv87lzhZkDKQK65IUNWVnn590lOz8dAe8iNmYodkSavOOIskUKEwzM2GaqKqLNFYdsTXMogs0hLB2xqrcvdwKY/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 
#2E8DCE;-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-family:Georgia,Times,"Times New 
Roman";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>

<div id="featuredpostside"></div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

<script 
src="https://dl.dropboxusercontent.com/u/76401970/All%20Blogger%20Tricks/abt-sidebar-slider.js"
 type="text/javascript"></script>

<script type='text/javascript'>

//<![CDATA[

FeaturedPostSide({

blogURL:"http://septiantb.blogspot.com/",

MaxPost:8,

idcontaint:"#featuredpostside",

ImageSize:300,

interval:5000,

autoplay:true,

tagName:false

});

//]]>

</script>

Sekarang simpan template sehingga perubahan dapat terjadi.

Pengaturan

Ini adalah 1 pengaturan waktu Anda mungkin berlaku.

blogURL = Tambah URL blog Anda di sini
MaxPost = Total no. posting di slider
Interval = Waktu yang dibutuhkan untuk mengubah posisi slide dalam milidetik
autoplay = Menulis benar atau salah dalam Anda ingin / tidak ingin slide untuk mengubah secara otomatis.
tagname = Jika Anda ingin menampilkan artikel berdasarkan tag / label, seperti widget tag, maka akan ditulis sebagai tagname: "widget"

Setelah Anda selesai dengan pengaturan mengedit kode dan Simpan template itu lagi. Thats it, sidebar slider keren sekarang dapat dilihat di blog blogger Anda.

About Admin MC3

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.

Blogstorial