Cara Membuat Slider Full Otomatis di Sidebar Blog

Membuat Slider Full Otomatis di Sidebar Blog
Created : Admin TG | Label : Trik Blog | sumber : TG

Untuk kali ini saya akan memposting bagaimana cara membuat Slider otomatis di blog kita. Anda dapat menambahkan slider ini untuk sidebar anda. Anda hanya perlu menambahkan kustomisasi 1 kali tidak seperti widget pada umumnya. Hal ini sepenuhnya otomatis, anda hanya perlu memasukan URL blog anda dan slider akan terus mengupdate tulisan anda.

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 ke sidebar. Widget ini mengandung sejumlah efek termasuk efek Hover, efek transisi dll Anda dapat mengubah jumlah slide yang akan ditampilkan. Anda dapat mengubah posting yang ditampilkan untuk label yaitu spesifik jika Anda ingin menampilkan hanya dari label tertentu Anda dapat dengan mengubah pengaturan.

DEMO TG

Menambahkan HTML / CSS / JS

Sekarang anda masuk ke blog anda masing-masing
Klik [ Tata Letak ] >> [ Tambah Gadget ] >> Pilih [ HTML/JavaScript ]
Copy script di bawah ini dan paste di HTML/Javascript tadi >> Simpan

<style scoped="" type="text/css">
/*
Made by AllBloggerTricks.com with lot of hardwork please keep the comment intact
*/
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/AVvXsEg9rkm3Lq8rMPPOEF1w_pg8QmwrgZuRIRtg5EVi-UEUB17XMeF4sUx7patDGQyLsrW42spF893HlyKwBjXTlO_h5ixIioSmmXNdidOpbECMW7h78hjG-z8rwMHCzU8NRVQDZXtOmdxBzY8/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="http://files.allbloggertricks.com/Scripts/abt-sidebar-slider.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
FeaturedPostSide({
blogURL:"http://triksgratis.blogspot.com",
MaxPost:8,
idcontaint:"#featuredpostside",
ImageSize:300,
interval:5000,
autoplay:true,
tagName:false
});
//]]>
</script>

Seting

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

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

Posted by Unknown, Published at 08:53 and have 0 komentar