Cara Membuat Slideshow Responsive Di Blog

TUTORIAL MEMBUAT SLIDER RECENT POST Bergerak Pada BLOGGER RESPONSIVE

Cara Membuat Slider Recent Post DiBlog

Selamat Cak bertengger di
Blog Orang IT
. Selit belit-jarang saya update tutorial untuk mempercantik blog , pada postingan kali ini saya akan share les bagaimana pendirian menambahkan widget slider recent post keren paling responsiv cak bagi blogspot . Karena bentuknya widget kita enggak perlu melakukan otak-atik pada template HTML dan pastinya sudah faali responsiv .

Karena hari ini saya membuat blog mentah lagi dan menambahkan widget slider responsive keren recent post bergerak yang akan menyodorkan data postingan terakhir , dapat anda setting apakah engkau mau mengemukakan semua label maupun keunggulan tertentu tetapi .

Widget recent post slider
merupakan tampilan element nan menampilkan data postingan bontot dan berputar sesuai namanya . sekian

Anda lagi bisa menampilkan widget recent post responsiv ini hanya sreg pelataran semula atau jerambah postingan menggunakan tag conditional . Widget slider recent post ini mutakadim responsiv jadi otomatis menyepadankan dengan template yang anda gunakan.

Pada tutorial mewujudkan slider recent post dengan tampilan responsiv dan keren ini saya mempraktekkanya sreg template Evomagz nya Mamak Sugeng , langsung saja simak caranya membuat widget slider berputar recent post pada blogspot dengan mudah :

1.  Silahkan buka
blogger – tataletak – addwidget – pilih HTML/Javascript

bikin peletakanya sesuaikan dengan widget anda kepingin ditaruh dimana

2. Langsung saja copas script berikut ini

<style>

#featuredpost {margin:15px auto;}

#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}

#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}

#slides ul{height:320px}

#slides li{width:50%;height:100%;position:absolute;display:none}

#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5){display:block}

#slides li:nth-child(1){left:0;top:0}

#slides li:nth-child(2){left:50%;width:25%;height:50%}

#slides li:nth-child(3){left:75%;width:25%;height:50%}

#slides li:nth-child(4){left:50%;top:50%;width:25%;height:50%}

#slides li:nth-child(5){left:75%;top:50%;width:25%;height:50%}

#slides li:nth-child(1) h4 {overflow:hidden;font-size:25px;bottom:0;color:#fafafa;width:100%;

padding:10px 10px 10px 90px;text-align:left;text-transform:uppercase;background:rgba(0,0,0,0.3);

height:90px;font-family:&#39;Oswald&#39;;text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;left:0;}

#slides li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px;

padding:0;font-family:&#39;Oswald&#39;;box-shadow:5px 3px 0 rgba(0,0,0,0.2);}

#slides li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px;

background:#ff6553;margin:0;}

#slides li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff;

padding:5px 21px;text-transform:uppercase;margin:0;}

#slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname{display:none;}

#slides a{display:block;width:100%;height:100%;overflow:hidden}

#slides img{display:block;width:100%;height:auto;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;}

#slides li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;}

#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://2.bp.blogspot.com/-0haO2Mfkjjk/VDgZww2tfEI/AAAAAAAAHAk/zhu3INYSkHA/s1600/fade.png);background-position:50% 40%;background-repeat:repeat-x;}

#slides h4{position:absolute;bottom:40px;margin:0;font-size:13px;font-family:&#39;Oswald&#39;;

left:10px;padding:5px 10px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal;

background:rgba(41,41,41,0.7);text-align:left;text-transform:uppercase;margin-right:10px;}

#slides .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px;

position:absolute;background:rgba(255,101,83,0.8);padding:3px 6px;font-family:&#39;Oswald&#39;;

text-transform:uppercase;}

#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname,#slides li:nth-child(4) .autname,#slides li:nth-child(5) .autname{display:none;}

#slides .overlayx,#slides li{transition:all .4s ease-in-out}

#slides li:nth-child(1) .overlayx{display:none;}

#slides li:hover .overlayx{opacity:0.1}

@media only screen and (max-width:800px){

#slides li:nth-child(1) h4 {font-size:18px;line-height:24px;}}

@wahana only screen and (max-width:600px){

#slides ul{height:600px}

#slides li:nth-child(1){width:100%;height:50%}

#slides li:nth-child(2){top:50%;height:25%;left:0;width:50%}

#slides li:nth-child(3){left:50%;top:50%;width:50%;height:25%}

#slides li:nth-child(4){left:0;top:75%;height:25%;width:100%}

#slides li:nth-child(5){display:none;}}

@media only screen and (max-width:480px){

#slides li:nth-child(1) h4 {font-size:13px;line-height:16px;}}

</style>

<script type=”text/javascript” src=”https://cdn.rawgit.com/Helmy21/Helmykkediri/master/Helmykkediri.blogspot-slider1.js“></script>

<script type=’text/javascript’>

//<![CDATA[

$(document).ready(function () {

FeaturedPost({

blogURL:”http://ruang5.blogspot.co.id/”,

MaxPost:8,

idcontaint:”#featuredpost”,

ImageSize:500,

interval:10000,

autoplay:true,

    tagName:false

});

});

//]]>

</script>

<div id=”featuredpost”></div>

Takrif :

blogURL:”http://ruang5.blogspot.co.id/”, saling dengan URL Blog kamu

tagName:false
, buat menampilkan recent post berbunga semua segel , untuk menampilkan cap tertentu silih
tagName:”labelkamu”

3. Simpan dan tatap kesannya

Cara Membuat Slider Recent Post DiBlog
DEMO

Selesai , anda dapat menampilkan widget hanya pada pelataran posting atau pekarangan awal homepage menggunakan
tag conditional
( pengertianya yakni sebuah tag kerjakan mengatur beberapa element tertentu mudahmudahan tampil dibeberapa pekarangan yang dikehendaki saja dan menyembunyikan beberapa element agar tidak tampil lega jerambah tertentu ) , nanti saya akan telaah cak bagi lebih lengkapnya
ataupun seandainya
sudah bukan panjang hati bisa belajar koteng mengenai tag conditional

Demikian postingan saya mengenai kursus cara membuat widget recent post bergerak keren kerjakan blogger , semoga bermanfaat jika cak semau yang ditanyakan ataupun menambah modifikasi silahkan sekadar sekian dan terimakasih.

Source: https://www.helmykediri.com/2016/10/cara-membuat-slider-recent-post-diblog.html