$type=carousel$cols=3

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

COMMENTS

BLOGGER: 11
Loading...
Nama

Android,3,Blog,350,Info,214,Islami,44,Software,74,Tutorial,120,Web,18,
ltr
item
BLOG ORANG IT 2017: Cara Membuat Slider Recent Post DiBlog
Cara Membuat Slider Recent Post DiBlog
https://1.bp.blogspot.com/-PVgnNWpf7io/WA8oXXxWXzI/AAAAAAAAAh8/5eAkzJNrbIsNtO8950HPa2IoYzLKnO38ACLcB/s1600/Capture.PNG
https://1.bp.blogspot.com/-PVgnNWpf7io/WA8oXXxWXzI/AAAAAAAAAh8/5eAkzJNrbIsNtO8950HPa2IoYzLKnO38ACLcB/s72-c/Capture.PNG
BLOG ORANG IT 2017
http://www.helmykkediri.com/2016/10/cara-membuat-slider-recent-post-diblog.html
http://www.helmykkediri.com/
http://www.helmykkediri.com/
http://www.helmykkediri.com/2016/10/cara-membuat-slider-recent-post-diblog.html
true
7204675838149040268
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy