Cara Membuat Slider Recent Post DiBlog

TUTORIAL MEMBUAT SLIDER RECENT POST BERGERAK PADA BLOGGER RESPONSIVE

Selamat Datang di Blog Orang IT . Jarang-jarang saya update tutorial untuk mempercantik blog , pada postingan kali ini saya akan share tutorial bagaimana cara menambahkan widget slider recent post keren paling responsiv untuk blogspot . Karena bentuknya widget kita tidak perlu melakukan otak-atik pada template HTML dan pastinya sudah otomatis responsiv .

Karena hari ini saya membuat blog baru lagi dan menambahkan widget slider responsive keren recent post bergerak yang akan menampilkan data postingan terakhir , bisa anda setting apakah anda ingin menampilkan semua label atau label tertentu saja .

Widget recent post slider adalah tampilan element yang menampilkan data postingan terakhir dan bergerak sesuai namanya . sekian

Anda juga bisa menampilkan widget recent post responsiv ini hanya pada halaman awal atau halaman postingan menggunakan tag conditional . Widget slider recent post ini sudah responsiv jadi otomatis menyesuaikan dengan template yang anda gunakan.

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

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

untuk peletakanya sesuaikan dengan widget anda mau 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;}}

    @media 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>

Keterangan :

blogURL:"http://ruang5.blogspot.co.id/", ganti dengan URL Blog anda

tagName:false , untuk menampilkan recent post dari semua label , untuk menampilkan label tertentu ganti tagName:"labelkamu"

3. Simpan dan lihat hasilnya

DEMO

Selesai , anda bisa menampilkan widget hanya pada halaman posting atau halaman awal homepage menggunakan tag conditional ( pengertianya merupakan sebuah tag untuk mengatur beberapa element tertentu agar tampil dibeberapa halaman yang dikehendaki saja dan menyembunyikan beberapa element agar tidak tampil pada halaman tertentu ) , nanti saya akan bahas untuk lebih lengkapnya atau jika sudah tidak sabar bisa belajar sendiri mengenai tag conditional

Demikian postingan saya mengenai tutorial cara membuat widget recent post bergerak keren untuk blogger , semoga bermanfaat jika ada yang ditanyakan atau menambah modifikasi silahkan saja sekian dan terimakasih.

Baca : Cara menautkan Google Analytc kedalam Google webmaster