Membuat Feature Slider Random Keren di blog tanpa edit HTML

adscblog

Slider Random merupakan salah satu Feature yang dimana dengan Slider tersebut menampilkan Artikel artikel tertentu yang sangat penting atau juga sangat menarik,denga Feature Slider Random ini pun tampilan template anda akan menjadi keren sekali sehingga tidak heran jika banyak Blogger yang menggunakan Feature Slider tersebut

Pada Pembahasan sebelum nya saya juga Pernah Membahas tentang Feature Slider Post seperti ini juga,namun pada artikel sebelum nya saya membahas pemasangan Feature Slider Post Random ini dengan Meng edit Html yang berada di template

Baca Juga : Feature Slider Random keren untuk blog

Memang Benar tampilan Feature Slider Random Post kali ini juga tampilan nya masih sama seperti artikel sebelum nya,namun dengan Slider Random Post yang sekarang ini anda tidak perlu cape cape untuk meng edit html template anda sehingga tidak terjadi banyak kesalahan

Cara Memasang Slider Random Post di blog

Kali ini anda dapat memasang Feature Slider Random Post ini hanya perlu menerapkan kode di bawah di bagian Widget template anda,dengan begitu secara Praktis template anda akan mempunyai Feature Slider Random Post yang keren

Dan untuk pemasangan nya pun sangat lah mudah sekali seperti anda memasangan Javascript pada Widget umum nya,namun jika anda masih bingung bisa anda ikuti langkah-langkah pemasangan Slider Random Post di bawah ini

• Seperti biasa masuk ke akun blogger sobat
• Setelah itu silahkan anda masuk ke Layout/Tata Letak
• Kemudian pilih Add a Gadget
• Lalu kemudian pilih lagi Javascript/Html dan masukan kode berikut di kolom yang sudah tersedia

<style type="text/css">

#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:250px}

#slides li{width:49.9%;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){display:block}

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

#slides li:nth-child(2){left:50.1%;width:24.8%;height:49.8%}

#slides li:nth-child(3){left:75.2%;width:24.8%;height:49.8%}

#slides li:nth-child(4){left:50.1%;top:50.2%;height:49.9%}

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

#slides img{display:block;width:100%;height:100%;border:0;padding:4px;background-color:#0097BD;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}

#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOCXuMNEObsRDxtqmt9n9K0hvXTH7oH_gAusPrtWMa1BSa9Y2KhJVgpivHr6acE98hErTaSNX0sDDrTtNg1ibXzrYzWw64XRhwV7VKHWhd-bTTgcmcvNC1HwTjLIrWYIRd-sO2MdGRRTZd/s1600/fadebg.png);background-position:50% 50%;background-repeat:repeat-x;border:4px solid #00BD79;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}

#slides h4{position:absolute;bottom:30px;margin:0;font-size:11px;font-family:Arial;left:0;padding:0 10px;color:white;z-index:3;line-height:20px;font-weight:normal}

#slides li:nth-child(2) h4,#slides li:nth-child(3) h4{font-size:10px;line-height:15px}

#slides .label_text{font-size:8px;color:white;bottom:10px;z-index:3;left:10px;font-family:Verdana,Geneva,sans-serif;position:absolute}

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

#slides .overlayx,#slides 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}

#slides li:hover .overlayx{-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1}

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

  #slides ul{height:600px}

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

  #slides li:nth-child(2){top:50.2%;height:24.8%;left:0;width:49.8%}

  #slides li:nth-child(3){left:50.2%;top:50.2%;width:49.8%;height:24.8%}

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

}

</style>

<div id="featuredpost"></div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript" src="http://yourjavascript.com/40107930212/aab-slider-pribadie.js"></script>

<script type='text/javascript'>

//<![CDATA[

$(document).ready(function () {

FeaturedPost({

blogURL:"http://infotrens.com",

MaxPost:8,

idcontaint:"#featuredpost",

ImageSize:300,

interval:5000,

autoplay:true,

tagName:false

});

});

//]]>

</script>

• Kemudian Save

 Setelah anda mengklik Save anda dapat melihat slider Random Post di blog anda
- Silahkan anda ganti URL yang berwarna merah dengan alamat Blog anda
- Sedang kan untuk yang berwarna Biru itu adalah maksimum artikel yang akan di tampilkan di slider tersebut
- Jika anda ingin menghentikan perputaran Slider nya,anda hanay perlu ganti true menjadi false pada kode autoplay nya

Apakah kode Slider Random Post ini bisa di pasang dengan edit Html template

Jawab nya bisa,karena saya juga sudahmencoba nya Slider yang ini di tempatkan pada template,maksud nya semua kode tersebut tidak di pasangan bersamaan di Widget,namun sebagian nya saya pasang di bagian edit html di template

Namun sekarang saya tidak menjelaskan bagaimana cara pemasangan nya,jika anda penasaran untuk pemasangan nya anda bisa kunjungi dengan link yang berada di bagian atas artikel ini.mah itulah cara pembuatan Slider Random Post di blog,semoga artikel ini bisa bermanfaat dan bisa membantu sobat blogger semua,selamat mencoba.

adscblog

Recommendation Apps

ads1

Previous

Posting Lebih Baru

Next

Posting Lama

Posted by Dede Ubed, Published at 28 Mei and have 1 komentar