Cara Membuat Slider Recent Post DiBlog

TUTORIAL MEMBUAT SLIDER RECENT POST BERGERAK PADA BLOGGER RESPONSIVE

Cara Membuat Slider Recent Post DiBlog


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

Cara Membuat Slider Recent Post DiBlog
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.




Follow Blog Orang IT dan jangan lupa Like FansPage Helmykkediri dibawah serta jangan lupa untuk klik iklan yang ada pada Blog ini.untuk biaya perawatan admin

7 Responses to "Cara Membuat Slider Recent Post DiBlog"

  1. keterangan buat ini gimana gan https://cdn.rawgit.com/Helmy21/Helmykkediri/master/Helmykkediri.blogspot-slider1.js

    BalasHapus
  2. gak work gan,, artikel tidak berkualitas. di bold tapi gak di kasik keterangannya. ane udh coba, simpan dimanapun gak work

    BalasHapus
    Balasan
    1. ente begok atau gimana tinggal nempel di HTML aja ga bisa please deh cerdas dikit masa gara2 kebegoan lu ngatain artikel gw ga berkualitas :)

      Hapus
    2. sabar om sabar om.....

      Hapus
    3. sabar gan kalau pengen banyak pengunjung gini mah harus sabar.. liat bahasa gini males mampir saya .. hehe ..

      Hapus
    4. yg gw tebalin itu js klo ga work cek mati atau kagak , ya dah pengunjung saya dah banyak rata2 sales jadi tiap hari harus ngapusin komentar promosi :-t

      Hapus

Terimakasih telah membaca artikel di Blog Orang IT aturan berkomentar yang baik dan benar :

1. Blog ini tidak memberikan backlink dikotak komentar karena sifatnya nofollow

2. Jika masih menyertakan link aktif tidak akan berefek apapun baik bagi blog anda maupun blog saya

3. Jika artikel postingan dirasa sudah expired atau outdate silahkan berkomentar minta diperbaharui atau hubungi admin melalui menu about

4. Berkomentar dengan relevan , usahakan komentar bermanfaat bagi pengunjung yang lain

5. Admin mengabaikan komentar anonimous

Terimakasih sekian jangan lupa Follow Blog Orang IT dan Like Fanspage Helmykkediri